Figma → Vue Design System

Figma → Vue Design System

Uma biblioteca de componentes Vue 3 pronta para produção com sincronização automatizada de design tokens do Figma, testes abrangentes e documentação Storybook.

✨ Recursos

• 🎨 Integração com Figma: Sincronização automatizada de design tokens via MCP Server
• ⚡ Vue 3: Composition API com suporte a TypeScript
• 🎯 Pronto para Produção: Testes abrangentes e pipeline de CI/CD
• 📚 Storybook: Documentação interativa de componentes
• ♿ Acessibilidade: Conformidade com WCAG 2.1 AA e testes com axe-core
• 🌙 Modo Escuro: Suporte completo a tema escuro
• 📦 Tree Shaking: Tamanho de bundle otimizado com exportações ESM
• 🔄 Versionamento Automatizado: Gerenciamento de releases baseado em Changeset

🚀 Início Rápido

Instalação

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>

🏗️ Desenvolvimento

Pré-requisitos

• Node.js ≥ 20 LTS
• pnpm ≥ 8.0.0
• Figma Desktop App (para sincronização de design tokens)

Configuração

# 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 UI principal com variantes abrangentes e suporte a acessibilidade.

<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

🎨 Integração com Figma MCP

Configurar MCP Server

1. Habilitar no Figma: Abra o Figma Desktop → Preferências → Habilitar Dev Mode MCP Server
2. Configurar Cursor: Adicione a configuração do MCP server nas configurações do Cursor

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

Sincronizar Design Tokens

# 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)

🧪 Testes

• Testes Unitários: Lógica de componentes e props
• Testes de Acessibilidade: Conformidade com axe-core
• Testes Visuais: Storybook test runner
• Navegação por Teclado: Gerenciamento de foco

🚀 Deploy

Vercel (Recomendado)

Clique no botão de deploy acima ou faça o deploy manualmente:

# Build Storybook
pnpm build:storybook

# Deploy to Vercel
vercel --prod

---

Feito com ❤️ pela Equipe de Design System