Como usar: Figma CSS para Webflow
- No Figma, selecione uma camada e abra Dev Mode → Code → CSS (ou clique com o botão direito → Copy as → Copy as code → CSS). Se quiser, copie várias camadas de uma vez.
- Cole o CSS aqui. Cada comentário
/* Nome da camada */vira um bloco separado. - Escolha se quer converter px para rem e se quer manter tamanhos fixos (normalmente você não quer).
- Copie valores individuais da tabela do painel Style, ou o CSS limpo para código personalizado.
Por que o CSS do Figma precisa de limpeza antes do Webflow
O Figma gera CSS que descreve a camada exatamente como foi desenhada na tela — incluindo position: absolute com coordenadas left/top, larguras e alturas fixas em pixels e resquícios de auto layout, como flex: none; order: 0; flex-grow: 0;. Colar isso no Webflow gera layouts rígidos que quebram em telas menores. O que você realmente precisa na entrega de design são as decisões de design: tamanhos de fonte, pesos, alturas de linha, cores, espaçamentos, raios e sombras.
O que é convertido
| Saída do Figma | Vira | Por quê |
|---|---|---|
font-size: 32px | 2rem | O rem respeita o tamanho de fonte definido pelo usuário no navegador e escala de forma consistente. |
line-height: 120% ou 38.4px | 1.2 | O line-height sem unidade escala com o tamanho da fonte em todos os lugares onde é herdado. |
letter-spacing: -0.64px | -0.02em | O espaçamento em em continua proporcional quando o tamanho da fonte muda (tipografia fluida). |
var(--Text-Primary, #141827) | #141827 + lista de variáveis | Mostra quais variáveis do Figma recriar no painel de Variables do Webflow. |
position: absolute; left; top, flex: none | removido | Posicionamento da tela, não intenção de layout. |
Mapeamento para o painel Style do Webflow
Os valores são agrupados pela seção do painel Style onde você os insere: Layout (display, direction, gap, alinhamento), Spacing (padding, margin), Size, Typography, Backgrounds, Borders e Effects (sombras, opacidade). No Webflow você pode digitar unidades direto nos campos, então 2rem ou 1.2 funcionam como estão.
Indo além
Para espaçamentos e tipografia que se adaptam entre mobile e desktop, converta pares de valores do Figma em clamp() fluido com o Clamp Calculator. Para conversões pontuais, use o PX to REM, e para ícones, o SVG to Webflow.
Também pesquisado como: figma para webflow, figma dev mode css, painel style webflow, px para rem, line height, letter spacing, handoff de design, converter css figma webflow.
Ferramentas que combinam com: Figma CSS para Webflow
- Conversor de Cores — Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta pronta de 50 a 950.
- Gerador de Box Shadow — Empilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao vivo e copie o CSS de box-shadow ou text-shadow.
- Redirecionamentos WordPress para Webflow — Ao migrar um site do WordPress para o Webflow, quase todas as URLs mudam: caminhos de posts com data, arquivos /category/, barras no final e slugs de páginas.
- HTML e CSS para Webflow — Cole o HTML e o CSS, clique em Copy to Webflow e cole no Designer — você recebe Div Blocks, Headings, Links, Imagens e Listas reais, com classes, combo classes, breakpoints para tablet e mobile e estados hover, em vez de um grande Code Embed.
Perguntas frequentes
Onde encontro o CSS no Figma?
Por que largura e altura são removidas?
Posso colar várias camadas de uma vez?
/* Nome da camada */ inicia um novo bloco, e cada bloco ganha sua própria tabela no painel Style.