Uno Platform
for Figma
Figma plugin for pixel-perfect XAML export for
Uno Platform apps.
Design to XAML code in Seconds
Export your Figma design assets and eliminate the handoff hassle. Create applications true to the way they were designed to look and behave. Get clean, responsive XAML tailored to your brand guidelines.
Component Library
Use pre-configured UnoToolkit Material components to design your application quickly. All controls are easily modifiable by using variants, so you see your app come to life even in designs. Use pre-built app pages to build skeleton of your app.
Live Preview
Experience your app before even coding it. Use mock data to see how real content behaves in the app.
Accelerate Design to Code Handoff
Go from high fidelity Figma designs to developer friendly XAML code which can be built upon and extended quickly. Easily generate packages ready to use in your projects. Using our plugin’s XAML exports reduces up to 50% time to start up projects or new app screens.
Experience
Design-to-XAML handoff
Design-to-XAML handoff
Seeing is believing. Use the sample App
we designed in Figma.
we designed in Figma.
1. Get Figma Assets
Install the Uno Platform Plugin for Figma and Open the Uno Platform Material Toolkit file from the Figma community. The file will contain the sample Commerce App.
2. Export XAML
Inside Figma, navigate to “Example App” inside Uno Platform Material Toolkit. Select any one screen, right-click and select “Uno / Figma” plugin, then generate XAML.
3. See XAML in your App
Copy XAML generated in step 2 and paste inside your Uno Platform App in Visual Studio. Or if you want to skip steps 1 and 2, you can use XAML we generated. If you need a sample Uno Platform app, use our Getting Started guide.
Experience
Design-to-XAML handoff
Design-to-XAML handoff
Seeing is believing. Use the sample App we designed in Figma.
1. Get Figma Assets
Install the Uno Platform Plugin for Figma and Download (“Duplicate”) Uno Platform Material Toolkit from Figma community. The file will contain the sample Commerce App.
2. Export XAML
Inside Figma, navigate to “Example App” inside Uno Platform Material Toolkit. Select any one screen, right-click and select “Uno / Figma” plugin, then generate XAML.
3. See XAML in your App
Copy XAML generated in step 2 and paste inside your Uno Platform App in Visual Studio. Or if you want to skip steps 1 and 2, you can use XAML we generated. If you need a sample Uno Platform app, use our Getting Started guide.
Approved by
/
like You
/
like You
Our philosophy is that the Figma design is
the single-source of truth on which end-users, designers and developers agree on.
- Developers retain 100% control over crucial
code they care about. - One-click for XAML code and assets files.
- No more back and forth for assets export
and management.
- Design high-fidelity screens that will look
exactly the same in the real app. - Instant feedback on controls you are using
for your designs. - No more back and forth for assets
export and management.
“Using Figma plugin and Uno Platform together is helping us spend less time on design to developer handoff. We were able to reproduce the same eCommerce app we spent 2500 hours on less than 500 hours.”
Lester Botello, Developer
Uno Figma Resources
Keep in touch with Uno Platform
Stay up to Date with All the Latest News and Announcements
