Why the Handoff Breaks Down

Design handoff remains one of the least efficient parts of product development. Designers finalize screens, write documentation, and export assets; developers then reverse-engineer that work into markup and styles. The result is duplicated effort, misread specifications, and interfaces that drift from the original intent. Much of this stems from a waterfall mindset, where design is completed before engineering begins and changes are communicated asynchronously, if at all.

Both roles face structural problems in this workflow. Developers are handed granular tasks from a backlog, often without the full product context, so they may build something that doesn’t fit the broader design. Designers, meanwhile, are iterating fluidly at a higher level — resizing layouts, tweaking states, adjusting typography — and can accidentally overlook assets or interaction states that the implementation will need. The gap between the two perspectives is exactly where productivity and quality get lost.

“When designers are fully satisfied with their designs, they create a document with all the details and digital assets required for the development team to bring the product to life. This is the design handoff process.”

— UX Design Institute, “How to create a design handoff for developers”

There is also a communication problem. Developers track requirements in a backlog; designers work from a visual canvas, and those two systems rarely sync. Small changes — a color token, a margin, a new empty state — can go unnoticed until late in the cycle, at which point rework is costly. Detailed design documentation helps but does not eliminate the risk.

Design as the Source of Truth

The philosophy behind Uno Platform’s approach is that the Figma design should be the single artifact that end users, designers, and developers agree on. Instead of asking developers to translate a static visual into code, the design itself becomes the starting point for that code — then the engineering team takes over and extends it, as they would with any other scaffold.

Keeping design and development running in parallel is more realistic than a strictly linear handoff. In this model, the design file remains the reference point, and the code generated from it can be updated as the design evolves. That shifts the developer’s job from re-creating a design to building it out.

The Case for Figma

Uno Platform’s plugin is built for Figma specifically, which is partly a choice of tooling philosophy. Figma is web-based, meaning it is not tied to any operating system. That is an advantage over approaches such as Sketch + Zeplin, where Sketch only runs on macOS, forcing developers on other platforms to rely on third-party viewing tools. Figma puts the same file in front of everyone, so it is a more direct shared workspace. It also supports plugins that ease the handoff, a sign that the ecosystem has recognized this workflow isn’t working as is.

Other teams have come to similar conclusions after evaluating tools like Sketch, Axure RP, and Framer.

“Comparing the must-haves against the features of a list of possible design apps we compiled (including Sketch, Axure RP, Framer, and more), Figma came out as the clear forerunner. We decided to proceed with a short-term trial to test Figma’s suitability, and we haven’t looked back since. It met all of our key feature requirements but surprised us with a lot of other things along the way.”

— Simon Harper, “Why we chose Figma as our primary design tool”

Uno Platform is an open-source development platform for building native mobile, web, desktop, and embedded apps from one codebase. The design-to-code plugin for Figma is included in its tooling. The plugin itself is free, but unlike the core platform, it is not open source. If the project’s code is of interest, the primary Uno repository is on GitHub. You can install the plugin directly to follow along with the workflow.

Figma to C# and XAML: Workflow Steps

Installing the Plugin and Toolkit

