### Installation via Agent

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Invoke the Figma to SwiftUI Skill within your agent by providing the Figma design URL.

```APIDOC
## Installation via Agent

### Description
Invoke the Figma to SwiftUI Skill within your agent by providing the Figma design URL.

### Usage
```
Use the figma-to-swiftui skill and implement this design:
https://www.figma.com/design/abc123/MyApp?node-id=10-5&m=dev
```

### Usage with Source Document

### Description
Invoke the Figma to SwiftUI Skill with a Figma URL and a brief description of the desired screen.

### Usage
```
Use the figma-to-swiftui skill. Implement the Login screen:
https://www.figma.com/design/abc123/MyApp?node-id=10-5&m=dev

Brief: Sign In validates email/password, disables CTA until valid, shows
loading while submitting, shows inline auth errors, navigates to Profile
on success. Signup and reset password are out of scope.
```
```

--------------------------------

### Installation via CLI

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Install the Figma to SwiftUI Skill directly using the provided npm command.

```APIDOC
## Installation via CLI

### Description
Install the Figma to SwiftUI Skill directly using the provided npm command.

### Command
```bash
npx skills add https://github.com/daetojemax/figma-to-swiftui-skill --skill figma-to-swiftui
```
```

--------------------------------

### Install Figma to SwiftUI Skill

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/README.md

Use this command to quickly install the skill using npx. Ensure you alias it to 'figma-to-swiftui' for consistent usage.

```bash
npx skills add https://github.com/daetojemax/figma-to-swiftui-skill --skill figma-to-swiftui
```

--------------------------------

### Use Assets in SwiftUI

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Examples demonstrate how to use images from an Asset Catalog in SwiftUI, controlling rendering mode, styling, and scaling behavior.

```swift
// Single-color UI icon — template so it tints with foreground color
Image("closeIcon")
    .resizable()
    .renderingMode(.template)
    .foregroundStyle(Color.secondary)
    .frame(width: 24, height: 24)

// Multi-color logo or illustration — original (no tinting)
Image("googleLogo")
    .resizable()
    .renderingMode(.original)
    .frame(width: 24, height: 24)

// Hero artwork — fit to container width
Image("onboardingHeroArtwork")
    .resizable()
    .scaledToFit()
    .frame(maxWidth: .infinity)

// Cropped avatar
Image("profilePlaceholder")
    .resizable()
    .scaledToFill()
    .frame(width: 64, height: 64)
    .clipShape(Circle())
```

--------------------------------

### Adaptation Checklist Example

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/adaptation-workflow.md

Use this format to present a checklist of differences found between existing code and a Figma design. Group changes by category for user review.

```markdown
Differences found:

### Structural
- ADD: timer card component (lime background, countdown, progress bar)
- ADD: illustration header with text overlay
- REMOVE: separate winner section — confirm?

### Layout & Spacing
- UPDATE: avatar size 56 → 64
- UPDATE: card spacing (avatar ↔ content) 12 → 8
- UPDATE: bottom padding per card 16 → 24
- UPDATE: divider opacity 0.12 → 0.14

### Typography
- UPDATE: title font 17pt medium → 20pt semibold
- UPDATE: team name font 17pt → 20pt regular
- UPDATE: points font 28pt semibold → 22pt expanded semibold

### Colors & Styling
- UPDATE: place badge — gold/silver/bronze gradients → purple gradient for all
- UPDATE: background gradient — hardcoded RGB → asset catalog colors

### New Data Requirements
- Timer: hardcode or needs API data?
- Stats tags: data source needed?
```

--------------------------------

### SwiftUI Full Typography Style Example

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/design-token-mapping.md

Implement a complete text style in SwiftUI, including font, width, tracking, line spacing, foreground style, and alignment, based on Figma tokens.

```swift
extension Font {
    static let headingLarge = Font.system(size: 28, weight: .bold)
}

Text("Title")
    .font(.headingLarge)
    .fontWidth(.expanded)
    .tracking(-0.56)
    .lineSpacing(34 - 28)
    .foregroundStyle(Color("textPrimary"))
    .multilineTextAlignment(.leading)
```

--------------------------------

### Use Figma to SwiftUI Skill with Figma URL and Brief

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/README.md

Provide both the Figma design URL and a text brief to guide the skill's implementation. The brief specifies scope, behavior, and out-of-scope items.

```text
Use the figma-to-swiftui skill. Implement this Login screen from Figma: https://www.figma.com/design/abc123/MyApp?node-id=10-5&m=dev. Also read this brief first: Sign In validates email/password, disables the CTA until valid, shows loading while submitting, shows inline auth errors, and navigates to Profile on success. Signup and reset password are out of scope.
```

--------------------------------

### SwiftUI Card Layout Example

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/layout-translation.md

Translates a common Figma card layout with padding, background, corner radius, and shadow into SwiftUI code. This pattern is useful for creating distinct content sections.

```swift
VStack(alignment: .leading, spacing: 8) {
    // card content
}
.padding(16)
.background(Color.white)
.clipShape(RoundedRectangle(cornerRadius: 12))
.shadow(color: .black.opacity(0.1), radius: 8, x: 0, y: 2)
```

--------------------------------

### App Button Style with State, Size, and Variant

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/component-variants.md

