Como mejoras incluyen actualizaciones para diseñadores, um novo modo focado nos desenvolvedores e muito mais.

Recursos impresionantes de Figma foram anunciados en la edición 2023 de Config.

No es una novedad que Config, evento organizado por Figma, es uno de los principales momentos del año para diseñadores de interfaz. Una conferencia, realizada en 2023 los días 21 y 22 de junio, merece atención no sólo pelos anuncios de novos recursos na ferramenta, pero también porque permite acompañar conteúdos que no se limitan apenas al campo de la UI.

No puedo parecer, pero ele é um CEO. E é de Figma. É Dylan Field.

Esse año, o cronograma de palestras e las manos en proporcionalou, pra quem pudesse participar, de agendas focadas em pesquisa, design de conteúdo e de gerenciamento de produto. Além disso, é sempre ótimo perceber que algunos profissionais que você se inspira podem estar (mes que virtualmente) mais pertinho de você, né?

Nesse artigo, quería falar un pouquinho sobre los principios destaques anunciados en la abertura del evento. E o mais bacana é que estas novedades já estão disponíveis pra toda comunidade de usuários dessa belezinha. ¿Seu Figma atualizou aí?

Una funcionalidad superpoderosa con algunos recursos extras que merecen desaparecer en 2023. Ahora, es posible definir la longitud mínima y máxima del marco, además de adaptarlo o ajustarlo a una configuración específica de chamada “wrap”.

Novedades de Auto Layout: límites de longitud y altura, además del modo de organización “wrap”.

Esta combinação tem todo pra transformar nuestros diseños en verdadeiros sonhos responsivos! É de fazer CHO-RAR a possibilidade de redimensionar un marco y todos los elementos se ajustarem às nuevas restricciones de forma súper rápido!

Cuando el CEO Dylan Field comenta que aún no está lanzando una funcionalidad nativa para la creación de tokens de diseño, confiesa que se sintió poco frustrado. Mas, verdade seja dita: o recurso recém-introduzido, chamado de “variáveis”, promete ser algo promisor cuando formos trabalhar em nossos Design Systems.

Variáveis ​​são usadas para criar diseños adaptables. E sim, ellas podem ser exportadas como tokens!

É claro, todavía podrás definir tokens para núcleos, tipografía, arreglo de bordes y espacio. Así que, con tantas variaciones, vai ser posible definir otros elementos como variables y transformar los protótipos casi como en un paso de mágico! Eles vão ajudar a gente, por ejemplo, a alterar entre modos claros y oscuros, además de ofrecer soporte a otros temas, deixando toda la experiencia de diseñar telas aún más flexibles.

Vamos ser sinceros: se você nunca transformou seu protótipo em uma cena de Homem Aranhacon una cantidad incontable de “teias azuis” de conexiones exigidas en telas más complejas, entonces está prototipando el jeito errado. (risos).

Imágenes meramente ilustrativas, más basadas en fatos reales.

¡Tá, no… Tavá! É que ahora, con el uso del recurso das variáveis, o Figma encontró una manera de ayudarnos a construir protótipos avanzados con mucha más facilidad.

¿Vamos de ejemplo? Imagine que tiene un proyecto que tiene una página con una lista de productos y otros con sus respectivos detalles. Abrir todos los detalles con imágenes y texto adecuados requerirá duplicar todas esas telas y sustituirlas manualmente para preparar un prototipo.

Protótipos mais realistas y con menos etapas, marcos y conexiones.

Cuando usted define variaciones para imágenes o textos, será posible preencher cada página con estos elementos y agregar registros, condiciones y funciones como si una gente pudiera programar no protótipo. Como posibilidad de ofrecer al diseñador todo el poder hacer “if” y “else”, o Figma foi longe demais!

El proceso de traspaso — etapa cuando una persona diseñadora pasa según las instrucciones de su diseño para el tiempo de desarrollo — Es rápido y fácil de ser feito no Figma, pero a veces puede ser un poco confuso cuando no te familiarizas con el hardware. Com uma pequena melhoria, a opção chamada “marcar como listo para desarrollo” vem pra nos ayudar a destacar o que é mais importante para o time de engenharia.

Essa nem eu acreditei. ¡Tive que tirar una foto de la tela y espalhar pros colegas diseñadores!

Disponible en Beta, el modo Dev es otra función bacana presentada en la abertura de Config y muestra que los objetivos de la compañía también están alineados con recursos para auxiliar los ingenieros a implementar proyectos con mayor precisión. El modo Dev transforma nuestra herramienta de diseño favorita en una solución avanzada para la transferencia.

oesModo Dev: un espacio para traducir el diseño en código con mayor rapidez.

Sin embargo, los desarrolladores no solo pueden inspeccionar núcleos o dimensionar elementos con mayor precisión. Eles também vão poder alterar valores de medidas y mejorar trechos de código, se beneficiando das variáveis ​​de tokens de design y defini-las no código. Más un gran paso para nuestros sistemas de diseño.. Com isso, acredito que além do recurso em si, os plugins que estarán disponibles no modo Dev poderão colaborar positivamente na melhoria do fluxo de trabalho dos desenvolvedores.