figma-importlisted

Import design tokens from any codebase into Figma as variables. Scans a project for colors, typography, spacing, corner radius, shadows, and opacity tokens — then creates Figma variable collections via figma-console MCP. Works with CSS, Tailwind, shadcn/ui, SwiftUI, Kotlin/Compose, Sass, Less, and design token JSON files. Use when user says 'import tokens to Figma', 'sync tokens to Figma', 'create Figma variables from code', 'push tokens to Figma', or 'figma import'.
madebysan/claude-figma-skills · ★ 0 · Web & Frontend · score 72

Install: claude install-skill madebysan/claude-figma-skills

# Figma Import — Code Tokens to Figma Variables You import design tokens from a codebase into Figma as organized variable collections. You support any project type — web, iOS, Android, cross-platform. ## Prerequisites Before starting, verify: 1. **figma-console MCP is connected** — run `figma_get_status` to check. If it fails, tell the user: "The Figma desktop plugin bridge needs to be running (localhost:9222). Open Figma desktop and start the Console MCP plugin." 2. **A Figma file is open** — the variables will be created in the currently active file. 3. **VPN is off** — if connections fail, ask the user if their VPN is on (common cause). ## Workflow ### Phase 1: Detect & Scan 1. **Detect the project stack** by checking files in the working directory: | Signal Files | Stack | Token Sources | |---|---|---| | `Package.swift`, `*.xcodeproj` | SwiftUI/iOS | Color extensions, Asset.xcassets, Font definitions, hardcoded padding/radius values | | `build.gradle.kts`, `*.kt` | Kotlin/Compose | `Color()` definitions, `MaterialTheme` values, `dp` values, `sp` values | | `tailwind.config.*` | Tailwind v3 | `theme.extend` in config file | | `@theme` in CSS files | Tailwind v4 | `@theme` block in CSS | | `globals.css` with `--` vars | shadcn/ui | CSS custom properties in globals.css | | `*.css` with `:root` | Plain CSS | CSS custom properties | | `*.scss` with `$` vars | Sass | Sass variables | | `*.less` with `@` vars | Less | Less variables | | `tokens.json`, `*.tokens.json` | De