Combine multiple variant dimensions like state, size, and style into a single ButtonStyle. This example demonstrates how to manage visual differences based on these properties.

```swift
struct AppButtonStyle: ButtonStyle {
    let variant: ButtonVariant
    let size: ComponentSize
    let loadingState: ButtonLoadingState

    @Environment(\.isEnabled) private var isEnabled

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(size.font)
            .padding(.horizontal, size.horizontalPadding)
            .padding(.vertical, size.verticalPadding)
            .foregroundStyle(variant.foregroundColor)
            .background(variant.backgroundColor, in: RoundedRectangle(cornerRadius: size.cornerRadius))
            .opacity(configuration.isPressed ? 0.7 : 1.0)
            .opacity(isEnabled ? 1.0 : 0.5)
            .overlay {
                if loadingState == .loading {
                    ProgressView().tint(variant.foregroundColor)
                }
            }
            .allowsHitTesting(loadingState != .loading)
    }
}
```

```swift
// Usage
Button("Submit") { submit() }
    .buttonStyle(AppButtonStyle(variant: .primary, size: .large, loadingState: viewModel.submitState))
    .disabled(viewModel.isFormInvalid)
```

--------------------------------

### Implementing Scroll Views in SwiftUI from Figma

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Provides examples for translating Figma's 'clip content' and overflow properties into SwiftUI ScrollViews. Includes implementations for both vertical and horizontal (paging) scrolling behaviors.

```swift
// Figma "clip content" + overflow → ScrollView
ScrollView(.vertical) {
    VStack(spacing: 16) {
        ForEach(items) { item in ItemRow(item: item) }
    }
    .padding(.horizontal, 16)
}

// Paging scroll
ScrollView(.horizontal) {
    LazyHStack { ForEach(pages) { PageView(page: $0) } }
}
.scrollTargetBehavior(.paging)   // iOS 17+
```

--------------------------------

### Get Design Context for Assets

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/SKILL.md

Retrieves localhost URLs for assets from the Figma design context. Validate these URLs as PNGs before use.

```swift
get_design_context
```

--------------------------------

### Map Figma Tokens to SwiftUI Components

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Provides examples for mapping Figma design tokens to SwiftUI elements. Prefer Asset Catalogs for color tokens to ensure automatic dark mode support. Typography mapping includes all relevant fields like size, weight, and line height.

```swift
// Color tokens — prefer Asset Catalog for automatic dark mode support
Color("textPrimary")       // Asset Catalog named color (preferred)
extension Color {
    static var textPrimary: Color { Color("textPrimary") }
}

// Spacing tokens
enum Spacing {
    static let xs: CGFloat = 4
    static let sm: CGFloat = 8
    static let md: CGFloat = 12
    static let lg: CGFloat = 16
    static let xl: CGFloat = 24
    static let xxl: CGFloat = 32
}

// Typography — carry all fields (size, weight, width, lineHeight, tracking)
extension Font {
    static let headingLarge = Font.system(size: 28, weight: .bold)
}
Text("Title")
    .font(.headingLarge)
    .fontWidth(.expanded)          // Figma "Expanded Semibold" needs both weight AND width
    .tracking(-0.56)
    .lineSpacing(34 - 28)
    .foregroundStyle(Color("textPrimary"))

// Shadow tokens as View extensions
extension View {
    func shadowSm() -> some View { shadow(color: .black.opacity(0.05), radius: 2, x: 0, y: 1) }
    func shadowMd() -> some View { shadow(color: .black.opacity(0.1),  radius: 8, x: 0, y: 4) }
    func shadowLg() -> some View { shadow(color: .black.opacity(0.15), radius: 16, x: 0, y: 8) }
}

// Corner radius tokens
enum CornerRadius {
    static let sm: CGFloat = 4
    static let md: CGFloat = 8
    static let lg: CGFloat = 12
    static let xl: CGFloat = 16
    static let full: CGFloat = 9999  // use Capsule() instead of RoundedRectangle
}
```

--------------------------------

### Metadata-First Decision Tree

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/fetch-strategy.md

This decision tree guides when to run `get_metadata` before `get_design_context` based on the input node's characteristics. It helps determine the most efficient way to fetch design context, especially for complex or multi-screen nodes.

```text
Input node
├── Clearly one screen/component
│   └── Fetch design context directly
├── Root / page / probably multi-screen container
│   └── Run get_metadata first
│       ├── One clear child screen -> retarget to that child
│       └── Multiple candidates -> build screen map and ask if ambiguous
└── Unknown
    └── Run get_metadata first
```

--------------------------------

### SwiftUI List Item Layout Example

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/layout-translation.md

Translates a common Figma list item layout with horizontal auto layout, spacing, and padding into SwiftUI code. This pattern is suitable for rows in lists or tables.

```swift
HStack(spacing: 12) {
    // list item content
}
.padding(.vertical, 12)
.padding(.horizontal, 16)
.frame(maxWidth: .infinity, alignment: .leading)
```

--------------------------------

### Create Scaled PNG Assets for Catalog

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/asset-handling.md

Copy the 3x source image and use the 'sips' command-line tool to generate 2x and 1x scaled versions for the Xcode Asset Catalog. Adjust dimensions based on the Figma display size and desired scale.

