Login
figma/mcp-server-guide3 files

Figma Swiftui

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.

Use this skillView repositoryView on skills.sh
Specification
Skill ID
figma/mcp-server-guide/figma-swiftui
Publisher
figma
Repository
mcp-server-guide
Installs
0
Files
3
Synced
Sep 23, 2026
How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

figma/mcp-server-guide/figma-swiftuiInstalls these files
  • SKILL.md
  • references/code-to-design.md
  • references/design-to-code.md

What this skill tells the agent

Figma ↔ SwiftUI

Translation between Figma designs and SwiftUI code, both directions. This file is a router — actual guidance lives in the references below.

Pick the direction

DirectionTriggerReference
Design → codeUser wants SwiftUI in their iOS project from a Figma file/framereferences/design-to-code.md
Code → designUser wants to push SwiftUI views / screens / tokens into a Figma filereferences/code-to-design.md

If the request is ambiguous — a Figma URL and .swift files both present, no verb makes it clear — ask the user which direction before loading a reference.

Shared context (applies to both directions)

These points hold regardless of direction; the direction-specific references assume them.

  1. `get_design_context` is the read tool for Figma. Pass clientLanguages: "swift" and clientFrameworks: "swiftui" so the response is framed as Swift. URL → tool args: figma.com/design/:fileKey/:fileName?node-id=:nodeId → use fileKey, replace - with : in nodeId. For figma.com/design/:fileKey/branch/:branchKey/:fileName, use branchKey as fileKey.
  2. The React+Tailwind in `get_design_context` output is a structural reference, not a literal source. It approximates the visual. Never transliterate position: absolute / pixel frames / mix-blend-mode stacks into SwiftUI or into Figma — the screenshot is the source of truth in both directions.
  3. iOS HIG semantic colors are tokens, not hex. var(--backgrounds/primary, …), var(--labels/secondary, …), var(--separators/non-opaque, …) etc. map to Color(.systemBackground), Color.secondary, Color(.separator) in SwiftUI, and to variables in a semantic collection in Figma. Keep the mapping; drop the literal RGBA.
  4. SF Symbols round-trip by name in both directions — never by codepoint. Design → code: get_design_context substitutes Figma's SF Symbol glyph runs back into <SFSymbol>{Image(systemName: "...")}</SFSymbol> wrappers in the response. Use those names verbatim. Code → design: call figma.util.getSfSymbolCharacter(name) inside use_figma to convert a symbol name to the matching character — never look up codepoints by hand.
  5. Recognize the underlying iOS pattern, not the literal node / view name. The same patterns recur in both directions: large title + back chevron + trailing action = NavigationStack chrome; bottom row of icon+label pairs = TabView; repeating same-height rows with leading/trailing chrome = List. Match those system patterns rather than rebuilding them from primitives.
  6. For code → design, `use_figma` is the API. Always load `figma-use` before any use_figma call. If the task involves building a full screen, also load `figma-generate-design`; if it involves building components or a design system, also load `figma-generate-library`.

References

DocWhen to load
references/design-to-code.mdTranslating a Figma design / frame into SwiftUI
references/code-to-design.mdPushing SwiftUI views / screens / tokens into Figma

More from figma

figma/mcp-server-guide

Figma Code Connect

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.

figma/mcp-server-guide

Figma Create New File

Always use this skill when the user wants to create a new Figma Design, FigJam, or Slides file. You MUST invoke this skill BEFORE every `create_new_file` tool call.

figma/mcp-server-guide

Figma Design To Code

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.

Use this skill in a project

Open any RiverX project, search the Skills panel for figma/mcp-server-guide/figma-swiftui, and install it in one click.

Use this skill