Figma Code Connect Templates — AI skill

When to use it

Use for design-to-code handoff when Dev Mode needs snippets tied to your real component props. Distinct from building screens or generating tokens: writes mapping templates, not a replacement implementation. Requires connected Figma MCP tools, a node-specific URL, published library components and source access. Upstream states Organization/Enterprise availability; verify current Figma plan entitlements. Uses parserless .figma.ts, not parser-based .figma.tsx/figma.connect(); publishing and entitlement checks are separate. Current source replaces deprecated openai/skills copies; those are not separate skills. Governed by Figma Developer Terms and offered as beta, not an MIT/Apache open-source grant. 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. Supply the Figma component URL including node-id and the code repository; invoke figma-code-connect. Check figma.config.json and the documented @figma/code-connect/figma-types TypeScript setup.

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.