Game-Changing Tutorial: Convert Adobe XD to Figma in Seconds or Minutes

[@JoshVenables]

Thank you! I've been putting off converting my old XD files for a while and your tutorial made it an easy process.

[@ulearntech]

Thanks, although, I would agree depending how complex the XD file is, it could have issues. Although, we've noticed users using a PC have less issues than those on a Mac. Unfortunately, I have a Mac.

[@PivotThom]

This saved me so much hassle. You’re a lifesaver man!!

[@ulearntech]

Glad to hear I saved you hours and hours of work. Although, I would say you might need to tweak a few things here and there in Figma, nevertheless, it sure beats out re-creating the prototypes again from scratch!

[@hemaelangovan1398]

This has been a lifesaver! Thank you!

[@ulearntech]

Thanks for your kind words. Glad to hear this video was useful information to at least get some past XD work to Figma. It isn't perfect sometimes depending on how complex the prototype is. A little tweaks here or there will make it perfect.

[@skilluplearningsolutions]

thank yout ulearn

[@ulearntech]

@skilluplearningsolutions - Sorry for the late reply! I'm happy to hear you found the tutorial useful. If you have any questions or need more help, feel free to reach out anytime! Busy cooking up another video about Figma. If you want to be the first to know about this and future content, hit that subscribe button and flick on notifications? That way, you'll never miss out on some top-notch Figma knowledge. Massive thanks for your support, it means a lot!

[@cinxa]

This has been very helpful, quick, and to the point thank you!

[@ulearntech]

@cinxa I deeply appreciate you taking the time to watch my tutorial and leaving a comment too! It warms my heart to know that it has been helpful to you. Currently, I'm in the midst of creating another video focusing on transitioning from XD to Figma. If you'd like to stay updated on this and future content, please consider subscribing and turning on notifications. This way, you'll always have a reliable resource for seamlessly transferring your files from XD to Figma. Thanks for your support!

[@SkyDumesle]

I'm subscribing to your chanel u save my life and my works. Is convertify 100% free tho?

[@ulearntech]

It's free for the first 10 converts. Granted, I always wondered what if you use several different email accounts?? Hmmmm. It's great to hear the video is some importance and helped your works. And thanks for the subscription!

[@SkyDumesle]

thank you The video was really helpful@@ulearntech

[@ulearntech]

@@SkyDumesle I often find myself reflecting on whether these videos truly make a positive impact on fellow designers and students. Your comment reassures me that they are indeed beneficial! Thanks Sky!

[@UmerNB]

That is really really great mate 😍

[@ulearntech]

@UmerButtgee Thanks for your kind comments and watching! Although 'Convertify' does have it's limitations with 10 free converts, you may be better of using a different option, SVG Code Import requiring No Plugins - Watch this video and in two minutes, you will be under your way from XD to Figma as well and it wouldn't cost you a cent! kzbin.info/www/bejne/p5KWZ5Z4jc1mrK8si=WLLQiKRVYTwqbgU2 . If you like this video, make sure to hit that like button, subscribe, share and turn on the notification bell for more tips and tricks!

[@coldj95]

Hey ty for the video , but certain texts and others have moved do u have a tips ty fro the time

[@ulearntech]

Unfortunately, I discover that transitioning from Adobe XD to Figma can be quite complex, possibly requiring text retyping. For the text, copy it from XD, then paste it into a 'Web Browser URL Address, NotePad, or Text Editor.' Subsequently, re-select and copy the text, removing any attached formatting, and paste it into Figma. Hopefully, the text isn't extensive. Let me know if that works for you.

[@nureddinsahin8670]

You are the best thank you!

[@ulearntech]

@nureddinsahin8670 Thanks for tuning in and dropping a sweet comment! Don't forget to hit subscribe and ring that notification bell. I'm gearing up to roll out some Figma tutorials, taking it one step at a time! By the way, even with the Adobe and Figma deal going sideways, you can always stick with Adobe XD, no harm done!

[@gthin]

Thanks mate! Will components in XD file also get converted as components in Figma?

[@ulearntech]

@gthin Thanks for watching! Short answer, 'No.' Long answer, when importing from XD to Figma, components do not convert automatically. Figma treats imported elements as regular objects, so you will need to manually recreate them as Figma components to retain their behavior and properties.

[@Ahmed-Hassan-Web]

I can't thank you enough You've solved a major problem I've had for several days 😍❤

[@ulearntech]

