Hilo de 向阳乔木 (@vista8)

Un complemento de la comunidad Figma llamado Figroot. El argumento de venta es sencillo: convertir los diseños de Figma en código CSS React + Tailwind de forma gratuita, afirmando obtener resultados "perfectos en píxeles". En realidad, existen bastantes herramientas de este tipo, las diferencias son: 1. Es realmente gratis. Muchas herramientas de "Figma to Code" ofrecen una prueba gratuita y luego requieren un pago para desbloquear todas las funciones. Figroot te lo dice directamente: es completamente gratis. 2. La calidad del código es aceptable. En lugar de generar un desorden de divs anidados, genera: - Estructura HTML semántica - Escribe estilos usando Tailwind CSS - Reconoce automáticamente las fuentes y genera las configuraciones correspondientes 3. Soporte receptivo (experimental) Hay un modo de "Pantalla responsiva", aunque todavía está en fase experimental. Limitaciones: 1. Solo es compatible con el ecosistema React. Si usas Vue o HTML puro, esta herramienta no te será útil. Aunque afirma ser compatible con HTML/CSS, su diseño central todavía se basa en React + Next.js. 2. No se pueden implementar interacciones complejas. Puede manejar diseños estáticos, pero si su diseño implica animaciones complejas y gestión de estados, aún tendrá que escribir el código a mano. Las herramientas sólo pueden ayudarte a construir el marco; aún tienes que completar los detalles tú mismo. 3. Costo de aprendizaje: si no estás familiarizado con React y Tailwind, no sabrás cómo usar el código. Proporciona instrucciones de instalación detalladas (un proceso completo para Node.js, TypeScript y Next.js), pero estos pasos en sí mismos pueden ser un obstáculo para los principiantes. Considero que este complemento es adecuado para desarrolladores y diseñadores front-end. antes: 1. El diseñador entrega los archivos de Figma. 2. Los desarrolladores abren archivos, miden manualmente las dimensiones, extraen colores y escriben CSS. 3. Comunicación y ajustes de ida y vuelta Con Figroot: 1. El diseñador hace clic una vez para generar el código. 2. Una vez que los desarrolladores reciben el código, pueden realizar pequeños ajustes y será utilizable. 3. Ahorra mucho trabajo repetitivo Haga que la colaboración en diseño y desarrollo sea más eficiente. Si usas React + Tailwind, puedes probarlo. https://t.co/8J524dzdKa