Cómo usar: Figma CSS a Webflow
- En Figma, selecciona una capa y abre Dev Mode → Code → CSS (o haz clic derecho → Copy as → Copy as code → CSS). Si quieres, copia varias capas a la vez.
- Pega el CSS aquí. Cada comentario
/* Nombre de la capa */se convierte en su propio bloque. - Elige si quieres convertir px a rem y si quieres mantener los tamaños fijos (normalmente no conviene).
- Copia valores individuales de la tabla del panel Style o el CSS limpio para código personalizado.
Por qué el CSS de Figma necesita limpieza antes de Webflow
Figma genera CSS que describe la capa exactamente como se dibujó en el lienzo, incluyendo position: absolute con coordenadas left/top, anchos y altos fijos en píxeles, y restos de auto-layout como flex: none; order: 0; flex-grow: 0;. Si copias eso en Webflow obtendrás diseños rígidos que se rompen en pantallas pequeñas. Lo que realmente necesitas del handoff de diseño son las decisiones de diseño: tamaños de texto, grosores, alturas de línea, colores, espaciados, radios y sombras.
Qué se convierte
| Salida de Figma | Se convierte en | Por qué |
|---|---|---|
font-size: 32px | 2rem | rem respeta el tamaño de fuente del navegador del usuario y escala de forma consistente. |
line-height: 120% o 38.4px | 1.2 | El line-height sin unidades escala con el tamaño de fuente en todos los elementos que lo heredan. |
letter-spacing: -0.64px | -0.02em | El interletrado en em se mantiene proporcional cuando cambia el tamaño de fuente (tipografía fluida). |
var(--Text-Primary, #141827) | #141827 + lista de variables | Muestra qué variables de Figma debes recrear en el panel Variables de Webflow. |
position: absolute; left; top, flex: none | eliminado | Posicionamiento del lienzo, no intención de layout. |
Correspondencia con el panel Style de Webflow
Los valores se agrupan según la sección del panel Style donde los introduces: Layout (display, dirección, gap, alineación), Spacing (padding, margin), Size, Typography, Backgrounds, Borders y Effects (sombras, opacidad). En Webflow puedes escribir unidades directamente en los campos, así que 2rem o 1.2 funcionan tal cual.
Ir más allá
Para espaciados y tipografía que se adapten entre móvil y escritorio, convierte pares de valores de Figma en clamp() fluido con el Clamp Calculator. Para conversiones individuales usa PX to REM, y para iconos usa SVG to Webflow.
También se busca como: figma a webflow, css de figma, modo dev figma css, panel style webflow, px a rem, line height, letter spacing, handoff de diseño.
Herramientas que combinan con: Figma CSS a Webflow
- Conversor de colores — Pega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante todos los demás formatos, además de una paleta 50–950 lista para usar.
- Generador de Box Shadow — Apila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre una tarjeta en vivo, y luego copia el CSS de box-shadow o text-shadow.
- Redirecciones de WordPress a Webflow — Migrar un sitio de WordPress a Webflow cambia casi todas las URLs: rutas de blog con fecha, archivos /category/, barras finales y slugs de páginas.
- HTML y CSS a Webflow — Pega el HTML y su CSS, haz clic en Copiar a Webflow y pega en el Designer: obtendrás Div Blocks, Headings, Links, Images y Lists reales, con clases, combo classes, breakpoints para tablet y móvil y estados hover, en lugar de un único Code Embed.
Preguntas frecuentes
¿Dónde encuentro el CSS en Figma?
¿Por qué se eliminan el ancho y el alto?
¿Puedo pegar varias capas a la vez?
/* Nombre de la capa */ inicia un bloque nuevo, y cada bloque tiene su propia tabla en el panel Style.