@Ahmed-Hassan-Web I appreciate that the video helped you get up to speed efficiently and saved you some valuable time transitioning from XD to Figma. I'm currently working on producing more Figma tutorials, but it's been a bit challenging to balance this with my teaching and grading responsibilities. If you're a subscriber, please consider turning on the notification bell so you won't miss the next Figma video when it's released. Thank you so much for watching!

[@false-prophet-abc]

Thanks for the video. Could you please inform me how this method is different from the method of using XD's Copy SVG Code function?

[@ulearntech]

@jinskim7615 XD to Figma is quite different from Copy SVG Code. Copy SVG Code is what it says. Once you add the plugin into XD, select the SVG artwork and the click on "Copy SVG Code" option in the plugins section. It generates the SVG markup or code for the currently selected vector graphic. This code can then be pasted into HTML documents, style sheets, or other web-related contexts to display the vector image. In essence, it allows you to copy the code representation of a vector graphic so that you can easily incorporate it into your web projects, ensuring that the image maintains its scalability and sharpness regardless of the screen size or resolution. This can be useful for creating responsive and visually appealing web designs. Hope that answers your question!

[@mrmeer6045]

Thank you so much

[@ulearntech]

@mrmeer6045 Ah, it looks like the switch from Adobe XD to Figma is on the horizon! I appreciate your kind words, and don't forget to hit that subscribe and notifications bell (and if you already subscribed, thanks for your support-totally appreciate it!). I hope to be sharing a series of Figma tutorials in between my teaching sessions! 😊

[@maylee9839]

You saved my life!

[@ulearntech]

@maylee9839 You're very welcome and no problem! Yeah, I guess it depends on how complicated the XD file is. We've seen fewer hiccups with PC users compared to Mac users. Just my luck, I'm on a Mac. If you haven't already, throw a bookmark on this video or hit that subscribe button for a handy reminder when I finally get around to dropping the Figma videos. Work's been piling up, so it's been a bit of a struggle to get it uploaded!

[@thuandiep1707]

Thank you

[@ulearntech]

@vanlongngo747, thank you for watching our video, 'Game-Changing Tutorial: Convert Adobe XD to Figma'! Thrilled to hear that you found it helpful. As Adobe XD users are increasingly transitioning to Figma (since Adobe bought Figma!), we're committed to bringing you more insightful tutorials and content about Figma in the future. If you haven't already, we'd like to invite you to subscribe to our channel. By subscribing and hitting that notification bell on, you'll stay updated with all our latest Figma videos (we will have more plans to create more Figma videos) and never miss out on any game-changing tips and tricks. If you're already a subscriber, thank you so much for your support! We truly appreciate it. Feel free to let us know if there are specific topics or tutorials you'd like us to cover in the future. Your feedback is valuable to us!

[@standardname9960]

Unfortunately it doesn't work with complicated ones

[@ulearntech]

I do agree with that one. If it's a straightforward XD design, it's awesome. But, if you go totally crazy in the hi -fi wireframes with interactive actions, you do need to make some tweaks here and there in Figma. But, most of the stuff is brought in and you might not need to build from scratch

[@AliceMoretti-w1y]

For me it doesn't work so well, some styles and colors are missing from the original XD. I am wondering if I am doing something wrong?

[@ulearntech]

@AliceMoretti-w1y , you need to make sure the colors are saved as styles. Around the time 1:10, import color & text styles... The XD files needs these to be saved correctly as a style. That's the only thing I could think of for why it isn't working on your end. Try that out first. And let me know. There are only 10 free Converts and after that you need to pay. If you want, you can try copying the SVG code to Figma as well... kzbin.info/www/bejne/p5KWZ5Z4jc1mrK8si=WTI8ByOlyzA-IV_o

[@9erChickenBox]

Sadly didn't work for all my effects like hover buttons, drop down menus and stuff

[@ulearntech]

@9erChickenBox Converting files works way better on a PC than on a MAC! Shocking, right? A bunch of my students discovered that they had no issues converting stuff on a PC, unlike those using a MAC.

[@9erChickenBox]

@@ulearntech I am working on PC but sadly it still didn't work for me

[@ulearntech]

