Figma Design System Builder — AI skill

When to use it

Use to bring an existing code design system into Figma, compare code/file gaps, or construct a reusable component family with bound variables. Distinct from the Code Connect template skill and generic token serialization: creates actual Figma library objects. Requires connected writable Figma tools, code access, companion figma-use, available fonts and full references/scripts. Multi-phase workflow may require many tool calls; it is not a one-shot screen generator. Verify resulting bindings, variants and screenshots; accessibility checks do not certify conformance. Beta materials are governed by Figma Developer Terms, not an MIT/Apache open-source grant. Deprecated openai/skills provider copies are not separate skills. Not installed, executed or runtime-tested during discovery. GitHub stars are repository-wide, not a skill-specific rating.

Compatible agents

Codex

Installation

Add the source marketplace with codex plugin marketplace add openai/plugins. In Codex /plugins (or the desktop Plugins Directory), select that marketplace and install Figma, then connect its Figma app integration and start a new chat. The source plugin is plugins/figma in https://github.com/openai/plugins. Retain the full plugin skill directories, references and companion figma-use skill; a standalone SKILL.md does not provide the required Figma tools. Review plugins/figma/LICENSE.txt and the Figma Developer Terms before use. Ask for figma-generate-library with your codebase and target Figma file. Start with discovery and scope reconciliation, then foundations before components. Keep its helper scripts and reference files with the skill.

Review the source and instructions before installing in your agent.

License

LicenseRef-Figma-Developer-Terms

Last checked Oct 29, 2026.

Pair this skill with a visual reference

A skill guides how your agent works; a design reference shows the direction you want. Choose an example for a specific job, such as the headline hierarchy or form layout, and keep your project's existing design rules explicit.

Start with design references you can inspect, then use our guide to briefing an AI coding agent to turn observations into requirements. If you need implementation components, compare UI libraries for your stack.

These pages are public. Browsing a skill does not install it, and TastefulKit's design-reference MCP tools do not search the AI-skill directory.