OpenAI/figma — Agent Skills | officialskills.sh
officialskills.sh
...
Back to skills

figma

communitydesign

Connects Claude to the Figma MCP server so it can fetch design context, screenshots, variables, and assets from Figma nodes.

OpenAIOpenAI
View all OpenAI skills →

Setup & Installation

npx skills add https://github.com/openai/skills --skill figma
or paste the link and ask your coding assistant to install it
https://github.com/openai/skills/tree/main/skills/.curated/figma
View on GitHub

What This Skill Does

Connects Claude to the Figma MCP server so it can fetch design context, screenshots, variables, and assets from Figma nodes. Translates Figma designs into production-ready code following the project's existing conventions and component library.

Instead of manually inspecting Figma values and transcribing them into code, the skill fetches structured design data and visual references directly, reducing measurement errors and back-and-forth between design and implementation.

When to use it

  • Fetching exact layout and spacing from a Figma frame before writing component code
  • Converting a Figma variant into React + Tailwind without manually measuring values
  • Pulling SVG and image assets directly from Figma instead of exporting them manually
  • Validating a finished UI implementation against the original Figma screenshot
  • Troubleshooting Figma MCP setup and node ID resolution issues

Similar Skills

gif-sticker-maker

Takes a photo of a person, pet, object, or logo and generates 4 animated GIF stickers in Funko Pop / Pop Mart figurine style.

wpds

Assists with building UI components and interfaces using the WordPress Design System (WPDS).

accessibility

Audits and improves web accessibility against WCAG 2.

algorithmic-art

Generates algorithmic and generative art using p5.