Figma Apple Kit Extract

Example session (illustrative values; the skill pulls the real numbers from Apple's kit in your Figma file).

I read the macOS primary button (default state) from Apple's official macOS Figma UI kit through the Figma MCP server, then mapped the specs to SwiftUI.

What gets extracted

• Corner radius and corner style (continuous where the kit uses it)
• The full fill stack: base fill, highlight gradient and any glass material layer, in order
• Shadow values from the kit's effect styles, not a guessed black drop shadow
• Label font, weight and padding, with kit variable aliases resolved to concrete token names

SwiftUI sketch (example values)

Button(action: {}) {
  Text("Continue")
    .font(.body.weight(.semibold))
    .padding(.horizontal, 16)
    .padding(.vertical, 8)
}
.buttonStyle(.plain)
.background {
  RoundedRectangle(cornerRadius: 6, style: .continuous)
    .fill(.ultraThinMaterial)
    .overlay {
      RoundedRectangle(cornerRadius: 6, style: .continuous)
        .strokeBorder(.white.opacity(0.18), lineWidth: 0.5)
    }
    .shadow(color: .black.opacity(0.12), radius: 2, y: 1)
}

Swap in the measured values from your kit read before shipping.

Traps avoided

1. Used the official kit library nodes, not cover-only community duplicates.
2. Checked light and dark variants separately so the glass layer doesn't vanish on a dark backdrop.
3. Measured from components and vectors, not a flattened PNG whose opaque corners look transparent.

Next steps

• Point me at another kit component (toggle, slider, sidebar row) and I'll extract it the same way.
• Ask for the .icns export chain once a faceted mark is placed in Figma.