figma-official-skills
|
Works with
--- name: figma-official-skills description: | license: MIT --- # figma-official-skills > Catalogue stub — full package: [figma/skills](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server) ## Decision tree Run this before any Figma ↔ code workflow: 1. **Is a Figma skill already installed?** Check: `~/.design-agent-skills/skills/figma-use/SKILL.md` exists (representative skill). - Yes → invoke the specific Figma skill by name and proceed - No → go to step 2 2. **Do you have shell access?** - Yes → install the specific skill below, then invoke it - No → show the install command; in Claude Code, send it as a chat message starting with `!` — add `-g` for global install or omit for project-only ## Install command Install individual skills (recommended — install only what you need): ```bash # Figma Plugin API scripting npx skills add figma/figma-use # Figma to production code with 1:1 fidelity npx skills add figma/figma-implement-design # Build/update Figma screens from code or description npx skills add figma/figma-generate-design # Build design system library in Figma from codebase npx skills add figma/figma-generate-library # Connect Figma components to code npx skills add figma/figma-code-connect-components # Generate project-specific design system rules npx skills add figma/figma-create-design-system-rules # Create a blank Figma/FigJam file npx skills add figma/figma-create-new-file ``` ## Invoke after install | Skill | Invoke with | |-------|-------------| | `figma-use` | "run Figma Plugin API", "Figma script" | | `figma-implement-design` | "implement this Figma design", "Figma to code" | | `figma-generate-design` | "generate Figma design", "code to Figma" | | `figma-generate-library` | "build Figma library", "design system in Figma" | | `figma-code-connect-components` | "code connect", "link Figma to code" | | `figma-create-design-system-rules` | "Figma design system rules" | | `figma-create-new-file` | "create Figma file", "new FigJam" | ## What it does Official Figma skill suite covering the complete design ↔ code bridge. Converts Figma designs to production code with 1:1 fidelity, generates or updates Figma screens from code changes, builds design system libraries, connects Figma components to code components via Code Connect, and scripts the Figma Plugin API for custom automation.
More Design Systems skills
stitch-design-taste
leonxlnx/taste-skill
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
figma
heygen-com/hyperframes
Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.
image
coreyhaines31/marketingskills
When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Flux Kontext,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'ChatGPT Images,' 'Ideogram,' 'Gemini image,' 'Nano Banana,' 'Recraft,' 'Stable Diffusion,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.
