El punto de fricción más grande entre diseño y desarrollo ocurre en el handoff (la entrega). El resultado suele ser el "CSS Hell" y la pérdida de la consistencia visual. Nuestro objetivo no es solo crear una interfaz bonita, sino un Sistema de Diseño predecible y escalable.

La solución reside en establecer un lenguaje común, y ese lenguaje es la metodología BEM (Block, Element, Modifier), aplicada rigurosamente desde Figma.

‍

1. Fundamentos: ¿Qué es BEM y Por Qué Es Vital?

BEM (Bloque, Elemento, Modificador) es una convención de nomenclatura que resuelve el problema de los selectores CSS complejos y los conflictos de estilos. Se convierte en la sintaxis que rige el naming de componentes en Figma y las clases CSS en el código.

• Bloque (Block): La entidad independiente y reutilizable del sistema (ej: card, button).

• Elemento (Element): Una parte del Bloque que no tiene sentido fuera de él (ej: card__title, button__icon).

• Modificador (Modifier): Una variación del Bloque o Elemento que cambia su apariencia o estado (ej: card--dark, button--disabled).

‍

2. BEM en Figma: La Consistencia del Diseñador Senior

El trabajo del diseñador es arquitectónico. Aplicar BEM en Figma garantiza que la estructura se transfiera lógicamente.

A. Naming de Layers y Componentes

Usar la nomenclatura BEM en las capas y las Variantes de Figma elimina las preguntas de "¿Cómo se llama esto?" y agiliza el trabajo.

• Componente Principal: [Block] (ej: Button)
• Variante de Estilo: [Block]/[Modifier] (ej: Button/Primary)
• Elemento Interno: [Block__Element] (ej: Button__Icon)

B. Variables de Diseño (Tokens) y Modificadores

La mayor sinergia se logra al mapear los Tokens de Diseño a los Modificadores BEM.

• Un Modificador BEM (--dark) solo cambia un puñado de variables (Tokens de color o espaciado), no toda la estructura.

• Cuando el developer inspecciona, ve el nombre BEM del bloque y las variables que definen ese Modificador

‍

3. BEM en el Código: Mantenibilidad y Escalabilidad (Visión Dev)

Con BEM, los desarrolladores evitan los selectores CSS complejos, lo cual es fundamental para proyectos escalables.

Ejemplo Práctico: Estructura

El CSS no utiliza selectores anidados, garantizando que las reglas de estilo de un bloque no afecten a otros.

HTML:

<div class="card card--dark">
    <h3 class="card__title">Título</h3>
    <button class="button button--disabled">
        Leer más
    </button>
</div>

‍

CSS (Limpieza y Previsibilidad):

.card {
    /* Estilos base del bloque */
}

.card--dark {
    /* Modificador: Sobrescribe solo lo necesario (ej: color de fondo y texto) */
}

.card__title {
    /* Estilos del elemento: sin afectar a otros elementos del sistema */
}

‍

Al seguir esta convención, tu diseño es fácil de programar, los ciclos de iteración son más cortos, y estás diseñando para quienes implementarán el código.

‍

Conclusión:

Integrar BEM en tu flujo de Figma te posiciona como un diseñador que entiende el impacto de sus decisiones en la fase de ingeniería.

Si deseas llevar tu trabajo más allá de las "pantallas bonitas" y convertirte en el perfil competitivo que puede liderar la consistencia y escalabilidad de un producto digital... es fundamental dominar la creación de Sistemas de Diseño completos, desde los Design Tokens hasta la documentación para el handoff.

Un sistema bien implementado puede reducir los tiempos de producción, unificar la experiencia de marca y aumentar tu valor profesional.

Te invito a profundizar en cada una de estas áreas (Principios, Foundations, Variables, Tokens, BEM y Handoff) en mi curso especializado:

🔗 Curso de Sistemas de Diseño.

Aprende a estructurar tus diseños con la lógica que buscan las grandes empresas y transforma tu workflow para siempre.