¿Cambiamos a Figma?
Aquí están nuestros aprendizajes y conclusiones sobre Figma en mendesaltaren.
En las últimas semanas en mendesaltaren hemos estado probando Figma. La experiencia ha sido muy, muy, positiva. Para ponerlo a prueba montamos un sistema de diseño y diseñamos las vistas aplicándolo.
Si quieres conocer qué es lo que más nos ha gustado, lo que menos y lo que hemos echado en falta, sigue leyendo. Además si sigues hasta el final te hemos dejado un regalito (hint: nuestro sistema de diseño en figma 🎉)
¡Una última cosa antes de comenzar!
Símbolos en Sketch ➡️ Componentes en Figma
Al utilizar componentes en Figma se crean instancias, que son copias del componente pero cuentan con atributos propios.
Artboards en Sketch ➡️ Frames en Figma
👍🏻 Pros
- Permite añadir comentarios y trabajar a la vez sobre un mismo archivo ➡️ Gracias a esto, tanto miembros del equipo como clientes pueden colaborar en tiempo real.
- Team library ➡️ Los componentes pueden ser públicos (para tu equipo). Así, pueden ser utilizados en los distintos archivos de Figma en los que estéis trabajando. 👈🏻 Se puede entender como una librería de Sketch que está linkada con todos tus archivos.
¿Qué pasa cuando se edita un componente dentro de un archivo concreto?
1. Se puede hacer público al equipo, y los distintos miembros del equipo decidirían si lo actualizan en su archivo o no.
2. Puede quedarse en el archivo y no publicarse. De esta forma no modificaría el resto de instancias en los demás archivos.
- Instancias de componentes ➡️ Al utilizar un componente se crea una instancia y no una copia de este. Todas las propiedades de los elementos que componen una instancia se pueden cambiar, lo único que no se puede modificar es la posición y el tamaño de los elementos (para no romper la consistencia que ganamos con los componentes).
¿Qué pasa cuando se cambia una instancia?
Si se cambia una instancia, este cambio no se aplica a todas las demás instancias del componente.Los cambios realizados sobre una instancia se mantienen, incluso, cuando se modifican los atributos en el componente padre (master component). Se acabó el Detach from Symbol de Sketch 💃🏻.
🎉 Pero siempre podremos volver a las propiedades del componente padre mediante Reset Instance.
- Si se ha borrado un componente, se puede restaurar ➡️ Si se ha borrado un componente por equivocación y todavía quedan instancias de este, puedes volver a crearlo con Restore Master Component. Así evitas tener que volver a crear el componente y enlazarlo con todas las instancias perdidas.
- Figma te permite añadir descripciones de los componentes ➡️ Muy útil para definirlos y poder compartir su uso, assets necesarios o restricciones con el resto del equipo.
- Se pueden tener distintos grids en una misma página ➡️ Evita tener que poner distintas reglas y copiar Frames (Artboards en Sketch) para conservarlas.
- No puedes duplicar un componente, siempre que dupliques o copies un componente se te creará una instancia ➡️ esto evita tener componentes duplicados.
- En Figma puedes crear textos como componentes (los componentes de texto funcionan como alternativa a los estilos de texto de Sketch) ➡️ Al tener los textos como componentes se pueden hacer públicos y que así se puedan utilizar en varios archivos.
Cuando quieras modificar un estilo de texto, lo harías como con cualquier otro componente 👈🏻 Para que esto funcione, habrá que insertar el texto como una instancia no como un text.️️️
💡 Tip: Además puedes crear los text components como instancias de forma que al modificar el master component se te modifiquen el resto de componentes.
👎🏻 Cons
- Organización ➡️ Figma te muestra los componentes (en la vista Components) por grupo o Frame (Artboard en Sketch).
Si un grupo está dentro de un Frame lo reconoce como Frame.
Hay que ser muy ordenados para que la vista Components funcione y pueda ser óptima a la hora de trabajar. Para organizarlo se puede jerarquizar y priorizar entre todos los componentes (por ejemplo, se podría mantener la jerarquía existente para los componentes dentro del sistema de diseño).
💡Tip: Los Frames te permiten cambiar su fondo ➡️ de esta forma, todos los componentes que estén dentro de este Frame aparecerán en la vista de Components con el fondo del color del Frame. 👈🏻 Esto es muy útil para iconos blancos, ya que sobre gris se ven con dificultad.
- Si estás en la vista Components e intentas renombrar un componente, no cambia a la vista Layers ➡️ es recomendable que cuando se vaya a renombrar un componente tengamos la vista Layers activa para poder ver la capa, el nombre anterior y el nombre nuevo de esta.
- No hay un Return to instance ➡️ Si te encuentras sobre la instancia de un componente y vas a su master component (Go to master component) no puedes volver exactamente a la instancia en la que estabas de forma “automática”, sino que habrá que buscarla manualmente.
- No tiene plugins para facilitarnos el trabajo más tedioso (como renombrar símbolos, capas, estilos de texto, etc), pero cuenta con una serie de acciones que nos permiten filtrar (estás funcionan realmente bien para seleccionar, buscar…).
- No puedes reemplazar una forma con una instancia (en Sketch Replace With) ➡️ Si queremos trabajar con componentes, hay que trabajar con estos desde el principio y trabajar de la mano del sistema. 👈🏻 Esto puede convertirse en un +1 🎉 para Figma si conseguimos diseñar vistas partiendo de los componentes que se encuentran en el sistema de diseño.
🙏🏻 ¿Qué nos gustaría que Figma incorporase?
- Plugins o en su defecto más funcionalidades enfocadas en la automatización del proceso, como por ejemplo poder renombrar multiples capas simultáneamente.
Esperamos que lleguen pronto al ver cosas como estas 👇🏻
- Un Return to instance para navegar entre componentes e instancias.
- Figma offline
📚 Artículos interesantes Figma
No dudes en escribirnos para profundizar sobre el tema, darnos feedback o comentarnos qué te ha parecido.
🎁 Lo prometido es deuda...
Os dejamos el sistema de diseño con las vistas que hemos diseñado, y con las que hemos aprendido mucho estas semanas. Esperamos que os sean tan útiles como a nosotros y que nos contéis cómo os ayuda.
https://www.figma.com/file/KUErNRni5zf8oXHIoySpVf2m/design-system
