Journal

Tag

#design-tokens

Figma Variables to SwiftUI Tokens: The AI Prompt: a glossy App Store icon on a blue, pink and orange gradient with bubbles
Guides 4 min read

Figma Variables to SwiftUI Tokens: The AI Prompt

Convert Figma variables into a SwiftUI token system: modes become ColorScheme, aliases stay layered, and one regenerable file carries the whole design system.

Lawrence Arya · June 5, 2026
Export v0 Directly to Figma Variables? Here's How: the App Store logo as a frosted glass icon on a pink and blue gradient with bubbles
Guides 5 min read

Export v0 Directly to Figma Variables? Here's How

No, v0 cannot export directly to Figma variables, it generates code, not Figma files. But you can bridge it through design tokens. Here is the exact pipeline.

Lawrence Arya · June 4, 2026
Figma to React Components With AI: The Clean Way: a glass app tile showing the VP0 logo on a pink and blue gradient
Guides 6 min read

Figma to React Components With AI: The Clean Way

Turn Figma into React components with AI without messy auto-code: export tokens, use Dev Mode as a reference, and generate clean typed components in Cursor.

Lawrence Arya · June 3, 2026
iOS 19 Design System: Figma to SwiftUI Code, Mapped: a glass iPhone UI wireframe icon on a holographic purple gradient
Guides 5 min read

iOS 19 Design System: Figma to SwiftUI Code, Mapped

Turn an iOS 19 design system from Figma into SwiftUI. Map color, type, and spacing tokens to native styles, then generate code with VP0 and Claude Code.

Lawrence Arya · June 2, 2026
Prompt Claude for Strict iOS Spacing With Tokens: the App Store logo on a glass tile over a blue gradient with bubbles
Guides 5 min read

Prompt Claude for Strict iOS Spacing With Tokens

AI-built iOS screens with messy margins? Force strict spacing by giving Claude a token scale, an 8-point grid as variables or constants, so layout stays consistent.

Lawrence Arya · June 1, 2026
Dark Mode vs Light Mode: One Theme, Both Done Right: the App Store logo as a frosted glass icon on a pink and blue gradient with bubbles
Guides 4 min read

Dark Mode vs Light Mode: One Theme, Both Done Right

Supporting both modes means semantic colors, not two hardcoded palettes. Build a themeable app from a free VP0 design that adapts cleanly to light and dark.

Lawrence Arya · May 31, 2026