Cosas increíbles en Figma

Ha pasado mucho tiempo desde que recuerdo haber estado tan entusiasmado con el estado de las herramientas de diseño. Desde la migración de Adobe a Creative Cloud, parecía haber un marco de tiempo relativamente estancado (hasta ahora) en el que abordar el creciente rango de tamaños de ventana gráfica y las densidades de píxeles se volvía cada vez más frustrante. Afortunadamente, hay compañías de software más pequeñas y ágiles que están creando productos fantásticos que ofrecen enfoques y flujos de trabajo completamente nuevos para diseñar herramientas en el género UI / UX.

Sketch ha ganado una base de usuarios notablemente notable y aunque Adobe ha intentado responder con XD (¿es demasiado pronto para decir que no estoy impresionado?), Estoy muy entusiasmado con el potencial de Figma.

Si eres nuevo en Figma, te resultará muy familiar si alguna vez has usado Sketch. La configuración de la ventana es casi idéntica: herramientas en la parte superior, capas a la izquierda, inspector a la derecha y el lienzo en el medio; sin embargo, la interfaz de usuario es diferente: plana (en su estilo) y mínima en comparación con la GUI de OSX en Sketch. Las mesas de trabajo se llaman marcos, y los símbolos se llaman componentes en Figma. La edición de componentes se realiza en línea (no en una página separada como lo hace en Sketch) e incluso los colores de relleno y trazo y otros atributos se pueden anular además de cambiar el texto. Una de las características más impresionantes y únicas de Figma es su modo multijugador que permite a los usuarios colaborar en tiempo real: puedes ver los cursores de tus colaboradores trabajando en el mismo lienzo interactuando con el diseño. Debido a que está basado en un navegador (no dejes que eso te asuste, es rápido y receptivo), cualquier persona con un navegador puede usarlo, independientemente del sistema operativo. Eso significa que no se requiere software propietario, lo que resulta en una transferencia aún más fácil para los desarrolladores.

Si bien el modo multijugador puede no encajar en el flujo de trabajo actual de todos, sospecho que esto cambiará. Ya lo he encontrado realmente útil para trabajar de forma remota con colegas, incluso como una pizarra virtual para enjuagar alambres y flujos en las primeras fases de un proyecto. Ver el cursor de sus colaboradores construir el diseño junto con el suyo es inspirador de confianza: elimina la sensación de incertidumbre que a menudo se siente sobre el control de versión y la sobrescritura que ocurre cuando se usan algunas aplicaciones en la nube.

Aleatorio a un lado: ¡Después de años de usar Illustrator, me encanta poder presionar 'I' para acceder a la herramienta Cuentagotas!

Si bien a Figma (en este momento) le faltan algunas de las características que Sketch tiene (particularmente en torno a las definiciones de estilo y una API accesible para el desarrollo de complementos), hay muchas características realmente inteligentes que me entusiasman. Su programa de lanzamiento rápido me deja confiado de que muchas de las características y funciones faltantes que los usuarios sugieren no están demasiado lejos en el camino. El propósito de esta publicación no es entrar en detalles sobre muchas de las características distintivas de Figma que se han documentado en otros lugares (aquí, aquí, aquí y aquí); en cambio, quería destacar algunos de mis "pequeños detalles" favoritos que aplaudo al equipo de Figma por implementar. Estos detalles acumulativamente hacen una gran diferencia.

Seleccionar objetos en primer plano

Cuando tiene una variedad de objetos apilados en la parte superior de un objeto de fondo (como una interfaz de usuario de tarjeta o que contiene un fondo), puede seleccionar fácilmente los objetos en la parte superior sin tener que desplazarlos + hacer clic en ellos individualmente o bloquear la capa de fondo para hacer Una marquesina de selección. Esto incluso funcionará para seleccionar objetos dentro de componentes o grupos. Simplemente mantenga presionado CMD y arrastre un recuadro de selección alrededor de los objetos que desea seleccionar. Antes de arrastrar, mientras presiona CMD, desplace el mouse sobre el objeto que lo contiene, lo resaltará con un contorno, una vez que haga clic y comience a arrastrar para seleccionarlo, ignorará ese objeto y le permitirá seleccionar objetos en primer plano. ¡Inteligente!

Tamaño del cuadro de texto y alineación

Figma le permite establecer anchos y alturas de cuadros de texto, y además de la alineación vertical del texto. Esta es una característica realmente básica, pero falta en Sketch. Tome el caso de uso anterior. En Sketch necesitaría crear dos símbolos: uno para etiquetas de botón de una sola línea y uno para configuraciones de dos líneas, o bien, necesitaría crear tres símbolos; dos para alojar cada configuración de cuadro de texto e intercambiarlas como anulaciones en un tercer símbolo maestro. La solución mientras sea posible es engorrosa y da como resultado símbolos adicionales, y la molestia adicional de tener que cambiar reemplaza cuando descubro que una cadena de texto en particular es demasiado larga. En Figma puedo lograr esto con un solo símbolo. Cuando la cadena de texto es demasiado larga para una línea, se ajusta en dos líneas y permanece centrada verticalmente dentro del cuadro de texto de altura fija.

Se pueden agregar múltiples cuadrículas a cada cuadro. Las cuadrículas se pueden configurar para que se fijen en el centro o hacia la izquierda, o para estirarse. Cada cuadrícula se puede colorear de forma independiente.

Rejillas

