---
stable_id: skills/openai-curated-figma-implement-design
type: skills
title: openai-curated-figma-implement-design
summary: >-
  ---

  name: figma-implement-design

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

  ---

  # Implement Design

  ## Overview

  This skill provides a structured workflow for translating Figma designs into
  production-ready code with pixel-perfect accuracy. It ensures consistent
  integration with the Figma MCP server, proper use of design tokens, and 1:1
  visual parity with designs.

  ## Skill Boundaries

  - Use this skill when the deliverable is code in the user's repository.

  - If the user asks to create/edit/delete nodes inside Figma itself, switch to
  [figma-use](../figma-use/SKILL.md).
tags:
  - openai
  - source-openai-skills
source_url: https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma-implement-design/SKILL.md
license: ""
upstream_ref: https://github.com/openai/skills/blob/main/skills/.curated/figma-implement-design/SKILL.md
github_stars: 14772
github_forks: 861
github_is_organization: true
retrieved_at: 2026-06-11T08:33:27.536Z
content_sha256: 63f3d12d444547bbf68c10a12982b1f42e0f6e26fc074324564a13184d4b15ad
---
