Vídeo tutorial: organizar e renomear camadas automaticamente
Use a aba Tidy para transformar um grupo desorganizado de camadas do Figma em um canvas e uma lista de camadas organizados. O Tidy consegue detectar o fluxo visual da seleção, alinhar as camadas a uma grade de espaçamento, fazer a ordem das camadas corresponder à posição delas no canvas, renomear frames com números sequenciais e atualizar o texto de paginação de apresentações.
Preparar a seleção
- Em um arquivo do Figma Design, selecione as camadas que você quer organizar.
- Confira se as camadas selecionadas são irmãs, com o mesmo pai.
- Abra o TinyImage e selecione a aba Tidy.
O status da seleção mostra quantas camadas estão prontas e qual pai as contém. O Tidy não move nem reordena camadas dentro de um pai com Auto Layout; nesse caso, selecione camadas no canvas ou dentro de um frame comum.
Escolher as ações do Tidy
Abra Actions e ative qualquer combinação destas opções:
Alinhamento em grade
Detecta o layout de linhas ou colunas mais evidente e alinha as camadas selecionadas usando o espaçamento horizontal e vertical definido em Preferences. O Tidy tolera pequenos desvios e camadas de tamanhos diferentes quando elas compartilham uma borda ou um centro visual. Esta é a única ação ativada por padrão.
Renomeação
Adiciona números sequenciais com base na posição de cada camada no canvas. Com o número inicial padrão 000, as camadas recebem os nomes 000, 001, 002 e assim por diante.
Ordem das camadas
Reordena as camadas selecionadas no painel Layers do Figma para corresponder à ordem visual delas no canvas. As camadas selecionadas continuam juntas no topo da pilha de camadas do pai.
Paginação de apresentações
Encontra as camadas de texto correspondentes dentro de cada camada selecionada e substitui o texto delas por um número da ordem no canvas, começando em 1: 1, 2, 3 e assim por diante. Ative Leading zero em Preferences para usar 01, 02, 03 e assim por diante.
Configurar as preferências do Tidy
Abra Preferences para configurar como as ações ativadas são executadas.
| Preferência | O que ela controla |
|---|---|
| Grid spacing | O espaçamento horizontal e vertical entre as camadas alinhadas. Os dois têm 100 px por padrão. |
| Layout | Auto detecta o fluxo visual. Escolha Rows ou Columns para substituí-lo. |
| Wrap component instances | Coloca as instâncias selecionadas dentro de frames do mesmo tamanho quando o alinhamento em grade é executado. |
| Pager variable | O nome exato da camada de texto de paginação a ser atualizada. O padrão é {current}. |
| Pager number | Adiciona um zero à esquerda aos valores de paginação, gerando 01, 02, 03 e assim por diante. |
| Starting frame number | O primeiro valor de {n} e a quantidade de dígitos usada por {n} e {total}. O padrão é 000. |
| Rename strategy | Substitui os nomes existentes, junta o número a cada nome ou aplica um padrão personalizado. |
Detecção automática do layout
O layout padrão Auto compara as faixas visuais horizontais e verticais que já existem na seleção. Uma lista horizontal ou uma grade larga é organizada em linhas, e uma lista vertical ou uma grade alta é organizada em colunas. O Tidy reconhece camadas alinhadas pelo topo, pelo centro ou pela base, então pequenos desvios e frames de tamanhos diferentes continuam agrupados de forma natural.
Escolha Rows ou Columns quando quiser forçar uma ordem de leitura específica em vez de usar o fluxo detectado.
Estratégias de renomeação
- Replace usa o número sequencial como o nome completo da camada, como
000. - Merge junta o número e o nome existente, como
000_Home. - Custom pattern mistura o seu próprio texto com variáveis de nome opcionais. Use para controlar exatamente onde os números e os nomes existentes das camadas aparecem.
Variáveis de nome
Digite qualquer texto em Name pattern e adicione variáveis onde os valores delas devem aparecer. As variáveis são opcionais, então você também pode aplicar o mesmo nome fixo a todas as camadas selecionadas.
| Variável | O que ela adiciona |
|---|---|
{n} | O número sequencial da ordem no canvas, completado com zeros para corresponder a Starting frame number. |
{total} | O número de camadas selecionadas, completado com zeros até a mesma quantidade de dígitos de {n}. |
{name} | O nome existente da camada. |
{parent} | O nome da camada pai em comum. Nas camadas de nível superior, é o nome da página do Figma. |
{type} | O tipo da camada, como Frame, Instance ou Component Set. |
{page} | O nome da página atual do Figma. |
{row} | O número da linha visual da camada, começando em 1. |
{column} | O número da coluna visual da camada, começando em 1. |
Por exemplo, com Starting frame number definido como 001:
| Padrão de nome | Exemplo de resultado |
|---|---|
{n} Client Name | 001 Client Name |
Client Name {n} | Client Name 001 |
{n} {name} | 001 Home |
{n} of {total} {name} | 001 of 024 Home em uma seleção de 24 camadas |
{parent} — {n} {name} | Client Screens — 001 Home |
{page} / {type} / {name} | Presentation / Frame / Home |
{n} Row {row}, Column {column} | 001 Row 1, Column 1 |
Client Name | Client Name em todas as camadas selecionadas |
Executar o Tidy
Depois de revisar Actions e Preferences, selecione Tidy n Layers. O TinyImage aplica todas as ações ativadas à seleção atual e informa quantas camadas foram organizadas.
Use o comando Undo normal do Figma se quiser restaurar as posições, os nomes, a ordem das camadas, os frames de agrupamento e os valores de paginação anteriores.
O Auto funciona melhor quando a seleção já sugere um fluxo visual. Se um layout propositalmente irregular for detectado de um jeito diferente do esperado, escolha Rows ou Columns em Preferences.
A fonte usada pelas camadas de texto de paginação correspondentes precisa estar disponível no Figma para que o TinyImage possa atualizar os caracteres.