```bash
cp source.png assetName@3x.png
sips -z 48 48 source.png --out assetName@2x.png
sips -z 24 24 source.png --out assetName@1x.png
```

--------------------------------

### Custom Button State Enum

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/component-variants.md

Use a custom enum for button states like loading, success, or error when no system equivalent exists. This example shows how to integrate it into a ButtonStyle.

```swift
enum ButtonLoadingState {
    case idle, loading, success, error
}

struct PrimaryButtonStyle: ButtonStyle {
    let loadingState: ButtonLoadingState
    @Environment(\.isEnabled) private var isEnabled

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .opacity(configuration.isPressed ? 0.7 : 1.0)
            .opacity(isEnabled ? 1.0 : 0.5)
            .overlay {
                if loadingState == .loading {
                    ProgressView()
                }
            }
            .allowsHitTesting(loadingState != .loading)
    }
}
```

--------------------------------

### Apply Padding and Background Order in SwiftUI

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/layout-translation.md

Demonstrates the correct order for applying padding and background modifiers to achieve the desired visual result, similar to Figma's behavior. Incorrect order can lead to unexpected visual outcomes.

```swift
content
    .padding(16)
    .background(Color.white, in: .rect(cornerRadius: 12))
```

```swift
content
    .background(Color.white)
    .padding(16)
```

--------------------------------

### Skill Directory Structure

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/README.md

Overview of the file and directory structure for the figma-to-swiftui-skill project. Key workflow and reference files are highlighted.

```tree
figma-to-swiftui-skill/
  SKILL.md                                — Main workflow
  references/
    source-document.md                    — Read .txt/.md/spec before Figma; scope and behavior contract
    screen-discovery.md                   — Metadata-first mapping for root/page/multi-screen nodes
    fetch-strategy.md                     — Timeout-safe metadata/context strategy and dedup rules
    visual-fidelity.md                    — Exact value extraction, visual inventory, SwiftUI pitfalls
    layout-translation.md                 — Auto Layout → Stacks, sizing, scroll, common patterns
    responsive-layout.md                  — Size classes, adaptive layouts, multi-device designs
    design-token-mapping.md               — Figma variables → Color/Font/Spacing tokens
    component-variants.md                 — Figma variants → SwiftUI styles and enums
    asset-handling.md                      — Figma-rendered PNG assets, xcassets, remote images
    adaptation-workflow.md                — Existing screen adaptation and diff audit
    figma-mcp-setup.md                    — MCP connection, troubleshooting
```

--------------------------------

### Invoke Figma to SwiftUI Skill with Figma URL and Brief

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Invoke the skill with a Figma URL and a brief describing the desired implementation. This allows for more specific design requirements.

```bash
Use the figma-to-swiftui skill. Implement the Login screen:
https://www.figma.com/design/abc123/MyApp?node-id=10-5&m=dev

Brief: Sign In validates email/password, disables CTA until valid, shows
loading while submitting, shows inline auth errors, navigates to Profile
on success. Signup and reset password are out of scope.
```

--------------------------------

### Use Figma to SwiftUI Skill with Figma URL

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/README.md

Initiate the skill by providing the Figma design URL. The skill will then process the design for implementation.

```text
Use the figma-to-swiftui skill and implement this design: https://www.figma.com/design/abc123/MyApp?node-id=10-5&m=dev
```

--------------------------------

### Generate @1x, @2x, @3x Assets

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Use shell commands to resize a 3x source image into @1x, @2x, and @3x versions. Ensure the source image is appropriately sized for the desired 3x output.

```bash
cp source.png closeIcon@3x.png
sips -z 48 48 source.png --out closeIcon@2x.png
sips -z 24 24 source.png --out closeIcon@1x.png
```

--------------------------------

### Adaptive Sizing in SwiftUI

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Demonstrates correct methods for adaptive sizing in SwiftUI, avoiding hard-coded screen widths and utilizing `maxWidth`, `containerRelativeFrame`, and `GeometryReader` for flexible layouts.

```swift
// WRONG — breaks in Split View, Slide Over, Stage Manager
.frame(width: UIScreen.main.bounds.width)
.frame(width: 375)

// CORRECT — full-width elements
.frame(maxWidth: .infinity)

// CORRECT — proportional container (iOS 17+)
.containerRelativeFrame(.horizontal) { length, _ in length * 0.915 }

// CORRECT — GeometryReader for older targets
GeometryReader {
    geo in
    content.frame(width: geo.size.width * 0.915)
}
```

--------------------------------

### Download Asset via Localhost URL

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/asset-handling.md

Use curl to download an asset from a local development server. Ensure the URL is active as localhost URLs are ephemeral. Verify the downloaded file is a PNG.

```bash
curl -o asset-name.png "http://localhost:PORT/path/to/asset"
file asset-name.png
```

--------------------------------

### Figma MCP Tool: get_design_context

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Fetch the full design specification including layout, typography, and colors. The prompt parameter can specify the target platform and framework.

```text
get_design_context(fileKey="abc123", nodeId="3166:70147", prompt="generate for iOS using SwiftUI")
```

--------------------------------

### Call Budget Sanity Check

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/fetch-strategy.md

This outlines a typical call budget for a single screen, serving as a sanity check. Exceeding this budget signals a need to re-evaluate the fetching strategy.

