Today, we’ll guide you through the process of importing your Adobe XD files into Figma without the need for plugins.
In our previous post on July 2023, we explored using a Figma plugin called Convertify for XD to Figma conversion. However, this method has limitations, as only 10 conversions are free before requiring payment.
Many believe that copying and pasting artboards from XD to Figma is a straightforward solution, but it often results in flattened images. Instead, we’ll show you a more effective approach: directly copying the SVG code.
To begin, open new files in both Figma and Adobe XD. We’ll use an XD file from Unblast (link in the description) to demonstrate. Stay tuned for future videos exploring alternative methods for copying SVG code to Figma by subscribing and enabling notifications!
In Adobe XD, select the desired artboards, right-click, and choose ‘Copy SVG Code.’ Then, switch to Figma and paste using the keyboard shortcuts: Command V for Mac or Control V for PC. Note that a font dialog box may appear if fonts are missing.
Once pasted, Figma will create a new ‘frame’ in the layers panel. Simply double-click the frame’s name to rename it according to your preferences.
When dealing with multiple artboards, you may encounter overlapping or stacking issues upon pasting. To mitigate this, consider copying one artboard at a time or moving the ‘Clip Path Group’ outside the frame.
While transferring XD files to Figma for free is achievable, some time may be required to fix any issues and recreate interactions for the prototype. Nevertheless, it’s a more efficient alternative to starting from scratch.
Enjoy the prototyping process in Figma, and congratulations on successfully transferring your Adobe XD files!