Cómo pasar de Figma a código

Antes de que existieran herramientas como Sketch, Adobe XD o Figma (nuestro favorito), la persona que había diseñado la web enviaba a la persona encargada del desarrollo, seguramente por correo electrónico, un montón de archivos adjuntos con imágenes estáticas con el diseño, los assets (imágenes y archivos varios), los textos en Word… y cada vez que había un cambio en el diseño, había que volver a enviarlo todo.

Buff… qué desastre, ¿no?

Developer Handoff de Figma al rescate

Lo que se conoce como developer handoff es el paso de un diseño a desarrollo, y es lo que vamos a ver en profundidad en este artículo.

Ahora con Figma las personas encargadas del desarrollo de la web lo tienen mucho más fácil para acceder a la última versión de la web, en tiempo real, sin tener que andar sincronizando manualmente y pueden extraer toda la información sobre tipografías, colores, medidas, proporciones, etc.

Los archivos de Figma se pueden abrir en el navegador y están en la nube, así que todo el mundo tiene acceso a ellos muy fácilmente y, además, de manera gratuita.

Vamos a ver todas las ventajas y las opciones que hay, una vez que tienes el diseño en Figma y quieres compartirlo con la persona que lo va a implementar o desarrollar.

Para compartir el diseño tienes dos opciones:

• Añadir a esa persona como miembro del equipo y que pueda acceder a todos los proyectos. Si estás usando el plan gratuito, solo podrás añadir a una persona por equipo (máximo dos en total: tú y la otra persona).
• Invitar a esa persona a ver un archivo concreto. O bien copias el enlace y se lo envías, o bien añades su correo electrónico. Con el plan gratuito puedes enviar el enlace o añadir el correo de tantas personas como quieras.

Yo trabajo sola, no le paso el diseño a nadie, lo implemento yo misma.

Si trabajas en solitario, igualmente te va a venir de lujo el developer handoff de Figma, ya verás.

Ya en el archivo de Figma, ¿qué puede hacer el/la developer?

Con permisos para «solo ver», puedes navegar por las páginas del archivo, ver la presentación del prototipo y exportar todos los assets, entre otras cosas. Vamos a verlo.

Componentes

Los componentes, como vimos en el artículo sobre componentes, son diseños que se reutilizan a lo largo de un proyecto. Hay un componente principal y hay instancias de ese componente, que son copias que tienen enlazadas las propiedades del componente principal.

Si seleccionamos una instancia, podemos saber cuál es su componente principal. Esto nos permite navegar hasta la fuente de la verdad y comprender mejor todo el sistema de diseño. Además, podemos ver si la instancia tiene alguna propiedad anulada (o sobreescrita) respecto a su componente principal.

Estilos

En Figma se pueden crear estilos, que contienen información sobre la jerarquía tipográfica, colores, rellenos, rejillas y efectos (como sombras o desenfoques) que se usan en el documento. Esto facilita la tarea de creación de la hoja de estilos CSS a la persona que va a maquetar la web.

Inspeccionar código

En la pestaña Inspect puedes ver información sobre el elemento que estés seleccionando: código CSS, iOS (Swift), y Android (XML). Se muestran las propiedades visuales y el espaciado.

Si hay alguna descripción en los componentes, también aparece en esta pestaña.

Distancias entre elementos

Puedes saber las distancias de unos elementos a otros seleccionando el elemento de referencia, pulsando la tecla ALT y con el ratón vas seleccionando los elementos que quieras conocer su distancia. Figma te mostrará la distancia en píxeles y tendrás que pasarla a em, rem, o las unidades que estés usando.

Exportar assets

Los assets se pueden exportar todos a la vez o de manera individual. Figma tiene ajustes de exportación en los que puedes seleccionar, entre otras opciones, el formato de archivo: PNG, JPG, SVG o PDF.

Animaciones y ruta de clics

Desde la pestaña Prototype podrás ver todas las animaciones y transiciones entre estados o páginas que haya en el diseño (si las hay), así como la navegación entre las páginas del sitio web (si tiene más de una).

Puedes ver la ruta de clics de los/as usuarios: unas flechas azules entre un frame y otro, que Figma llama noodles (fideos) e indica cómo se conectan unos frames con otros.

Comunicación

En los archivos de Figma se pueden dejar comentarios para dar feedback sobre los diseños. Pueden ser muy útiles, aunque a veces se quedan cortos para explicar un diseño o aclarar algunas dudas.

Como en todas las relaciones interpersonales, lo más importante es cuidar la comunicación. El paso de Figma a código será mejor cuanto mejor sea la comunicación entre la persona —o el equipo— de diseño y la persona —o el equipo— de desarrollo.

Personalmente, además de dar acceso a los archivos de Figma, me gusta presentar el diseño mediante una videollamada, en la que explico no solo las funcionalidades sino también los objetivos del diseño, qué se pretende transmitir al/la usuario/a y cómo se va a medir el éxito del sitio web. Así el/la developer se involucra también en el proceso de diseño y sin duda conseguimos un producto mejor.

En una videollamada (o vinollamada, si la reunión es con gente de confianza y a partir de las siete) se explican mejor las cosas que por escrito y, sobre todo, podemos tener feedback inmediato con las dudas y nos aseguramos de que se ha comprendido todo el planteamiento. Además, a menudo surgen propuestas de mejora y se realizan cambios incorporando el punto de vista del desarrollo, que es fundamental en la fase de diseño.

Zeplin

Zeplin tiene un plugin en Figma, así que también puedes utilizar esta herramienta para exportar los diseños. Puedes exportar de Figma a Zeplin frames, componentes, estilos de textos y colores, etc. y desde Zeplin puedes generar los assets y los snippets de código que necesites.

Ah, ¿pero no hay un botón para pasar de Figma a código?

Hay algunos plugins de Figma como Figma to HTML o Anima, que convierten los diseños a código, pero hoy en día no los puedo recomendar porque no creo que se puedan usar profesionalmente. El código que devuelven no está limpio y creo que los resultados no son muy buenos.

Por lo tanto, si vamos a desarrollar un proyecto web con un mínimo de calidad, escalable y respetando los estándares de código, no podemos usar estas herramientas.

Por otro lado, si estas herramientas algún día consiguen devolver código HTML y CSS limpio, solo vamos a obtener la maquetación del sitio web, pero nunca podremos obtener páginas dinámicas, con conexión a base de datos, por ejemplo.

Para este tipo de desarrollos a medida necesitamos que sea una persona quien los desarrolle porque hay que tomar muchas decisiones «que no se ven». Visualmente quizá podamos obtener la «traducción» a código, pero si queremos gestionar contenidos dinámicos, necesitamos programar cómo se van a gestionar los contenidos en el backend del sitio web.

Una vez que hemos desarrollado el sitio web, tenemos que comparar el resultado con el diseño. A esto lo llamo yo jugar a las siete diferencias. Para esto el truco es comparar el diseño y el desarrollo en dos ventanas con el mismo ancho, para asegurarnos de que coincidan las medidas y los tamaños de los elementos. También ayudará tener el ojo bien entrenado. En Figma.com he visto que lo llaman «el tercer ojo del/la developer», y ponen este GIF tan chulo para ilustrarlo:

No te quedes aquí

Si quieres saber más sobre developer handoff en Figma, o si eres un/a diseñador/a y quieres saber cómo preparar el diseño para developer handoff, me alegro, porque hemos preparado el curso Developer handoff: pasar de diseño a desarrollo en Figma.