```text
- get_metadata: 0-1 before context, plus 1 if context times out or assets need node IDs
- get_design_context: 1 per screen, plus section calls only after split
- get_screenshot: 1 for the screen plus one per flattened region or icon asset
- get_variable_defs: 1 per `fileKey`
- Code Connect lookup: optional, only if the MCP server exposes it
```

--------------------------------

### Visual Inventory Template

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/visual-fidelity.md

Use this template to document every screen or component's visual properties before writing SwiftUI code. Ensure every value has a source tag.

```text
─────────── CONTAINER ───────────
size:           W x H  (fixed / fill-width / fill-height / hug)
background:     <hex or token>   [source: tokens | inline | class]
cornerRadius:   Xpt              [source]
border:         Xpt, <hex>       [source]
shadow:         color=<rgba>, radius=X, offsetX=X, offsetY=X   [source]
padding:        top=X, leading=X, bottom=X, trailing=X

─────────── LAYOUT ───────────
type:           VStack | HStack | ZStack | ScrollView + stack | LazyVGrid | GeometryReader
spacing:        Xpt
alignment:      leading | center | trailing (+ cross-axis)

─────────── ELEMENTS ─────────── (one row per visible element)
[n] <kind> "<label or asset name>"
    position:    index in stack | offset (x,y) for ZStack
    size:        WxH (fixed / hug / fill)
    — if Text:
    font:        family=<name>, size=X, weight=<w>, width=<std|expanded>
    lineHeight:  Xpt absolute  OR  Xx multiplier     [critical — never skip]
    letterSpacing: X pt
    color:       <hex or token>
    alignment:   leading/center/trailing
    lineLimit:   N
    — if Image/Icon:
    asset:       <name>
    size:        WxH
    renderingMode: original | template (+ tint color)
    — if Button/Control:
    style:       <variant>
    sizeVariant: small|medium|large
    background:  <hex>
    foreground:  <hex>
    cornerRadius: Xpt
    padding:     X x X
    — if Shape:
    shape:       RoundedRectangle | Capsule | Circle | Custom
    fill:        <hex or gradient spec>
    stroke:      Xpt <hex>
```

--------------------------------

### Figma MCP Tool: get_screenshot

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Capture a visual reference PNG of a screen or an individual asset node. Always call this after get_design_context.

```text
get_screenshot(fileKey="abc123", nodeId="3166:70147")   // full screen reference
```

```text
get_screenshot(fileKey="abc123", nodeId="3166:70211")   // individual icon/asset node
```

--------------------------------

### Download Screenshot Asset via MCP

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Demonstrates how to download a specific screenshot asset using the get_screenshot function with file key and node ID. This is the preferred method as it does not require a Figma token.

```bash
# Download per-node via MCP (preferred — no FIGMA_TOKEN required)
get_screenshot(fileKey="abc123", nodeId="3166:70211")
```

--------------------------------

### Implementing Push Transition in SwiftUI

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/layout-translation.md

For push transitions, utilize the system's NavigationStack push functionality.

```swift
NavigationStack push using the system transition
```

--------------------------------

### Download Figma Assets

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/SKILL.md

Fetches Figma-owned assets like icons, logos, and illustrations. Use this for assets that need to be exported as PNG.

```swift
get_screenshot(fileKey, nodeId)
```

--------------------------------

### get_screenshot

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Capture a visual reference PNG of a node or export Figma-owned assets as PNG.

```APIDOC
## `get_screenshot`

### Description
Capture a visual reference PNG of a node or export Figma-owned assets as PNG. Always call this after `get_design_context`. The screenshot is the source of truth for visual validation.

### Function Signature
```text
get_screenshot(fileKey="abc123", nodeId="3166:70147")   // full screen reference
get_screenshot(fileKey="abc123", nodeId="3166:70211")   // individual icon/asset node
```

### Validation
Validate every downloaded asset before adding to Xcode.

#### Example
```bash
file closeIcon.png
# Expected: closeIcon.png: PNG image data, 72 x 72, 8-bit/color RGBA
# If it reports SVG, XML, or ASCII text → failed export, re-fetch via get_screenshot
```
```

--------------------------------

### Implementing Dissolve Transition in SwiftUI

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/layout-translation.md

Simulate a dissolve transition by animating the opacity of a view using withAnimation(.easeInOut).

```swift
.opacity(...)
```

```swift
withAnimation(.easeInOut)
```

--------------------------------

### Deduplicate Assets by Source Node

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/fetch-strategy.md

Implement a caching mechanism to fetch assets (icons, illustrations) only once per source node ID. Use the source node ID as the cache key, replacing ':' with '_' for filenames.

```text
.figma-cache/
  _shared/assets/
    3166_70211.png
    3166_70211.meta.json
```

--------------------------------

### Implementing Move/Slide In Transition in SwiftUI

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/layout-translation.md

Use .transition(.move(edge:)) or .offset(...) to implement move or slide-in transitions.

```swift
.transition(.move(edge:))
```

```swift
.offset(...)
```

--------------------------------

### Diff Checklist for UI Updates

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

A text-based checklist format for auditing differences between a Figma design and an existing SwiftUI screen. It categorizes changes into Structural, Layout & Spacing, Typography, Colors & Styling, and New Data Requirements.

