102.3K+Download
Skip to the usage guide
Figma Generate Designby OpenAI

Figma Generate Design Skill.

Create an editable Figma screen that stays connected to its design system.

  • Figma
  • UI Design
  • Design Systems
Download OpenDesignView Usage Guide
Source Review · Figma Generate DesignSKILL.md
Task Figma Produces • A new or updated Figma screen composed of component instances • Variable-bound colors, spacing and radii with reusable styles • Section and full-screen visual checks against the source Before You Start Connected Figma MCP, target-file access, a published design system and the companion figma-use Skill for canvas operations.
Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Assemble Figma Screens from Existing Design-System Assets

Build Figma screens from existing library components and variables, checking each section as it is assembled.

Source-based workflowNot an execution benchmark

The Working Approach

Figma Generate Design works in the code-to-design direction: the deliverable is a screen inside Figma, not application code. It discovers existing component instances, library variables and text or effect styles before assembling the page. The source prefers reuse over drawing lookalike boxes with hardcoded values.

Its assembly strategy is incremental. A wrapper frame is created first, then each section is built inside it and inspected. Component text properties and default variants are checked against the source code, while section screenshots catch clipped text and leftover placeholders that can disappear in a scaled-down full-page view. The result should be editable design-system instances, not just a screenshot of the application.

Expected Deliverables

  • A new or updated Figma screen composed of component instances
  • Variable-bound colors, spacing and radii with reusable styles
  • Section and full-screen visual checks against the source
See the Example Brief

From Brief to Review

  1. 01
    Map the Source Screen

    Read its sections, components and default prop values. Identify the target Figma file and existing system conventions.

  2. 02
    Discover and Reuse Assets

    Inspect existing screens and search linked libraries for components, variables and styles. An empty local-variable result does not prove remote tokens are absent.

  3. 03
    Build and Validate Sections

    Create the wrapper first, assemble one section at a time and inspect text, variants and layout before continuing.

02 When to Use It

When to Use It

Connected Figma MCP, target-file access, a published design system and the companion figma-use Skill for canvas operations.

A Good Fit

  • Code-to-Figma HandoffUseful when a working application screen needs an editable design counterpart connected to its component library.
  • Updating Existing ScreensFits targeted changes to content or variants without rebuilding the whole Figma page.

Limits to Check

  • Design-System Access NeededThe documented workflow assumes access to published components or a team library and an available Figma MCP connection.
  • Not Figma-to-CodeGenerating application implementation from a design is explicitly outside this Skill's primary direction.

Bring These Inputs

  • Target Figma FileProvide the file or page where the screen should be created or updated.
  • Screen SourceSupply application code or a concrete section-by-section brief with real text.
  • Library ContextIdentify existing screens or published libraries whose components and tokens should be reused.

03 Decisions That Matter

Decisions That Matter

  1. Remote Tokens Are Discoverable

    The source distinguishes local variables from linked-library variables, avoiding unnecessary duplicate token systems.

  2. Section-Level Inspection

    Checking individual sections makes wrong variants and clipped text easier to catch than a single thumbnail of the whole page.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Keep figma-use and its API references available alongside this workflow. These Beta materials are governed by the Figma Developer Terms. Installing the Skill alone does not connect or authorize a Figma file.

Upstream Source File
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-design/SKILL.md

Connected Figma MCP, target-file access, a published design system and the companion figma-use Skill for canvas operations.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use figma-generate-design to recreate our account-settings screen in the specified Figma file. Reuse its published components and variables, inspect the code's default props, and preserve the actual labels. Build the wrapper first, then one section at a time. Show section screenshots and fix clipped text or placeholder content before calling the screen complete.

Inspect the Result

Check the actual output against these observable criteria.

  • Controls are linked component instances rather than manually drawn substitutes.
  • Text and variants match the supplied screen, including default props.
  • Section screenshots show no clipped labels, overlaps or leftover placeholders.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
OpenAI
Repository
openai/skills
Skill File
skills/.curated/figma-generate-design/SKILL.md
License
Figma terms
Reviewed Snapshot
2026-10-07 · 49f948faa925
Editorial Source Summary
Build Figma screens from existing library components and variables, checking each section as it is assembled.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Is the output a screenshot?

The main workflow creates editable Figma nodes and instances. A captured web page can serve as a reference, but it is not the intended final screen structure.

What if no local variables are found?

The source says to check linked libraries too. Remote published variables are not returned by the local-variable API.

Can it update only part of a screen?

Yes. It can locate existing sections and change their text, variants or layout while preserving unaffected areas.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-design/SKILL.md