Figma → Vue Design System

Aproduction-ready Vue 3 component librarywith automated Figma design token synchronization, comprehensive testing, and Storybook documentation.

- 🎨 Figma Integration: Automated design token sync via MCP Server
- ⚡ Vue 3: Composition API with TypeScript support
- 🎯 Production Ready: Comprehensive testing and CI/CD pipeline
- 📚 Storybook: Interactive component documentation
- ♿ Accessibility: WCAG 2.1 AA compliant with axe-core testing
- 🌙 Dark Mode: Full dark theme support
- 📦 Tree Shaking: Optimized bundle size with ESM exports
- 🔄 Automated Versioning: Changeset-based release management

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

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

- Node.js≥ 20 LTS
- pnpm≥ 8.0.0
- Figma Desktop App(for design token sync)

# 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

Primary UI component with comprehensive variants and accessibility support.

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

- variant:'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'ghost'
- size:'xs' | 'sm' | 'md' | 'lg' | 'xl'
- disabled:boolean
- loading:boolean
- ariaLabel:string
- Enable in Figma: Open Figma Desktop → Preferences → Enable Dev Mode MCP Server
- Configure Cursor: Add MCP server configuration in Cursor settings

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

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

- Unit Tests: Component logic and props
- Accessibility Tests: axe-core compliance
- Visual Tests: Storybook test runner
- Keyboard Navigation: Focus management

Click the deploy button above or manually deploy:

# Build Storybook pnpm build:storybook # Deploy to Vercel vercel --prod

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

A growing collection of MCP tools for Android Development. Currently features a deterministic Figma-SVG-to-Android-XML converter, with plans for Gradle analysis, Resource management, and ADB integration tools.

Integrates Cursor AI with Figma to read and programmatically modify designs.

Integrate Figma design data with AI coding tools using a local MCP server.

Provides Figma layout information to AI coding agents like Cursor.

Enables AI assistants to interact with and automate Figma designs programmatically.

Figma MCP server for accessing Figma files, projects, comments, components, and design metadata from Claude, Cursor, and other AI agents.

Connects to the Figma API, allowing AI tools to access and interact with your Figma designs.

Enables AI assistants to interact with Figma via WebSocket for reading data and design analysis.

Convert Figma designs into React Native components.