La configuración de la cuadrícula (diseño) en Sketch funciona ... pero hay algo al respecto que nunca me pareció correcto. La creación de cuadrículas en Figma se siente mucho más simple y versátil. Puede agregar tantas cuadrículas a un marco como desee, e incluso puede agregar cuadrículas dentro de sus componentes. Puede diseñar cada cuadrícula individualmente para su identificación. Por ejemplo, podría tener una cuadrícula de 3 columnas y una cuadrícula de 6 columnas y colorearlas de manera única. Figma también tiene una configuración que estirará la cuadrícula y la escalará a las dimensiones de su marco. La capacidad de especificar cuadrículas fijas y líquidas (estiramiento) es realmente útil cuando se construye un sistema para trabajar en una gama de tamaños de ventana gráfica. Agregar filas a la cuadrícula funciona exactamente de la misma manera, pero se controla independientemente de las columnas como una capa de cuadrícula adicional. Cada cuadrícula se puede controlar y alternar independientemente desde el inspector. CTRL + G alternará rápidamente las cuadrículas en todos los cuadros.

Alinear a la red

Al crear componentes en Figma, puede ajustar objetos dentro de su componente a la cuadrícula de su marco. La alineación se mantiene a medida que escala su componente o marco. ¡Estos detalles tienen el poder de hacer que adaptar sus diseños a diferentes tamaños de ventanas sea mucho más fácil y rápido!

Contenido del clip

Figma tiene una característica práctica y ridículamente simple que le permite alternar si su obra de arte se recorta o no en su marco. Al principio no pensé mucho en esta característica hasta que tuve que trazar algunos flujos entre las mesas de trabajo en Sketch. Cuando desee hacer algo simple, como dibujar flechas que conectan botones de una mesa de trabajo a otro marco, las flechas se recortan dentro de su mesa de trabajo. Las posibles soluciones son mantener sus flechas fuera de la mesa de trabajo o contener todas sus mesas de trabajo dentro de otra mesa de trabajo. En Figma, solo tiene que desmarcar la casilla; esto es aún más útil cuando se trabaja en pantallas con contenido de desplazamiento largo porque puede obtener una vista previa de lo que puede ver en la ventana gráfica pero obtener acceso fácilmente para editar el contenido que queda fuera del marco.

Restricciones

No iba a entrar en detalles sobre las restricciones porque es una característica bastante bien documentada, pero sería difícil escribir sobre Figma sin mencionar a aquellos que no están familiarizados con ellas. En comparación con Sketch (que le proporciona 4 modos de restricción diferentes), Figma le ofrece 5 modos diferentes y le permite asignarlos independientemente como atributos verticales u horizontales. La interfaz de usuario para controlar las restricciones es sorprendentemente simple. Se puede controlar mediante las selecciones del menú desplegable, o identificando las ubicaciones de restricción en una pequeña visualización en cruz. Si el diagrama no tiene sentido al principio, lo hará una vez que comience a hacer selecciones en los menús desplegables. Me gusta que no intentaron optar por iconos confusos dentro del menú desplegable aquí, las opciones de texto son mucho más descriptivas. Figma le permite definir las restricciones dentro de sus componentes y a su componente como un todo en relación con su marco para que respondan a los cambios en el tamaño del marco.

Algunas cosas que me gustaría ver en Figma

Restricciones de componente a componente
La capacidad de definir restricciones o relaciones entre dos o más componentes. Cuando un objeto o cuadro de texto se alarga, su capacidad de reposicionar / desplazar un objeto adyacente o incluso expandir el objeto que lo contiene.

Datos en tiempo real
Capacidad para insertar datos en vivo o conjuntos de datos personalizados, incluidas imágenes en el diseño (como vemos con Craft de Invision).

Ancho de rejilla
La capacidad de definir también cuadrículas por su ancho total y hacer que los anchos de columna se calculen automáticamente.

Controles de tipo
Más opciones para controlar el tipo, como el acceso a las funciones OpenType, listas ordenadas y numeradas, puntuación pendiente, acceso a una paleta de glifos y la capacidad de definir estilos de tipo universal.

Páginas
Las páginas son una característica que realmente me gusta y que he encontrado útil en Sketch para separar, organizar y agrupar pantallas.

Figma aún no ha anunciado su modelo de precios a largo plazo (actualmente es gratuito), o si hay planes para un modo de trabajo fuera de línea, o métodos alternativos para manejar proyectos demasiado sensibles para almacenar en la nube, pero estoy buscando con entusiasmo Esperamos ver qué viene después. También debo tener en cuenta que, si bien disfruté de muchas de estas funciones, también uso Sketch diariamente y disfruto mucho de su uso. Hay una fantástica comunidad de desarrollo de complementos con Sketch y complementos útiles como Craft. Todavía no he leído nada sobre el desarrollo de complementos o una API accesible para Figma, pero he leído que el equipo está explorando formas para que los usuarios aporten datos reales al diseño. Me encanta que gran parte de la funcionalidad de Sketch se extienda generosamente por una comunidad de desarrolladores de complementos, pero me pregunto si esto presenta desafíos a medida que se lanzan nuevas versiones de Sketch. ¿El complemento de código abierto en el que confías sigue funcionando igual después de cada actualización? ¿Se hace difícil mantener la compatibilidad o probar conflictos / errores? Tengo mucha curiosidad. En cualquier caso, ¡no puedo esperar para ver qué sigue!

¡Comparte a continuación tus características / detalles favoritos en Figma!