Config 2023: confira algumas novidades do Figma

O evento representou uma oportunidade ímpar para os participantes aprofundarem seus conhecimentos sobre as novidades do Figma, por meio de mais de 75 palestrantes especializados nas áreas de design, desenvolvimento e tecnologia.

A edição de 2023 da Conferência Config, promovida no mês de junho, destacou-se como um evento de relevância, reunindo especialistas em design e profissionais de desenvolvimento de todas as partes do globo. Realizado de forma virtual, o evento teve como sede a cidade de São Francisco.

Sem tempo para ler o conteúdo? Escute o áudio a seguir!

No decorrer desse encontro, foram lançadas novas ferramentas e recursos do produto. Uma das surpresas mais notáveis foi o anúncio da incorporação da Diagram, uma plataforma de design impulsionada pela tecnologia de inteligência artificial (IA). Essa aquisição carrega consigo a promessa de introduzir inovações, enriquecendo a experiência dos usuários e ampliando as perspectivas criativas.

Para aqueles que não acompanharam de perto as novidades da Config ou que desejam revisitar as recentes adições e aprimoramentos do Figma, não há motivo para preocupação. Resumimos de forma concisa as atualizações principais. Confira!

Auto layout 3.0: responsividade mais simples

O recurso de Auto Layout apresenta-se como uma funcionalidade implementável em quadros e componentes. Sua capacidade reside em permitir a concepção de projetos que se adaptam proporcionalmente conforme o conteúdo sofre modificações.

Este atributo se torna particularmente valioso em situações que exigem a adição de novas camadas à interface, a inserção de blocos de texto mais extensos ou a manutenção da disposição alinhada dos elementos na interface.

Usando o Auto Layout, temos a capacidade de desenvolver elementos de design flexíveis que se ajustam eficazmente em diferentes dispositivos, como botões e campos de entrada de texto.

Agora temos a capacidade de estabelecer intervalos de redimensionamento flexível para os itens, definindo limites de largura mínima e máxima redimensionável, os quais podem ser combinados harmoniosamente com o redimensionamento flexível.

Uma adição notável ao Auto Layout é a introdução da propriedade denominada “Wrap”, que possibilita a ‘envelopagem’ dos elementos presentes na interface. Além disso, há a opção de especificar os espaçamentos horizontais e verticais que se deseja aplicar.

Ainda falando do Auto Layout, dispomos igualmente da característica de Truncagem de Texto, que se mostra útil para adaptar o texto excessivamente longo a um quadro.

Essa funcionalidade oculta trechos do texto que excedem o espaço do quadro, indicando sua continuação por meio de reticências. Essas configurações podem ser localizadas nas opções de formatação de texto. Além disso, é possível especificar o limite máximo de linhas desejado.

Maior facilidade em criar com variáveis

Uma das notáveis inovações introduzidas são as Variáveis, que se apresentam como uma adição para aprimorar a experiência dos profissionais de design, simplificando tanto a gênese quanto a manutenção de diversos produtos. 

No contexto do Figma, elas funcionam como recipientes para valores, englobando elementos como tonalidades de preenchimento e tipos de visibilidade, que podem ser aplicados novamente em todos os projetos pertencentes a uma organização. O propósito é ampliar a consistência, de maneira análoga aos tokens de design.

Tal como ocorre com os estilos e componentes, as variáveis têm a possibilidade de ser compartilhadas nas bibliotecas utilizadas pelo grupo de designers. A simples atualização de um valor associado resulta em uma atualização automática de um componente.

Esta característica não apenas facilita a criação de produtos uniformes, mas também agiliza a atualização dos sistemas de design. Além disso, as variáveis podem ser aplicadas para a criação de diversos ‘modos’, tais como o modo escuro e o modo claro, englobando definições de estilo, espaçamento e muito mais.

Opções de Variáveis

São quatro as categorias de variáveis disponíveis: cores, números, cadeias de caracteres e booleanos. Cada uma destas categorias de variáveis encontra aplicação nas propriedades e elementos particulares da interface que está em processo de construção.

