La perspectiva de un usuario de Sketch para cambiar a Figma

Todo lo que necesitas saber

Ilustración creada para el blog de Figma por Peter Barnaba

Nota del editor de Figma: no solemos incluir reseñas de Figma en nuestro blog, pero aquí hicimos una excepción. Marco Pacífico explicó los beneficios de nuestra herramienta mejor de lo que podríamos tener, por lo que queríamos que su artículo (que apareció originalmente en Prototypr.io) fuera un recurso para nuestros usuarios. Gracias Marco por dejarnos cruzarlo !

Utilicé Figma durante un mes y me impresionaron sus características y lo bien que funciona. Me gustó tanto que he estado haciendo campaña para que mi equipo cambie de Sketch. Esta publicación está adaptada de las conversaciones que he tenido en el trabajo, y es una especie de discurso para los equipos de productos, especialmente los distribuidos, que habla de por qué Figma es mejor en muchos aspectos.

Primero vamos a sacar lo básico del camino

Figma es una herramienta de diseño basada en la web con colaboración en tiempo real

Es como Craft Freehand pero con todas las características de Sketch (y más). Funciona en navegadores web, y también hay aplicaciones nativas que le permiten trabajar sin conexión.

¿Por qué está basado en la web algo bueno?

  • No hay software para descargar, instalar y actualizar continuamente.
  • No es necesario guardar y organizar sus archivos. Su trabajo se guarda automáticamente en un espacio compartido en la nube.
  • Una URL se convierte en la fuente de verdad que todos pueden ver. Lo que significa…
  • No es necesario cargar, sincronizar y organizar archivos PNG de forma continua en varios lugares.

¿Pero Figma es lenta?

No. Las personas experimentan que Figma es más eficiente que Sketch. Esta también ha sido mi experiencia, incluso cuando trabajo con un archivo grande.

¿Pero qué hay del ecosistema Sketch? Sketch tiene tantos complementos en los que confiamos para nuestro flujo de trabajo

Bueno, estoy aquí para decirte que no perderíamos nada significativo al usar Figma; solo ganaremos

Figma tiene todas las características y capacidades de Sketch + Abstract + InVision + Craft + Liveshare + Freehand + Zeplin + Dropbox, todo en uno, y mucho más. Estas son solo algunas de las características que Figma tiene:

  • Una interfaz similar y las mismas herramientas de dibujo que Sketch.
  • Prototipos Figma tiene una función de creación de prototipos en la que se puede hacer clic que es similar a Craft + InVision.
  • Comentario incorporado. Cualquier persona con el enlace puede agregar comentarios en cualquier parte del diseño, de forma similar a cómo funciona el comentario en InVision. Puede etiquetar personas en comentarios, marcar comentarios como resueltos e incluso integrarse con Slack.
  • Transferencia del desarrollador. Los desarrolladores pueden obtener dimensiones, estilos y descargar íconos e imágenes desde la URL del proyecto. Es como Zeplin, pero de nuevo, no tiene que sincronizar sus mesas de trabajo cada vez que actualice sus diseños.
  • Control de versiones. Figma incluye el historial de versiones para todos los colaboradores. Puede retroceder o bifurcar desde un estado anterior. Esto funciona como una máquina del tiempo en una Mac.
  • Colaboración multijugador. Varias personas pueden colaborar en tiempo real. Al igual que Freehand, todos vemos los cursores de cada uno en la pantalla y podemos dibujar cosas y hacer comentarios.
  • Liveshare Si haces clic en el avatar de alguien, puedes ver lo que está viendo en su pantalla y seguir su cursor. Esto funciona igual que InVision Liveshare (RIP Liveshare).
  • Componentes. Similar a Symbols in Sketch, pero más flexible y más fácil de diseñar. (Más sobre esto a continuación)
  • Restricciones Similar al cambio de tamaño en Sketch, pero más intuitivo.
  • Bibliotecas de equipo. Puede compartir y actualizar colecciones de componentes entre proyectos.
  • Bonificación: incluso puedes incrustar proyectos de Figma en Dropbox Paper.

Ahora vamos a las cosas realmente buenas ...

Figma cubre todas las bases con las características mencionadas anteriormente. Pero se vuelve realmente interesante cuando considera cómo mejora nuestro flujo de trabajo.

A continuación hay cuatro formas en que Figma puede mejorar fundamentalmente nuestra forma de trabajar.

1. Podemos iterar mucho más rápido con la colaboración en tiempo real

Puede hacer una revisión de diseño, realizar actualizaciones sobre la marcha y obtener comentarios instantáneamente sobre sus cambios. El tiempo entre iteraciones puede ir de días a minutos porque no se pierde tiempo cargando o sincronizando pantallas, creando enlaces compartidos, enviando mensajes a las personas para que los vean, etc. Cuando experimenté esto de primera mano, fue tan sorprendente que derramé una sola lágrima de alegría.

A continuación se presentan algunos escenarios de la vida real que pueden hacer que el trabajo sea lento y tedioso en el mejor de los casos e increíblemente frustrante en el peor de los casos. Todos estos escenarios desaparecen usando Figma:

  • Cuando, después de sincronizar todas sus pantallas con InVision, se da cuenta de que desea aumentar ligeramente el tamaño de la fuente en un componente de encabezado, por lo que realiza el cambio en su archivo de diseño y luego tiene que volver a sincronizar todas las pantallas en InVision.
  • Cuando usa Craft para sincronizar un prototipo complejo de pantallas múltiples a InVision y luego necesita pasar una hora arrastrando y soltando las pantallas en el orden correcto en InVision porque Craft las carga en una secuencia aleatoria.
  • Cuando alguien en otra zona horaria olvida comprometerse o subir su trabajo, entonces tiene que esperar hasta que vuelvan a estar en línea para obtener los últimos diseños.
  • Cuando hay una actualización de software y todos los complementos de terceros se rompen y pierdes horas.

2. Nuestro proceso de diseño se vuelve más inclusivo y continuo

De repente, el archivo de diseño se convierte en un lugar donde cualquiera puede reunirse y tener una discusión sobre los diseños. Esto significa que es más fácil para los diseñadores trabajar en paralelo, explorar opciones e iterar en incrementos más cortos. Esto significa que los desarrolladores pueden detectar y expresar inquietudes técnicas más temprano que tarde. Y esto significa que las partes interesadas, los gerentes de proyecto o cualquier persona con el enlace pueden ver cómo se desarrolla el diseño de una idea a una imagen pulida, en lugar de esperar una gran revelación.

En lugar de fragmentar el proceso de diseño en varios archivos, ahora hay un lugar que puede contar toda la historia y evolucionar a medida que se desarrolla el proceso de diseño.

Me gusta lo que Thomas Lowry, diseñador de OpenText, escribió sobre cómo ha cambiado su proceso de diseño al usar Figma:

A medida que comenzamos a sumergirnos en un proyecto de sitio web masivo, Figma se está convirtiendo rápidamente en una parte esencial de nuestro proceso. Produciremos nuestros prototipos de marcos de alambre y de baja fidelidad en Figma hasta la fase de diseño visual. Durante este proceso, comenzaremos a establecer componentes y los enviaremos a la biblioteca del equipo para su uso en muchos archivos. A medida que examinamos los componentes en diferentes escenarios, y el diseño evoluciona, ser capaz de realizar modificaciones que sean globales en todos los archivos será un gran ahorro de tiempo.

3. Es probable que nuestra transición del diseño al código sea más rápida y más consistente

Eso es porque con Figma, es más fácil estructurar nuestros diseños de una manera que refleje cómo se codificarán esos diseños.

Para entender por qué, necesita saber cómo funcionan los marcos. Figma usa marcos en lugar de mesas de trabajo. Los marcos son diferentes porque puede anidar marcos dentro de un marco. Cuando coloca un marco más pequeño sobre un marco más grande, los dos marcos se agrupan automáticamente y el marco más pequeño se convierte en hijo del marco principal más grande. Los marcos secundarios se colocan y restringen en relación con sus padres. Esta es una de esas cosas a las que lleva un tiempo acostumbrarse, pero una vez que lo hace, se pregunta cómo alguna vez lo hizo sin ella.

Puede usar marcos para dividir una pantalla en áreas de contenido y luego anidar componentes (que son un montón de marcos anidados) dentro de esas secciones. Este enfoque combinado con la agrupación automática, el posicionamiento relativo y las restricciones facilita la creación rápida de diseños consistentes y receptivos.

Usar marcos como este es útil para los desarrolladores porque un marco en Figma es similar a un contenedor en HTML. Cuando los desarrolladores inspeccionen los diseños, podrán ver los elementos de la interfaz de usuario anidados en sus respectivos contenedores, lo que significa que tendrán un plan más preciso al que escribir cuando escriban su código.

4. Nuestros sistemas de diseño serán más flexibles y fáciles de diseñar, lo que significa que ahorraremos tiempo y obtendremos coherencia en todos los proyectos.

Sketch tiene símbolos y Figma tiene componentes. La diferencia es que los componentes son más flexibles que los símbolos, lo que significa que podemos hacer más con menos de ellos, lo que significa que es más probable que los usemos en lugar de romperlos o comenzar desde cero.

¿Cómo son los componentes más flexibles que los símbolos?

En Sketch, puede usar Invalidaciones de símbolos para editar texto o intercambiar símbolos anidados. Pero si desea cambiar algo más, por ejemplo, el tamaño del texto, el grosor del borde o el color de fondo, tendrá que Separar del símbolo y crear una versión ligeramente diferente del mismo elemento de la interfaz de usuario. Para resolver esto, puede anidar cada variación en un símbolo, pero luego termina con un panel de anulaciones del infierno. Con proyectos grandes y UI complejas, organizar y mantener todas las permutaciones rápidamente se vuelve insostenible.

Con Figma, puede acceder y modificar las propiedades de cualquier capa en un componente sin separarlo del maestro. Lo mismo ocurre con los componentes anidados. Ahora, cada vez que cambie una propiedad de una capa en el componente maestro, esos cambios solo se propagarán a las instancias para las que esa propiedad aún no se ha anulado.

Creo que estos tres gifs hacen un buen trabajo al describir visualmente cómo funciona.

1. Cree un componente y luego cópielo para crear dos instancias del maestro.2. Los cambios en el componente maestro se propagan instantáneamente a todas sus instancias.3. Excepto que cualquier propiedad anulada permanecerá anulada, incluso cuando se cambie el maestro.

¿Cómo son más fáciles de diseñar los componentes que los símbolos?

En primer lugar, no tiene que preocuparse por una estructura de nomenclatura (es decir, iconos / búsqueda) mientras crea componentes. Puede cambiar el nombre de un componente maestro más adelante y actualizará todas las instancias, no el caso en Sketch. Y para crear una categoría de componentes, simplemente agrúpelos en un marco y nombre ese marco sea cual sea la categoría. Eso significa que es fácil reorganizar las cosas más tarde simplemente arrastrando componentes. Para mí, esto realmente redujo la sobrecarga cognitiva de crear componentes y hacer un seguimiento de ellos.

En segundo lugar, acceder a los componentes en Figma es mucho más fácil que acceder a los símbolos en Sketch. Una vez más, no tiene que pensar en una estructura de nombres para navegar por un menú anidado de nombres de símbolos. En cambio, puede encontrar (¡y ver!) Componentes como una lista de miniaturas. Para agregar un componente a una pantalla o intercambiar una instancia, simplemente arrastre y suelte en el lienzo. O puede copiar y pegar el componente maestro para crear una nueva instancia; ni siquiera puede hacer esto en Sketch sin crear un nuevo símbolo.

Ver y acceder a los componentes desde una pestaña en el panel de capas

Otra cosa que facilita el diseño con componentes es que en Figma puede editar el componente maestro en el contexto de la vista más grande, en lugar de tener que ir a una página separada para realizar ediciones. Me resulta muy molesto que me devuelvan a otra página en Sketch cada vez que quiero editar un símbolo, y luego tengo que volver al diseño para ver si mis cambios se alinean.

Desde https://blog.figma.com/components-in-figma-e7e80fcf6fd2

Terminando

Cuanto más uso Figma, más razones encuentro para que me guste. Hay un montón de detalles que terminas descubriendo a medida que comienzas a trabajar con ellos. En general, se siente como una herramienta más desarrollada y bien pensada para el diseño de interfaces.

Otros recursos

Nota del editor: publicado originalmente en blog.prototypr.io el 6 de abril de 2018. Figma no patrocinó la creación de esta publicación.