Agent Native

figma-swiftui

This skill translates between Figma designs and SwiftUI code in both directions.

by FigmaOfficial publisherNot reviewed

Identity proven by GitHub's verified organisation badge (figma)

Agents
Claude Code
License
No license stated
Pin
f049329pinned Oct 9, 2026
Context cost
about 830 tokenswhen the skill loads
GitHub stars
2,057on figma/mcp-server-guide
Scripts
None found

What it does

“SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files / an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.”
The author's description, from SKILL.md

Generated summary from the skill's own text

This skill translates between Figma designs and SwiftUI code in both directions. It reads Figma files using design context tools and maps UI patterns, semantic colors, and SF Symbols between the two formats, treating screenshots as the source of truth for visual details.

When to use it

  • Converting a Figma design frame into SwiftUI code for an iOS project
  • Pushing SwiftUI views or screens back into a Figma file as design
  • Syncing iOS app components between Figma design files and Swift codebase
  • Translating design tokens and semantic colors between platforms

When not to

  • Working with Android, web, or non-Apple platforms
  • Literal pixel-perfect code translation from React or other frameworks
  • Projects without an existing Figma file or SwiftUI codebase

Install

No license stated: install from the publisher's repository, and ask the author before you reuse or share it.

These commands install from the publisher's repository and need no account.

skills CLI

npx skills add figma/mcp-server-guide --skill figma-swiftui

Installs from the repository's default branch, which may have changed since the commit we checked.

GitHub CLI 2.90 or later

gh skill install figma/mcp-server-guide figma-swiftui@f0493295acf5f7cbdebcbcc483c06de814420cb1

Installs the commit we checked (f049329).

Copy by hand

Download the folder at f049329 and put it in .claude/skills/figma-swiftui for Claude Code and in .agents/skills/figma-swiftui for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

Skill folder on GitHub at f049329

Claude Code plugin

/plugin install figma@claude-plugins-official

The publisher's plugin in Claude's official marketplace. It may hold more than this skill, and we have not pinned it.

Copy for your agent

A prompt for any coding agent. It installs this skill from GitHub at the pinned commit, copies the files as they are, and runs nothing unless you ask.

Prompt

Install the agent skill "figma-swiftui" by Figma.

Source, pinned to commit f0493295acf5f7cbdebcbcc483c06de814420cb1:
https://github.com/figma/mcp-server-guide/tree/f0493295acf5f7cbdebcbcc483c06de814420cb1/skills-figquery/figma-swiftui

1. Download that folder at exactly this commit. Do not use the default branch.
2. Copy every file unchanged, keeping the folder structure, into .claude/skills/figma-swiftui/ for Claude Code and .agents/skills/figma-swiftui/ for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. Create the folders if they do not exist.
3. Do not edit the files, and do not run any script in the folder unless I ask you to.
4. When you are done, list the files you copied and where you put them.

Its license is restricted or not stated. Show me the license terms from the repository before you copy anything.

Listing and checks: https://www.agentnative.dev/skills/figma/figma-swiftui

SKILL.md at the pin

The license of this skill does not let us show its files here.

View SKILL.md on GitHub at f049329

Files

3 files, 60 KB in total. Each file has a sha256 in the pin's manifest; the first 12 characters are shown.

Skill folder on GitHub at f049329

Also in

The same SKILL.md content appears in these places too. We list it once and credit the oldest public source.

All 20 skills from Figma

More from Figma

  • figma-code-connect

    Creates and maintains Figma Code Connect template files (.figma.ts) that map Figma components to code snippets for design-to-code translation.

    Claude Code · about 6.5K tokens · pinned 6 days ago

  • figma-create-new-file

    This skill enables agents to create new Figma files, including Design, FigJam, and Slides projects.

    Claude Code · about 400 tokens · pinned 6 days ago

  • figma-design-to-code

    This skill provides the agent with detailed procedures for converting Figma designs into code.

    Claude Code · about 860 tokens · pinned 6 days ago

  • figma-generate-design

    Builds or updates multi-section Figma layouts like pages, modals, and sidebars by reusing published design system components, variables, and styles instead of…

    Claude Code · about 6.9K tokens · pinned 6 days ago

  • figma-generate-design

    This skill builds or updates full-page screens, modals, dialogs, drawers, sidebars, and other multi-section views in Figma by discovering and reusing…

    Claude Code · about 8.9K tokens · pinned 6 days ago

  • figma-generate-diagram

    This skill prepares an agent to generate Mermaid diagrams in FigJam by routing requests to type-specific guidance, applying universal rendering constraints…

    Claude Code, Codex, Cursor +4 · about 2.3K tokens · pinned 6 days ago

All Mobile skills

Related in Mobile

  • apollo-ios

    This skill guides building GraphQL-powered Apple apps with Apollo iOS, a strongly-typed Swift client.

    by Apollo GraphQLOfficial publisher

    Contains scripts

    Claude Code · about 1.8K tokens · pinned 6 days ago

  • mapbox-ios-patterns

    Integrates Mapbox Maps SDK v11 on iOS using Swift and SwiftUI, enabling map display, marker placement, user location tracking, and custom data rendering.

    by MapboxOfficial publisher

    Claude Code, Codex, Cursor +4 · about 2.6K tokens · pinned 6 days ago

  • expo-app-intents

    This skill adds Apple App Intents to Expo apps, enabling Siri voice commands and Shortcuts automation through Swift declarations that dispatch to JavaScript…

    by ExpoOfficial publisher

    Claude Code, Codex, Cursor +4 · about 3.6K tokens · pinned 6 days ago

  • expo-brownfield

    This skill helps agents add React Native to existing native iOS or Android apps incrementally using Expo.

    by ExpoOfficial publisher

    Claude Code, Codex, Cursor +4 · about 1.4K tokens · pinned 6 days ago

  • expo-migrate-module

    Converts the Swift source code of an existing Expo native module from the 1.0 definition DSL to the 2.0 macro API, keeping its JavaScript and TypeScript…

    by ExpoOfficial publisher

    Claude Code, Codex, Cursor +3 · about 2.5K tokens · pinned 6 days ago

  • expo-module

    This skill guides agents through creating and writing Expo native modules and views using the Expo Modules API with Swift, Kotlin, and TypeScript.

    by ExpoOfficial publisher

    Claude Code, Codex, Cursor +3 · about 1.5K tokens · pinned 6 days ago

The skills listed here are third-party software, collected from public GitHub repositories as a catalog of recent skills and provided as is. Agent Native does not write or control them and is not responsible for any harm, loss or damage caused by installing or using them. Labels and checks describe what we saw at one commit and are not a guarantee. Read a skill's files before you run it. Terms of use