Implement or update iOS SwiftUI UI from Figma designs using the Figma MCP server. Also supports implementation plans, token mapping, and asset export for that UI. Packaged in the Agent Skills format.
The skill focuses on design evidence, native rendering differences, and project conventions. Its short entrypoint routes to references only when needed; it does not require a fixed sequence of calls or approval for routine implementation choices.
npx skills add https://github.com/daetojemax/figma-to-swiftui-skill --skill figma-to-swiftui
For manual installation, clone the repository and install or symlink the folder according to your tool's skills documentation:
Live design retrieval needs an authenticated Figma MCP connection and a design link, or a selected node on a desktop server that supports selections. Existing design evidence can be reused. An established SwiftUI project is recommended for implementation.
Use figma-to-swiftui to implement this screen in the existing app: https://www.figma.com/design/abc123/MyApp?node-id=10-5
Update the existing Login screen to match this Figma frame. Sign In validates email and password, disables invalid submissions, shows loading and inline errors, and navigates to Profile on success. Signup and password reset are out of scope.
Export the icons from this Figma frame into the existing asset catalog. Do not change the screen code.
A brief or ticket can define behavior that is not visible in a static mockup. The skill uses it to select relevant frames and required states without pulling unrelated screens into scope.
Questions are reserved for material ambiguity about the target design, scope, behavior, or required missing inputs. Routine choices follow the project or a suitable native approach. Code Connect publication requires the user's request or existing authorization.
| File | Use when |
|---|---|
| SKILL.md | Selecting the workflow and completion criteria |
| source-document.md | Reconciling a brief with Figma |
| screen-discovery.md | Locating screens in a page or flow |
| fetch-strategy.md | Choosing calls, recovering from large responses, reusing scoped evidence |
| adaptation-workflow.md | Updating existing UI without losing behavior |
| asset-handling.md | Exporting and integrating real artwork |
| design-token-mapping.md | Mapping tokens and typography |
| layout-translation.md | Translating layout, effects, and transitions |
| responsive-layout.md | Adapting to supported container sizes |
| component-variants.md | Representing required states, sizes, and styles |
| visual-fidelity.md | Diagnosing visual differences |
| figma-mcp-setup.md | Resolving connection or retrieval failures |
Keep task selection precise, the entrypoint concise, and conditional details in relevant references. Preserve non-obvious constraints without turning one past failure into a universal procedure. This structure follows the guidance in Rethinking skills and prompts for GPT-6 Astra while remaining model-independent.
Validate frontmatter and local links after editing. For workflow changes, check realistic cases such as a small visual adjustment, a new screen with async states, an ambiguous flow, and an asset-only request. Use real Figma and rendered SwiftUI checks when assessing end-to-end implementation quality.
Implement or update iOS SwiftUI UI from Figma designs using the Figma MCP server. Also supports implementation plans, token mapping, and asset export for that UI. Packaged in the Agent Skills format.
The skill focuses on design evidence, native rendering differences, and project conventions. Its short entrypoint routes to references only when needed; it does not require a fixed sequence of calls or approval for routine implementation choices.
npx skills add https://github.com/daetojemax/figma-to-swiftui-skill --skill figma-to-swiftui
For manual installation, clone the repository and install or symlink the folder according to your tool's skills documentation:
Live design retrieval needs an authenticated Figma MCP connection and a design link, or a selected node on a desktop server that supports selections. Existing design evidence can be reused. An established SwiftUI project is recommended for implementation.
Use figma-to-swiftui to implement this screen in the existing app: https://www.figma.com/design/abc123/MyApp?node-id=10-5
Update the existing Login screen to match this Figma frame. Sign In validates email and password, disables invalid submissions, shows loading and inline errors, and navigates to Profile on success. Signup and password reset are out of scope.
Export the icons from this Figma frame into the existing asset catalog. Do not change the screen code.
A brief or ticket can define behavior that is not visible in a static mockup. The skill uses it to select relevant frames and required states without pulling unrelated screens into scope.
Questions are reserved for material ambiguity about the target design, scope, behavior, or required missing inputs. Routine choices follow the project or a suitable native approach. Code Connect publication requires the user's request or existing authorization.
| File | Use when |
|---|---|
| SKILL.md | Selecting the workflow and completion criteria |
| source-document.md | Reconciling a brief with Figma |
| screen-discovery.md | Locating screens in a page or flow |
| fetch-strategy.md | Choosing calls, recovering from large responses, reusing scoped evidence |
| adaptation-workflow.md | Updating existing UI without losing behavior |
| asset-handling.md | Exporting and integrating real artwork |
| design-token-mapping.md | Mapping tokens and typography |
| layout-translation.md | Translating layout, effects, and transitions |
| responsive-layout.md | Adapting to supported container sizes |
| component-variants.md | Representing required states, sizes, and styles |
| visual-fidelity.md | Diagnosing visual differences |
| figma-mcp-setup.md | Resolving connection or retrieval failures |
Keep task selection precise, the entrypoint concise, and conditional details in relevant references. Preserve non-obvious constraints without turning one past failure into a universal procedure. This structure follows the guidance in Rethinking skills and prompts for GPT-6 Astra while remaining model-independent.
Validate frontmatter and local links after editing. For workflow changes, check realistic cases such as a small visual adjustment, a new screen with async states, an ambiguous flow, and an asset-only request. Use real Figma and rendered SwiftUI checks when assessing end-to-end implementation quality.