openai/skills

figma

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

69CollectingNetwork access

See how to use it View GitHub source

npx skills add https://github.com/openai/skills --skill "skills/.curated/figma"

Quick start

Start using it in three steps

Install it or open the source, trigger it with a clear task, then follow the source workflow.

Install the Skill

npx skills add https://github.com/openai/skills --skill "skills/.curated/figma"

Describe the task

Use figma to help me with: [describe your task]. Before you begin, tell me what input you need, the steps you will follow, and the expected output.

Follow the workflow

No structured workflow was detected; follow the original SKILL.md below.

Continue to the workflow

Direct answers

Answers to review before you install

What is figma?

Who should use figma?

It is relevant to workflows involving Translation, Engineering, Design.

How do you install figma?

SkillSignal detected this source-specific command: npx skills add https://github.com/openai/skills --skill "skills/.curated/figma". Inspect the repository and command before running it.

Which Agent platforms does it support?

The upstream source does not declare a dedicated Agent platform.

What permissions or risks should you review?

Static analysis detected network signals. Review the cited source lines before installing; these signals are not a security audit.

What are the current evidence limits?

This page combines upstream documentation with deterministic repository, quality, and static-risk signals. It is not described as a manual test or security review.

SkillSignal brief

Decide whether it fits your work first

Useful in these contexts

Not yet included in a workflow collection

Core capabilities

TranslationEngineeringDesign

Repository stars

24,265

Repository forks

1,644

Quality

69/100

Source repository last pushed

2026-07-14

Quality breakdown

Based on traceable docs and repository signals; stars are not treated as quality.

69/100

Documentation22/30

Specificity20/25

Maintenance18/20

Trust signals9/25

Compare before choosing

Related Agent Skills and source variants

These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.

brand-landingpage by wshobson

Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at component level, building a multi-page app, or restyling with known design tokens —

videodb by affaan-m

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio, v

ios-localization by dpearson2699

Implement, review, or improve localization and internationalization in iOS/macOS apps — String Catalogs (.xcstrings), generated localizable symbols, stable key naming, LocalizedStringKey, LocalizedStringResource, pluralization, FormatStyle for numbers/dates/measurements, right-to-left layout, Dynamic Type, and locale-aware formatting. Use when adding multi-language support, setting up String Catalogs, enabling generated symbols for compile-time-safe localization keys, handling plural forms, form

figma-implement-design by openai

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`.

dotnet-best-practices by github

Ensure .NET/C# code meets best practices for the solution/project.

View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 2 min

Figma MCP

Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see references/figma-mcp-config.md.

Figma MCP Integration Rules

These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

Required flow (do not skip)

Run get_design_context first to fetch the structured representation for the exact node(s).
If the response is too large or truncated, run get_metadata to get the high-level node map and then re-fetch only the required node(s) with get_design_context.
Run get_screenshot for a visual reference of the node variant being implemented.
Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
Translate the output (usually React + Tailwind) into this project's conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible.
Validate against Figma for 1:1 look and behavior before marking complete.

Implementation rules

Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
Replace Tailwind utility classes with the project's preferred utilities/design-system tokens when applicable.
Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
Use the project's color system, typography scale, and spacing tokens consistently.
Respect existing routing, state management, and data-fetch patterns already adopted in the repo.
Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design-system tokens and adjust spacing or sizes minimally to match visuals.
Validate the final UI against the Figma screenshot for both look and behavior.

Asset handling

The Figma MCP Server provides an assets endpoint which can serve image and SVG assets.
IMPORTANT: If the Figma MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly.
IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload.
IMPORTANT: do NOT use or create placeholders if a localhost source is provided.

Link-based prompting

The server is link-based: copy the Figma frame/layer link and give that URL to the MCP client when asking for implementation help.
The client cannot browse the URL but extracts the node ID from the link; always ensure the link points to the exact node/variant you want.

References

references/figma-mcp-config.md — setup, verification, troubleshooting, and link-based usage reminders.
references/figma-tools-and-prompts.md — tool catalog and prompt patterns for selecting frameworks/components and fetching metadata.

Source repo: openai/skills
Skill path: skills/.curated/figma/SKILL.md
Commit SHA: 49f948faa925
Repository license: —
Data collected: Jul 28, 2026