Descubre lo nuevo que trae Figma este 2023

Figma, la popular herramienta de diseño colaborativo, continúa innovando y sorprendiendo a los diseñadores de todo el mundo. Con su última actualización, han introducido una serie de nuevas funcionalidades que prometen revolucionar la forma en que trabajamos y creamos diseños. Desde el esperado Modo Desarrollo hasta las Variables y el Prototipado Avanzado, estas características mejoradas elevan la experiencia de diseño a un nivel superior. En este blog, exploraremos en detalle las nuevas funcionalidades de Figma que están generando un gran revuelo en la comunidad de diseño. Descubre cómo estas herramientas pueden mejorar tu flujo de trabajo, aumentar tu productividad y llevar tus diseños al siguiente nivel. ¡Prepárate para sorprenderte y desbloquear todo el potencial de Figma!

El Modo Dev: Mejorando la colaboración entre diseñadores y desarrolladores

En el ámbito del diseño colaborativo, la comunicación fluida entre diseñadores y desarrolladores es fundamental para llevar a cabo una implementación exitosa del diseño. Es por eso que Figma ha introducido el innovador "Modo Dev", una herramienta especialmente diseñada para facilitar la interacción con los archivos de Figma, dirigida principalmente a los desarrolladores, pero también relevante para los diseñadores.

El objetivo principal del Modo Dev es reducir la fricción en la transferencia del diseño y mejorar la comunicación e implementación del diseño. Aunque su nombre sugiere que está orientado a los desarrolladores, es igualmente importante que los diseñadores comprendan su funcionamiento y cómo pueden preparar adecuadamente sus archivos para aprovechar al máximo esta funcionalidad.

Cuando los diseñadores se preparan para el Modo Dev, pueden agregar una etiqueta llamada "Detalles para Diseñadores" en el archivo. Esta etiqueta es clave para que los desarrolladores sepan en qué áreas deben enfocarse y qué aspectos deben tener en cuenta para lograr una transferencia fluida del diseño.

El Modo Dev ofrece numerosos beneficios para ambas partes. Para los desarrolladores, les permite interactuar con los archivos de Figma de una manera más eficiente y comprensible. Pueden navegar y explorar los diseños con mayor facilidad, lo que les ayuda a encontrar rápidamente la información que necesitan para comenzar a trabajar en la implementación.

‍

Por otro lado, los diseñadores también se benefician del Modo Dev, ya que les brinda la oportunidad de establecer una comunicación más efectiva con los desarrolladores. Al preparar adecuadamente el archivo y proporcionar detalles específicos, los diseñadores pueden garantizar que los desarrolladores comprendan claramente las intenciones del diseño y puedan llevar a cabo la implementación de manera precisa y coherente.

Variables

Las Variables en Figma son herramientas poderosas que permiten reutilizar definiciones de diseño, como colores, números y texto. A diferencia de los estilos tradicionales, las Variables tienen la capacidad de cambiar automáticamente según el tema que se aplique.

Estas funcionalidades brindan varias ventajas para los diseñadores. Por ejemplo, pueden cambiar y diseñar fácilmente en modos de contraste claros u oscuros, lo que facilita la adaptación de los diseños a diferentes situaciones. Además, las Variables permiten estandarizar y alternar entre diseños con facilidad, lo que agiliza el proceso de diseño.

Otra ventaja importante es la capacidad de localizar y previsualizar diferentes textos de la interfaz de usuario en varios idiomas. Esto es especialmente útil cuando se trabaja en proyectos internacionales o se necesita mostrar contenido en diferentes lenguajes.

Figma permite exportar e importar Variables utilizando el formato JSON de tokens a través de la API. Esto facilita la integración con otras herramientas y flujos de trabajo, lo que proporciona una mayor flexibilidad en el manejo de las Variables.

Es importante destacar que las Variables también pueden ser utilizadas para crear prototipos más dinámicos, lo que brinda aún más posibilidades creativas a los diseñadores.

‍

Simplifica tus Prototipos con Variables en Figma

Las nuevas funcionalidades de figma para el prototipado que te brindan más control y flexibilidad al diseñar. Estas nuevas funcionalidades cuentan con la capacidad de establecer variables, desbloquear expresiones matemáticas y utilizar múltiples acciones con lógica condicional, puedes crear prototipos más dinámicos y realistas sin necesidad de duplicar elementos o realizar conexiones complejas. Experimenta con estas herramientas y lleva tus diseños a un nivel completamente nuevo.

