figma-implement-design
From the author
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
Install
npx skills add openai/skills --skill figma-implement-design -a claude-code
Installs to .claude/skills/figma-implement-design/ · Each command fetches the skill straight from GitHub with the open skills CLI.
No download: this skill’s licence (Custom or unclear) does not let us redistribute its files. The install commands fetch them from GitHub instead.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 88
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- figma-generate-designopenai/skillsUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.OfficialDesign★ 28.2K
- figma-usenexu-io/open-designRun Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue.Design★ 102.9K
- figmaheygen-com/hyperframesImport 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.OfficialDesign★ 68.8K
- figma-sdk-patternsjeremylongshore/tons-of-skills-marketplaceProduction-ready patterns for the Figma REST API and Plugin API. Use when building reusable Figma client wrappers, extracting design tokens, traversing node trees, or creating typed API helpers. Trigger with phrases like "figma patterns", "figma best practices", "figma client wrapper", "figma typed API".Design★ 2.9K
- anima-hello-worldjeremylongshore/tons-of-skills-marketplaceGenerate reviewable React or HTML code from a Figma design using the Anima SDK. Use when testing design-to-code conversion, learning Anima's code output format, or building your first automated design-to-code pipeline. Trigger with: "anima hello world", "anima example", "figma to react", "figma to code", "anima generate code".Testing★ 2.9K
- figma-code-connect-componentsnexu-io/open-designConnect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.Design★ 102.9K
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in