```text
Differences found:

### Structural
- ADD: timer card component (lime background, countdown, progress bar)
- ADD: illustration header with text overlay
- REMOVE: separate winner section — confirm?

### Layout & Spacing
- UPDATE: avatar size 56 → 64
- UPDATE: card spacing (avatar ↔ content) 12 → 8
- UPDATE: bottom padding per card 16 → 24
- UPDATE: divider opacity 0.12 → 0.14

### Typography
- UPDATE: title font 17pt medium → 20pt semibold
- UPDATE: points font 28pt semibold → 22pt expanded semibold

### Colors & Styling
- UPDATE: place badge — gold/silver/bronze gradients → purple gradient for all
- UPDATE: background — hardcoded hex → asset catalog tokens

### New Data Requirements
- Timer: hardcode or needs API data?
- Stats tags: data source needed?
```

--------------------------------

### Avoid Shipping Placeholder Text

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/visual-fidelity.md

Never ship literal placeholder text like 'Lorem ipsum' or 'Username'. Instead, use semantic localizable keys, bind to model properties with a TODO, or ask the user for real copy.

```swift
Text("profile.title")
```

```swift
Text(viewModel.title)
```

--------------------------------

### Fetch Design Tokens

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/SKILL.md

Retrieves color, spacing, and typography tokens from a Figma file. Map these to your project's SwiftUI design system.

```swift
get_variable_defs(fileKey: ":fileKey", nodeId: "1-2")
```

--------------------------------

### Implement Adaptive Layouts for iPhone and iPad

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/responsive-layout.md

When Figma provides separate frames for iPhone and iPad, implement a single SwiftUI view that adapts to the `horizontalSizeClass`. This involves identifying shared components and handling layout differences, such as switching between vertical stacks for iPhone and side-by-side arrangements for iPad.

```swift
struct ProfileView: View {
    @Environment(\.horizontalSizeClass) private var sizeClass

    var body: some View {
        if sizeClass == .compact {
            // iPhone layout: vertical stack
            ScrollView {
                VStack(spacing: 16) {
                    ProfileHeader()
                    ProfileStats()
                    ProfileContent()
                }
            }
        } else {
            // iPad layout: side-by-side
            HStack(alignment: .top, spacing: 24) {
                VStack {
                    ProfileHeader()
                    ProfileStats()
                }
                .frame(width: 320)

                ProfileContent()
                    .frame(maxWidth: .infinity)
            }
        }
    }
}
```

--------------------------------

### Applying Shadows in SwiftUI

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/visual-fidelity.md

Use the full `.shadow()` form specifying color, radius, x, and y offsets to match Figma shadows accurately.

```swift
Text("Shadowed text")
    .shadow(color: .black.opacity(0.1), radius: 5, x: 2, y: 2)
```

--------------------------------

### get_design_context

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Fetch the full design specification, including layout, typography, colors, and a React+Tailwind code representation.

```APIDOC
## `get_design_context`

### Description
Fetch the full design specification, including layout, typography, colors, and a React+Tailwind code representation. Treat the output as a design specification — never port the React code to SwiftUI.

### Function Signature
```text
get_design_context(fileKey="abc123", nodeId="3166:70147", prompt="generate for iOS using SwiftUI")
```

### Parsing Tailwind Classes to SwiftUI Values

| Tailwind Class | Exact SwiftUI Value |
|---|---|
| `p-4` / `gap-4` | 16pt padding / 16pt spacing |
| `text-base` / `text-lg` | 16pt / 18pt font |
| `font-semibold` | `.semibold` weight |
| `rounded-xl` | 12pt corner radius |
| `leading-[22px]` | 22pt line height (absolute) |
| `tracking-[-0.32px]` | `.tracking(-0.32)` |
| `p-[17px]` | 17pt — arbitrary, never round to 16 |

### Inline Style Blocks
Inline style blocks are authoritative over class names.

#### Example
```jsx
// From design-context.md — carry every field into SwiftUI
style={{
  fontFamily: 'SF Pro Display',
  fontWeight: '600',
  fontSize: '17px',
  lineHeight: '22px',
  letterSpacing: '-0.32px',
  color: '#1C1C1E'
}}
```

#### Correct SwiftUI Translation
```swift
// Correct SwiftUI translation — no fields dropped
Text("Title")
    .font(.system(size: 17, weight: .semibold))
    .lineSpacing(22 - 17)          // lineHeight - fontSize
    .tracking(-0.32)
    .foregroundStyle(Color(hex: "1C1C1E"))
```
```

--------------------------------

### Translate Figma Auto Layout to SwiftUI Stacks

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Demonstrates how Figma's Auto Layout properties like direction, spacing, and padding map directly to SwiftUI's VStack and HStack. Note that padding should precede the background modifier for correct inner padding.

