Variables de Figma para Acelerar la Maquetación en un 50%

Variables de Figma desde bibliotecas UI para acelerar el desarrollo frontend

Los desarrolladores dedican hasta un 50% de su tiempo a descifrar especificaciones de diseño en Figma: términos ambiguos como flow, espaciados y valores de color duplicados, y sin conexión directa con la base de código. La solución? Usar variables de bibliotecas UI consolidadas (Tailwind CSS, Bootstrap, MUI) directamente dentro de Figma. Esto convierte el diseño en un sistema vivo: el desarrollo frontend se vuelve tan sencillo como aplicar clases de utilidad.

Por ejemplo, considera un modal con título, subtítulo, campo de entrada y botón. Sin variables, el diseñador ve padding: 32px, background: #F9F9F9; el desarrollador copia manualmente los códigos HEX al código.

<div class="modal-window">
  <h1 class="modal-title">Suscríbete para no perderte lo importante!</h1>
  <p class="modal-subtitle">Ingresa tu correo abajo y haz clic en "Enviar"</p>
  <input type="email" class="modal-input" placeholder="[email protected]" />
  <button class="modal-button">Enviar</button>
</div>

.modal-window {
  width: 600px;
  padding: 32px;
  background: #F9F9F9;
  border: 1px solid #F2F2F2;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.modal-title {
  color: #323232;
  font-size: 20px;
  font-weight: 500;
}
/* Estilos similares para otros elementos */

Estilos duplicados significan actualizaciones manuales en múltiples archivos cuando hay cambios.

Problemas del enfoque tradicional

Los desarrolladores frontend reinterpretan cada componente desde cero:

• Nombres vagos: radius en lugar de border-radius, flow en lugar de flex-direction.
• Ignorar propiedades: width es relevante, pero height/top/left se ignoran.
• Valores redundantes: border 1px solid repetido varias veces.
• Sin integración de sistema: los valores de diseño no están ligados a la biblioteca real.

Con 10 modales, las actualizaciones requieren buscar, descifrar y copiar en todos los archivos. Este trabajo repetitivo ralentiza la entrega y dificulta la escalabilidad.

Regla: Cada valor reutilizable debe ser una variable.

Implementando variables de Tailwind CSS

Elige una biblioteca como fuente de verdad. Tailwind ofrece clases de utilidad para relleno, colores y radio de esquinas.

Paso 1: Recopilar variables

Colores:

• white-100: #FFFFFF
• white-200: #F2F2F2
• blue-500: #066BE8

Espaciado:

• p-3: 12px
• p-4: 16px
• p-6: 24px
• p-8: 32px

Bordes redondeados:

• rounded-lg: 8px
• rounded-3xl: 24px

Borde: border: 1px

Si falta un valor, créalo con nomenclatura consistente (por ejemplo, p-9: 36px).

Paso 2: Importar a Figma

Crea grupos de variables. Tras sincronizar, Figma muestra los valores directamente sobre los componentes (relleno, radio, etc.).

Paso 3: Aplicar al diseño

Modal: p-8, bg-white-400, border, rounded-3xl.

Campo: bg-white-100, border, rounded-lg, p-4 (16px × 12px).

Botón: bg-blue-500, rounded-lg, p-3 (12px × 36px).

El desarrollador ve p-8 bg-white-400 rounded-3xl y escribe:

<div class="p-8 bg-white-400 border rounded-3xl flex flex-col gap-6">

Sin códigos HEX. Sin medidas. Solo clases de utilidad limpias.

Adaptación para otras bibliotecas

Bootstrap:

p-3, bg-light, border, text-primary.

<div class="p-3 bg-light border border-1 rounded">
  <h5 class="text-primary">Título</h5>
  <button class="btn btn-primary">Enviar</button>
</div>

Material UI:

theme.spacing(4), grey.100.

import { Box, Button, TextField } from "@mui/material";

export default function Modal() {
  return (
    <Box sx={{ p: 4, backgroundColor: "grey.100", border: "1px solid", borderColor: "grey.200", borderRadius: 3, display: "flex", flexDirection: "column", gap: 3 }}>
      <TextField placeholder="Correo" />
      <Button variant="contained" color="primary">Enviar</Button>
    </Box>
  );
}

Chakra UI:

p="8", bg="gray.100".

import { Box, Button, Input } from "@chakra-ui/react";

export default function Modal() {
  return (
    <Box p="8" bg="gray.100" border="1px" borderColor="gray.200" borderRadius="3xl" display="flex" flexDirection="column" gap="6">
      <Input placeholder="Correo" />
      <Button colorScheme="blue">Enviar</Button>
    </Box>
  );
}

Variables personalizadas con SASS/SCSS

Para proyectos sin frameworks, usa preprocesadores:

$white-100: #FFFFFF;
$p-8: 32px;
$rounded-3xl: 24px;

@mixin modal-base {
  padding: $p-8;
  background: $white-400;
  border: 1px solid $white-200;
  border-radius: $rounded-3xl;
}

.modal {
  @include modal-base;
  display: flex;
  flex-direction: column;
  gap: $gap-6;
}

Los mixins estandarizan componentes; las variables centralizan valores.

Conclusiones clave

• Las variables basadas en bibliotecas eliminan duplicidades e interpretaciones: la velocidad de desarrollo aumenta hasta un 50%.
• Figma + Tailwind/MUI: los diseñadores aplican clases, los desarrolladores las copian.
• Escalabilidad: cambia una variable, actualiza todo el proyecto.
• Para devs intermedios/seniores: enfócate en sistemas, no en tareas repetitivas.
• Bonus: Figma muestra los valores numéricos de las variables en tiempo real.

— Editorial Team