Layout automático Figma vs Flexbox e grade CSS: fechando a lacuna entre design e código
Como o layout automático Figma é mapeado para o flexbox e grade CSS (direção, lacuna, preenchimento, abraço, preenchimento, quebra) e onde eles diferem, para que os designs sobrevivam à transferência.
Ponto principal
O layout automático do Figma se comporta de maneira semelhante ao flexbox CSS: mapas de direção para direção flexível, espaço para espaço, preenchimento para preenchimento, "Abraçar conteúdo" para dimensionamento por conteúdo, "Preencher contêiner" para crescimento flexível ou largura total e quebra para flex-wrap. O fluxo da grade do layout automático corresponde à grade CSS. As diferenças aparecem nos tamanhos mínimo e máximo, quebra automática de texto, alinhamento da linha de base e pontos de interrupção responsivos, portanto, verifique-os explicitamente na transferência.
O mapeamento
O guia do Figma descreve quadros de layout automático que organizam os filhos por direção, espaçamento, preenchimento e alinhamento, com fluxos horizontais, verticais e de grade e um envoltório opcional. Cada um tem um equivalente CSS próximo:
Abrace, preencha e conserte
Em Figma, um quadro definido para abraçar o conteúdo é redimensionado com base em seus filhos, e um conjunto filho para preencher o contêiner é ampliado para preencher o espaço disponível; Figma observa que se um filho estiver definido para preencher, o pai não poderá mais abraçar nessa direção. Em CSS os equivalentes são dimensionamento baseado em conteúdo (automático ou ajuste de conteúdo) e flex: 1 ou largura: 100%. O guia flexbox do MDN explica como flex-grow, flex-shrink e flex-basis distribuem espaço, que é o lado CSS da mesma ideia.
Onde a lacuna aparece
A maioria dos bugs de transferência vem de algumas áreas:
- Tamanhos mínimo e máximo: defina-os em ambos os lugares, ou o texto e os contêineres se comportarão de maneira diferente nos extremos.
- Texto: a altura da linha, quebra automática e truncamento diferem entre a renderização de texto Figma e o navegador.
- Alinhamento da linha de base: CSS pode alinhar pela linha de base do texto; verifique como isso foi planejado.
- Filhos absolutos: "Ignorar layout automático" de Figma (anteriormente posição absoluta) é mapeado para posição: absoluto em um pai posicionado.
- Capacidade de resposta: os quadros de layout automático não possuem pontos de interrupção; defina como os layouts mudam em cada largura.
Grades
Use o fluxo de grade do layout automático para layouts bidimensionais verdadeiros e mapeie-o para a grade CSS, que MDN descreve como um sistema para organizar o conteúdo em linhas e colunas. As linhas flexíveis agrupadas não são iguais a uma grade: os itens em uma linha agrupada não são alinhados em colunas.
O movimento é a maior lacuna
O layout mapeia razoavelmente bem de Figma a CSS. O movimento não: as transições do protótipo precisam ser reconstruídas no código e os estados geralmente se perdem. Essa é a lacuna das ferramentas com tempos de execução, como ExodeUI (nós fazemos) e Rive, endereço para componentes interativos.
Princípios-chave para lembrar
- Direção de layout automático, lacuna, preenchimento e mapa de quebra para flexbox
- Abraço ≈ dimensionamento de conteúdo; Preencher ≈ flex: 1 ou 100% largura
- O fluxo da grade é mapeado para a grade CSS
- Verifique tamanhos mínimo/máximo, texto, linhas de base e pontos de interrupção na transferência
- Movimento e estados são a maior lacuna entre design e código
Perguntas frequentes
Fontes
- Guide to auto layout — Central de Ajuda Figma
- Basic concepts of flexbox — Documentos da Web MDN
- Basic concepts of grid layout — Documentos da Web MDN