El estudio
Next section
Siguiente sección
Product Design Handbook
Figma es la herramienta principal del estudio. Forma parte de nuestro día a día y con ella se diseña en todos los proyectos.
En este apartado se detalla cómo utilizamos y organizamos Figma en mendesaltaren, así como una propuesta de organización si tuviéramos que trabajar en Figma de cliente con cuenta de tipo Organization.
Figma se basa en la siguiente jerarquía, compuesta por cinco capas:
Esta estructura nos permite tener un control sobre la organización de archivos y los permisos que tiene cada usuario. Tanto los equipos como los proyectos nos permiten acotar los permisos que tendrá cada usuario dentro de ellos. Dependiendo de cómo queramos que sea esta y el tipo de cuenta que tengamos, tendrá sentido diferenciar por equipos o únicamente por proyectos.
La cuenta mendesaltaren en Figma es de tipo Professional Team, lo que significa que contamos con tres capas de organización: Projects, Files y Pages. Cada proyecto del estudio se corresponderá con un Project de Figma y, dentro de cada uno de ellos, crearemos los archivos correspondientes al proyecto concreto.
Los permisos pueden ser gestionados a nivel proyecto y a nivel archivo. Los accesos pueden ser view-only, edit o admin. Es importante que, si vamos a invitar a alguien con permiso de edición, notifiquemos antes al Lead Design del proyecto.
Por defecto, los projects que creemos en Figma serán públicos para todo el equipo. Sin embargo, Figma permite crear 'View-only projects' y 'Invite-only projects'.
Como se mencionaba anteriormente, por cada proyecto del estudio se creará un nuevo proyecto en Figma, de forma que podamos tener centralizada toda la información. Estos deben seguir la siguiente nomenclatura:
En cuanto a los archivos, distinguimos tres tipos:
Para trabajar fácilmente con los archivos, Figma nos permite añadir portadas, lo que hará que sean fácilmente identificables.
Propuesta para las portadas de archivo:
Por defecto, Figma mostrará la primera página como portada del archivo. Sin embargo, puedes seleccionar cualquier Frame de cualquier página y convertirlo en portada (botón derecho sobre un Frame → Set as thumbnail).
Para que se muestre el contenido de la portada correctamente, el Frame tendrá las siguientes dimensiones: 620x320 px.
Por defecto, dejaremos la portada en la primera página.
Una buena nomenclatura de los archivos también nos ayudará a que su búsqueda sea más rápida.
Recomendación: No crear nombres de archivos muy largos para poder visualizarlos de forma completa.
La organización de las páginas dentro del archivo pueden estar estructuradas por:
Es importante que el nombre de la página describa lo que contiene. También ayuda mucho tener un código para que el resto del equipo conozca cuál es el estado de lo que hay en cada página del archivo. Esto permite que no haya malentendidos y evitamos la pérdida de información.
Propuesta de código:
✅ : Finalizado y revisado
👀 : En revisión
⚙️ : En progreso
❌ : Rejected
⚰️ : Descartes
Además, para fomentar la comunicación con el equipo y con el cliente y a su vez llevar un control de lo que se ha estado trabajando, utilizaremos version history. Version history nos permite hacer commits de un momento determinado del archivo. Es importante utilizarlo cuando se completan hitos en el archivo, sobre todo en aquellos proyectos referentes a sistemas de diseño o en los que se trabajan distintas funcionalidades.
Puedes leer más sobre cómo trabajar con versión history aquí
Para organizar las páginas podemos utilizar la siguiente nomenclatura:
Los identificadores (id) serán números incrementales precedidos por un 0.
Por ejemplo, las páginas de un archivo de Sketch deberían aparecer así:
Dentro de las páginas trabajaremos con Frames. Para organizarlos, los agrupamos en flujos o historias de usuario. Cada fila representa un posible flujo de la aplicación o de la web que se esté diseñando. Al principio de cada fila debe existir un frame (a modo de portada) que contenga el nombre y una descripción del flujo que representan los frames de dicha fila. La descripción no tiene que ser muy extensa y detallada, sino lo suficiente para que el resto del equipo pueda tener contexto sobre lo que se está trabajando.
Para nombrar los frames podemos seguir la siguiente nomenclatura:
Por ejemplo, los flujos en la página en 01 Account deberían quedar de la siguiente forma:
Las librerías son archivos de Figma que nos permiten compartir todos los componentes y estilos creados en ellas con el equipo. A nivel de organización, las trataremos como un archivo más. Estas normalmente las utilizaremos para sistemas de diseño o assets que queramos compartir entre archivos y proyectos.
Puedes leer más sobre cómo trabajamos con los sistemas de diseño aquí
Para convertir un archivo en librería hay que publicarlo. La publicación se realiza desde Assets Pannel, que encontraremos en el panel de la izquierda de Figma.
Adaptamos nuestra organización a otros clientes para adaptarnos a sus procesos y su forma de trabajar.
Diseñando el Workflow con Figma
En función del cliente y del equipo con el que estemos trabajando, recomendamos la cuenta de Figma de tipo Organization Team. Sobre todo, en empresas corporate, ya que podemos llevar a cabo una organización por equipos. Esto nos permite tener un nivel más en la jerarquía de organización de archivos. Además, este tipo de cuentas, cuentan con unos ajustes avanzados que permiten visualizar analíticas y tener un control más exhaustivo. Un claro ejemplo es el panel de Librerías, para conocer métricas sobre los sistemas de diseño.
Tener equipos nos permite:
La organización de archivos se puede entender como un directorio de carpetas en el cual, a primer nivel, encontramos los equipos y, en segundo nivel, los proyectos, que nos permiten diferenciar archivos por: la etapa en la que se encuentran, partes del producto, plataformas, etc.
Los sistemas de diseño nos ayudan en la colaboración de equipos y en la toma de decisiones, compartiéndose los estilos y componentes que residen en estos entre los distintos archivos.
Tener un equipo dedicado a los sistemas de diseño nos permite tener un control más preciso sobre los permisos de edición y, por tanto, quién tiene permiso para publicar cambios que se propaguen de forma automática por todos los archivos en los que esté enlazado.
Para que cumpla con el objetivo de colaboración, todas las personas de la organización podrán ver las librerías y archivos mediante permiso de viewer. De esta forma, el equipo tendrá un lugar al que acudir para explorar la documentación actualizada.
Cuando se añade un usuario a la organización, este se añade con permisos de Viewer o de Editor. Sin embargo, se pueden dar permisos específicos para cada equipo y proyecto.
Los equipos pueden ser Open, Closed o Secret, lo **que permite controlar la visibilidad del equipo y los permisos de este.
Tener equipos independientes nos permite que dentro de ellos podamos categorizar y organizar los archivos por proyectos. De esta forma, cada proyecto representará un tipo de archivo:
La organización de archivos y páginas se hará de la misma forma que veíamos en el apartado Organización: Mendesaltaren.
El Admin Console es especialmente útil cuando trabajamos con un sistema de diseño.
Figma permite tener librerías activas por defecto en los archivos de la organización. Esto puede ser realmente útil para Brand Assets y recursos, como cursores o portadas. Las librerías por defecto se activan desde la Admin Console.
Desde Admin Console también se podrá acceder a las estadísticas de los componentes y estilos que hay en una librería.
Estas son algunas de las extensiones que más utilizamos:
Let’s talk
We help your business thrive through strategy and design. And while we’re at it, we have fun doing it. How can we help you?
