Nuestros 6 meses en Figma
Desde una multinacional a una startup. ¿Está hecho Figma para tu equipo?
Llevamos más de seis meses trabajando día a día con Figma, esta herramienta se ha colado en distintos proyectos del estudio, entre los que se encuentra uno de los mayores e-commerce de España.
Hace unos meses, probamos Figma para conocer sus diferencias con Sketch y ver si encajaba en el estudio. Puedes leerlo aquí 👈🏼.
A día de hoy los aspectos de Figma que nos aportan más valor son:
- El trabajo en equipo
- La versatilidad de los estilos
- La posibilidad de tener librerías
Trabajo en equipo
En mi opinión, si hablamos de un equipo de diseño trabajando sobre un mismo producto, Figma es la herramienta, ya que permite trabajar de forma colaborativa. Varias personas pueden estar trabajando simultáneamente sobre un mismo archivo y visualizar los cambios que se realizan en tiempo real.
Los primeros días trabajando con Figma en un gran equipo, nos dimos cuenta del gran problema que suponía trabajar de forma colaborativa: la organización. Tuvimos que quitarnos el miedo al qué pasa si se borra todo en lo que he estado trabajando, qué pasa si alguien modifica algo por error. Ante estos problemas e inquietudes, planteamos un mecanismo para trabajar en distintas páginas y un proceso para trabajar en torno al control de versiones.
¿Cómo solucionamos el problema de organización?
Para trabajar en Figma, estructuramos el archivo en 3 tipos de páginas:
- Página Master, donde se guarda todo el contenido que está o se va a subir a producción.
✅ Master
- Páginas de revisión, las cuales contienen vistas acabadas pero que se están validando con el PO, desarrollo, o revisando con el equipo.
👀 [Nombre flujo o funcionalidad] — [Nombre persona encargada]
- Páginas en proceso, páginas en las que una persona está trabajando. Tenemos tantas páginas en proceso como flujos o funcionalidades se estén trabajando y cada una de estas páginas pertenecerá únicamente de una persona.
⚙️ [Nombre flujo o funcionalidad] — [Nombre persona encargada]
- Páginas en espera, páginas que pertenecen a flujos que se han parado por algún motivo. Estas no están acabadas, pero tampoco hay nadie trabajando sobre ellas.
✋🏼 [Nombre flujo o funcionalidad] — [Nombre persona encargada]
Tener las páginas diferenciadas de esta forma nos permite conocer el estado y si el trabajo está acabado o no. Además, al tener las páginas diferenciadas por personas evita tener mil punteros sobrevolando el trabajo que estás realizando 😉.
¿Cómo aseguramos que no se se pierde trabajo?
Para evitar los mini-infartos sobre si se ha perdido algo de trabajo, al manipular varias personas el mismo archivo Figma tiene integrado un control de versiones. Esta funcionalidad nos permite que siempre se pueda volver atrás. Figma guarda nuestro trabajo y realiza este control de forma automática cada pocos segundos.
El problema de este guardado automático es que pillará a cada miembro del equipo en un punto distinto del trabajo. Por eso cobra importancia el control de versiones manual. El funcionamiento es el de un commit al uso. Así podemos tener checkpoints claros cada vez que se valide una funcionalidad o se produzca un cambio grande, permitienos retroceder en cualquier momento.
Versatilidad de los estilos
Otros de las ventajas 🏆 de Figma es cómo trata los estilos. Te encantará si trabajas con sistemas de diseño y te gusta organizarlo todo.
En Figma, existen estilos de color, texto y sombra. El comportamiento que les da Figma es diferente a la forma en la que los trata Sketch. Los estilos no guardan las propiedades, sino el esqueleto.
¿En qué se diferencian los estilos de Figma a los de Sketch?
Figma simplifica los estilos. Hace que trabajar con ellos sea mucho más sencillo, al recoger solo los valores propios del estilo.
Por ejemplo, los estilos de texto no tienen implícito un color o una alineación determinada, sino que únicamente guardan el tipo de letra, el peso tipográfico, un interlineado, un interletraje y un tamaño concreto. Sobre estos, se podrá aplicar un color y una alineación, de forma que, por ejemplo, se puede tener dos textos con el mismo estilo de texto pero de color diferente.
Los estilos de color podrían entenderse como los estilos de capa en Sketch. Sin embargo, Figma únicamente guarda el color, que puede ser aplicado a una capa o sobre un texto. Los estilos de sombra solo guardan el tipo de sombra, y al igual que los de color, se pueden aplicar tanto sobre texto como sobre capas.
La forma en la que Figma trata a los componentes y a los estilos abre un gran abanico de oportunidades para trabajar en base a sistemas de diseño, mediante la reutilización de componentes, al no estar atados a unas propiedades concretas. Hemos ganando flexibilidad y capacidad de exploración, mientras mantenemos la consistencia.
Unir el trabajar en equipo con el mantenimiento de un sistema de diseño
En el estudio trabajamos con sistemas de diseño. Al pasar a Figma almacenábamos el sistema de diseño dentro de cada archivo de Figma en el que trabajábamos. Tras varios meses trabajando así, nos dimos cuenta que ese método era insostenible. Invertíamos muchas horas en mantener los sistemas de diseño, ya que si se producía un cambio en alguno de ellos había que propagarlo al resto. Fue en este punto en el que exploramos la funcionalidad de Team Libraries de Figma.
Si quieres conocer cómo trabajamos con sistemas de diseño, puedes leerlo en nuestro Product Design Handbook 👈🏼.
Las Team Libraries o librerías de equipo son un archivo que actúa como una librería de componentes y estilos que se puede compartir y reutilizar a lo largo del resto de archivos. Es decir, el resto de archivos del proyecto pueden utilizar todos los componentes y estilos que estén en la librería. De esta forma conseguimos mantenerlos centralizados, sincronizados y actualizados a lo largo de los archivos y miembros del equipo.
Además, creando una librería hemos conseguido:
✅ Reducir el tamaño de los archivos.
✅ Evitar versiones distintas si tenemos diferentes archivos.
✅ Mayor consistencia.
✅ Eficiencia a la hora de modificar un componente, al no tener que modificarlo en todos los archivos donde se utilice.
Para utilizar una librería de equipo basta con habilitarla en el archivo donde se quiera utilizar.
Los estilos y componentes de la librería de equipo conviven con los componentes locales del archivo. Sin embargo, para mantener el orden y aprovechar los beneficios que aportan las librerías es recomendable que todos los componentes y estilos que se utilicen sean los de la librería.
Para actualizar la librería basta con realizar los cambios y publicarlos. De esta forma, hacemos que los cambios se propaguen automáticamente al resto de archivos que utilicen la librería.
En la esquina superior derecha, está el icono Team Library. Cuando nos aparezca la notificación, será que hay cambios.
Como último (pero gran punto) es interesante tener en cuenta que Figma permite hacer descripciones de los componentes. Esto nos ha resultado realmente útil para transmitir conocimiento al equipo y a evitar pérdidas de información, ya que las utilizamos para describir restricciones y formas de utilización de componentes. Estas descripciones se muestran el las instancias, por lo que al utilizarlo puedes obtener la información rápida y fácilmente.
Conclusión
En definitiva, Figma es una muy buena opción si lo que buscas es trabajar en equipo. Figma es una herramienta que se está actualizando constantemente por lo que si ahora no te convence del todo, no descartes en volverla a probar en unos meses. A mi personalmente, me resulta una herramienta cómoda de utilizar que me deja desarrollar mi trabajo de forma versátil, sistemátizada y rápida.
¿Qué nos gustaría ver en el futuro?
Una cosilla rápida antes de acabar, nosotros echamos en falta:
- Una mejor integración con Zeplin, ya que al subir pantallas a Zeplin desde archivos pesados hay veces en las que da un error inesperado.
Nuestra forma de solventar esto suele ser sacar las pantallas que queremos subir a Zeplin a un archivo nuevo y subirlas desde este 😉
- Plugins, que nos hagan la vida un poquito más fácil. Sabemos que se está trabajando en ello, pero por pedir 😇.
- Funcionalidades como pegar en el sitio o hacer resize de un Frame sin preocuparte de si se descolocará todo lo que hay dentro.
Otro truco: Para hacer resize sin que se modifiquen los componentes basta con mantener pulsado command mientras se modifica el tamaño o bien tener todos los elementos anclados a la parte superior.
