Figma ya no es una herramienta reservada para diseñadores. Con la introducción de Dev Mode, los ingenieros frontend ahora tienen una forma optimizada de extraer información de diseño de manera eficiente. Este artículo cubre técnicas prácticas para suavizar el puente de Figma al código.
Obteniendo información precisa del diseño con Dev Mode
Dev Mode de Figma es una vista optimizada para desarrolladores. Actívalo usando el interruptor en la esquina superior derecha de la vista del archivo, o presiona Shift+D.
Qué puedes hacer en Dev Mode
- Inspeccionar propiedades: Haz clic en cualquier elemento para ver su ancho, alto, padding, tamaño de fuente, colores y más en el panel de propiedades.
- CSS generado automáticamente: Las propiedades CSS aparecen automáticamente en el panel para que puedas copiarlas directamente en tu código.
- Exportar activos: Haz clic en un icono de imagen para exportarlo como SVG o PNG.
Ten en cuenta que el CSS mostrado en Dev Mode es una referencia. Debes adaptarlo para que se ajuste a tu arquitectura de componentes real.
Compartiendo tokens de diseño para consistencia
Sincronizar tokens de diseño como colores, tamaños de fuente y espaciado entre Figma y tu base de código evita la deriva del diseño.
El plugin Figma Tokens
Tokens Studio para Figma (antes Figma Tokens) es un plugin que te permite gestionar tokens de diseño de forma centralizada como JSON.
- Instala el plugin y define tokens para colores, tipografía y espaciado.
- Exporta como JSON.
- Transforma el JSON en archivos de configuración de Style Dictionary o Tailwind CSS.
{
"color": {
"brand": {
"primary": { "value": "#3b82f6" },
"secondary": { "value": "#10b981" }
}
},
"spacing": {
"md": { "value": "16px" }
}
}
Introduce este JSON en Style Dictionary y puedes generar propiedades personalizadas CSS, variables SCSS, configuraciones de Tailwind y más.
Transferencia fluida de diseñador a desarrollador
Incluso con las mejores herramientas, una transferencia eficiente requiere alineación entre diseñadores y desarrolladores.
Estandarizar nombres de componentes
Hacer coincidir los nombres de las capas de Figma con los nombres de los componentes en el código reduce el tiempo de búsqueda. Si una capa se llama Button/Primary en Figma, nómbrala ButtonPrimary o Button.Primary en el código.
Usar Auto Layout
La función de auto layout de Figma refleja el comportamiento de CSS Flexbox. Pide a los diseñadores que usen auto layout para que las intenciones de espaciado y alineación se traduzcan directamente al código.
Dejar comentarios en Figma
Durante el desarrollo, preguntas como “¿Cuál es este valor de padding?” es mejor dejarlas como comentarios en el elemento de Figma correspondiente. Esto es mucho más confiable que enviar un mensaje de Slack.
Plugins que vale la pena instalar
| Plugin | Propósito |
|---|---|
| Figma Tokens | Gestión y exportación de tokens de diseño |
| Anima | Convertir diseños de Figma a código React / Vue |
| Zeplin | Herramienta de transferencia tradicional con integración de Figma |
| Tailwind CSS para Figma | Mostrar nombres de clases de Tailwind en los diseños |
Resumen
El flujo de trabajo más práctico para pasar de Figma al código es extraer información precisa del diseño a través de Dev Mode y compartir tokens de diseño usando Figma Tokens. Tener un lenguaje compartido entre diseñadores y desarrolladores — ya sean tokens, convenciones de nombres o ambos — es la clave para un proceso de transferencia eficiente. Comienza con una o dos de estas técnicas y ve construyendo desde ahí.