Cómo sacarle el máximo partido al plugin de Figma de Codigma
Hablemos claro: Codigma no “adivina” lo que querías hacer. Lee tu estructura en Figma. Si tu archivo está ordenado y las reglas son consistentes, la exportación suele salir mucho más limpia. Aquí tienes una guía rápida (de verdad aplicable) para evitar sorpresas y conseguir un resultado más mantenible.
1) Piensa como un motor de layout
El cambio más grande suele ser mental: Codigma no interpreta tu intención, interpreta tu estructura. Si las reglas de layout en Figma son claras, el código exportado normalmente también lo es.
Cuando el resultado sale “raro”, casi siempre es por una de estas razones: reglas mezcladas (Auto Layout + absolute), espaciados inconsistentes, o capas que no están agrupadas en frames lógicos.
Tip
Si no te gustaría que otra persona tuviera que editar ese archivo, al exportador tampoco le va a encantar. Primero orden, luego export.
2) Auto Layout que exporta bien
Auto Layout es el camino más rápido para un resultado responsive. Convierte tu diseño en reglas claras: dirección, spacing, alineación, padding y tamaños.
Ajustes esenciales (los “seguros”)
- Usa Auto Layout en contenedores (aunque hoy tengan un solo elemento).
- Da el espacio con padding del padre, no moviendo hijos con offsets “a ojo”.
- Usa spacing consistente (8 / 16 / 24 suele funcionar muy bien).
- Elige Fill/Hug con intención: Fill para elementos flexibles, Hug para elementos que se ajustan al contenido.
- No mezcles reglas dentro del mismo frame (mitad Auto Layout, mitad manual = problemas).
Estructura recomendada (simple y escalable)
- Frame de página (Fill / layout general)
- Frames de sección (Auto Layout, padding + gap consistentes)
- Componentes (Auto Layout, reglas claras de tamaño, nombres limpios)
Tip
Si algo es “responsive”, necesita una regla clara. Normalmente: el contenedor hace Fill y el contenido hace Hug (o se comporta de forma flexible).
3) Nombres y estructura para que el código se entienda
No es solo layout. La legibilidad importa mucho. Los nombres que pones en Figma suelen convertirse en la primera versión de tu estructura de componentes.
Qué funciona bien
- Nombra frames por propósito: Header, PricingCard, FeatureList, Sidebar.
- Nombra capas por rol: Title, Subtitle, Icon, PrimaryButton.
- Evita “Frame 123 / Group 9” en cualquier cosa que vayas a exportar más de una vez.
- No profundices la jerarquía sin necesidad: demasiados wrappers suelen ser señal de sobre-encapsulado.
Tip
Regla rápida: si no puedes explicar por qué existe un frame en una frase, probablemente no hace falta.
4) Componentes, variantes y un mini design system
Si quieres consistencia en varias pantallas, no empieces por pantallas. Empieza por bloques reutilizables: botones, inputs, cards, badges, items de lista.
Haz componentes de lo que se repite
- Botones (primary / secondary / disabled)
- Formularios (input, dropdown, checkbox)
- Cards (producto, feature, testimonio)
- Navegación (top bar, tabs, items de sidebar)
Las variantes ayudan a que el código refleje estados reales
Las variantes van genial para estados como default, hover, active, disabled, o para tamaños sm, md, lg. Si el componente ya trae estados reales en Figma, el flujo de exportación se vuelve mucho más fluido.
Checklist de mini design system (rápido, sin obsesión)
- Estilos de texto para títulos + body (con line-height consistente)
- Estilos de color para primary / neutral / background / border
- Reglas de spacing (8/16/24) usadas en todos lados
- Componentes para UI repetida
5) Qué seleccionar en Figma (y qué evitar)
La selección define el “límite” de lo que Codigma va a generar. En la mayoría de casos, el mejor resultado viene al seleccionar una unidad completa.
Buenas selecciones
- Pantalla completa (si ya está estable y bien estructurada)
- Un componente reutilizable (botón, card, modal, navbar)
- Una sección (hero, pricing, grid de features) que se sostenga por sí sola
Lo que suele ensuciar el output
- Trozo de UI (media card, un texto sin su contenedor)
- Capas superpuestas que dependen de positioning manual
- Capas ocultas “por si acaso” dentro de la selección
- Textos sin bounds claros (alineaciones que dependen de “aire”)
Tip
Si dudas, selecciona el frame padre que representa el bloque completo, no una colección de capas sueltas.
6) Un flujo simple para repetir siempre
Este flujo funciona tanto para componentes pequeños como para pantallas completas. La idea es ir rápido: exporta, revisa, ajusta estructura, vuelve a exportar.
- Elige una unidad (componente, sección o pantalla) y límpiala primero.
- Arregla reglas: Auto Layout, padding, spacing y Fill/Hug.
- Normaliza nombres para que el resultado se lea bien.
- Exporta con Codigma y revisa el output.
- Itera una vez: mejor ajustar estructura en Figma que “parchear” de entrada en el código.
- Escala: componentes → secciones → páginas.
Tip
Los equipos rápidos no “perfeccionan” Figma para siempre. Hacen una limpieza, exportan y solo refinan lo que afecta pantallas reales.
7) Problemas típicos y arreglos rápidos
“El spacing salió distinto”
- Revisa si el espacio viene de padding del padre (mejor) o de offsets raros en los hijos.
- Asegúrate de usar gaps consistentes (8/16/24) en vez de números mezclados.
“Algunas cosas no se estiran como espero”
- Confirma Fill container vs Hug contents en la capa correcta.
- Comprueba que el frame padre tiene una regla clara de ancho (fixed, fill o constraints).
“La jerarquía exportada es demasiado profunda”
- Quita wrappers que no aportan nada al layout.
- Evita mezclar groups/frames sin criterio: mejor frames con reglas claras.
“El código cuesta leerlo”
- Renombra frames y capas clave (Header, Card, Title, Button).
- Convierte UI repetida en componentes/variantes reales y vuelve a exportar.
FAQ
¿Exporto la pantalla completa o mejor por secciones?
Las dos opciones funcionan. Exporta la pantalla completa cuando el layout ya está “cerrado” y bien estructurado. Exporta por secciones (header, card, modal) si quieres bloques reutilizables y avanzar más rápido.
¿De verdad necesito Auto Layout para una exportación limpia?
Auto Layout es la forma más fácil de conseguir espaciado predecible y un comportamiento responsive estable. Si tus frames usan Auto Layout y reglas claras de Fill/Hug, el código suele salir más limpio.
¿Qué es lo mejor para iconos e imágenes?
Siempre que puedas, usa vectores para los iconos. En imágenes, colócalas dentro de frames claros y evita superposiciones innecesarias. Alineado y limpio = exportación más fiel.
¿Por qué el layout exportado se ve distinto a Figma?
Casi siempre es por reglas mezcladas (absolute + algo de Auto Layout), padding/spacing inconsistentes o textos sin límites bien definidos. Si limpias la estructura del frame y ajustas Fill/Hug, normalmente se arregla.
¿Cómo hago que las exportaciones sean consistentes en todo el producto?
Crea un mini sistema de diseño: estilos de texto y color compartidos, reglas de spacing (8/16/24), y componentes reutilizables con nombres claros. La consistencia en Figma suele convertirse en consistencia en el código.
¿Lo probamos?
Empieza por un componente que repites en todas partes (un botón o una card), límpialo una vez y exporta. La mejora se nota enseguida. Y a partir de ahí, construir el resto de pantallas se vuelve mucho más fácil.
¿Quieres más guías como esta? Mira el Blog de Codigma.