```swift
// Figma: vertical auto layout, gap 8, padding 16, white bg, radius 12, drop shadow
VStack(alignment: .leading, spacing: 8) {
    Text("Card Title").font(.headline)
    Text("Subtitle").font(.subheadline).foregroundStyle(.secondary)
}
.padding(16)
// padding BEFORE background = inner padding (correct)
.background(Color.white, in: RoundedRectangle(cornerRadius: 12))
.shadow(color: .black.opacity(0.1), radius: 8, x: 0, y: 2)

// Figma: horizontal auto layout, spacing 12, fill container
HStack(spacing: 12) {
    Image("avatarIcon").resizable().frame(width: 40, height: 40).clipShape(Circle())
    VStack(alignment: .leading, spacing: 4) {
        Text("Name").font(.headline)
        Text("Role").font(.subheadline).foregroundStyle(.secondary)
    }
    Spacer()
}
.padding(.vertical, 12)
.padding(.horizontal, 16)
.frame(maxWidth: .infinity, alignment: .leading)
```

--------------------------------

### SwiftUI LinearGradient for Figma Gradients

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/design-token-mapping.md

Demonstrates mapping Figma's top-to-bottom linear gradients and gradients with specific stop locations to SwiftUI's LinearGradient.

```swift
// Figma: top-to-bottom linear gradient
LinearGradient(
    colors: [Color("gradientStart"), Color("gradientEnd")],
    startPoint: .top,
    endPoint: .bottom
)
```

```swift
// Figma: specific stop locations
LinearGradient(
    stops: [
        .init(color: Color("gradientStart"), location: 0.0),
        .init(color: Color("gradientMid"), location: 0.6),
        .init(color: Color("gradientEnd"), location: 1.0)
    ],
    startPoint: .leading,
    endPoint: .trailing
)
```

--------------------------------

### Use Image with ScaledToFill and Clipping in SwiftUI

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/asset-handling.md

Display an image in SwiftUI using .resizable() and .scaledToFill() to fill its frame, then use .clipShape() to crop it to a specific shape, like a circle. This is useful for profile pictures or when Figma crops an image.

```swift
Image("profilePlaceholder")
    .resizable()
    .scaledToFill()
    .frame(width: 64, height: 64)
    .clipShape(Circle())
```

--------------------------------

### Fetch Design Tokens with get_variable_defs

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Call this function once per fileKey to retrieve color, spacing, and typography tokens for the entire Figma file. Reuse these tokens across multiple screens from the same file.

```text
get_variable_defs(fileKey="abc123", nodeId="3166:70147")
```

--------------------------------

### Specify Image Rendering Mode

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/visual-fidelity.md

Always set the `.renderingMode` explicitly on `Image` instances to avoid relying on the asset catalog's default behavior.

```swift
.renderingMode
```

--------------------------------

### Applying Padding in SwiftUI

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/visual-fidelity.md

Always specify padding amounts, as `.padding()` without arguments defaults to 16pt.

```swift
Text("Padded text")
    .padding(16)
```

--------------------------------

### Configuring Image Rendering Mode in SwiftUI

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/visual-fidelity.md

Use `.renderingMode(.template)` with `.foregroundStyle(...)` when an icon should tint with the foreground color.

```swift
Image(systemName: "heart.fill")
    .renderingMode(.template)
    .foregroundStyle(.red)
```

--------------------------------

### Look up Existing Code Mappings with get_code_connect_map

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Use this function before implementing a component to check if a Figma component already has a mapped SwiftUI implementation. This helps in reusing existing code.

```text
get_code_connect_map(fileKey="abc123", nodeId="3166:70147")
```

--------------------------------

### SwiftUI Translation of Inline Styles

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Demonstrates the correct SwiftUI translation of inline style properties from a design context, ensuring no fields are dropped.

```swift
Text("Title")
    .font(.system(size: 17, weight: .semibold))
    .lineSpacing(22 - 17)          // lineHeight - fontSize
    .tracking(-0.32)
    .foregroundStyle(Color(hex: "1C1C1E"))
```

--------------------------------

### Figma MCP Tool: get_metadata

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Inspect node structure before fetching design context. Use this for metadata-first screen discovery, especially for root nodes or multi-screen frames.

```text
get_metadata(fileKey="abc123", nodeId="0:1")
```

--------------------------------

### Adaptive Grid Layout

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Implement an adaptive grid in SwiftUI using `LazyVGrid` with `.adaptive(minimum:)` columns to automatically adjust the number of columns based on the available width, suitable for different screen sizes like iPhone and iPad.

```swift
// Figma: 2-col grid on iPad, 1-col on iPhone
LazyVGrid(columns: [GridItem(.adaptive(minimum: 160))], spacing: 16) {
    ForEach(items) { ItemCard(item: $0) }
}
```

--------------------------------

### Register New Component Mappings with add_code_connect_map

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Register reusable and stable SwiftUI components after creation. This ensures that future Figma designs using the same component reference the existing code, preventing duplication.

```text
add_code_connect_map(
  fileKey="abc123",
  nodeId="3166:70211",
  componentPath="Sources/Components/PrimaryButton.swift",
  componentName="PrimaryButton"
)
```

--------------------------------

### ViewThatFits for Automatic Layout Adaptation

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Utilize `ViewThatFits` (iOS 16+) to create layouts that automatically adapt to available space by trying different container types (e.g., horizontal then vertical) without explicit device branching.

```swift
ViewThatFits(in: .horizontal) {
    HStack(spacing: 12) { icon; label; Spacer(); value }    // try horizontal first
    VStack(alignment: .leading, spacing: 8) {               // fall back to vertical
        HStack(spacing: 12) { icon; label }
        value
    }
}
```

--------------------------------

### App Button Style with Variant and Size Enums

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

