figma-swiftui — Codex skill: what it does, how to install
Translates Figma designs into SwiftUI and sends SwiftUI back to Figma. Use it for iOS, iPhone, and iPad interface work.
npx skills add openai/plugins --skill figma-swiftui -a codexWhat figma-swiftui does
figma-swiftui routes work in either direction: from a Figma file to SwiftUI, or from SwiftUI back to Figma. It reads Figma through get_design_context with Swift and SwiftUI settings. The skill also maps iOS interface patterns, semantic colors, and SF Symbol names instead of treating them as raw visual fragments.
For code-to-design work, the use_figma tool is required, and figma-use must be loaded before the call. A full-screen task also needs figma-generate-design; component or design-system work needs figma-generate-library. When a request contains both a Figma URL and .swift files without a clear verb, choose the direction first.
Install it when an agent needs to connect Figma files with SwiftUI code. It is unnecessary for work that involves neither Figma nor iOS.
What it helps with
- turn a Figma frame into SwiftUI
- push a SwiftUI screen into a Figma file
- keep SF Symbol names aligned across code and design
- map iOS semantic colors during translation
- route an ambiguous Figma-to-SwiftUI request
Example prompts for the agent
- Implement this Figma screen in SwiftUI.
- Push this SwiftUI view and its tokens to Figma.
- I have a Figma URL and `.swift` files. Choose the translation direction.
How to install figma-swiftui
1Skills CLI (Vercel)
npx skills add openai/plugins --skill figma-swiftui -a codex2Manually: put the files in place
.agents/skills/figma-swiftui/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add openai/plugins --skill figma-swiftui -a claude-code2Manually: put the files in place
~/.claude/skills/figma-swiftui/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/figma-swiftui/
Manually: put the files in place
.cursor/skills/figma-swiftui/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install openai/plugins figma-swiftui2Manually: put the files in place
.github/skills/figma-swiftui/SKILL.mdPlatform CLI
gemini skills install https://github.com/openai/plugins --path plugins/figma/skills/figma-swiftuiManually: put the files in place
.devin/skills/figma-swiftui/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set201
The whole set →Similar
Questions about figma-swiftui
How do I install figma-swiftui in Codex?
Run npx skills add openai/plugins --skill figma-swiftui -a codex. The skill file is placed at .agents/skills/figma-swiftui/SKILL.md.
What does figma-swiftui do?
It connects Figma and SwiftUI in both directions: an agent can build SwiftUI from a Figma design or send views, screens, and tokens back to Figma.
What is required to send SwiftUI to Figma?
The workflow uses use_figma, with figma-use loaded before the call. Full-screen work also requires figma-generate-design, while components and design systems require figma-generate-library.