Navegação com o UI3: a nova UI do Figma
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
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çãoCaso tenha acesso de |
||
Posição absolutaA 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 objetosOs 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áticoQuando 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áticoNas 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:
|
||
Modos de composiçãoOs 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údoO 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 componenteAs 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çõesAs 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 cantoO 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 arquivoO nome de um arquivo, seu projeto e o menu suspenso de ações do arquivo foram movidos para o painel de navegação. |
||
MáscaraUse 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çãoA 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 widgetsPara 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á-loMude 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 . |
||
GirarGirar ou inverter permite manipular objetos alterando sua orientação. Com um objeto selecionado, encontre a Posição e:
|
||
Exibir ou ocultar um objetoPara ocultar um objeto na tela, clique em próximo à Aparência. Para exibi-lo novamente, clique em . |
||
TextoAgora, Texto é chamado de Tipografia.
|
||
Modos das variáveisOs 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 varianteAs 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 vetorialPara 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:
|
||
Zoom/opções de visualizaçãoNo 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. |
Eu posso voltar ao antigo design?
Se você tiver dúvidas, é fácil voltar ao design antigo. Dentro de um arquivo de design, abra o menu de ajuda e clique em Voltar ao antigo UI.
Se decidir voltar mais tarde, você pode retornar a esse menu e experimentar a reformulação novamente sempre que desejar.