figma-code-connect Skill
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files. Published by openai in plugins.
Decision snapshot
Is this a fit?
Design and media, Writing, Includes SKILL.md, Reusable instructions
Compatibility not yet detected.
Permission behavior not yet detected.
Copy skill directory
1 month ago
No specific cautions were detected. Review the source and requested permissions before installing.
What is figma-code-connect Skill?
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files. Published by openai in plugins. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement. See how SkillIndex evaluates profiles.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Design and media
- Writing
- Design and media use cases
- Writing use cases
Declared skill metadata
- Source file: plugins/figma/skills/figma-code-connect/SKILL.md
These fields retain source and confidence evidence from the indexed SKILL.md.
Compatibility and setup
- Install or run with Copy skill directory
When to use figma-code-connect Skill
- Use it for design and media.
- Use it for writing.
Built with
Editorial notes
Source
- Creator: openai
- Repository: openai/plugins
- Skill file: plugins/figma/skills/figma-code-connect/SKILL.md
What it does
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
Skill instructions
Code Connect Overview Create Code Connect template files (.figma.ts) that map Figma components to code snippets. Given a Figma URL, follow the steps below to create a template. You write .figma.ts template files ONLY — never .figma.tsx. This skill produces parserless templates: a .figma.ts file whose default export uses a figma.code... tagged template. Do NOT write a .figma.tsx file and do NOT use figma.connect() — that is the separate parser-based Code Connect format (published a different way) and is the wrong artifact for this skill; output written as .figma.tsx is rejected outright. If a .figma.tsx already exists for a component, leave it untouched and add your .figma.ts template alongside it. A capable model may be tempted to reach for the more familiar .figma.tsx / figma.connect() pattern from memory — resist it; here the correct output is always .figma.ts + figma.code. Prerequisites - Figma MCP server must be connected — verify that Figma MCP tools (e.g., getcodeconnectsuggestio
Verified compatibility and discovery
Frequently asked questions
What is figma-code-connect?
figma-code-connect is a open-source AI agent skill with Copy skill directory. Creates and maintains Figma Code Connect template files that map Figma components to code snippets.
Who is figma-code-connect best for?
figma-code-connect is best for reusing agent instructions, scripts, and references, design and media workflows, writing workflows.
How do I install figma-code-connect?
Install or run figma-code-connect using Copy skill directory. Check figma-code-connect for the latest setup command.
Is figma-code-connect actively maintained?
figma-code-connect may need a closer maintenance check before production use.
Project health auto-fetched from the source repository.
Maintain this resource?
Review this source-backed profile, send a correction with evidence, or link to it from your documentation. Claims verify your relationship to the project; profile facts still require source evidence and editorial review.
