Home / Tools & integrations / Figma
Everything we list for working with Figma from an AI coding tool: 53 skills, 7 MCP servers and plugins, 1 prompt. Start with a skill if there is one, since it teaches your agent how Figma works, then add a server or plugin for live access and use the prompts to get going.
Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI),…
Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app,…
Work with Figma .fig design files and the running OpenPencil editor — inspect structure, query nodes, analyze design tokens, export PNG/SVG/PDF/JSX, and modify designs programmatically. Use when…
Analyze a Figma file via the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances, design tokens) with a kind:"design" dashboard.
Convert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma,…
Builds UI from a Figma file or a design image so it matches the design, using your project's existing tokens and components.
Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables,…
Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI),…
Build a Figma design from code or a description — the reverse of figma-codegen. Reuses the connected file's existing design system (components, variables, styles) instead of drawing primitives with…
Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS),…
Upgrade @figma/plugin-typings and absorb what the new version exposes. Diffs the .d.ts between the installed and the target version (that package ships no changelog), sorts the changes into breakage…
Work with Figma .fig design files and the running OpenPencil editor — inspect structure, query nodes, analyze design tokens, export PNG/SVG/PDF/JSX, and modify designs programmatically. Use when…
Transform your weekly Excel data into a sleek, readable, and aesthetically pleasing Figma presentation format.
| # | Name | Type | Works with | Score | Stars | Updated |
|---|---|---|---|---|---|---|
| 1 | pm-claude-skills 90 Claude Skills across 14 professions — the largest open-source professional skills library for Claude… | Plugin | Claude Code | 82 | 1.5k | today |
| 2 | naksha-studio A virtual design team for Claude Code, Cursor, Windsurf, Gemini CLI, and Copilot — 18 roles, 32 commands,… | Plugin | Claude Code | 74 | 353 | 17d ago |
| 3 | claude2figma A Design System compliance harness for Claude Code + Figma. Instead of generating hardcoded values, it… | Plugin | Claude Code | 61 | 207 | 6mo ago |
| 4 | f-mcp-bridge Connect Claude Code to Figma with 46 MCP tools, 20 specialized skills, and 8 commands. Read, write, and… | Plugin | Claude Code | 58 | 10 | 20d ago |
| 5 | bridge-ds AI-powered design generation in Figma using your real design system. Bridge extracts your DS (components,… | Plugin | Claude Code | 56 | 156 | 5mo ago |
| 6 | cassiiopeia DevOps automation skills for full software development lifecycle. 20 skills covering code analysis, design,… | Plugin | Claude Code | 56 | 6 | yesterday |
| 7 | harness-designing-plugin Harness Designing Plugin helps design teams turn their scattered AI setup — Notion prompts, Figma comments,… | Plugin | Claude Code | 50 | 5 | 2mo ago |