You've built a Windows app interface in XAML and need to bring it into Figma for design iteration or documentation. The issue? Figma can’t import XAML files directly as it doesn't recognize Microsoft's Extensible Application Markup Language format.

Enter the new pluginxaml.to.design that converts XAML markup into editable Figma layers. This guide shows you how to import XAML files into Figma and convert them into vector shapes and editable layers.

From XAML to Figma - Quick Guide

1. Open your Figma file and run the xaml.to.design plugin
2. Drop your XAML file into the plugin interface
3. Let the plugin process and convert your file
4. Edit the converted elements as any native Figma design

What is XAML?

XAML (Extensible Application Markup Language) is Microsoft's XML-based markup language for defining user interfaces in Windows applications. Developers use XAML to build interfaces for Windows Presentation Foundation (WPF), Universal Windows Platform (UWP), Windows App SDK, and Xamarin applications.

XAML files contain structured definitions of UI elements—buttons, text blocks, panels, grids, and custom controls. Each element includes properties for layout, styling, data binding, and behavior. While developers write XAML to create functional applications, designers need to work with these interfaces in visual design tools.

Why Figma doesn't support XAML

Figma supports image formats (PNG, JPG, SVG, GIF, WEBP) and basic file imports (see supported formats). However, XAML is a development format—an XML-based markup language rather than a visual file format and Figma cannot parse XAML's element structure, property definitions, or resource dictionaries.

This limitation affects designers who need to refine existing Windows application interfaces, document developer-built screens, or maintain design systems that span both Figma and XAML codebases.

How to import XAML files into Figma

Step 1: Prepare Your XAML file

Locate the .xaml file you want to import. XAML files typically define individual windows, pages, or user controls within Windows applications.

Check that your XAML file contains valid markup. Files with syntax errors or missing closing tags may not convert correctly. You can open the file in a text editor to verify the XML structure if needed.

Step 2: Open xaml.to.design plugin

Launch Figma and open the file where you want to place your imported XAML interface. Then run the xaml.to.design plugin from the Plugins menu or use the Quick Actions search (Cmd/Ctrl + /).

Step 3: Upload your XAML file

Drag and drop your .xaml file directly into the plugin. You can also click "Choose File" to browse and select your XAML file manually.

Step 4: Conversion begins

Processing time varies based on file size and complexity. A simple XAML graphic should convert in seconds.

Step 5: Edit as any native Figma design

All imported elements are entirely editable Figma objects. Select any layer to modify it—resize shapes, adjust colors, change text content, or reorganize the layout.

The XAML file is converted into independent Figma layers. You can ungroup elements, delete unnecessary parts, or duplicate sections for design variations.

Benefits of importing XAML into Figma

• Design documentation: Document existing Windows application interfaces in Figma without recreating screens manually. Import the current XAML implementation and use it as a reference for design specifications or handoff materials.
• Design system alignment: Verify that developer-built XAML interfaces match your design system. Import production XAML files and compare them against design library components. Identify visual inconsistencies in spacing, colors, or typography.
• Interface refinement: Start with the current implementation rather than designing from scratch. Import the XAML UI, then refine layouts, adjust visual hierarchy, or propose design improvements directly on the converted elements.
• Cross-platform consistency: Maintain consistent designs across web, mobile, and Windows platforms. Use imported XAML interfaces as a baseline when designing equivalent experiences for other platforms in Figma.
• Better collaboration: Share XAML-based interfaces with team members who work exclusively in Figma. Designers can review and annotate developer-built screens without needing Visual Studio or XAML editing tools.
• Version comparison: Import different versions of the same XAML interface to track visual changes. Place multiple imports side-by-side to compare design evolution or A/B test variants.
• Client presentations: Present Windows application designs in Figma's prototyping environment. Import XAML screens and connect them with Figma's prototyping features to demonstrate user flows.

Common XAML to Figma use cases

1. Redesigning enterprise applications: If you're redesigning a legacy WPF application, import the current XAML interfaces to audit the existing design, identify pain points, and create updated versions without rebuilding every screen from memory.

2. Windows app SDK projects: When your development team builds Windows apps with WinUI 3 and the Windows App SDK, you can now import their XAML implementations to verify design accuracy, suggest improvements, or create marketing materials showing the actual application interface.

3. Developer-designer handoff: Developers can create working prototypes in XAML before a final design review, importing XAML implementations into Figma so the design team can review, annotate, and suggest changes while using their familiar tools and commenting workflows.

4. Design system audits: If your organization has both a Figma design system and a XAML component library, you can import your XAML files into Figma to verify they match the design specifications.

Bring your XAML files to Figma

Figma's native import capabilities don't include XAML support, but xaml.to.design bridges the gap between Windows application development and visual design tools. Import XAML files into Figma to document existing interfaces, verify design system compliance, or start refinement work with developer-built implementations.

The conversion process takes minutes—upload your .xaml file, let the plugin parse the markup, and edit the resulting Figma layers like any native object. You skip the manual recreation work and start designing immediately.

Install xaml.to.design from the Figma Community to import your first XAML file. The plugin specializes in converting Windows application interfaces, giving you a dedicated tool for bringing XAML development artifacts into your design workflow.

Need to import other formats into Figma? Check out these guides:

• Import PSD files into Figma for Adobe Photoshop designs
• Import Illustrator files into Figma for vector artwork
• Import PDF files into Figma for documents and designs
• Import Office files into Figma for PowerPoint, Word, and Excel