Figma → Vue Design System

Figma → Vue Design System

Una biblioteca de componentes Vue 3 lista para producción con sincronización automatizada de tokens de diseño de Figma, pruebas exhaustivas y documentación con Storybook.

✨ Características

• 🎨 Integración con Figma: Sincronización automatizada de tokens de diseño mediante MCP Server
• ⚡ Vue 3: Composition API con soporte de TypeScript
• 🎯 Listo para producción: Pruebas exhaustivas y pipeline de CI/CD
• 📚 Storybook: Documentación interactiva de componentes
• ♿ Accesibilidad: Cumple con WCAG 2.1 AA con pruebas de axe-core
• 🌙 Modo oscuro: Soporte completo de tema oscuro
• 📦 Tree Shaking: Tamaño de paquete optimizado con exportaciones ESM
• 🔄 Versionado automatizado: Gestión de versiones basada en Changeset

🚀 Inicio rápido

Instalación

npm install @design-system/vue-components
# or
pnpm add @design-system/vue-components
# or
yarn add @design-system/vue-components

Uso

<template>
  <div>
    <Button variant="primary" @click="handleClick">
      Save Changes
    </Button>
  </div>
</template>

<script setup>
import { Button } from '@design-system/vue-components'
import '@design-system/vue-components/style.css'

const handleClick = () => {
  console.log('Button clicked!')
}
</script>

🏗️ Desarrollo

Requisitos previos

• Node.js ≥ 20 LTS
• pnpm ≥ 8.0.0
• Figma Desktop App (para sincronización de tokens de diseño)

Configuración

# Clone the repository
git clone https://github.com/boraalapgh/figma-vue-design-system.git
cd figma-vue-design-system

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

# Run tests
pnpm test

# Build library
pnpm build:lib

📦 Componentes

Button

Componente de interfaz principal con variantes exhaustivas y soporte de accesibilidad.

<Button 
  variant="primary" 
  size="md" 
  :disabled="false"
  :loading="false"
  @click="handleClick"
>
  Click me
</Button>

Props:

• variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'ghost'
• size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
• disabled: boolean
• loading: boolean
• ariaLabel: string

🎨 Integración con Figma MCP

Configurar MCP Server

1. Habilitar en Figma: Abrir Figma Desktop → Preferencias → Habilitar Dev Mode MCP Server
2. Configurar Cursor: Añadir la configuración del servidor MCP en los ajustes de Cursor

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

Sincronizar tokens de diseño

# Sync tokens from Figma file
pnpm mcp-sync --file YOUR_FIGMA_FILE_KEY --out ./tokens

# This generates:
# - design-tokens.json (CSS variables)
# - components.schema.json (component definitions)
# - changelog-draft.md (proposed changes)

🧪 Pruebas

• Pruebas unitarias: Lógica de componentes y props
• Pruebas de accesibilidad: Cumplimiento de axe-core
• Pruebas visuales: Test runner de Storybook
• Navegación con teclado: Gestión de foco

🚀 Despliegue

Vercel (Recomendado)

Haz clic en el botón de despliegue de arriba o despliega manualmente:

# Build Storybook
pnpm build:storybook

# Deploy to Vercel
vercel --prod

---

Hecho con ❤️ por el equipo de Design System