Start by installing the Uno Platform (Figma to C# or XAML) plugin from the Figma community. Next, open the Uno Platform Material Toolkit design file.

Screenshot of the Uno Material Toolkit file available in Figma Community.
Uno Platform Material Toolkit (available in Figma Community). (Large preview)

The Material Toolkit ships with pre-built UI controls designed for multi-platform, responsive applications, so common components don't need to be created from scratch.

Note: The plugin only works when your design lives inside the Uno Material Toolkit Figma file using its components. Existing Figma designs outside that file won't generate any output.

Configuring Theme and Colors

After installation, use the "Getting Started" page in the file layers to define the application's theme, colors, and font styles. The page provides step-by-step instructions for modifying the interface and previewing the overall theme.

For projects needing custom branding, Uno Platform supports importing Design System Packages (DSPs). A DSP bundles design assets — icons, buttons, and other UI elements — alongside JSON files that describe the design system. Import this package into the Uno Platform app through the Figma plugin, and theme changes propagate across the entire user interface. This workflow keeps design assets consistent across projects and gives teams control over updates. DSP tooling is available both as a package and within the App Template Wizard.

Screenshot of the Getting Started instructions page in Uno Material Toolkit file.
The Getting Started page in the Material Toolkit file. (Large preview)

For new work, create a new page and start with the Standard Page Template from the Uno Toolkit components. Remember to detach the instance from the template before using it.

Screenshot of the steps needed in order to detach the instance from the template in Figma Design.
To get started with the Page Template, first, you need to detach the instance from the template. (Large preview)

Designing With Variants and Previewing

Many Toolkit components include variants that consolidate states and styling options into a single component. Button components, for example, offer a Leading Icon variant, letting you use the same element with or without icons throughout the design.

Screenshot of the button components with a Leading Icon variant — the same set of icons is shown with an icon in front of the labels, and then without.
Button components with a Leading Icon variant: you can use the same element with or without icons in your design. (Large preview)

The toolkit's layer structures are organized to generate XAML and C# markup — XAML being Microsoft's XML variant for describing a graphic user interface. These pre-built, reusable components keep designs consistent across multiple projects while easing the eventual code handoff.

The Previewer gives designers a live interactive look at how the translated design behaves before developers get involved. To preview:

  1. Select the target screen in Figma.
  2. Right-click the screen → Plugins → Uno Platform (Figma to C# or XAML).
  3. In the plugin, choose the Preview tab.
  4. Press the Refresh button.
Figma → Uno Platform (Figma to C# or XAML) plugin → Preview tab (providing a live interactive preview of the user interface).

The Export tab displays the generated C# or XAML code for review. Because this code is built on Uno Toolkit components with developer documentation, the handoff process skips the usual asset inspection and back-and-forth specification extraction.

Figma → Uno Platform (Figma to C# or XAML) plugin → Export tab (for the generated code).

Exporting Code and Handing Off

Uno Platform's code generation relies on C# and XAML, which together support animations, styles, and templates. XAML's declarative nature keeps UI styling distinct from business logic, reducing boilerplate and allowing code reuse across Windows, iOS, Android, WebAssembly, macOS, and Linux.

"XAML is a declarative markup language which simplifies creating user interfaces for .NET apps. You can create visible UI elements in the declarative XAML markup and then separate the UI definition from the run-time logic by using code-behind files that are joined to the markup through partial class definitions. XAML directly represents the instantiation of objects in a specific set of backing types defined in assemblies and enables a workflow where separate parties can work on the UI and the logic of an app, using potentially different tools." - XAML overview (Microsoft Docs)

The Export tab's top-left dropdown switches between C#, XAML, and Color and Fonts Override File outputs. Copy the generated content to the clipboard and paste it into your IDE. Designers don't need to handle this step personally — developers can access the plugin without an editor role by using Figma's Dev Mode.

Example of generated XAML and C# Markup from Simple Calc workshop.

To generate export files directly:

  1. Select the page or component you want to inspect.
  2. From Figma's Plugins menu, choose Uno Platform (Figma to C# or XAML).
  3. Select the Export tab.
  4. Click the Refresh button at the bottom.
  5. Optionally switch the top-left dropdown to view theme colors, fonts, and Localization files. Copy the Color Override File output into the application's "Color Override" file, as documented in the Uno Material library → Customize Color Palette page.

Building the Project

Once the design is ready, move the generated C# and XAML into Visual Studio. The Uno Solution Template Wizard for Visual Studio configures the project according to your preferences, including optional adoption of the Uno.Material theme. Alternatively, select the Fluent theme, WinUI's default.

Note: While the Toolkit file's default theme is Material, Uno Platform supports overrides that let you customize components to achieve a Fluent theme or any other style.

Building a Flight App UI From Figma to Code

The most reliable way to evaluate a design-to-code pipeline is to build something real with it. The following hands-on walkthrough uses the Uno Platform for Figma plugin and the accompanying Uno Material Toolkit. It mirrors a standard mobile flight-booking screen: a search area, a list of flight results, and a bottom navigation bar. By the end, you will have generated both C# Markup and XAML that you can drop directly into Visual Studio.

Screenshot of a flight app user interface and the generated code.
Uno Flights: a tutorial that will teach you how to create a mobile Uno Platform app. (Large preview)

Preparing Your Figma Environment

Before designing anything, you need the Uno Platform plugin. It is available from the Figma community. You will also want a copy of the Uno Material Toolkit File referenced in the community. This template provides the themable component library this workflow relies on.

  1. Open the Uno Material Toolkit File in Figma to create a new project.
  2. Set up your project theme on the Getting Started page included in that file. Define a theme or import a DSP (Design System Package) to customize colors, typography, and other design tokens.
  3. Create a new page in your project. In the Resources tab under Components, select the Standard Page Template.
  4. Right-click the template and choose Detach the instance.

This baseline setup applies to all projects built with the Uno Platform plugin and Material Toolkit, not just this one. The steps above assume you have the plugin installed from the Figma community.

Crafting the Search and Filter Section

For reference, the finished design is available as the Uno Flights file template in Figma. As you build, stick to the components defined in the Material Toolkit. The component list is on the toolkit’s components page.

Start with the primary search interface and its two action buttons:

  1. Add a SearchBox component and change its placeholder text.
  2. Optionally, enable a leading or trailing icon in the SearchBox properties.
  3. Add Text for the number of search results. Group the number and its label using keyboard shortcut Shift + A, which applies an Auto Layout.
  4. Add an IconButton. Swap the default icon to a sort icon and add text for the label. Wrap both in a frame with a horizontal Auto Layout.
  5. Add another IconButton with a filter icon and its label, again inside a horizontal Auto Layout.
  6. Combine the sort and filter action groups into their own nested Auto Layout.
  7. Merge the results text, sort action, and filter action into a single Auto Layout.
  8. Place the SearchBox and this combined layout inside the Content.Scrollable container.

The result should resemble the expected layout structure shown here:

Screenshot of step 1 in the flight app tutorial: adding search and filter results.
Step 1: Adding the Result Actions. (Large preview)

Assembling the Flight Itinerary Card

The flight itinerary block is a composition of three distinct Auto Layout groups: flight times with a progress bar, airport and flight details, and airline information with pricing.

The card component with flight information (step 2. in the flight app tutorial).
Step 2: The result we are trying to achieve for the flight blocks. (Large preview)

Flight Times and Progress Bar

  1. Add two Text elements for arrival and departure times.
  2. Insert the ProgressBar component between the two time labels.
  3. Group the two times and the ProgressBar into an Auto Layout.
  4. Add an icon and swap its instance to a plane icon.
  5. Position the plane icon at the left edge of the ProgressBar using absolute positioning.

Airport and Flight Details

  1. Add Text for the flight time and flight status.
  2. Wrap these in an Auto Layout configured to Fill.
  3. Add Text for the airport code or name.
  4. Combine the airport text, the status layout, and a spacer into a single horizontal Auto Layout.

Airline and Pricing

  1. Add Text for the airline name and the ticket price.
  2. Wrap both in an Auto Layout set to Fill.
  3. Adjust the horizontal gap between the two elements as needed.

With all three sections ready, combine them:

  1. Add a new parent Auto Layout.
  2. Set the layout’s fill color.
  3. Tune vertical and horizontal spacing to your preference.
  4. Drag the composed card element below the content.Scrollable layer in your page.
The UI with the first card component created (step 2. completed).
The results after completing Step 2. (Large preview)

Configuring the Bottom TabBar

The navigation bar is simpler because it ships with the Standard Page Template. You mostly need to reassign the icons and their labels:

  1. Select an item in the bottom TabBar.
  2. Expand its hierarchy down to the lowest icon layer.
  3. In the Design tab, replace the current icon instance with the icon you need.
  4. Select the corresponding Text label and change it.
  5. Repeat for each navigation entry.
Changing icons in the bottom tab bar screen (step 3. in progress).
Step 3: Swapping icon instances in the Bottom TabBar (Swap instance → Local components → Icons). (Large preview)

Preview and Export

With the interface complete, the Uno plugin adds live interactivity. The Previewer renders the design as a running app, letting you click buttons, scroll content, and toggle states before writing any code.

Preview of final user interface (final step 4. now complete).
Step 4: The result in the Plugin Previewer. (Large preview)

The Export tab in the plugin holds the code you need. Two formats are available; the process differs only slightly.

Exporting XAML

  1. Right-click the canvas and open the plugin via Plugins → Uno Platform (Figma to C# or XAML).
  2. In the Properties tab, optionally set a namespace under Application.
  3. In the Export tab, click Copy to Clipboard.
  4. In Visual Studio, create a new project with the Uno App Template Wizard, choosing XAML for the UI approach.
  5. Open MainPage.xaml, replace its contents, and then adjust the x:class and xmlns:local namespaces to match your project.
  6. Export the color override file from the plugin and paste it into your ColorPaletteOverride.xaml.

Exporting C# Markup

  1. In the Export tab in Figma, select the generated code block starting after the this keyword and ending at the semicolon ;.
  2. Press Ctrl/Cmd + C to copy.
  3. Create a new Uno project in Visual Studio, this time choosing C# Markup for the UI.
  4. In MainPage.cs, replace the page’s contents with the copied code.
  5. Font sizes need manual syncing. Open MaterialFontsOverride.cs from the Style folder. In the plugin’s Export tab, choose Fonts Override File from the format dropdown. Copy the contents of the ResourceDictionary and paste them into your MaterialFontsOverride.cs.
Preview of the C# markup code when you need to copy it to the clipboard.
Example of where to start when you need to copy the code to the clipboard. (Large preview)

For immediate reference, sample outputs from this exact workflow are available for download:

⏬ flightXAML.txt (38 kB)

⏬ flightCsharp.txt (56 kB)

Screenshot of the exported XAML code of the UI in the emulator.
Design-to-code results: exported XAML code. (Large preview)

Closing the Gap Between Figma and Production Code

Aligning design intent with production-ready code remains one of the hardest parts of product development, and team-specific workflows mean no single remedy fits every group. Uno Platform for Figma targets the friction points that slow most designer-developer pipelines. It supports building high-fidelity screens, testing interactions as prototypes, and exporting code that adapts to different screen sizes, which reduces the overhead traditionally associated with translating a visual spec into an application.

While the walkthroughs here lean on mobile-sized canvases, the plugin and its output do not confine you to phone layouts. Nothing in the design file or the generated markup restricts you to a specific form factor. You can target desktops, laptops, tablets, or web views by setting your intended resolutions and defining how responsive elements should behave. As long as those rules are explicit in Figma, the resulting designs can stretch gracefully across platforms.

Additional Resources

The following materials expand on the workflow covered above, from feature overviews and step-by-step tutorials to broader discussions on handoff strategy.

Uno Platform and Plugin Documentation

Tutorials and Walkthroughs

Video Demonstrations

Smashing Editorial