Codex Official Featured Design · Design-to-Code

Figma

Design-to-code workflows for OpenAI Codex — read Figma frames, create Code Connect mappings, and generate project-specific design system rules.

figma design code-connect design-system

Install

$ npx codex-marketplace add openai/plugins/plugins/figma --plugin

The official Figma plugin for OpenAI Codex is one of the most upvoted artifacts in the Codex Marketplace. It integrates directly with the Figma REST API to pull frame data into Codex context so the agent can implement designs accurately without manual spec transcription.

Code Connect maps Figma library components to their source-code equivalents, enabling the Figma Dev Mode to display real implementation code. With 893 GitHub stars and official OpenAI authorship it is the most-starred design artifact in the marketplace.

Features

Frame context

Pulls Figma layout, colours, and components into Codex context.

Code Connect

Maps published Figma components to their source code counterparts.

Design system rules

Generates repeatable SKILL.md rules for consistent Figma-to-code translation.

Common Use Cases

  • Implementing Figma designs in code
  • Design system maintenance
  • Generating design token files
893 GitHub stars
← All Codex plugins

Plugin info

Platform Codex
Type plugin
Developer OpenAI
Status Official