Te acaban de pasar un proyecto de figma y ¿no tienes idea de cómo pasarlo a código? Tranqui, en menos de 5mins te explicamos ¡Usa estos tips para lograrlo! Conoce Figma Dev Mode aquí 🚀
En mundo del desarrollo y ecosistema dev, uno de los pasos más comunes en un equipo es transformar el proyecto de diseño en Figma del diseñador en código funcional.
Si eres frontend, esto no es tan problemático, pero si eres desarrollador Fullstack o incluso Backend quizás necesitas este artículo 😉
Soy Juan Renza, Designer Lead de MeltStudio.co y en esta ocasión exploraremos las soluciones que los desarrolladores pueden usar al recibir un proyecto de Figma, cómo leerlo y usarlo de la manera más efectiva ¡Usa estos tips para lograrlo!
¿Qué hacer antes de pasar un proyecto figma a código?
Antes de iniciar, es importante que revises las siguientes recomendaciones, créeme todos los diseñadores del mundo te lo agradeceremos y será mucho más eficiente para ti como dev hacer uso del proyecto en figma:
Primero: Un archivo organizado siempre estará dentro de un proyecto y a su vez dentro de un equipo de trabajo, tenerlo siempre a mano te hará rendir el tiempo.
Segundo: Aprovecha las bibliotecas de componentes para mantener la coherencia en el diseño. Piedele a tu diseñador dejarte un kit definido desde el inicio del proyecto para tener componentes reutilizables.
Tercero: Figma es genial para la colaboración. Usa la función de comentarios para leer retroalimentación de tu equipo o hacer preguntas sobre partes que no entientas. Esto agiliza la comunicación y garantiza un diseño sólido.
Also, no te limites al diseño estático. Si tu diseñador te entregó un prototipo, úsalo para entender la experiencia del usuario y llevarla a tu aplicación.
Recuerda mantener la organización, utilizar componentes, colaborar de manera efectiva y aprovechar el poder del prototipado.
¿Cómo transformar un proyecto figma a código funcional?
¿Recuerdas que este año salió el nuevo Dev mode de Figma? 🤩 Te dejamos todo lo nuevo de este año en Figma resumido en este link.
De hecho el cambio no fue extremo, pero este sí sirve mucho para complementar y agilizar los pasos que ya conocemos:
Inspección del Diseño en Figma: Abre el diseño en Figma y examina cada pantalla y componente cuidadosamente. Identifica los componentes y elementos que se deben convertir en código.
Extracción de Componentes: Dentro de Figma, selecciona un componente y abre la pestaña de "Inspeccionar" para acceder al código HTML y CSS. Copia el código correspondiente al componente.
Manejo de Componentes Anidados: Presta atención a componentes anidados dentro de otros componentes. Asegúrate de copiar y revisar las reglas CSS de los elementos padres e hijos en la jerarquía de componentes.
Estilo y Responsividad: Ajusta el código CSS según las reglas de estilo del diseño original. Asegúrate de que el diseño sea completamente responsivo y compatible con diferentes resoluciones.
Interacciones y Comportamientos: Implementa interacciones y animaciones utilizando JavaScript y CSS, siguiendo las especificaciones de Figma.
¿Cómo verificar la transformación de un proyecto figma a código funcional?
Esto sí no debe ser nuevo, pero no está de más dejarles el checklist:
Pruebas y Validación:
Realiza pruebas en diversos navegadores y dispositivos para asegurarte de que el proyecto funcione correctamente.
Documentación y Control de Versiones:
Documenta el código de manera clara y concisa. Además, utiliza un sistema de control de versiones como Git para rastrear los cambios en el códigos.
Comunicación con el Equipo de Diseño:
Mantén una comunicación constante con el equipo de diseño para aclarar dudas y recibir retroalimentación.
"El código es donde nuestros diseños cobran vida; cada línea y cada píxel cuentan una historia. ¡Convirtámoslo en una experiencia inolvidable!"
- Diseñadores unidos UX/UI.
Hemos creado un video con un resumen de ¡los mejores tips de Figma para Developers! Nos gustaría que lo puedas compartir rápidamente con otros #devs! Te dejamos el link abajo 👇🏻👇🏻👇🏻
¡Gracias por leer!
📍 Conéctate con nosotros en instagram👇