He pasado varias horas creando un diseño figma de una página de destino. Cada color está en su punto, cada píxel está en su lugar con un flujo de usuario fluido, pero ahora viene la parte desalentadora de codificar esta página de destino.

Construir un diseño de Figma es una tarea enorme. Ahí es donde conocí Dualite, que traduce los diseños de Figma en código real utilizando IA, lo que ayuda a desarrolladores como yo a minimizar el esfuerzo de codificar. Veamos cómo utilicé Dualite para convertir mi página de destino en código real
 

¿Qué es Dualita?

Dualite es un innovador complemento Figma impulsado por IA diseñado para cerrar la brecha entre el diseño y el desarrollo. Se centra en convertir diseños de Figma en código reutilizable de alta calidad, con soporte de tecnologías populares como Reactjs, TailwindCSS y más.

Dualite te permite convertir cualquier diseño o animación de Figma en código eficiente con un solo clic que puedes personalizar según tu proyecto, viene con características interesantes, déjame darte un resumen sobre ellas:

• Modos: Dualite ofrece dos modos, modo componente y modo página, ideales para que desarrolladores y diseñadores conviertan su diseño en código generado. Estos modos garantizan que el diseño, la interactividad, las animaciones y más se traduzcan con precisión del diseño al código.
  • Modo componente: se centra en elementos de diseño individuales, lo que permite la creación de componentes reutilizables.
  • Modo de página: convierte páginas enteras, manteniendo el diseño y la estructura generales.
  • Obtén más información sobre los modos en este blog
• Funciones avanzadas:
  • Dualite ofrece configuraciones avanzadas donde los usuarios pueden proporcionar más información técnica sobre su diseño. Esto garantiza que el código generado responda y sea preciso.
  • Estas configuraciones avanzadas brindan más poder a los diseñadores y desarrolladores, permitiéndoles personalizar el resultado para cumplir con los requisitos específicos del proyecto. Esta característica es particularmente útil para diseños complejos que necesitan un control preciso sobre el código final, como diseños responsivos o animaciones complejas. Para comenzar rápidamente con Dualite, puede seguir sus documentos

Diseño Figma

Comencemos con un diseño figma de una página de destino, ver a continuación:

Entonces, Dualite tiene una función de modo donde puedes alternar entre el modo de página y el modo de componente

Básicamente, el modo Página es para convertir un diseño completo de una sola vez y el Modo Componente es para crear componentes separados que podemos integrar en nuestro proyecto; obtenga más información sobre los componentes en los documentos

Usaremos el Modo Componente para generar código para todos los componentes presentes en el diseño y luego los integraremos en un solo proyecto

Comencemos dividiendo la página de destino en componentes, consulte a continuación:

Configuración inicial del proyecto

Usaré Reactjs y Tailwind en Dualite para generar código, así que primero configuremos el proyecto:

• Aplicación Reactjs: crea una aplicación de reacción usando Vite o cualquier otra herramienta. Vite es una opción popular para crear aplicaciones Javascript
• Configurar Tailwind: siga Tailwind Docs para configurar Tailwind en una aplicación Reactjs sin ningún error innecesario. Asegúrese de agregar también las dependencias, como PostCSS y el prefijo automático, para una configuración fluida de Tailwind.
• Archivos de configuración: crea tailwind.config.js y postcss.config.css en la raíz del proyecto. tailwind.config.js podría estar presente si siguió todos los pasos de los documentos de Tailwind. Si ya está allí, actualícelo en consecuencia
• Usa Javascript: A partir de ahora, Dualite no es compatible con Typecript, así que asegúrate de crear la aplicación Reactjs solo con Javascript

Comience a convertir componentes en Dualite

Configuración inicial:

• Modo: Usaremos el modo componente. Utilice el botón de alternancia de la esquina superior derecha para cambiar entre el modo de página y el modo de componente
• Marcos: Cuando seleccionas un diseño para convertirlo en código, verás múltiples opciones de lenguaje y marcos. Usaré Reactjs y Tailwind para generar código.
• Para comenzar rápidamente a usar Dualite, lee esto

Ahora, comencemos a convertir el diseño en componente:

1. Componente de la barra de anuncios: consulte el código generado aquí
    

2. Componente de la barra de navegación: consulte el código generado aquí
    

3. Componente de filtro de categoría: consulte el código generado aquí
    

4. Componente de tarjeta: consulte el código generado aquí
    

5. Componente de paginación: consulte el código generado aquí
    

6. Componente de pie de página: consulte el código generado aquí
    

Personalizaciones

1. Copiar componentes:
   • Ahora, copie la carpeta Componentes de todo el código generado anteriormente y péguelo en el proyecto en una carpeta de componentes
   • Es posible que hayas notado que todos los nombres de los componentes son solo "Componente", así que nombremos todos los componentes en consecuencia. Ejemplo: el componente de la barra de anuncios se denominará "AnnouncementBar". Mira como lo he hecho aquí
2. Renderizar todos los componentes:
   • Ahora, importe todos los componentes según el diseño dentro del archivo App.jsx
   • Ejecute el proyecto y verá el resultado, verifique el archivo App.jsx aquí
   • Es posible que hayas notado que es necesario reparar algunos componentes. Comencemos con las personalizaciones
3. Arreglando estilos de componentes:
   • Fuentes:
     • Como puedes ver en el diseño, tenemos nuestras propias Fuentes. Agregándolos dentro de las carpetas de activos para poder usar la fuente en el proyecto en cualquier lugar.
     • También es necesario crear @font-face para todas las fuentes que estamos usando en el archivo index.css donde están presentes las directivas Tailwind
   • Componente de la barra de navegación:
     • El diseño es inexacto, por lo que es necesario corregir el estilo
   • Componente de tarjeta:
     • Icono de estrella: Se agregó el ícono de estrella dentro de la carpeta de gráficos
     • Text.js: archivo Text.js actualizado para corregir la etiqueta del botón y otro texto del componente
     • Estilos: estilos actualizados para agregar peso de fuente a elementos de texto específicos y etiquetas de botones
   • Lógica del componente de la tarjeta:
     • Card Component representa solo un componente porque es un solo componente.
     • Para renderizar múltiples componentes de tarjetas, tengo que agregar algunos datos de demostración para mapearlos y renderizar múltiples tarjetas

Nota: Todos los cambios y el código se pueden ver en CodeSandBox aquí

Producción

Tan pronto como hice todas estas personalizaciones y cambios en el proyecto, puedo ver una mejor versión de mi diseño, verificar el código y el resultado aquí

¿Fue útil Dualite?

Entendámoslo bien, todos los componentes que generamos usando Dualite estaban listos para usar, sí, hicimos algunas personalizaciones en el código para que fuera lo más parecido al diseño, a pesar de eso, todos los estilos de los componentes, todos Dualite genera la jerarquía de los componentes con los datos en archivos separados.

En lugar de dedicar demasiado tiempo a crear la interfaz de usuario, puedo usar Dualite para eso.

En comparación con la codificación manual, esto habría llevado bastante tiempo. El resultado de todos los componentes fue realmente bueno, nada puede ser 100% correcto, cada código necesita un toque final por parte del desarrollador y eso es lo que hicimos aquí

Sí, Dualite fue muy útil y rápido a la hora de generar código para mis componentes.

Conclusión

Ahí lo tienes, una forma eficiente de generar código para tus diseños de Figma con muy menos codificación manual. El proceso de codificar los diseños es una montaña rusa, que puede ser menos complicado si usas Dualite y personalizas el código según tus necesidades y el proyecto.