Just launched - xaml.to.design

If you’ve ever tried redesigning a Windows app in Figma, and been given XAML files containing all the existing UI components, you’ll know first-hand that Figma doesn’t support XAML imports. Recreating everything manually means hours of measurement, guesswork, and potential errors.

xaml.to.design is here to help solve this problem. Our latest Figma plugin converts XAML markup into editable Figma layers, preserving layouts, colors, typography, and vectors. Drop your XAML file into Figma and get a fully editable design in seconds.

What is xaml.to.design?

xaml.to.design is a Figma plugin that imports XAML (Extensible Application Markup Language) files directly into Figma as native design elements. XAML is a declarative markup language used primarily in Microsoft technologies like WPF (Windows Presentation Foundation), UWP (Universal Windows Platform), and Xamarin applications.

The plugin parses XAML structure and converts it into Figma’s layer system, turning XAML graphics and text into editable vectors and text styles in Figma.

This means a big workflow boost for teams migrating Windows applications to new platforms, designers auditing existing app UIs, or anyone who needs to reference XAML-based designs without access to Visual Studio or the original development environment. Instead of screenshots or manual recreation, you get the actual design structure ready to edit, right in Figma.

How does xaml.to.design work?

Step 1: Run the plugin

Open your Figma file and run xaml.to.design from the plugins menu.

Step 2: Import your XAML file

Drag and drop your .xaml file into the plugin window, or click to browse and select it from your computer. The plugin accepts XAML files from WPF, UWP, Xamarin.Forms, and other XAML-based frameworks.

Step 3: Convert to Figma layers

Click “Import” and the plugin parses your XAML markup to convert graphics into editable Figma vectors.

Step 4: Edit and refine

The imported design appears on your canvas as standard Figma layers, so you can ,odify colors, adjust spacing, change typography, or restructure layouts. All elements are fully editable—no rasterization, no locked groups, no external dependencies.

Why use xaml.to.design?

⏰ Save hours of manual recreation

A typical Windows application might contain dozens of screens with hundreds of UI elements. Manually recreating a single dialog box can take hours. With xaml.to.design, you import the XAML to Figma and have the full structure in under a minute.

↔️ Cross-platform design migration

Teams moving Windows applications to web, iOS, or Android need to reference existing designs during redesign. XAML files contain the source of truth for current layouts and components. Converting XAML to Figma lets designers work with the actual structure while adapting it for new platforms, rather than working from screenshots or descriptions.

🔎 Design audits and documentation

Understanding an existing application’s design system requires analyzing its components, spacing patterns, and color usage. Importing XAML into Figma transforms code into a visual design system you can measure, annotate, and document. Extract color palettes, identify spacing inconsistencies, or catalog component variations.

Get started with xaml.to.design

Stop recreating Windows application designs manually. Try xaml.to.design and convert your XAML files to Figma layers in seconds.

Whether you’re migrating a legacy application, documenting an existing design system, or collaborating between design and development teams, xaml.to.design bridges the gap between Microsoft’s XAML ecosystem and Figma’s collaborative design environment.

If you’re working with legacy applications and have multiple file formats to handle, pair xaml.to.design with our other import plugins like psd.to.design for Photoshop mockups, pdf.to.design for documents, or image.to.design to bring screenshots to Figma. The full anything.to.design plugin library covers nearly every design file format.