figma-swiftui

figma-swiftui is a skill for Codex from PracticalSwan/agent-skills. It costs 156 tokens per session (1,572 once invoked), scanned A, original, MIT.

A bridge between Figma, a design tool, and SwiftUI, Apple's framework for building interfaces on iPhone, iPad, and other Apple platforms.

In plain words
What is it for?
Use it to translate Figma designs into SwiftUI code or send SwiftUI views and design tokens back into Figma.
Why use it?
It helps keep designs and SwiftUI code aligned when moving a screen or its design details in either direction.

Skill for Codex

Written for Codex: reads ~/.codex or $CODEX_HOME. Also seen: mentions Claude Code; mentions Codex.

Good fit Use it to translate Figma designs into SwiftUI code or send SwiftUI views and design tokens back into Figma.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/practicalswan/agent-skills/figma-swiftui
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add PracticalSwan/agent-skills --skill figma-swiftui
Clone the repo
git clone --depth 1 https://github.com/PracticalSwan/agent-skills

Made for: Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for figma-swiftui

README.md
[![agentmods](https://agentmods.dev/badge/skills/practicalswan/agent-skills/figma-swiftui/github.svg)](https://agentmods.dev/skills/practicalswan/agent-skills/figma-swiftui)
Your own site
<a href="https://agentmods.dev/skills/practicalswan/agent-skills/figma-swiftui"><img src="https://agentmods.dev/badge/skills/practicalswan/agent-skills/figma-swiftui/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for figma-swiftui

Your own site · 80×15
<a href="https://agentmods.dev/skills/practicalswan/agent-skills/figma-swiftui"><img src="https://agentmods.dev/badge/skills/practicalswan/agent-skills/figma-swiftui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 156 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,572 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00156 $0.01572
Opus 5 $0.00078 $0.00786
Sonnet 5 $0.00031 $0.00314
Haiku 4.5 $0.00016 $0.00157

Measured yesterday against content hash 83d057eefa15, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

figma-swiftui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

figma-swiftui/SKILL.md · 88 lines

How it starts

The opening of the file, as written. The whole thing — 88 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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.

Read the full file on GitHub · 88 lines

Files

What ships with it

3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday Changed 83d057eefa15
  2. 2d ago Changed 48009c85ef43
  3. 5d ago First seen · 88 lines · 156 tokens per session scan A be74c498e61b

Subscribe to this mod's changes

figma-swiftui is a skill published in the GitHub repository PracticalSwan/agent-skills (13 stars, last pushed yesterday), licensed MIT. It adds 156 tokens to every session and 1,572 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

iOS SwiftUI Accessibility

Enforces WCAG 2.2 accessible coding patterns when writing SwiftUI — labels, traits, Dynamic Type, contrast, touch targets, focus management, orientation, and more. Based on the ios-swiftui-accessibility-techniques project with 41 static analysis rules across 23 WCAG criteria.

cvs-health/ios-swiftui-accessibility-techniques · 67 tokens

swiftui-microinteractions

Generate premium SwiftUI animations in the legendary-Animo style — spring physics, CoreHaptics, glass morphism, SF Symbols 7 draw animations, complete compilable files.

iAmVishal16/swiftui-microinteractions · 43 tokens

build-swiftui-interface

Use when a coding agent must design, scaffold, implement, or verify an iOS or macOS SwiftUI interface with Apple-platform state, accessibility, availability, testing, and Xcode evidence.

memi-design/memi · 45 tokens

ttb-skill-native-swiftui-components

Build reusable native SwiftUI UI components using 100% standard SwiftUI primitives with TTBaseUIKit design tokens, localization, chainable modifiers, and project architecture rules. NO TTBaseSUI wrappers. iOS 14+.

tqtuan1201/TTBaseUIKit · 55 tokens

apple-app-designer

Design and visually audit adaptive, accessible Apple app experiences across supported devices. Use for SwiftUI screen architecture, iPhone/iPad responsive layouts, navigation, paywalls, empty/loading/error states, Dynamic Type, VoiceOver, Apple Pencil or keyboard support, App Store screenshots, or when App Review…

MartinPuli/createAnApp · 76 tokens

design-to-ui

A workflow for turning Figma designs into native Android or iOS screens. Figma is a design tool; native output means Android Jetpack Compose or XML, and iOS SwiftUI or UIKit code that runs on those platforms.

naver/design-to-ui · 141 tokens