skilld
All skills
figma avatar

/figma-swiftui

@54ad156 official
by figmafigma/mcp-server-guide2k stars
194

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/figma/mcp-server-guide/figma-swiftui

This session only. Nothing lands on disk.

SKILL.md

≈160 tokens always: the name and description. ≈837 when used: this file. ≈14k more on demand in 2 files.

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

Direction Trigger Reference
Design → code User wants SwiftUI in their iOS project from a Figma file/frame references/design-to-code.md
Code → design User wants to push SwiftUI views / screens / tokens into a Figma file references/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

Doc When to load
references/design-to-code.md Translating a Figma design / frame into SwiftUI
references/code-to-design.md Pushing SwiftUI views / screens / tokens into Figma

Source: SKILL.md on GitHub

Third-party checks

1 warning3mo3 checks · Risk SAFE
  • Gen Agent Trust Hub3mo

    This skill facilitates two-way translation between Figma designs and SwiftUI code using vendor-specific tools. It correctly handles system patterns, SF Symbols, and semantic colors according to platform best practices. No malicious behaviors or security vulnerabilities were identified.

  • Socket3mo

    No alerts

  • Snyk3mo

    Risk: MEDIUM · 1 issue

Provenance

Signed by skilld at 54ad156. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 19 hours ago.

Activeupdated 4 months ago

Capability

disable-model-invocation
false

Topics

  • figma
  • swiftui
  • ios
  • design-to-code
  • code-to-design
  • sf-symbols
  • semantic-colors
  • component-translation

README badge

README badge for figma/mcp-server-guide/figma-swiftui

What it does

Translates between Figma designs and SwiftUI code in both directions: converting a Figma frame into SwiftUI views, or pushing SwiftUI screens and tokens back into Figma. Routes to direction-specific guidance and uses Figma's design API with SwiftUI-aware output (semantic colors, SF Symbol names, iOS HIG patterns).

Generated from the current SKILL.md.

Frequently asked

Does this skill work in both directions — Figma to SwiftUI and SwiftUI to Figma?
Yes. It routes to direction-specific guidance depending on whether you're translating a design into code or pushing SwiftUI views back into a Figma file. If the request is ambiguous, it will ask you to clarify.
How does this skill handle SF Symbols?
SF Symbols round-trip by name only, never by codepoint. Design to code uses the symbol names from get_design_context verbatim; code to design calls figma.util.getSfSymbolCharacter(name) to convert names to characters.
Should I use semantic color tokens or hex values?
Use iOS HIG semantic colors as tokens (Color(.systemBackground), Color.secondary, Color(.separator), etc.) in SwiftUI and as variables in a semantic collection in Figma — never convert to literal RGBA values.
What do I need to load alongside this skill for pushing SwiftUI to Figma?
Always load figma-use first. If building a full screen, also load figma-generate-design; if building components or a design system, also load figma-generate-library.
How do I extract design context from a Figma URL?
Parse the URL for fileKey and nodeId (replacing hyphens with colons in nodeId), then pass them to get_design_context with clientLanguages: 'swift' and clientFrameworks: 'swiftui'.

Generated from the current SKILL.md. These answers refresh after source changes.