De Figma a CSS

Figma es la herramienta de diseño de interfaces más usada.

Figma es la herramienta de diseño de interfaces más usada. Casi todo lo que ves en un diseño de Figma tiene su equivalente en CSS.

En FigmaEn CSS Auto layout horizontal o verticaldisplay: flex con flex-direction Espaciado entre elementos (gap)gap Relleno (padding)padding Restricciones (constraints) y Fill containerwidth: 100%, flex: 1 o Grid Variables de color y de númeroPropiedades personalizadas (--color-primario) Estilos de textoClases con font-family, font-size, line-height Efectos: sombra, desenfoquebox-shadow, filter: blur() Componentes y variantesComponentes con clases y estados (:hover, .activo)

Selecciona un elemento y abre el panel de inspección (o el modo para desarrollo): verás medidas, colores y un fragmento de CSS. No copies el CSS tal cual. Figma da medidas fijas en píxeles; tú las pasas a rem, % o fr para que el diseño se adapte. Lleva los colores y tamaños repetidos a variables en :root. Exporta iconos e ilustraciones como SVG y las fotos como WebP o AVIF.

Las transiciones de un prototipo de Figma (Smart animate, duraciones, curvas) se escriben con transition y @keyframes. Apunta la duración y la curva (ease-out, spring) del prototipo y úsalas en tu CSS.

Introducción

Figma es la herramienta de diseño de interfaces más usada. Casi todo lo que ves en un diseño de Figma tiene su equivalente en CSS.

Paso a paso

Prototipos y animación

CSS

De Figma a CSS

Figma es la herramienta de diseño de interfaces más usada.

¿Cuánto sabes de CSS?

📘 Teoría

Introducción

Figma es la herramienta de diseño de interfaces más usada. Casi todo lo que ves en un diseño de Figma tiene su equivalente en CSS.

En Figma	En CSS
Auto layout horizontal o vertical	`display: flex` con `flex-direction`
Espaciado entre elementos (gap)	`gap`
Relleno (padding)	`padding`
Restricciones (constraints) y Fill container	`width: 100%`, `flex: 1` o Grid
Variables de color y de número	Propiedades personalizadas (`--color-primario`)
Estilos de texto	Clases con `font-family`, `font-size`, `line-height`
Efectos: sombra, desenfoque	`box-shadow`, `filter: blur()`
Componentes y variantes	Componentes con clases y estados (`:hover`, `.activo`)

Paso a paso

Selecciona un elemento y abre el panel de inspección (o el modo para desarrollo): verás medidas, colores y un fragmento de CSS.
No copies el CSS tal cual. Figma da medidas fijas en píxeles; tú las pasas a rem, % o fr para que el diseño se adapte.
Lleva los colores y tamaños repetidos a variables en :root.
Exporta iconos e ilustraciones como SVG y las fotos como WebP o AVIF.

Prototipos y animación

Las transiciones de un prototipo de Figma (Smart animate, duraciones, curvas) se escriben con transition y @keyframes. Apunta la duración y la curva (ease-out, spring) del prototipo y úsalas en tu CSS.

🧰 Recursos

Enlaces útiles

web.dev Learn CSS CSSWG Drafts MDN CSS MDN Layout Cookbook

Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS

Recursos del curso 94

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 92

Anclar un elemento a otro

Lección 94

CSS: cierre del curso y siguientes pasos

›