El secreto de un buen archivo de Figma

Escrito por Cris Busquets. Publicado en Diseño UI, Productividad

Este artículo te ayudará a empezar con buen pie cualquier proyecto de diseño, con todo lo que necesitas en tu archivo.

Te enseñaré como usar las plantillas de Figma y cómo montar un sistema que puedas replicar en cualquier proyecto, ahorrando tiempo y mejorando tus entregas.

¡Empecemos!

¿Por qué usar plantillas en Figma?

Desde que empecé a diseñar, cada vez que llegaba un proyecto a mis manos lo empezaba abriendo un archivo nuevo de Photoshop. Después, con Sketch, hice lo mismo… hasta que me di cuenta de dos cosas:

• No era productivo hacerlo así, porque perdía tiempo configurándolo todo. Cada vez.
• Cada archivo era diferente, por lo que a veces no encontraba lo que necesitaba cuando un tiempo más tarde volvía a entrar. O le dificultaba la vida a otr@ compañer@ de equipo.
• Mi sistema no era predecible, y cuando lo compartía en presentaciones o lo veía algún stakeholder siempre era «sorpresa» lo que encontrarían allí.

Así que empecé a configurar una plantilla en Figma que contiene todo lo que necesito en cada proyecto. Y si hay algo extra, simplemente lo borro.

Te explico paso a paso qué contiene y al final, te dejo la plantilla descargable.

La estructura básica en Figma

Esta que verás a continuación es la estructura básica que sigo en los archivos de Figma.

Te cuento cada una de ellas al detalle en los siguientes puntos 🙂

La miniatura es importante

La miniatura (thumbnail) te servirá para poder diferenciar mejor el proyecto cuando estés viendo los archivos recientes o cuando estés dentro de un proyecto.

Suelo incluir esta información:

• Cliente o dominio
• Nombre del proyecto
• Estado del proyecto

El avatar suele ser una fotografía de quién se encarga del proyecto o, simplemente, la marca.

Para configurar una miniatura necesitas un frame de 1920×960, con un área segura de 1600×960. Y cuando la tengas, haz clic con el botón derecho del ratón encima del nombre y del menú desplegable escoge Set as thumbnail.

Definition

Las historias suelen partir de un tíquet en Jira, pero tienen asociados diferentes archivos de Google Slides, Spreadsheets, etc.

En esta página es bueno recopilar esa información, reflexiones de las que parte el diseño y los enlaces, porque así lo tienes todo a mano y no tienes que ir cambiando de archivo y de foco.

Los frames son de 1920×1080 para que puedan utilizarse también como presentación (simplemente dale al icono de play de arriba a la derecha).

Wireframes

Como su propio nombre indica, esta es la página en la que ir trabajando la estructura que tendrá lo que se vaya a diseñar.

Puedes duplicar la página y hacer otra para móvil, pero por experiencia siempre me acaba yendo mejor tenerlo todo junto: es más fácil asegurar que los flujos son similares y no reinvento la rueda cada vez.

Design

Aquí sí diferencio entre diseño para escritorio y para móvil en dos páginas diferentes. Si la estructura de la que parten ambos (wireframes) ya tiene los elementos comunes, el diseño no debería hacerlo diverger mucho, sobre todo si utilizas una librería compartida con el sistema de diseño.

Los colores identifican si ese diseño ya está validado y funciona o si es una propuesta y estoy trabajando en ella todavía. Es una buena forma de avisar a stakeholders y a otr@s miembr@s del equipo que lo que estén viendo allí no tiene por qué ser definitivo. El verde ya está listo para enviarlo al equipo de desarrollo.

En el rectángulo negro de abajo a menudo incluyo enlaces a los documentos con los textos o especificaciones necesarias para ese flujo o pantalla en concreto.

Graveyard

A pesar de tener un nombre relativamente morboso, en el graveyard (cementerio) dejo los frames de propuestas que no han sido aceptadas por X o Y motivo. De este modo las tengo más a mano que si hago un commit con el control de versiones y la borro.

Allí no suele haber mucho orden más allá de que lo que está arriba a la izquierda es lo más viejo.

Utiliza mi plantilla 🙂

Te dejo aquí esta plantilla en Figma para que la dupliques, modifiques y utilices en tus proyectos. Espero que te sea útil 🙂

Descarga la plantilla gratis aquí.

¿Quieres más de Figma?

Si quieres aprender más sobre Figma, te dejo con un par de artículos que pueden orientarte un poco más:

Introducción a Figma: primeros pasos – uiFromMars

Auto Layout de Figma – Tutorial + qué es

Esto también te interesa 👇

Cómo me convertí en Product designer

Medir la usabilidad con el Sistema de Escalas de Usabilidad (SUS)

Introducción a FigJam de Figma: primeros pasos