A flexible ButtonStyle that accepts enum parameters for variant (primary, secondary, destructive) and size (small, medium, large), allowing for a wide range of visual customizations. It also handles loading states.

```swift
enum ComponentSize { case small, medium, large }
enum ButtonVariant { case primary, secondary, destructive }

struct AppButtonStyle: ButtonStyle {
    let variant: ButtonVariant
    let size: ComponentSize
    let loadingState: ButtonLoadingState

    @Environment(\.isEnabled) private var isEnabled

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(size.font)
            .padding(.horizontal, size.horizontalPadding)
            .padding(.vertical, size.verticalPadding)
            .foregroundStyle(variant.foregroundColor)
            .background(variant.backgroundColor, in: RoundedRectangle(cornerRadius: size.cornerRadius))
            .opacity(configuration.isPressed ? 0.7 : 1.0)
            .opacity(isEnabled ? 1.0 : 0.5)
            .overlay {
                if loadingState == .loading { ProgressView().tint(variant.foregroundColor) }
            }
            .allowsHitTesting(loadingState != .loading)
    }
}

// Usage
Button("Submit") { submit() }
    .buttonStyle(AppButtonStyle(variant: .primary, size: .large, loadingState: .idle))
```

--------------------------------

### Validate Downloaded Asset

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Validate downloaded assets using the 'file' command. Ensure the output matches the expected PNG image data format.

```bash
file closeIcon.png
# Expected: closeIcon.png: PNG image data, 72 x 72, 8-bit/color RGBA
# If it reports SVG, XML, or ASCII text → failed export, re-fetch via get_screenshot
```

--------------------------------

### SwiftUI Color Definitions

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

The `Color(hex:)` initializer is not built-in and requires a custom extension. Prefer using Asset Catalogs or RGB decimal values for colors.

```swift
// ❌ Color(hex:) is not built-in — will fail to compile if extension is missing
Color(hex: "FF0080")

// ✅ Check project for existing extension; fallback options:
Color("accentPrimary")                    // Asset Catalog (preferred)
Color(red: 1.0, green: 0.0, blue: 0.5)   // RGB decimal
```

--------------------------------

### Search for Specific UI Elements in Generated Code

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/asset-handling.md

Use ripgrep (rg) to search generated Swift files for specific UI elements like system images, text, or shapes. This helps in verifying that Figma-designed assets have been correctly replaced with Asset Catalog images.

```bash
rg 'Image\(systemName:|Text\("G"\)|Text\("f"\)|Rectangle\(\)|Circle\(\)|Shape' <generated-swift-files>
```

--------------------------------

### Making Images Resizable in SwiftUI

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/visual-fidelity.md

Include `.resizable()` for non-SF-Symbol images that need to be sized; otherwise, their size is intrinsic.

```swift
Image("customImage")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 100, height: 100)
```

--------------------------------

### Adaptive Grid Layout with LazyVGrid

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/responsive-layout.md

Use `GridItem(.adaptive(minimum: 160))` to create a 2-column grid on iPad that collapses to a 1-column grid on iPhone.

```swift
LazyVGrid(columns: [GridItem(.adaptive(minimum: 160))])
```

--------------------------------

### Invoke Figma to SwiftUI Skill with Figma URL

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Invoke the skill by providing a Figma URL. This is used for implementing designs directly from Figma.

```bash
Use the figma-to-swiftui skill and implement this design:
https://www.figma.com/design/abc123/MyApp?node-id=10-5&m=dev
```

--------------------------------

### Apply Blur to Background in SwiftUI

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/SKILL.md

Use .background() with .ultraThinMaterial or .regularMaterial for background blur effects.

```swift
.background(.ultraThinMaterial)
```

--------------------------------

### Use Artwork with ScaledToFit in SwiftUI

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/asset-handling.md

Display artwork in SwiftUI using .resizable() and .scaledToFit() to maintain its aspect ratio. Use .frame(maxWidth: .infinity) to allow it to expand horizontally.

```swift
Image("onboardingHeroArtwork")
    .resizable()
    .scaledToFit()
    .frame(maxWidth: .infinity)
```

--------------------------------

### Apply Move In/Slide In Transition in SwiftUI

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/SKILL.md

Use .transition(.move(edge:)) or .offset() for move in or slide in transitions.

```swift
.transition(.move(edge: .leading))
```

--------------------------------

### Size Classes for Layout Adaptation

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Implement adaptive layouts in SwiftUI by using the `horizontalSizeClass` environment variable to switch between different UI structures for iPhone (compact) and iPad (regular) layouts.

```swift
struct ContentView: View {
    @Environment(\.horizontalSizeClass) private var sizeClass

    var body: some {
        if sizeClass == .compact {
            // iPhone: single column navigation
            NavigationStack { ItemList() }
        } else {
            // iPad: sidebar + detail
            NavigationSplitView {
                ItemList()
            } detail: {
                ItemDetail()
            }
        }
    }
}

// Merging iPhone + iPad Figma frames into one adaptive view
struct ProfileView: View {
    @Environment(\.horizontalSizeClass) private var sizeClass

    var body: some {
        if sizeClass == .compact {
            ScrollView {
                VStack(spacing: 16) {
                    ProfileHeader()
                    ProfileStats()
                    ProfileContent()
                }
            }
        } else {
            HStack(alignment: .top, spacing: 24) {
                VStack { ProfileHeader(); ProfileStats() }.frame(width: 320)
                ProfileContent().frame(maxWidth: .infinity)
            }
        }
    }
}
```