@@9erChickenBox dang it! I guess it is what it is. I know speaking from experience, I sometimes noticed my files will work great and sometimes it doesn't. And it's also the case how complex the XD files are. Sometimes, it's easier to quickly rebuild it in Figma, or you can fix the files (you start to begin to see how easy it is with Figma with some of it's features and processes_ I do noticed though that some of my fonts are wonky (I use Adobe Fonts with XD), but Figma uses Google fonts. Sorry, it wasn't as smooth as a transition from XD to Figma!

[@9erChickenBox]

​@@ulearntechno worries man. Thanks for the tutorial anyways, appreciate it!

[@ulearntech]

@@9erChickenBox trying. just trying!

[@vitor_martss]

Thanks a lot dude! you're a lifesaver!!!

[@ulearntech]

You're welcome. Although, I would say sometimes not all the interactions, images, or shapes get copied properly. Likely, it's because the XD file is to complicated for Figma. But, I truly believe its quite easy to fix once you are in Figma. Now, if they can just bring both apps together, like the Repeat Grid!

[@viduntharumika5471]

Thank u very much for ur content bro

[@ulearntech]

@viduntharumika5471 Glad you liked the XD to Figma trick! If you're interested in learning more about Figma, be sure to subscribe to stay up-to-date on the latest Figma techniques. If you know anyone who is interested in switching to Figma, be sure to share this video with them! Thanks again for watching!

[@tonmoykarmoker1900]

Thank you!

[@ulearntech]

Happy to hear the video saved you from a day of learning. If you enjoyed this one, you might find future tips and tricks even more helpful. Don't forget to hit that subscribe button for more lifesavers in the future! 😄 Currently working on Figma tutorials while in between teaching, but will hope to circle back to XD one day

[@JhonCallangan]

Gracias amigo!!!! Me salvaste..

[@ulearntech]

The phasing out of Adobe XD mean that we need to transition clients XD files over to the Figma platform. Either one has to build from scratch or try using a plug-in that facilitates the process where you don't need to build from scratch. Personally, I prefer XD as its much easier but that's life. Hit that subscribe button and notification bell on as I hope to release more Figma videos in between my teaching schedules! Thanks for watching and for your lovely comment!

[@FelipeSoares-do8so]

Thanks, help a lot.

[@ulearntech]

I would say using the Convertify plug-in does have its limitations. You do get 10 free converts, then after that's done, you need to pay for it. But, if you also want to try a different method, you can also take your XD files by copying the SVG code, kzbin.info/www/bejne/p5KWZ5Z4jc1mrK8 If you think others can benefit from this design tutorial, do share it and subscribe as more videos are coming up. And thanks for watching!

[@raajampolu912]

BRAVO.....Thanks mate.

[@ulearntech]

@@raajampolu912 you are very welcome. Although there is a plugin to download, you only get 10 freebies to convert. If you watch this video, XD to Figma, no plug-ins required, you could do it for free as well...kzbin.info/www/bejne/p5KWZ5Z4jc1mrK8

[@zaklina8979]

Works so so, but it helps a little

[@ulearntech]

@@zaklina8979 I would agree with you on this one. For some weird reason it was super good, and then along the way, it did a so-so job. Instead, I just copy the code now, see, XD to Figma in Seconds for Free (No Plugin), kzbin.info/www/bejne/p5KWZ5Z4jc1mrK8

[@zaklina8979]

@@ulearntech I copied SVG and it worked much better for me :D

[@ulearntech]

@@zaklina8979 awesome to hear that copying the SVG code worked way better than expected using 'Convertify!' . Thanks for getting back to me to let me know.

[@moallailani]

Thank you

[@ulearntech]

You're welcome. Although, you do get only 10 free converts, afterwards, you will need to pay for it. You can either pay for the pro version, or elect to try a different way. You can also try this without using any plugins too: kzbin.info/www/bejne/p5KWZ5Z4jc1mrK8 or if you prefer, you can also just rebuild the files too. If you are new to Figma, make sure to subscribe to the channel and turn the notifications on as more Figma tutorials will be coming soon. And thanks again for watching!

[@mohmmada.aljada3012]

thanks a lot bro

[@ulearntech]

No worries. Although, I will say sometimes not everything gets converted properly. It depends on how complex the XD file is to Figma. If it is purely a wireframe, no issues at all. If it is a mockup with images with rounded corners masks, it may or may not convert properly. And if you have set up some crazy animation in the prototype stage in XD, it may or not work properly in Figma. For the most part, it will get converted to Figma, you just have tweaked it for Figma. I would say, sometimes its easier to rebuild the file in Figma. Sometimes

[@HorizonPerson]

