Diseño UX/UI

Figma estrena nuevas funciones: todas las novedades que debes conocer

En el marco del Config 2023, Figma ha estrenado nuevas funciones que buscan revolucionar lo que nos entrega esta herramienta de diseño. ¿Qué es todo lo que necesitas saber sobre estas llamativas novedades? Aquí te presentamos todos sus detalles y su impacto en nuestro trabajo diario. 

Dev Mode, del diseño al desarrollo

Esta función permite a los diseñadores pasar fácilmente del diseño al desarrollo en Figma. En primer lugar, proporciona un nuevo espacio donde los diseñadores pueden preparar archivos para la producción y trabajar en colaboración con los desarrolladores. 

La característica ayuda a cerrar la brecha entre ambas áreas, permitiendo una transición más fluida y eficiente en el proceso de creación de interfaces. Al habilitarse este modo, se puede obtener información detallada sobre medidas, estilos y código, lo que facilita su paso a producción.

Otro gran añadido, es la posibilidad de conectar integraciones como Jira, Storybook y GitHub.

Variables, una mayor flexibilidad para nuestros elementos

Una característica que permite agilizar el proceso de crear y gestionar diseños adaptables. Las variables son como estilos reutilizables que se pueden aplicar a diferentes atributos, como color, números o texto. 

La diferencia clave con los estilos es que las variables tienen la capacidad de cambiar entre diferentes definiciones según el tema o contexto en el que se utilicen. De esta forma, podremos : 

• Cambiar y diseñar en modos de contraste como claro, oscuro u otros.
• Estandarizar y alternar entre diferentes diseños.
• Adaptar y previsualizar diferentes textos de la interfaz en idiomas diferentes.
• Exportar e importar variables, lo que permite compartir y reutilizar fácilmente estas variables en diferentes proyectos.

Prototipos mejorados

Puedes crear prototipos realistas de manera rápida y eficiente utilizando características avanzadas como lógica condicional, expresiones matemáticas y variables. Estas herramientas te permiten diseñar prototipos con menos pasos y obtener resultados más precisos. Además, puedes realizar cambios rápidamente y ver una vista previa en tiempo real de cómo se verá este prototipo.

Esta novedad se complementa con las variables, ya que antes de su implementación era necesario duplicar marcos y conexiones en el prototipo para representar diferentes estados. 

Con las variables, se puede reducir significativamente la cantidad de marcos necesarios, ya que los cambios se pueden realizar mediante la modificación de los valores de las variables. Esto agiliza su proceso de creación y simplifica su mantenimiento.

Nuevas formas de aprovechar el diseño automático

Optimiza tu flujo de trabajo de diseño al reducir la necesidad de redimensionar elementos y enfocarte más en el proceso creativo. Con las nuevas funcionalidades del diseño automático, puedes organizar elementos automáticamente en una nueva línea y establecer límites mínimos y máximos para su tamaño, situación que anteriormente solo podíamos visualizar como propiedad del lenguaje CSS.

Esto significa que ya no tienes que preocuparte por ajustar manualmente cada elemento al diseñar, ya que el diseño automático se encargará de ello de manera inteligente. Además, puedes agrupar elementos relacionados y permitir que se envuelvan automáticamente a la siguiente línea, lo que facilita la creación de diseños más flexibles y responsivos.

Además, puedes establecer restricciones en cuanto al tamaño mínimo y máximo de los elementos, lo que te brinda mayor control sobre su apariencia y evita que se deformen o desborden en ciertas situaciones.

El aporte de las nuevas funciones de Figma

Las nuevas funciones de Figma tienen un gran impacto en la vida diaria de quienes utilizamos esta herramienta diariamente, ya que proporciona nuevas características y capacidades que agilizan y mejoran nuestros flujos de trabajo.

El Dev Mode, permite generar una colaboración más estrecha entre equipos, reduciendo las posibles fricciones entre un diseñador y un desarrollador, acercando aún más las interfaces diseñadas en Figma a un servicio o producto final. Las variables no se quedan atrás, permitiéndonos compartir y reutilizar fácilmente elementos en múltiples proyectos, lo que nos ahorra tiempo y esfuerzo.

Asimismo, los prototipos mejorados nos ayudan a reducir la complejidad de este proceso y permite una iteración más rápida y eficiente. Finalmente, el diseño automático, nos otorga la capacidad de optimizar nuestro flujo de trabajo reduciendo el tiempo que pueden tomar tareas un poco más tediosas. 

De esta manera, estas mejoras permiten que seamos más eficientes, creativos y nos centremos en la creación de experiencias excepcionales para las personas usuarias.