Quem pode usar este recurso

Disponível em todos os planos na versão beta limitada
Caso não tenha acesso ao Figma reformulado, não se preocupe: essas atualizações serão lançadas nos próximos meses, e caso seja novo no Figma e esteja usando automaticamente a versão reformulada, recomendamos nosso guia para explorar arquivos de design.

Na Config 2024, apresentamos um Figma reformulado, chamado UI3. Este guia foi desenvolvido para as pessoas que estão migrando do design anterior do Figma e querem ver como as coisas mudaram.

Por que reformulamos o Figma

O Figma ficou mais complexo com o passar do tempo, e a UI3 é um esforço para simplificar sua experiência de design. Nossa intenção é fazer com que o Figma Design seja mais focado para designers e mais acessível para o público geral. Também estamos criando uma base consistente para os produtos existentes e para os produtos que ainda estão por vir.

Esse novo design:

Oferece mais controle sobre a interface, com painéis que podem ser redimensionados ou recolhidos
Dá mais ênfase ao seu trabalho na tela
Torna os recursos mais intuitivos, melhorando seu posicionamento, agrupamento e como eles se adaptam a diferentes contextos
Adiciona consistência com nossos outros produtos, facilitando a troca entre Figma Design, FigJam, Dev Mode e Figma Slides

Dica: gostaria de saber mais sobre a reformulação? Confira nosso post no blog: Inside the redesigned Figma, where your work takes center stage

O que mudou

Painel de navegação

Reorganizamos o painel de navegação no lado esquerdo da tela para abrigar todas as informações sobre seu arquivo e facilitar o uso.

Minimizar a UI

Caso precise de um pouco mais de espaço na tela, agora você pode minimizar a UI no painel de navegação. Clique em Minimizar UI para recolher o painel de navegação e o painel de propriedades.

Caso tenha selecionado algo na tela com a UI minimizada, o painel de propriedades abrirá temporariamente o backup para que você possa acessar os controles de cada propriedade

Nome e localização do arquivo

Clique no ícone suspenso próximo ao nome do arquivo para realizar ações nele, como movê-lo, publicar uma biblioteca, criar um rascunhoou mostrar o histórico de versões.

Aba Ativos

Facilitamos a pesquisa, navegação e inserção de componentes pela aba Ativos.

Barra de ferramentas

A nova barra de ferramentas move as ferramentas de design para a parte inferior do editor. Isso libera mais espaço de trabalho na tela e introduz novos recursos de IA por meio do novo menu de ações.

Observação: os recursos de IA no Figma Design serão lançados nos próximos meses. Saiba mais →

Ações

Ações é um item totalmente novo na barra de ferramentas para ajudar você a passar da imaginação à realidade com mais rapidez. A partir daí, você pode acessar todas as ferramentas de IA do Figma, ações comuns de produtividade, plugins e widgets, componentes e muito mais.

Entrar no Dev Mode

Agora você pode acessar o Dev Mode na barra de ferramentas, facilitando a troca entre os modos no Figma Design.

Painel de propriedades

A visualização Design do painel de propriedades está mais fácil de ser usada e agora as propriedades são agrupadas para combinar fluxos de trabalho mais modernos.

Você também pode redimensionar o painel de propriedades, que é útil para trabalhar com componentes com nomes longos.

Marcadores de propriedades

Novidade no UI3, agora você pode ativar os Marcadores de propriedades para explicitar o que cada propriedade faz.

Para ativar os marcadores de propriedades, clique no menu suspenso próximo à porcentagem de zoom 100% no painel de propriedades e selecione Marcadores de propriedades.

Ações de seleção

Agora o painel de propriedades apresenta uma linha de cabeçalho com ações que você pode realizar em um objeto selecionado.

Por exemplo, você pode encontrar os botões para aplicar uma máscara, criar um componente ou realizar uma operação booleana; ou eles devem estar ocultos no menu Mais.

Layout

auto-layout-callout (1).png Layout contém todas as propriedades relacionadas ao layout de um objeto, como largura e altura.

Ao clicar em Usar layout automático em uma estrutura, o marcador Layout muda para Layout automático e todas as propriedades de layout automático se tornam disponíveis.

Posição

Em Posição, agora você pode acessar todas as propriedades relacionadas à posição de um objeto na tela, incluindo as restrições.

Dica: agora você pode se destacar no painel de propriedades. Quando as pessoas entrarem em destaque, minimizaremos os painéis esquerdo e direito, além da barra de ferramentas, para que você tenha mais espaço para mostrar seu trabalho.

Para onde um recurso foi movido?

Confira a lista a seguir para ver tudo o que foi movido e onde você pode encontrá-lo.

	Design antigo	Reformulação
