+
Uno Platform for Figma
From Figma design
to running app.
Point your agent at a frame. It builds the screen in XAML and checks the running app against your design.
Works with
Visual Studio
VS Code
Rider
Copilot
Claude
Cursor
Codex
In Figma
Waypoint · App design
Itinerary · Desktop
waypoint.
✦
Trips
Saved
Explore
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
Day 2 · Take the scenic route
ItineraryCard
1280 × 800
Running on Uno Platform
Waypoint
Running · Windows
waypoint.
JL
Trips
Saved
Explore
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
View
Day 2 · Take the scenic route
>_
Your AI agent
Figma MCP
Uno MCP
App MCP
color/brand/primary
space/md · 16
Space400
CardContentControl
01 / 04
Design it in Figma.
Use variables, components and auto layout. Named values become theme keys instead of hard-coded numbers.
Figma MCP
Waypoint
LAYERS
Itinerary · Desktop
NavRail
Header
ItineraryCard
DayRow
Itinerary · Phone
Components
Itinerary · Desktop
waypoint.
✦
Trips
Saved
Explore
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
Day 2 · Take the scenic route
ItineraryCard
Itinerary · Phone
waypoint.
JL
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
Day 2 · Take the scenic route
Trips
Saved
Explore
Components
ItineraryCard
State=Default
A weekend in the Alps
Sep 18–21
State=Selected
A weekend in the Alps
Sep 18–21
State=Past
A weekend in the Alps
Sep 18–21
DayRow
Day 1 · Arrive
Maya
VARIABLES
Light
Dark
brand
tint
text
approved
SPACING
space/xs
4
space/sm
8
space/md
16
space/lg
24
RADIUS
4
8
12
999
TEXT STYLES
Title/Medium
Body/Small · 12
02 / 04
Connect the context.
Figma MCP sends the frame. Uno MCP adds the docs and rules for building it in Uno Platform.
Figma MCP
Uno MCP
In Figma
Itinerary · Desktop
waypoint.
✦
Trips
Saved
Explore
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
Day 2 · Take the scenic route
get_design_context
get_variable_defs
get_screenshot
>_
Your AI agent
ready to build
Frame structure
Variables + styles
Reference screenshot
Uno Platform rules
Theme token docs
target: XAML
C#
docs_search
agent_rules_init
Uno MCP
platform.uno/docs
Navigation: dialogs
Dialog qualifier
platform.uno/docs
Card & CardContentControl
utu:CardContentControl
platform.uno/docs
Design Tokens & Override Surface
Space* · Radius* · Typeface*
03 / 04
Build it with your agent.
Every design value lands on a key Uno Platform already has.
Your AI Agent
Uno MCP
In your Figma file
color/brand/primary
Color variable
space/md · 16
Auto layout gap
radius/card · 12
Corner radius
Aa
Title/Medium
Text style
ItineraryCard
Component · 3 variants
In your Uno Platform app
PrimaryColor
Palette override
ThemeDictionaries
Space400
Spacing token · 16
Thickness
Radius300CornerRadius
Shape token · 12
CornerRadius
TitleMedium
Type ramp style
Style
utu:CardContentControl
Toolkit control + styles
Control
04 / 04
Run it. Compare. Refine.
App MCP screenshots the running app and compares it with the frame until they match.
App MCP
Figma frame
App MCP · compare
Running app
waypoint.
JL
Trips
Saved
Explore
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
View
Day 2 · Take the scenic route
1
2
3
waypoint.
✦
Trips
Saved
Explore
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
Day 2 · Take the scenic route
3 differences found
1
Title style
TitleSmall → TitleMedium
2
Card padding
literal 12 → Space400Thickness
3
Card corners
6 → Radius300CornerRadius
Each pass
screenshot
compare
edit XAML
Hot Reload
Figma frame
App MCP · compare
Running app
waypoint.
JL
Trips
Saved
Explore
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
View
Day 2 · Take the scenic route
waypoint.
✦
Trips
Saved
Explore
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
Day 2 · Take the scenic route
Matches the frame
Desktop · 1280 × 800
Phone · 390 × 844
uno_app_visualtree_snapshot confirms the card is a CardContentControl.
Each pass
screenshot
compare
edit XAML
Hot Reload
What you end up with
One design. Every platform.
The same XAML and C# run everywhere Uno Platform does.
waypoint.
JL
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
Day 2 · Take the scenic route
Trips
Saved
Explore
iOS
390 × 844
waypoint.
JL
Trips
Saved
Explore
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
View
Day 2 · Take the scenic route
macOS
desktop
Waypoint
—
▢
✕
waypoint.
JL
Trips
Saved
Explore
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
View
Day 2 · Take the scenic route
Windows
desktop
waypoint · WebAssembly
waypoint.
JL
Trips
Saved
Explore
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
View
Day 2 · Take the scenic route
Web
WebAssembly
Waypoint
waypoint.
JL
Trips
Saved
Explore
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
View
Day 2 · Take the scenic route
Linux
desktop
waypoint.
JL
Your next chapter.
A little closer to somewhere new.
A weekend in the Alps
Sep 18–21 · 4 days
Day 1 · Arrive & unwind
Day 2 · Take the scenic route
Trips
Saved
Explore
Android
412 × 915
Also available
Prefer a one-click export?
The Uno Platform for Figma plugin exports Material Toolkit designs to XAML or C# Markup.