Cómo preparar un Figma para desarrollo

Antes de pasar nuestro diseño en Figma al equipo de desarrollo (developer handoff), podemos dejárselo preparado para que nos digan aquello de:

Jo, da gusto trabajar con diseñadoras/es web que saben maquetar

Vamos a ver qué cosas podemos hacer.

Cómo preparar los archivos

Crea una miniatura personalizada

La miniatura personalizada permite identificar mejor el archivo cuando un proyecto tiene varios archivos. Así, cualquier persona que acceda y vea todos los archivos dentro de un proyecto de Figma, los puede identificar rápidamente sin tener que acceder a ellos, de un vistazo.

Para crear una miniatura personalizada, crea un frame que tenga una previsualización de lo que nos vamos a encontrar en el archivo. Puedes escribir información sobre el archivo.

Si no creas una miniatura, Figma usará como miniatura la primera página del archivo.

Configura los ajustes de exportación de los frames, componentes y assets

Puedes configurar lo que quieres que se exporte y cómo se va a exportar. Selecciona los frames, componentes o assets (imágenes, ilustraciones, etc.), haz clic en Exportar y realiza los ajustes que quieras.

Puedes configurar el formato de exportación (PNG, JPEG, SVG o PDF), añadir un sufijo al nombre del archivo o cambiar el tamaño.

Si seleccionas en el menú principal (el menú hamburguesa arriba a la izquierda) File > Export… puedes ver todos los frames, componentes y assets que tienen ajustes de exportación configurados. El atajo es Control + Shift + E en Windows y Shift + Comando + E en Mac. En la ventana modal que se abre puedes exportar todo y si haces clic en las miniaturas, puedes ver esa selección en el canvas.

Cómo preparar las páginas

Nombra bien las páginas

Poner un nombre descriptivo a las páginas va a ser muy útil para la persona que viene detrás de ti, para que sepa claramente lo que está listo para desarrollar.

En los nombres de las páginas puedes poner emojis que, además de quedar muy chulos, ayudan a identificar las páginas de un vistazo.

Crea una página con las instancias de todos los componentes

Crea una página y pega todas las instancias de todos los componentes, para que se pueda saber todos los componentes que existen en tu archivo.

Haciendo clic en una instancia con el botón derecho, podemos ir al componente principal, para saber qué cambios se han hecho en el componente.

Cómo preparar los estilos y componentes

Pon nombres descriptivos a los estilos. Crea estilos para todos los textos y colores y aplícalos en todos los casos.

Si usas nomenclatura BEM para nombrar las capas, la persona que va a maquetar el diseño dará palmas con las orejas porque le habrás ahorrado un montón de tiempo. En Figma en vez de usar guiones, usamos barras, por ejemplo Menu / Trigger / Active.

Añade descripciones a los componentes. En las descripciones de los componentes puedes poner cómo y cuándo se usan, explicar las variaciones (variants) o estados. Algo muy interesante es incluir recomendaciones de accesibilidad y contraste.

Comparte los archivos con los/las colaboradores/as

Con los/as clientes compartimos el prototipo

Hay varias formas de compartir un diseño en Figma. Cuando lo compartimos con clientes, normalmente compartimos solo una previsualización del prototipo, pero no les dejamos ver «las tripas» del proyecto. A los clientes les pasamos una URL única que tiene este aspecto:

http://www.figma.com/proto/ABCDEFGHIJKL/file-name 

Los clientes no necesitan copiar textos ni exportar assets, así que esa vista es suficiente, ya que pueden acceder al prototipo funcional, con todas sus páginas, interacciones, animaciones… y también pueden dejar comentarios.

Con el equipo de desarrollo compartimos el archivo

Sin embargo, cuando compartimos con el equipo de desarrollo, es mejor que demos acceso, esta vez sí, a «las tripas» del proyecto.

Con el equipo de desarrollo compartiremos una URL única con este aspecto:

http://www.figma.com/file/ABCDEFGHIJKL/file-name 

Si te fijas, la URL va a ser la misma, solo cambia /file/ o /proto/ en cada caso.

Establece los permisos para editar o solo para ver

1. Envía una invitación para ver o editar este archivo a través del correo electrónico. También puedes invitar a esa persona al proyecto completo, o directamente añadirle a tu equipo, para que acceda a todos los proyectos y archivos de ese equipo, usando su correo electrónico.
2. Establece si quieres dar los permisos a cualquiera que tenga el enlace o solo a las personas que hayas invitado por correo electrónico.
3. Selecciona permisos para ver o para editar.
4. Puedes dar acceso únicamente al frame seleccionado previamente.
5. Puedes copiar el enlace para compartirlo con quien necesites sin necesidad de disponer de su dirección de correo electrónico. Esto mola, porque lo puedes pasar por WhatsApp o Telegram y así sabes que lo verán en su móvil.

¿Doy permisos para editar o solo para ver?

La mayoría de las veces el modo View (Ver) va a ser suficiente. Con permisos de View se puede:

• Seleccionar capas en el panel de capas o en el canvas
• Ver las propiedades de las capas en el panel Inspect (para ver el código)
• Copiar los textos
• Medir las distancias entre los objetos del canvas (pulsando la tecla ALT)
• Añadir o responder comentarios en archivos y prototipos
• Ver prototipos en la vista de presentación
• Acceder a los componentes haciendo clic con el botón derecho en las instancias y seleccionando Go to Main Component.

Ojo, la persona que tenga permisos para ver o editar, tiene que logarse con sus datos de acceso de Figma para poder tener los permisos. Si sigues un enlace con permisos pero no inicias sesión, solo verás una previsualización del archivo y no podrás ni dejar comentarios ni nada.

Si quieres saber más sobre preparar el diseño para developer handoff o si eres un/a desarrollador/a y quieres saber qué puedes hacer con Figma, me alegro, porque hemos preparado el curso Developer handoff: pasar de diseño a desarrollo en Figma.