• Acción de establecer variables: Ahora, con la nueva función de establecer variables en Figma, puedes crear prototipos más dinámicos y flexibles. Imagina que estás diseñando un carrito de compras y quieres mostrar la cantidad total de artículos seleccionados. En lugar de duplicar múltiples cuadros y realizar complicadas conexiones entre ellos, simplemente puedes crear una variable "cantidad" y establecer su valor inicial en cero. Luego, cada vez que el usuario agregue un artículo al carrito, puedes aumentar el valor de la variable en uno. ¡Así de fácil! Ahora tienes un prototipo que se actualiza automáticamente según las interacciones del usuario.
• Desbloquea las expresiones matemáticas: ¿Quieres generar valores dinámicos en tus prototipos? Con las expresiones matemáticas, puedes hacerlo de manera sencilla. Por ejemplo, supongamos que estás diseñando una calculadora y quieres que el campo de resultado muestre la suma de dos números ingresados. Puedes utilizar la expresión "suma" para sumar los valores de las variables que representan esos números. ¡Y voilà! Ahora tu prototipo realiza automáticamente los cálculos y muestra el resultado actualizado en tiempo real.
• Múltiples acciones y lógica condicional: Ahora puedes activar múltiples acciones en tus variables con una sola acción de prototipado. Por ejemplo, si estás diseñando un formulario de registro y quieres verificar si el usuario ha ingresado correctamente su dirección de correo electrónico, puedes utilizar la lógica condicional. Si la dirección de correo electrónico no es válida, puedes mostrar un mensaje de error y resaltar el campo correspondiente en rojo. Pero si la dirección es válida, puedes mostrar un mensaje de confirmación y pasar al siguiente paso del formulario. Con estas funciones, puedes crear interacciones más sofisticadas y personalizadas en tus prototipos.

‍

Auto Layout

Con esta función, puedes crear diseños que se expanden para llenar el espacio disponible o se contraen para ajustarse, adaptándose automáticamente a medida que el contenido cambia. Esto resulta especialmente útil cuando necesitas agregar nuevas capas, acomodar cadenas de texto más largas o mantener la alineación de tus diseños a medida que evolucionan. Existen diversas formas de aprovechar el auto layout en tus diseños:

• Crea botones que se expandan o contraigan de manera automática al editar la etiqueta de texto. De esta manera, podrás mantener la apariencia consistente sin importar la longitud del texto.
• Construye listas que se adaptan dinámicamente a medida que se agregan, eliminan u ocultan elementos. Esto te permite tener una lista flexible que se ajusta automáticamente a los cambios en el contenido.
• Combina cuadros de auto layout para construir interfaces completas. Puedes agrupar elementos relacionados dentro de un cuadro de auto layout, lo que facilita la organización y el mantenimiento de la estructura de tu diseño.

El auto layout es una poderosa característica de Figma con múltiples usos y posibilidades. Sus nuevas funcionalidades son:

• Dimensiones mínimas y máximas: Te permite establecer dimensiones mínimas y máximas para tus cuadros y sus elementos secundarios. Esto te brinda un mayor control sobre cómo se ajusta el tamaño de los objetos en respuesta al contenido. El uso de ancho o alto fijo, junto con las dimensiones mínimas y máximas, te brinda un mayor control sobre el tamaño y la adaptabilidad de tus elementos en tus diseños con auto layout en Figma
• wrap: Que te permite organizar objetos en varias filas y columnas dentro de un marco. Los objetos se alinearán horizontalmente y se envolverán a la siguiente línea cuando sea necesario. Esto es especialmente útil para crear galerías de fotos o conjuntos de etiquetas.

‍

Otras funcionalidades son:

• Actualizaciones en el selector de fuentes: Encuentra la tipografía adecuada más rápido con nuevas vistas previas visuales dentro del selector de fuentes, una búsqueda mejorada y nuevas categorías para acceder rápidamente a las fuentes más populares y las instaladas localmente.
• Actualización del explorador de archivos: Encuentra lo que buscas más rápido. Una nueva pestaña de proyectos compartidos y una pestaña de archivos compartidos te ayudan a encontrar fácilmente los archivos que otros han compartido contigo. La búsqueda, los archivos recientes y las notificaciones ahora incluyen contenido de toda tu cuenta.

‍

Las nuevas funcionalidades de Figma abren un mundo de posibilidades para los diseñadores. Con mayor flexibilidad, eficiencia y control sobre los diseños, podrás llevar tus proyectos al siguiente nivel. Ya sea que estés trabajando en interfaces de usuario, creando prototipos interactivos o colaborando estrechamente con desarrolladores, estas herramientas te ayudarán a optimizar tu flujo de trabajo y a lograr resultados excepcionales.

En Figma, tienes a tu disposición una plataforma que impulsa tu creatividad y te permite materializar tus ideas de forma efectiva. No te pierdas la oportunidad de aprovechar al máximo estas herramientas y llevar tus diseños al siguiente nivel.