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!
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:
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.
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 (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:
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.
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).
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.
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.
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.
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í.
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
