How to Import XD files in Framer

Framer recently released a massive update introducing its No-Code visual editor. It allows you to build fully fledged websites and prototypes that are rendered in HTML and CSS. This is a massive shift for Framer coming from being a UI/UX tool that used to compete with Figma, XD and the like.

If you haven’t used it for a while, the difference is night and day. You can deploy websites with a click, create prototypes in code, and export React components for your developers to use in the code base.

I wouldn’t recommend you build the next Uber or Airbnb in Framer, but if you’re a digital agency churning out landing pages, you’d be silly not to at least try it.

Problem is, hiring designers that are Framer-savvy can be expensive. It’s a niche skill that falls somewhere between designing and developing.

Luckily, Framer has developed official plugins which can import from both Figma and Sketch. Your designers can work in Sketch and Figma and you import their designs once they are done.

Framer hasn’t built a plugin for Adobe XD

Adobe XD User Feedback

This had never affected me until recently. I worked with a very talented designer, and he submitted his designs as XD files.

With a $2000 investment locked up in these design files, I set out to find a way to get them into Framer. The fact that this article doesn’t abruptly end here suggests that I eventually found a way to convert XD into Framer. Here’s how I did it.

There are open feature requests for it stretching back to 2017 but all are met with silence from the Adobe team.

To SVG or not to SVG?

My first instinct was to export an SVG or two from XD and copy them into Framer. Long story short, it didn’t work.

For some reason Framer treated the SVGs I copied as flat images with no layers. Here’s the same image in Adobe and Framer after it’s been exported as an SVG and copied across.

Dummy source file in Adobe XD

Dummy Adobe XD file imported in Framer

After trying that, I had a brain wave. I’ll copy the SVGs into Figma and then I’ll export elements to Framer using the plugin. This works a lot better. It preserved the layer structures, but I’d say that copying SVGs is only about 70% accurate.

For small design files it’s fine, but I had a fairly complex app with nearly 40 artboards that spanned three different screen sizes.

Moving Adobe XD designs to Figma via an SVG export:

• You will lose all the images you used in the design
• Your type attributes will not remain as they were in XD
• Effects, transparencies, and Overlays will be gone

Magicul’s 3rd Party XD to Figma Design File Converter

I came across Magicul while reading forums looking for solutions. It’s a 3rd party tool that can convert between XD, Figma and Sketch.

It has good reviews, but wasn’t my first choice because of the hefty price tag. I tried Avocode, but lost so many corner radiuses, strokes, and shadows. It would have been quicker to manually redraw everything in Framer than try to fix the output in Figma.

Magicul Design Converter Website

Afterwards I used Magicul and the conversion was almost perfect. It even copied across components (instances and variants), shared styles, and prototype links.

Update: I reached out to Magicul to tell them I was writing this article and they gave me a coupon for a free conversion to demo a conversion.

I grabbed the most complicated UX kit freebie on UI8 I could find and converted it.

Adobe XD UIKit from UI8.

XD file converted to Figma

You might need to install some missing fonts. Here is a good site to look for any you are missing.

The UIKit converted to Figma

I can’t fault it. Every element has found its way into Figma. If you look on the right, you’ll see that Magicul has preserved text and color styles. All the components or symbols have been saved to their own page. The parent child relationships between components are still there, so you can modify a piece of UI and have that change reflected everywhere. Magicul might be an expensive conversion, but it does the job.

Why did I convert to Figma instead of Sketch?

Framer has plugins to import from both Figma and Sketch. Magicul can also convert XD files to Figma and Sketch.

You can convert your XD file to Sketch and then import it into Framer, but I’d recommend converting to Figma instead. Here’s why.

Framer’s Sketch plugin doesn’t support:

• Radial gradients
• Angular gradients
• Nested symbols

The Framer plugin to import Figma designs doesn’t support the following features:

• Corner smoothing
• Image strokes
• Paragraph indent
• Text number features
• Open type features

There are some slight issues with text alignment. To avoid issues with corner smoothing, use corner radius instead. Other issues like missing paragraph indent can be overcome by indenting text in other ways.

The Sketch plugin’s missing features are more commonly used. I rely heavily on radial gradients and missing nested symbols can really mess up a design if that’s how you use Sketch. (Symbols are the Sketch version of components)

Tips for copying your designs into Framer

First, set your Framer screen to the same size as your Figma frame / artboard.

Now it’s tempting to select every frame in your fig file and copy it all across at once.

If you do that, two things are likely to happen. You’ll crash your browser, and you have a useless fixed layout that will never be responsive for mobile.

What you want to do is copy components one at a time and place them into the rows, grids and columns of Framer’s Layout Tool.

Framer Interface

Framer’s layout tool is a responsive system. It is basically a visual implementation of the CSS grid and flex box, similar to Figma’s auto layout. You use it to quickly create mobile friendly designs.

It’s beyond the scope of this article to explain Framer layouts, but you should read these pages. You’ll pick it up in no time.

https://www.framer.com/learn/layout-tool/

https://www.framer.com/learn/grids/

The UI you’re getting from Figma is the visual layer. The layout logic is all coming from Framer. Your task is to combine the two.

Imagine you had this UI in Figma:

You could copy all this to Framer at once, but you shouldn’t.

The smarter play would be to grab individual components and arrange them in Framer’s Layout Tool.

Notice the Frames inside the Columns in the layer panel. It’s now easier to tell Framer that I want this to collapse into one column as the screen shrinks.

You can see slight discrepancy between the Figma and Framer numbers, but it’s an easy fix. When you copy components one at a time you’re much more likely to pick up on little issues like this.

Half an hour later, and it’s starting to come together.

I need to tweak the designs and make my images dynamic, but there’s no question that this is faster than code. Note how the ellipse groups in the pink header banner are finding their way across. That alone is saving me a lot of time. It would be a decent amount of effort to create them in code; I wouldn’t even know where to start making them in Framer, but in XD or Figma it’s easy.

If I wanted to turn this page into a real website, it would take the rest of the day. I’d also need to set up navigation and connect it to a CMS.

Final Verdict

Importing files from XD to Framer is possible. The secret is moving your designs into Figma or Sketch first.

I tried copying designs from XD to Figma with SVGs, but the output wasn’t good enough. In the end, I used a paid 3rd party tool called Magicul to convert my files into Figma or Sketch and then the official plugin to get my UI into Framer.

The plugin isn’t perfect but it saves significant time compared to remaking your designs. To mitigate any issues, export small pieces of UI and add them into Framer’s Layout Tool as you go. You’ll create a mobile friendly website in the process.