Gamechanger, Thank you so much!

[@ulearntech]

@HorizonPerson Although 'Convertify' does have it's limitations with 10 free converts, you may be better of using a different option, SVG Code Import requiring No Plugins - Watch this video and in two minutes, you will be under your way from XD to Figma as well and it wouldn't cost you a cent! kzbin.info/www/bejne/p5KWZ5Z4jc1mrK8si=WLLQiKRVYTwqbgU2 If you like this video, make sure to hit that like button, subscribe, share and turn on the notification bell for more tips and tricks! Thanks for watching!

[@uxedventure]

Thank you so much

[@ulearntech]

@spectre_gaming2 you are very welcome. Although, there are a few other ways as well to get your XD files to Figma, as the Convertify plug-in does have 10 free conversions you may wanna watch this video without the use of any plugin ( *XD to Figma in Seconds! SVG Code Import (No Plugin) kzbin.info/www/bejne/p5KWZ5Z4jc1mrK8* .... It may just as better

[@BipulRoni]

Helpful video

[@ulearntech]

@BipulRoni - Thank you for finding our video helpful! Explore our collection of tutorials to ease the conversion of XD files into Figma, like 'Convert SVG Code: XD to Figma in Seconds - Game Changer! No Plug-in Necessary! (kzbin.info/www/bejne/p5KWZ5Z4jc1mrK8si=YpoFEKsWxgiL_AH8)' - Subscribe to our channel for more Figma tutorials. Happy designing!

[@user-ei2ck6je8e]

Doesnt work, not converting the file propely, too many errors =/

[@ulearntech]

Hmmm, I just tried, and it does work. Depending on how complex the file is, you may need to walk away after you have applied the plugin to the XD file in Figma. It isn't 100% accurate as Figma reads the interaction differently than XD, but this is easily manageable. The bulk of the work is transferred over. I know in some past projects not all the text is formatted correctly. Likely because of the font substitution. Now that XD is no longer available to new subscriptions, its harder for Figma back end developers to fix the plug-in to make it better. Its better than nothing. I would still use it and then go about it to fix the minor issues after the conversion.

[@user-ei2ck6je8e]

Thanks for the fast answer, sadly i have a design file in xd that i need to do in html css, and i can't find any ways to open the file to save the pictures etc, closest thing i got to the file is the dropbox preview but i can't save or see anything there nor it's good quality =/ I also tried opening in photopea or FIGPEA of course, but sadly both of them missing significant parts of the design so i can't make it that way.. ( i know its missing parts cuz dropbox preview was kind of correct just not editable) I only want to save the retina pictures from the xd project and check the sizes of the things in it, so basically i just need a way to read the xd file if you know any way to do that it would be a life saver! @@ulearntech

[@ulearntech]

Sorry, for the late reply...working. After reading this comment, if you need to go to HTML and CSS, then you are using the wrong plug-in then. You need to try using the Anima Plug-in, where you can convert your XD file to the HTML, CSS, React, Vue... a few of my students have said it is about 94% accurate. I have tried it with some success too. To save the retina pictures from the XD project and check the sizes of the things in it, you essentially need to download the XD app. Even though it may say 'in Maintenance Mode,' you can still download the app to your computer. My students did so this week and it still works fine. Once you open the file in XD, select the artboard or specific elements you want to save as retina pictures. Go to File > Export > Selected Artboards or elements

[@ulearntech]

With a crack, I am always leery with pirated software.... what else is with that software, a trojan grabbing all my personal data and bank information!? I don't have much, unless they can add money into my bank that would be great! From my understanding, as long as you are a paid subscriber to Adobe Creative Cloud you can access the applications in your Adobe Creative Cloud account of the 'Apps' section. It is now found at the very bottom of the 'Apps'. It will say: 'In Maintenance Mode' ...but click on that button, and it should still take you to install it. I would say the last intake of about 70 students, only one had an issue and is now having our 'IT' department to have a look. Strange, yes it is. The direct link for XD.... creativecloud.adobe.com/apps/all/desktop/pdp/xd It wil

[@saeedbaslamahgraphicdesign7981]

Thankssssssssssssss 😍

[@ulearntech]

@@saeedbaslamahgraphicdesign7981 Thanks for your kind comments and watching! Although 'Convertify' does have it's limitations with 10 free converts, you may be better of using a different option, SVG Code Import requiring No Plugins - Watch this video and in two minutes, you will be under your way from XD to Figma as well and it wouldn't cost you a cent! kzbin.info/www/bejne/p5KWZ5Z4jc1mrK8si=WLLQiKRVYTwqbgU2 . If you like this video, make sure to hit that like button, subscribe, share and turn on the notification bell for more tips and tricks!

[@Lemanuee]

It works thanks!!

[@ulearntech]

@Lemanuee, awesome to hear that Convertify worked for you from XD to Figma. I still love using XD, as there is some cool things to use like Repeat Grid, but, there is some things I don't like, like the Grid Layout as its much easier to use in Figma... you would think Adobe could collaborate with Figma on this one. Thanks for watching, and hit that subscribe button if you haven't already and turn on the notification bell on as I plan to upload down the road. And if you have already, many thanks for your support

[@Cansade]

congrats!

[@ulearntech]

Thanks, I think. But, then again, you are also making the move from XD to Figma! If you think this tutorial help you, please subscribe to learn more cool things about Figma. In the process of creating more Figma videos along with a couple more on XD too

[@yaragengo824]

Melhor tutorial

[@ulearntech]

@yaragengo824 Glad you dug the Figma tutorial! Don't get me wrong, XD still holds a special place in my heart, but Figma's got some cool features too. There's actually a whole playlist with more Figma videos you can check out. I've got a bunch more Figma tutorials planned, everything from taking a website I like and turning it into Figma, then diving into Figma variables and all that good stuff... Gotta put a pause on that for a sec though, gotta make some masterclass videos for my students (think taking a Photoshop mockup and making it fancy in both Figma and XD!). But fear not, Figma fun will be back soon! And if you subscribe and hit that notification bell, you'll know right when the next Figma magic happens! Thanks again!

[@PaulaOrteu]

I OWE YOU MY LIFE!

[@ulearntech]

@PaulaOrteu No problem! Consider your life debt repaid. Now go forth and conquer that XD-to-Figma mountain!

[@dailyMotivation00__]

thankyou sir

[@ulearntech]

@dailyMotivation00__.....Happy to hear the video came to the rescue and saved you from a stress marathon! If you enjoyed this one, you might find future tips and tricks even more helpful. Don't forget to hit that subscribe button for more lifesavers in the future! Plus, by subscribing, you can always count on this channel helping on your next marathon!

[@TheOnceAndFutureDoug]

Would be better if it wasn't limited to 10 conversions and then $30/month... :\

[@ulearntech]

@TheOnceAndFutureDoug i 100% agree. Probably a trial period of the application. You can try this instead, this is what I do now when I need to convert my client files. No plug-ins needed. kzbin.info/www/bejne/p5KWZ5Z4jc1mrK8

[@jankowalski4342]

Ahhh it's paid version now...

[@ulearntech]

Oh no...just teaching at the moment, I will investigate further. Adobe XD used to be free for three prototypes, and the unlimited version was part of the Creative Cloud subscription. You could have multiple email accounts I guess to circumvent that. Unless, your a business, and just buy it and expense it.

[@ulearntech]

@jankowalski4342 Sorry for the late reply, taught all day and night. Just wanted to take a hot shower and eat some food before diving in. So, here is the link that I get my students to logo into Adobe Creative Cloud. We do use XD, but for some strange reason, you almost need to wait 24 hours after login into Creative Cloud accounts. Many of my students had to wait 24 hours, and then log out and log back in and miraculously it shows up! creativecloud.adobe.com/apps/all/desktop/pdp/xd I truly do NOT why ADOBE does that, but, it works. So, hopefully, when you sent this file,, maybe around 1230pm Thursday (PST), it will work for you?! Good luck!

[@epicsaves5644]

I guess he meant the Convertify plugin is now paid. $39 per month for unlimited imports.@@ulearntech

[@ulearntech]

@epicsaves5644 - Sorry for the late reply! I had created a new video about 4 weeks ago (after your comment), a week after your comment I guess, called, 'Convert SVG Code: XD to Figma in Seconds - Game Changer! No Plug-in Necessary!' kzbin.info/www/bejne/p5KWZ5Z4jc1mrK8si=0dsPifAkXC5TCoiG - hopefully, you were able to figure it out and if not, maybe, this video will help - better late than never! Been working on new videos for Figma. If you want to keep up with this and future content, consider hitting that subscribe button and turning on notifications. That way, you'll never miss out on a handy resource for Figma. Thanks for your support!