--------------------------------

### SwiftUI Adaptive Colors from Figma

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/design-token-mapping.md

Use Asset Catalog named colors for automatic light/dark mode adaptation. Fallback to Color extensions if Asset Catalog is not an option.

```swift
// Asset Catalog approach (preferred)
Color("textPrimary") // automatically adapts

// Code approach (when needed)
extension Color {
    static var textPrimary: Color {
        Color("textPrimary")
    }
}
```

--------------------------------

### Switch Layouts with HorizontalSizeClass

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/responsive-layout.md

Use `@Environment(\.horizontalSizeClass)` to conditionally render different SwiftUI views based on the available screen width. This is useful when Figma designs show fundamentally different layouts for compact (e.g., iPhone portrait) and regular (e.g., iPad full-screen) environments.

```swift
struct ContentView: View {
    @Environment(\.horizontalSizeClass) private var sizeClass

    var body: some View {
        if sizeClass == .compact {
            NavigationStack {
                ItemList()
            }
        } else {
            NavigationSplitView {
                ItemList()
            } detail: {
                ItemDetail()
            }
        }
    }
}
```

--------------------------------

### Register Code Connect Map

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/SKILL.md

Use add_code_connect_map to link Figma components to SwiftUI implementations for reusability.

```javascript
add_code_connect_map(fileKey, nodeId, componentPath, componentName)
```

--------------------------------

### SwiftUI Shadow Extensions for Figma Elevation

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/design-token-mapping.md

Provides convenient extensions for SwiftUI Views to apply predefined shadow styles, mirroring Figma's elevation levels.

```swift
extension View {
    func shadowSm() -> some View {
        shadow(color: .black.opacity(0.05), radius: 2, x: 0, y: 1)
    }
    func shadowMd() -> some View {
        shadow(color: .black.opacity(0.1), radius: 8, x: 0, y: 4)
    }
    func shadowLg() -> some View {
        shadow(color: .black.opacity(0.15), radius: 16, x: 0, y: 8)
    }
}
```

--------------------------------

### Specify Explicit Padding and Spacing

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/visual-fidelity.md

Always define `VStack(spacing:)` and `.padding(X)` with explicit values to prevent unexpected behavior from SwiftUI's default settings.

```swift
VStack(spacing:)
```

```swift
.padding(X)
```

--------------------------------

### get_metadata

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Inspect node structure before fetching design context, useful for metadata-first screen discovery.

```APIDOC
## `get_metadata`

### Description
Inspect node structure before fetching design context, useful for metadata-first screen discovery. Call this before `get_design_context` when the node is a root, page, multi-screen frame, or when a source document names more screens than the URL contains.

### Function Signature
```text
get_metadata(fileKey="abc123", nodeId="0:1")
```

### Decision Tree
Input node
├── Clearly one screen/component
│   └── Fetch design context directly
├── Root / page / multi-screen container
│   └── Run get_metadata first
│       ├── One clear child screen -> retarget to that child
│       └── Multiple candidates -> build screen map, ask if ambiguous
└── Unknown
    └── Run get_metadata first

### Candidate Screen Mapping Output Example
Candidate screen mapping:
- Splash     -> node 12:4  -> confidence: high
- Intro 1    -> node 12:8  -> confidence: medium
- Intro 2    -> node 12:12 -> confidence: medium
- Main       -> node 12:20 -> confidence: high

Ambiguities:
- node 12:8 and 12:9 may both be Intro 1 variants

Recommendation:
- use 12:8 as the default implementation node
```

--------------------------------

### Xcode Asset Catalog Structure for PNGs

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/asset-handling.md

Defines the standard directory structure and Contents.json for a PNG imageset in an Xcode Asset Catalog. This structure allows Xcode to manage different resolutions of an asset.

```text
Assets.xcassets/
  assetName.imageset/
    assetName@1x.png
    assetName@2x.png
    assetName@3x.png
    Contents.json
```

```json
{
  "images": [
    { "filename": "assetName@1x.png", "idiom": "universal", "scale": "1x" },
    { "filename": "assetName@2x.png", "idiom": "universal", "scale": "2x" },
    { "filename": "assetName@3x.png", "idiom": "universal", "scale": "3x" }
  ],
  "info": { "author": "xcode", "version": 1 }
}
```

--------------------------------

### Validate Downloaded PNG Image

Source: https://context7.com/daetojemax/figma-to-swiftui-skill/llms.txt

Provides a command to validate that a downloaded file, such as 'closeIcon.png', is indeed a valid PNG image by checking its data.

```bash
# Validate before adding to Xcode
file closeIcon.png
# Must report: PNG image data
```

--------------------------------

### Applying Background Blur in SwiftUI

Source: https://github.com/daetojemax/figma-to-swiftui-skill/blob/master/references/layout-translation.md

Use background materials like .ultraThinMaterial, .regularMaterial, or .thickMaterial for background blur effects.

```swift
.background(.ultraThinMaterial)
```

```swift
.regularMaterial
```

```swift
.thickMaterial
```