Pedir acesso de edição Caso tenha acesso de `visualizador` a um arquivo e queira editá-lo, você pode solicitar acesso de edição clicando em Pedir para editar na barra de ferramentas.
Posição absoluta A Posição absoluta agora se chama Ignorar layout automático. Ao ignorar um layout automático, manualmente você pode posicionar um objeto dentro de uma estrutura de layout automático sem seguir a estrutura de layout automático. Para ignorar o layout automático, selecione uma estrutura secundária de uma estrutura de layout automático e clique em no painel de propriedades.
Alinhar objetos Os controles de alinhamento ajudam a alinhar um objeto à sua camada principal ou a alinhar vários objetos entre si. Selecione mais de um objeto e clique em uma das ferramentas de alinhamento em Posição no painel de propriedades.
Layout automático Quando você usa o layout automático em uma estrutura, ela se ajusta dinamicamente às alterações de conteúdo e aos diferentes tamanhos de tela. Para usar o layout automático em uma estrutura, clique em na seção Layout do painel de propriedades.
Valores de largura e altura do layout automático Nas estruturas de layout automático, agora os valores de largura e altura são combinados com o comportamento de redimensionamento. Você pode encontrar esses valores: Entre parênteses ao lado do comportamento de redimensionamento de largura e altura ou ao passar o mouse quando o painel não é largo o suficiente Na pílula de dimensões sob uma estrutura de layout automático selecionada na tela
Modos de composição Os Modos de composição definem como você deseja que duas camadas sejam mescladas. Para aplicar um modo de composição, selecione um objeto, clique em próximo à Aparência e selecione um modo.
Recorte de conteúdo O Recorte de conteúdo permite que você oculte partes de uma camada que se estendem além dos limites da estrutura principal. Use a caixa de seleção Recorte de conteúdo em Layout para escolher se deseja recortar ou mostrar o conteúdo.
Propriedades do componente As Propriedades do componente são os aspectos alteráveis de um componente. Você pode definir quais partes de um componente outras pessoas podem alterar vinculando-as a propriedades específicas. Caso um componente tenha propriedades do componente disponíveis, você pode encontrá-las abaixo do nome da estrutura no painel de propriedades.
Restrições As Restrições informam ao Figma como as camadas devem se comportar quando você redimensiona suas estruturas principais. Com uma camada secundária selecionada, o ícone Restrições aparecerá próximo aos valores de posição X e Y na seção Posição no painel de propriedades.
Raio do canto O Raio do canto é uma propriedade que permite a você arredondar os cantos de um objeto. Com um objeto selecionado, clique no campo Raio do canto em Aparência e altere o valor. Você também pode clicar em para modificar cada canto individualmente.
Nome do arquivo, nome do projeto e ações do arquivo O nome de um arquivo, seu projeto e o menu suspenso de ações do arquivo foram movidos para o painel de navegação.
Máscara Use uma máscara para mostrar áreas específicas de um objeto enquanto oculta o restante. Com um objeto selecionado, clique em Usar como máscara para criar um grupo de máscaras com o objeto como máscara. Dependendo do número de ações disponíveis, Usar como máscara pode estar no menu Mais.
Multiedição A Multiedição permite selecionar várias camadas em estruturas, grupos e seções e aplicar as mesmas edições em massa. Clique em no painel de propriedades para habilitar a multiedição.
Plugins e widgets Para acessar plugins e widgets, abra Ações na barra de ferramentas e clique na aba Plugins e widgets.
Redimensione a largura ou a altura de um objeto ou redimensione para ajustá-lo Mude a largura e a altura de um objeto em Layout. Você também pode redimensionar uma estrutura para ajustar suas camadas secundárias clicando no ícone .
Girar Girar ou inverter permite manipular objetos alterando sua orientação. Com um objeto selecionado, encontre a Posição e: Clique em para girar um objeto 90° para a direita Clique em para inverter horizontalmente Clique em para inverter verticalmente
Exibir ou ocultar um objeto Para ocultar um objeto na tela, clique em próximo à Aparência. Para exibi-lo novamente, clique em .
Texto Agora, Texto é chamado de Tipografia. Agora você pode redimensionar uma camada de texto em Layout. O espaçamento de parágrafos foi movido para Composição tipográfica. Em Tipografia, clique em para abrir o painel Composição tipográfica.
Modos das variáveis Os Modos das variáveis representam os diferentes contextos de um design. Um modo contém uma lista de valores para uma variável dentro de uma coleção. Se uma coleção de variáveis tiver vários modos, você poderá alternar os modos em camadas e elementos para alterar rapidamente os designs para diferentes contextos. Contanto que um objeto esteja vinculado a uma variável com vários modos, você pode clicar em próximo à Aparência para alternar o modo das variáveis.
Adicionar uma variante As Variantes permitem agrupar e organizar componentes semelhantes em um único contêiner. Ao inserir uma instância de componente, você pode alternar entre as propriedades da variante do conjunto de componentes. Para adicionar uma variante, selecione um componente principal e clique em Adicionar uma variante próximo ao nome do componente no painel de propriedades.
Editar um caminho vetorial Para editar um caminho vetorial, clique em Editar objeto próximo a Vetor. Se você selecionar vários caminhos vetoriais, o menu de operações booleanas será exibido. Nesse menu, você pode realizar as seguintes operações: Unir Subtrair Intersectar Excluir
Zoom/opções de visualização No menu Zoom/opções de visualização, você pode ajustar suas configurações de zoom ou configurar opções de visualização, como grades de layout ou cursores multiplayer.