De Figma a CSS en un click con este plugin

He empezado a desarrollar un plugin con un fin muy ambicioso

De Figma a CSS en un click con este plugin

• 🗂 Descarga el Plugin
• 👩‍💻 El proyecto es open source, puedes mandar PRs

Hace poco me di cuenta que era posible crear un plugin para Figma en solo HTML, CSS y JavaScript y me puse manos a la obra con una idea que sé que me va a servir mucho para desarrollar mis sesiones en vivo, talleres y cursos. Entonces hice un plugins para convertir un Design System a CSS

Design System

Un Design System está compuesto de muchos elementos:

• Colores
• Tipografía
• Estilos de texto
• Separadores
• Formularios
• Componentes globales

Design System a CSS

El primer release de este plugin cubre todo "Estilos de texto" donde simplemente al abrir el plugin convierte todos los estilos de texto de un archivo de Figma a Custom Properties o variables de CSS, features:

• Custom properties automáticos basados en los nombres de las categorías que creaste en Figma
• Conversión automática de PX a REM de todas las medidas
• El formato del custom property es un es el formato de la propiedad resumida font
• Se copia automáticamente al clipboard el código generado
• Si seleccionas cualquier texto en el archivo de Figma también se genera el estilo independiente

Este es output de nuestro propio Design System:

:root {
  --primary-headline-h1: bold 4rem/5rem Montserrat; 
  --primary-headline-h2: bold 3.5rem/4rem Montserrat; 
  --primary-headline-h3: bold 3rem/3.5rem Montserrat; 
  --primary-headline-h4: bold 2rem/2.5rem Montserrat; 
  --primary-headline-h5: bold 1.5rem/2rem Montserrat; 
  --primary-headline-h6: bold 1.25rem/1.75rem Montserrat; 
  --primary-body1-regular: regular 1rem/1.5rem Montserrat; 
  --primary-body1-bold: bold 1rem/1.5rem Montserrat; 
  --primary-body2-regular: regular 0.875rem/1.375rem Montserrat; 
  --primary-body2-bold: bold 0.875rem/1.375rem Montserrat; 
  --primary-button-1-default: semibold 1rem/1.5rem Montserrat; 
  --primary-button-1-underline: semibold 1rem/1.5rem Montserrat; 
  --primary-button-2-default: semibold 0.875rem/1.375rem Montserrat; 
  --primary-button-2-underline: semibold 0.875rem/1.5rem Montserrat; 
  --primary-button3-default: semibold 0.75rem/1.25rem Montserrat; 
  --primary-button3-underline: semibold 0.75rem/1.25rem Montserrat; 
  --primary-caption-regular: regular 0.75rem/1.25rem Montserrat; 
  --primary-caption-bold: bold 0.75rem/1.25rem Montserrat; 
}

¡Y ya! en el futuro debo hacer lo mismo para el resto de las partes de un design system, por ahora esto me sirve un montón para el desarrollo de /Proyectos

• El código es Open Source así que puedes contribuir a mejorarlo
• Descarga el Plugin