Skip to main content
skill CX Codex GP ChatGPT official · OpenAI

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.

Install into Codex · Skills CLI (Vercel) All methods and platforms ↓
npx skills add openai/plugins --skill figma-swiftui -a codex
Open on GitHub

What 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 codex

2Manually: put the files in place

.agents/skills/figma-swiftui/SKILL.md

For all projects use ~/.agents/skills/

From the same set201

The whole set →
supabase official supabase Guides the agent through database configuration and strict RLS policies in Supabase. CX Codex GP ChatGPT 8installs remotion-render official Remotion Exports videos and static stills from Remotion projects using CLI commands. CX Codex GP ChatGPT 3installs figma-create-new-file official Figma Creates blank Figma, FigJam, or Slides files inside draft folders. It resolves planKey and editor types before invoking Figma MCP tools. CX Codex GP ChatGPT 6installs swiftui-performance-audit official OpenAI Pinpoints SwiftUI runtime issues like frame drops, unresponsive taps, and excessive view body computations. Works code-first and guides Instruments profiling. CX Codex GP ChatGPT 109installs swiftui-liquid-glass official OpenAI This skill helps build and review SwiftUI Liquid Glass interfaces for iOS 26+. Use it when adopting the API or checking fallbacks, interaction, and design fit. CX Codex GP ChatGPT 121installs swiftui-ui-patterns official OpenAI This skill helps build and refactor SwiftUI interfaces, from navigation and state to layouts and controls. Use it for new screens or changes to an existing project. CX Codex GP ChatGPT 114installs swiftui-view-refactor official OpenAI Refactors SwiftUI view files into clean, testable structures with dedicated subview types and proper Observation ownership. CX Codex GP ChatGPT 113installs ios-memgraph-leaks official OpenAI Captures and inspects iOS leaks from a simulator process or .memgraph. Useful for tracing retained objects and checking a fix with before-and-after evidence. CX Codex GP ChatGPT 1,054installs

Similar

applicationinsights-web-ts Microsoft Set up Application Insights telemetry for browser apps, including page views, requests, and exceptions. Use it for RUM or to connect browser-side GenAI agent traces with backend spans. Claude Code GitHub Copilot 38installs podcast-generation microsoft Generates podcast-style audio narratives using Azure OpenAI GPT Realtime Mini over WebSocket. Integrates a FastAPI backend with a React audio player. Claude Code GitHub Copilot 29installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. Claude Code CX Codex Cursor +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. Claude Code CX Codex Cursor +1 1,200,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. Claude Code Claude.ai 186,758installs

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.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor