Para preparar tu prototipo web en Figma y empaquetarlo como es debido, debes tener en cuenta muchas cosas que tienen que estar organizadas de forma correcta para no volver loco al equipo de desarrollo.

Piensa que cuando terminamos con nuestro prototipo solo estamos en la mitad del proceso, porque luego se pasa a código todo el diseño para su publicación final en Internet. Este relevo se conoce en la industria como handoff.

Nuestro objetivo es que ese traspaso sea lo más profesional posible, de forma que en la fase de desarrollo no te tengan que consultar continuamente para cada paso que se da.

Veamos qué apartados debemos incluir y cómo plantearlos en los ocho puntos que os explicamos a continuación:

1. Organiza el proyecto en páginas de Figma

Para poder explicar y detallar el sistema de diseño, lo ideal es separar cada apartado en una página distinta, por ejemplo:

1. Portada.
2. Fundamentos.
3. Logo.
4. Color.
5. Iconos.
6. Fuentes.
7. Componentes.
8. Prototipo móvil.
9. Prototipo tablet.
10. Prototipo escritorio.

Utiliza nombres reconocibles; usa páginas vacías solo como separadores para así crear divisiones entre el sistema de diseño y los prototipos; incluso puedes adornar tus páginas con iconos.

2. Limpieza y orden de las capas

El orden de las capas, su nombre y la organización de los elementos dentro de las páginas es una parte esencial para que se comprenda tu trabajo. Para ello, puedes nombrar las capas con prefijos para señalizar que rol tiene ese elemento dentro de tu proyecto.

También puedes crear tu propio método, pero lo importante es mantener la misma nomenclatura. Por ejemplo, si decides que ciertos prefijos empiecen por mayúscula, sé consistente. Por otro lado, ten cuidado con los caracteres especiales (“ñ”, “?”, etc.) que pueden ser problemáticos.

3. Unidades de espacio

Mantener consistencia y coherencia en los espacios que separan nuestro contenido es básico. Las unidades de espacio que has utilizado para el padding y el gap en los auto layouts, y en el resto de elementos que vas componiendo, pueden venir definidos por un frameworks en el desarrollo.

Si tomamos como ejemplo uno de los más utilizados, Bootstrap 5, sus unidades de espacio se dividen de la siguiente manera:

A la hora de tomar decisiones sobre los espacios que dejas en el prototipo, debes adaptarte a los que usa el framework para que luego puedan pasarlo a código con facilidad.

4. Estilos de color

La paleta de color que has definido con los estilos de Figma se convertirá en algo muy parecido cuando comience el desarrollo web: los colores se listarán en lo que se llama las variables CSS.

Los colores principales pueden tener su propio nombre: verde, morado…, o incluso puedes nombrarlos como «primario», «secundario»…, toma la decisión que más te convenga. Por el contrario, los matices se suelen definir siempre con una escala de peso basada en números, siendo 400 el color base:

Para dejar bien ordenados tus colores en Figma usa el plugin Color Styleguide, ya que nos facilita el trabajo convirtiendo los estilos de color en un sistema modificable y dejando todos los datos necesarios a la vista para poder verlos con comodidad.

5. Estilos de texto

Igual que con el color, para los textos de tu prototipo tendrás una lista de estilos creados en Figma. Para poder clasificarlos y que también se puedan hacer variables CSS con ellos, puedes organizarlos siguiendo varios métodos.

Los sistemas de diseño como el de Google, los ordena de la siguiente forma: escala – tipografía – peso – tamaño – caja – tracking:

Esta opción no es del todo recomendable, porque no hay que confundir un sistema de diseño como Material Design, publicado para poder usarlo directamente en desarrollo, con tu proyecto, que es un prototipo a medida para una web. Usar la jerarquía HTML basada en las etiquetas h1, h2, etc., no es buena idea, porque nosotros no sabemos realmente qué posición ocupará cada texto en dicha jerarquía: eso corresponde a las labores de posicionamiento SEO.

Quizá, lo más recomendable sea sustituir dicha información con el rol que ocupa ese texto dentro de nuestro contenido, por ejemplo: título, subtítulo, párrafo, etc., y añadir también una talla, que puede corresponder a su papel dentro de cada corte del responsive: XL para escritorio, MD para tablet o XS para móvil.

6. Imágenes e iconos

Las imágenes que hayamos usado en nuestro prototipo se dividirán en dos tipos: los vectores y los mapas de bits.

Todas las imágenes que sean iconos o ilustraciones vectoriales deben estar en SVG. Figma nos permite exportar con mucha facilidad estos elementos y podemos entregarlos en una carpeta llamada SVG. De esta forma, estos recursos están ya preparados y optimizados para su implementación.

Las imágenes de tipo fotografía que hayamos usado no deben exportarse desde Figma, sino que se tratarán desde otro programa más específico para optimizarlas, como puede ser Photoshop. También debes guardarlas en una carpeta diferenciando el formato PNG o JPG.

7. Componentes

Como es sabido, un componente en Figma es un objeto que se puede utilizar varias veces. Además, permiten mantener una apariencia y comportamiento consistentes en todo el prototipo. Por ejemplo, si se utiliza un tipo de botón en todo el proyecto, convirtiéndolo en componente nos aseguramos de que todos los botones tengan la misma apariencia y funcionalidad.

Los componentes son un concepto esencial de diseño en Figma y el desarrollo web: no se entendería entregar un proyecto si no está construido con ellos.

Sabiendo esto, ordenarlos dependerá mucho del proyecto que estés haciendo. Puedes utilizar apartados que describan su situación dentro de la jerarquía de sitio, o simplemente la categoría a la que pertenecen.

8. Guardar y compartir

Para dejar tu trabajo listo para el handoff, debes crear un conjunto de carpetas donde reúnas todos los elementos que puedan llegar a necesitar en el desarrollo. Además, Figma te permite descargar un archivo .fig que podrás guardar junto al resto de assets.

También es muy probable que te pidan acceso a tu propio documento en Figma. Si es solo con permisos de visualización, no hay problema; pero si piden permisos de edición, es recomendable haber descargado antes una copia y además, duplicar la que tengas en la nube para no equivocarte si se modifica algo.

En conclusión, el flujo de trabajo en el diseño de una web requiere que distintos perfiles y procesos se engranen sin fricciones. Para ello, cada equipo debe conocer lo suficiente de lo que hace el otro para que el relevo se dé sin conflictos y de forma fluida.