figma/figma-swiftui
skills/figma-swiftui/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add figma/mcp-server-guide figma-swiftuiInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 9, 2026, 2:53 AM258.0s3 files scanned
SKILL.md
- name:
- figma-swiftui
- description:
- 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.
- disable-model-invocation:
- false
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.
get_design_contextis the read tool for Figma. PassclientLanguages: "swift"andclientFrameworks: "swiftui"so the response is framed as Swift. URL → tool args:figma.com/design/:fileKey/:fileName?node-id=:nodeId→ usefileKey, replace-with:innodeId. Forfigma.com/design/:fileKey/branch/:branchKey/:fileName, usebranchKeyasfileKey.- The React+Tailwind in
get_design_contextoutput is a structural reference, not a literal source. It approximates the visual. Never transliterateposition: absolute/ pixel frames /mix-blend-modestacks into SwiftUI or into Figma — the screenshot is the source of truth in both directions. - iOS HIG semantic colors are tokens, not hex.
var(--backgrounds/primary, …),var(--labels/secondary, …),var(--separators/non-opaque, …)etc. map toColor(.systemBackground),Color.secondary,Color(.separator)in SwiftUI, and to variables in a semantic collection in Figma. Keep the mapping; drop the literal RGBA. - SF Symbols round-trip by name in both directions — never by codepoint. Design → code:
get_design_contextsubstitutes Figma's SF Symbol glyph runs back into<SFSymbol>{Image(systemName: "...")}</SFSymbol>wrappers in the response. Use those names verbatim. Code → design: callfigma.util.getSfSymbolCharacter(name)insideuse_figmato convert a symbol name to the matching character — never look up codepoints by hand. - Recognize the underlying iOS pattern, not the literal node / view name. The same patterns recur in both directions: large title + back chevron + trailing action =
NavigationStackchrome; 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. - For code → design,
use_figmais the API. Always loadfigma-usebefore anyuse_figmacall. If the task involves building a full screen, also loadfigma-generate-design; if it involves building components or a design system, also loadfigma-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 |
Related Skills
figma/figma-use
tools
VerifiedTrustedCommunity
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.
1,586SKILL.mdUpdated Apr 25, 2026
figma/figma-use-slides
tools
VerifiedTrustedCommunity
This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.
1,561SKILL.mdUpdated May 16, 2026
figma/figma-use-figjam
tools
VerifiedTrustedCommunity
This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.
1,561SKILL.mdUpdated May 16, 2026
figma/figma-generate-library
tools
VerifiedTrustedCommunity
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and design token bindings to be production-quality. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
1,561SKILL.mdUpdated Apr 25, 2026