Figma iOS Asset Export
Paste the following prompt into your AI chat to install this skill:
Please install @user_104630ff/figma-ios-asset-export according to https://skillhub.cn/install/skillhub.md.
About this skill
Problem
When matching a Figma design in iOS, custom icons, empty states, badges, gradients, and blurred artwork are often rebuilt with approximate SwiftUI, UIKit, or CALayer code. The pixels, corners, shadows, or gradients can drift from the original, and the mismatch is expensive to debug.
How It Works
This skill treats the Figma file as the source of truth for custom imagery. It parses the file key and node id from a Figma URL, then records each exportable node in a JSON mapping. By default it exports PNG @2x and PNG @3x; it uses PDF only when vector output is requested. When an Xcode project is present, it can write .imageset entries and update Contents.json, then reference the generated asset names from iOS code. Text, separators, standard controls, solid fills, and layout structure should still be built natively.
Boundaries
It requires a Figma token with file read access and Node.js fetch. If the token, node id, permissions, or Figma API are unavailable, the workflow should report the blocker instead of silently replacing artwork with SF Symbols. It focuses on repeatable asset export, not full visual QA or Xcode build verification.
Use Cases
- When receiving a Figma home screen, export custom icons, empty states, and background art as iOS-referenced image assets.
- When refactoring an old screen, batch-generate @2x and @3x PNGs from Figma nodes and write them into .xcassets.
- When implementing a profile screen, decide which icons can be native and which complex gradients must be exported from Figma.
- After receiving a Figma link, build a node id to asset name mapping for repeatable exports and code references.
Best For
- iOS engineers restoring UI from Figma who need stable custom-image exports into Xcode assets.
- Frontend engineers maintaining multiple app screens who need node-mapped repeat exports of icons and empty states.
- Developers taking over legacy iOS projects who need to decide between exported artwork and native SwiftUI/UIKit drawing.
- iOS engineers collaborating with designers who need consistent asset names, @2x/@3x scales, and .imageset metadata.
Related Skills
Excalidraw Wrap is an Excalidraw-focused wrapper, with tags for TypeScript, GitHub, and automation.
Calibrate vague brand inputs, expose contradictions, distill a brand core and positioning boundaries, then stress-test the result into an executable brand skeleton.
Generate localized Chinese brand names, naming directions, slogans, and risk checklists with reusable templates and trademark search reminders.
A beginner-friendly photo analysis tool that infers shooting parameters from visual features and suggests post-processing, optimization, and learning keywords.