figma-swiftui

Name: figma-swiftui
Author: figma

1.8kstars163forks

How to install figma-swiftui?

figma/mcp-server-guide/figma-swiftui

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

Installs into the current project.

Summary

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 phrase

Files · 1

View on GitHub

SKILL.md

1	# Figma ↔ SwiftUI
2
3	Translation between Figma designs and SwiftUI code, both directions. This file is a router — actual guidance lives in the references below.
4
5	## Pick the direction
6
7	\| Direction \| Trigger \| Reference \|
8	\|---\|---\|---\|
9	\| Design → code \| User wants SwiftUI in their iOS project from a Figma file/frame \| [references/design-to-code.md](references/design-to-code.md) \|
10	\| Code → design \| User wants to push SwiftUI views / screens / tokens into a Figma file \| [references/code-to-design.md](references/code-to-design.md) \|
11
12	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.
13
14	## Shared context (applies to both directions)
15
16	These points hold regardless of direction; the direction-specific references assume them.
17
18	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`.
19	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.
20	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.
21	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.
22	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.
23	6. For code → design, `use_figma` is the API. Always load [`figma-use`](../figma-use/SKILL.md) before any `use_figma` call. If the task involves building a full screen, also load [`figma-generate-design`](../figma-generate-design/SKILL.md); if it involves building components or a design system, also load [`figma-generate-library`](../figma-generate-library/SKILL.md).
24
25	## References
26
27	\| Doc \| When to load \|
28	\|---\|---\|
29	\| [references/design-to-code.md](references/design-to-code.md) \| Translating a Figma design / frame into SwiftUI \|
30	\| [references/code-to-design.md](references/code-to-design.md) \| Pushing SwiftUI views / screens / tokens into Figma \|

People who liked this also viewed

6 picks

Type

figma-swiftui

1.8kstars163forks

View on GitHub

How to install figma-swiftui?

figma/mcp-server-guide/figma-swiftui

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Figma ↔ SwiftUI
2
3	Translation between Figma designs and SwiftUI code, both directions. This file is a router — actual guidance lives in the references below.
4
5	## Pick the direction
6
7	\| Direction \| Trigger \| Reference \|
8	\|---\|---\|---\|
9	\| Design → code \| User wants SwiftUI in their iOS project from a Figma file/frame \| [references/design-to-code.md](references/design-to-code.md) \|
10	\| Code → design \| User wants to push SwiftUI views / screens / tokens into a Figma file \| [references/code-to-design.md](references/code-to-design.md) \|
11
12	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.
13
14	## Shared context (applies to both directions)
15
16	These points hold regardless of direction; the direction-specific references assume them.
17
18	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`.
19	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.
20	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.
21	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.
22	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.
23	6. For code → design, `use_figma` is the API. Always load [`figma-use`](../figma-use/SKILL.md) before any `use_figma` call. If the task involves building a full screen, also load [`figma-generate-design`](../figma-generate-design/SKILL.md); if it involves building components or a design system, also load [`figma-generate-library`](../figma-generate-library/SKILL.md).
24
25	## References
26
27	\| Doc \| When to load \|
28	\|---\|---\|
29	\| [references/design-to-code.md](references/design-to-code.md) \| Translating a Figma design / frame into SwiftUI \|
30	\| [references/code-to-design.md](references/code-to-design.md) \| Pushing SwiftUI views / screens / tokens into Figma \|

People who liked this also viewed

6 picks

Type