Coleções e grupos nas atualizações do Figma

A estruturação das variáveis e sua facilidade de localização no ambiente do Figma são possíveis por meio do emprego de coleções e grupos.

Uma coleção corresponde a uma agrupação de variáveis e seus modos correspondentes (claro e escuro). Ela ajuda na organização de variáveis que compartilham relações específicas. A título de exemplo, uma coleção pode ser usada para alocar texto em distintos idiomas, enquanto outra coleção poderia se ocupar dos valores espaciais.

Para uma organização mais aprofundada, é viável dispor as variáveis em grupos dentro das coleções. Tomando como exemplo, um grupo poderia abarcar as cores empregadas em textos, ao passo que um segundo grupo englobaria as cores aplicadas nos componentes.

Modos

Um modo implica uma série de valores destinados a uma variável que pertence a uma coleção, mantendo um valor para cada variável. Além disso, os modos desempenham o papel de representar os distintos contextos nos projetos.

Quando uma variável engloba várias definições, cada definição está associada a um modo específico, podendo ser claro ou escuro, por exemplo. No momento em que a variável é aplicada a uma propriedade de uma camada, a camada irá refletir o valor conforme o modo ativo no momento, viabilizando a alternância ágil entre projetos em contextos diversos.

Um exemplo ilustrativo consiste em uma variável de cor que abrange duas tonalidades diferentes: um tom de roxo para o modo claro e um tom de lilás para o modo escuro. Quando essa variável é aplicada a um elemento de texto, o texto surgirá em roxo ou lilás, conforme o modo selecionado.

Prototipação sem teias e otimizada

O Figma também introduziu atualizações substanciais no âmbito da prototipação, com o intuito de aprimorar a elaboração de interações nas interfaces dos produtos.

Essas atualizações abarcam variáveis, condicionais e expressões matemáticas, visando eliminar as conhecidas ‘teias azuis’, além de proporcionar a criação dos “modos”, permitindo adaptações mais versáteis do mesmo protótipo.

Antes da implementação das variáveis, os protótipos que envolviam estados variáveis, como a adição de itens a um carrinho, demandavam a duplicação de quadros e conexões para emular o fluxo desejado. Agora, é possível definir e ajustar os valores das variáveis, viabilizando a criação de protótipos dinâmicos com apenas um quadro e um número reduzido de interações.

Vale ressaltar que a capacidade de utilizar variáveis e condicionais nos protótipos está disponível exclusivamente nos planos profissionais ou superiores.

Mais algumas novidades do Figma!

O Figma também apresentou aprimoramentos em sua interface, incluindo a capacidade de localizar arquivos de maneira mais intuitiva e obter uma perspectiva geral de sua conta.

Dentro da plataforma, é possível aproveitar o campo de busca para localizar com facilidade arquivos, projetos e membros de suas equipes. Agora, é possível revisitar de forma ágil todos os arquivos que você acessou recentemente, bem como identificar os arquivos e projetos que foram compartilhados recentemente por outros usuários, tudo isso disponível na barra lateral esquerda na seção ‘Recents’.

Outra atualização é a possibilidade de realizar uma prévia das fontes antes de implementá-las. Esse recurso oferece um auxílio significativo ao processo de seleção da fonte que mais se alinha à proposta da interface, uma vez que o texto desempenha um papel crucial no design da interface. A seleção apropriada da fonte pode ter um impacto profundo na legibilidade e no atrativo visual do seu design.

Conclusão

As inovações apresentadas pelo Figma durante a edição deste ano da Config marcaram um avanço considerável na principal plataforma de design de interfaces. Com a introdução de melhorias nas ferramentas de prototipagem, automação e um foco no desenvolvimento, o Figma disponibilizou uma gama mais ampla de alternativas para profissionais de design e desenvolvedores, visando simplificar e agilizar a criação de produtos digitais.