Figma vs. Adobe Xd Design with Me | How different are they?

A few weeks ago I mentioned that I'm using Figma at my new job. As many of you know, I used to design only in Adobe Xd so learning Figma has actually been super interesting! Today, to experiment with these two tools, I'm going to be designing the same app screen in both programs and talking through the differences with components, transforms, shortcuts, plugins, auto layout & more!
Try Figma: bit.ly/figma-free
Hi-Fi Prototypes with ProtoPie: www.protopie.i...
Use code MADDY at checkout for 30% off your Pro Plan
◤ Connecting Designers + Jobs
》Browse the job board: bit.ly/3qOjs62
》Apply to the talent collective: bit.ly/3uJSuNZ
》Search for talent: bit.ly/3tVklvM
◤ Skillshare Class
》Intro to UI/UX Design: skl.sh/3pcWnGC
◤ Follow Me
》Instagram: @itsmaddybeard
》Email List: maddybeard.ck.page
》Behance: behance.net/maddybeard
☆ For Business Inquiries: email [e-mail]

[@saketjoshidesign]

9:48 You can use scale tool ( "K" is the shortcut key ) for resizing any object/text size then pixel perfect it later

[@MaddyBeard]

Ooooo thank you!! 👏 great tip

[@makojin29]

GAME CHANGER! I am today years old thanks mate!

[@platinoir]

Xd is easier and more delightful to use on simple projects. But Figma is more powerful and meant for big projects

[@MaddyBeard]

I would agree with that!

[@asdfg49515]

I love to know, but there is no version for MacBook Air 2023. Someone help me please

[@AnuragGanguly]

I always wanted to use both side by side but never got time for the same. Thanks for doing it on behalf and creating such a great quality content. More power to you!

[@KabbaModern03]

Digital Designer for 8 years and I always use Adobe CC in my work but I find Figma to be more consistent when it comes to developing/building what I create. Only benefit I love about XD is the migration to After Effects given that I animate a lot.

[@MaddyBeard]

💯

[@trnkskp]

Loved the comparison! For the shadow, use two blurred oval circles: one in black with reduced opacity, positioned with the middle just below the rectangle. Place the other circle on top of it in the same color as the background to create the curve. I just had to make one, so I thought I'd share. Thanks for the vid! :D

[@anmive]

For quick stuff I mainly use XD but Figma is a bit easier to design prettily(? with all the plugins. For icons I think I use one called iconify

[@MaddyBeard]

Ooooh good to know! Thanks!

[@rishabhagarwal8594]

Figma components I feel are more powerful. I mostly use Xd on web projects, but when it comes to working on something more complex like an e-commerce or an application, Figma has always been a safer choice just because of its components and states and the whole design system set of features it has. Honestly, it took me some time to figure out how Figma's components worked, but once I did, I realised how powerful they really are.

[@steveschreiner7444]

Would love to know what component functionality is missing in XD?

[@rishabhagarwal8594]

​@@steveschreiner7444 First thing i miss in Xd is when you change text inside a component : In Figma it changes for all the states, in Xd you have go to each state one by one and make that change. it's kind of frustrating. Also the component properties and variants feature that Figma has, for me it feels like a better way to create components since it helps make the workflow faster and you have to create less components. The last thing I miss in Xd is the option to make any layer fixed or fit container. Alo another thing is that in Figma I can take any component and change it into another compenent by selecting one from the dropdown list, in Xd I have to access the component panel and drag it in, it's not a big thing but helps make the workflow faster. Recently I was working on a product design in Xd with very complex components, so everytime I have to make a small change, it took like 20 minutes, since it had components inside of components. In Figma the same thing would have taken me 2 minutes. Thoughts?

[@rishabhagarwal8594]

@@steveschreiner7444 All the problems I have wouldn't matter for long as Adobe has bought Figma

[@steveschreiner7444]

@@rishabhagarwal8594 This is actually nice. I spend hours renaming Hovertexts to a point where I think they know what I mean and feel the need to leave it untidy. I just tried Figma but the components Handling is very different so, my thoughts aren't very informative to that point, but thank you for clearing that up. Still, the problem is that Figma isn't in the Adobe Cloud, so I will have to continue dealing with it, but I will look deeper into it. Thanks for your effort.

[@rishabhagarwal8594]

@@steveschreiner7444 Hey no problem!

[@Frozki]

For Figma icon plugin, I'm using Feather Icons and Material Design Icons.

[@MaddyBeard]

Thank you!! 👏

[@AkinsRealm]

My fav tool (almost for all visual design lol) is XD, and I’ve even seen Figma users use XD for animation purposes, thanks to its unique prototyping/auto animate features. Oh and thank you for all the great content Maddy! 😊👍🎉

[@MaddyBeard]

100% agree!! 🤗💯 and thank you!!

[@baihe300]

🎯 Key Takeaways for quick navigation: 00:00 🎯 Introduction and Setup - The video begins with an introduction to the experiment of designing the same screen in both Figma and Adobe XD. - The presenter mentions the goal of the experiment and sets the stage for the comparison. 00:44 🖥️ Starting with Adobe XD - The presenter starts designing in Adobe XD, beginning with creating a card element. - Describes font selection, text size, background color, and icon creation. - Demonstrates creating a shadow effect. 04:43 🎨 Designing a Button - Focuses on creating a button in Adobe XD. - Discusses the choice of a sans-serif font, button styling, and adding an icon. 06:33 🔄 Creating Components in Adobe XD - Demonstrates the process of converting elements into components in Adobe XD. - Shows the creation of different states for components. 07:47 📏 Adjusting Layout and Alignment - Makes adjustments to the layout in Adobe XD, including spacing and alignment. - Ensures consistency in design elements. 08:29 🔀 Transition to Figma - Transitions to using Figma for the same design task, highlighting some initial differences. - Notes the reverse scrolling in Figma. 09:55 📄 Text Formatting in Figma - Discusses text formatting in Figma, highlighting the differences in handling text compared to Adobe XD. - Addresses the challenge of resizing text. 11:28 🖼️ Designing a Button in Figma - Starts creating a button in Figma, exploring the auto layout feature. - Explains the advantage of auto layout for maintaining consistent padding. 12:49 🧩 Challenges with Icon Plugins in Figma - Encounters difficulties finding suitable icon plugins in Figma. - Acknowledges that Figma lacks robust icon plugins compared to Adobe XD. 13:27 🤝 Comparing Figma and Adobe XD - Summarizes the similarities and differences between Figma and Adobe XD. - Mentions personal preferences for certain features in each tool. 14:18 👋 Conclusion and Wrap-Up - Concludes the design experiment and reflects on the experience of using both Figma and Adobe XD. - Encourages viewers to subscribe and like the video for more content. Made with HARPA AI

[@richardottley4611]

I love this.. 😅 Love seeing you try to figure out how to do this and how to do that.. I agree with XD is really good for prototyping.. and Figma needs to have a reliable icons plugin.. Lol I like how u just copy and pasted the icons from XD to Figma just to save time 😅 👏👏 Great job Maddy☺

[@MaddyBeard]

Hahaha it was a struggle!!😂 thank you thank you :)) glad you enjoyed

Which one do you like the most going to 2023? Which one you would recommend for new users? I use Adobe Creative Cloud. I love Illustrator, Photoshop amoung other Adobe apps. What are your thoughts? Thank you.

[@mintcat81]

just found your channel!! I am loving it! it's funny that we all saw instantly a UX design issue with those buttons we couldn't understand what they meant, imagine the user

[@MaddyBeard]

Aw thank you!! Haha I know right?!

[@nostalgicnow6001]

im a developer who is trying to figure out if i start designing in XD or figma i already know how to use photoshop due to my awesome photography skills. So far they look exactly the same i dont see much of difference. I think i will stick with XD thanks for the video

[@randallhall9348]

Button font you mentioned is actually serif -- not san-serif. I agree though -- -serif font feels too finicky for a button.

[@deathmaxxx]

Well, XD lets you design for production, Figma pushes you to design stuff your developer will hate you for.

[@chrismauerer]

Loved seeing those two tools side-by-side - thank youuu!

[@xavitom06]

What VERSION of XD are you making use of and are you connected while using the XD or you're using it offline?

[@theofficialgwiz]

They are two different beasts aren't they? What icon kit are you using to drag those icons in so fast?! Also, would love to see on the screen what shortcuts you're using for each program.

[@masha3365]

Hi Maddy! I think it would be interesting to compare their prototyping abilities. I am an avid Figma user who recently started to look into XD (also thanks to your channel ❤️). Yesterday I made a simple animation using auto animate in XD and delayed animate in Figma and it looks so different. I like how it looks in XD, and with figma the same effect looks kinda weird. I think you are more pro in XD so it would be interesting to get your opinion on this. Also, one of the advantages of XD is the ability to prototype for AR and VR.

[@MaddyBeard]

This is a great idea! Yeah I’m much more comfortable animating in XD. Thanks for the suggestion! :)

[@masha3365]

@@MaddyBeard It'd be great if you share. I will be waiting! I made a prototype in XD and it didn't turn out so good. I had trouble with overlay swapping - like an "overlay swap" in figma, how to go around with in XD? I needed to interact with one overlay which would call for another overlay on top, but the background didn't stay the same in this case.. ugh. Video integration and Lottie animation worked seamlessly on other hand.

[@abdennourtrabelsi9777]

Watching this at 4am.. i love it you made it look fun.. got a new sub

[@musfirahnadeem2105]

Is there any way I can use Adobe XD for free apart from the 7-day free trial? Also if I buy Adobe XD, is there any internal subscriptions or anything I need to continue paying for?

[@chihhu5751]

Our ecom team loves prototyping in FIGMA. but i am working with a team of designers used to working in Adobe CC / AI, PSD/. Do you think we'll miss out if we adopt xd vs FIGMA? We mainly develop flat assets such as email banners, homepage, mobile banners.. Great videos. Thank you

[@wtpaige]

that was fun, thanks for showing the differences!

[@beautiful.flowers202]

What is version your Adobe XD at this video ?

[@BREAKENSTEIN]

I'm learning how to use XD and this is super helpful. Since I'm watching this like a hawk to absorb all the knowledge I noticed that the "show card details" and "freeze card" are askew, and that's why the text moved when you made it a component. I think they're off alignment because they originate from the card's text box after transforming it. I had to watch it a few times. I feel like a detective lmao.

[@MaddyBeard]

Yay I’m glad you like it! And LOL you really are a design detective 😂 good catch, thanks for pointing that out! 🔎

[@antlogiq1642]

Thank you so much this helped a lot!!!! You saved my life

[@beeblood1782]

Hey! Thanks so much for this video!

[@SumanthLazarus]

Thanks for your walkthrough video @MaddyBeard 🙏

[@megazine]

great work. Learned so much.

[@betmen6828]

Probably the best app from you..

[@kyleoren6523]

that would be a *serif font* on a button... :)

[@abujayed8999]

can anyone please suggessed me which one is best ,, what will be better to learn?

[@blinkinbaboonbiskit]

Use XD. And instead of doing what she's doing, use the whole Adobe suite, building elements (e.g., in Illustrator) and bring them in. Much more professional, much more efficient

[@Sebastian-pp9fe]

I'm trying to make a portofolio as a beginner so I can start applying to some positions. This question came to my mind as a lot of job descriptions mention Figma/Sketch etc , buuuut none of them mention AdobeXD. Do you know why most of the companies forget about AdobeXD?

[@MaddyBeard]

I really don’t know!! At the first company I worked for they used Sketch, the next one they used Xd, and now my current company uses Figma 🤷🏼‍♀️

[@davidtheres1195]

Finally thank you very much

[@aymanalrifai]

Nice video thanks, for the icons in figma i prefer box icons or phosphor plugins. They are cool!

[@MaddyBeard]

Thanks for the recommendations!!

[@AlAA-jc5ve]

How you created your icons folder in XD , as you serached inside easly ! ?2:26 minute in your video .

[@MaddyBeard]

That's a plugin for Xd called Icons 4 Design! :)

[@robertevans2830]

Completely off-topic - What camera are you using to record your videos? Quality is outstanding!

[@MaddyBeard]

Thanks!! I use the Sony ZV 1 🤗

[@MuhammadIhsan390]

@@MaddyBeard wow a PnS camera with this quality? It's your lighting work, then :D

[@robinsonarsenl1142]

to make text bigger while stretching use the scale option which is below move tools

[@hoveroclinton2039]

Nothing Ever Comes Close To Adobe When They Want To Overshadow you

[@NSEYA01]

Just say you’ve never used any other than Adobe before

[@technocatdance]

I made a couple things in XD lately and remembered that XD has undraw which I have not been able to find for figma, when I was learning XD I do recall you can import things from photoshop and illustrator directly like save color swatches across all 3 etc? with that being said I bought affinity photo/designer on sale for $35 each outright no more payment plan !! haven't missed my adobe payments ever since😎

[@MaddyBeard]

Yesss I love that you can collaborate across all Adobe programs. That’s awesome though!! I’ve never heard of affinity! Might have to check it out :)

[@carebear4554]

Yeah Affinity is the best and cheapest Adobe copy cat on the market. It just can't produce psd and Ai files, but can produce jpegs, tiffs and pngs.

[@technocatdance]

@@carebear4554 Not sure all other photo editing suites other than Photoshop are really "copycat" products ..that would be like saying all fast food burger joints that are not mcdonalds are copycat

[@boniprakarsa5090]

Thanks Maddy

[@sarcasmpersuasion]

I know a developer would be like what the heck is this shadow in the figma version 😄

[@MaddyBeard]

Haha 100% 😂

[@davidagbona8869]

Loved this! Question: Why was their use of a sans-serif font on a button questionable?

[@godsmanquarshie7861]

i really enjoyed this

[@wetiot]

Figma is the most irritating tool. XD is simply more intuitive and faster to use.

[@wetiot]

@Mark ... Nonsense.

[@swagfel]

@Mark mistaken answer haha there are another tools for pros than those figma and XD are for normal people

[@destinyefe8996]

What tools are you talking of.. I'm curious 😍

[@designduck]

Can't beat Figma. Nice video

[@jeffkamau3432]

hey I like your channel, was wondering what you used to create ypur portfolio website?

[@MaddyBeard]

Thank you! I use Webflow :)

[@soulmonsta2693]

wait why would you call Georgia a sans serif font? 5:11

[@MaddyBeard]

Oops yeah I meant serif 😂😅

[@harrymorgan595]

@@MaddyBeard more like sheriff

[@Eltopshottah]

9:45 yes center alignment

[@ElenaBG3]

Adobe next year: $9.9 to get Figma Pro + Adobe XD

[@MrRytisG]

XD no ability to add shadows to the group. No dynamic txt change in button states (components), no scisors for vector slicing. And around 10000 other issues. It's a dead program only for baby designer use.

[@veoveo1315]

Figma, but I need to know how to record (to video) the animation like XD

[@MaddyBeard]

100% they need a way to do that!

[@AhmaddXD]

OMG nice i liked an subbed

[@scott-richardson]

I would love to see this also done in Photoshop. I am a life-long Photoshop user and design all my UX/UI/Mocks in Photoshop and still can't bring myself to use either of these tools. I recently had to work with Figma as a client provided their project in that format for us to build/develop and if anything I found the app quite frustrating. The CSS it produces is rubbish, the colour support is inconsistent (renders on screen brighter than the hex values indicate - so don't use a ColorPicker tool that samples the screen). It also doesn't export SVG's with the correct XML headers for the proper MIME-type, and exporting assets in general is a mess, throwing things in folders and few options to choose the filename during export. Then other issues like when graphical assets have been laid out in Figma with layer modes, only to lose all the appearance when you export the flattened art. And the apps themselves just feel like I am moving HTML elements around a canvas and not actually working with pixels or vectors. Yes the apps appear smooth and responsive but I just feel hamstrung. I am sure, over time, I would become more comfortable with the tools.

[@laradebiasi3907]

Heads up, the Image Line affiliate link is broken and needs to be updated.

[@MaddyBeard]

Sorry, which link?

[@KwadisMedia]

@@MaddyBeard 🤣😂🤣

[@juliansaurus]

FIgma > Adobe XD

[@BakelitTV]

I fell in love with you stop being perfect

[@cagataycetinkol7730]

Omg you're such a wife material. Beautiful, kind and funny... your bf is very lucky guy :) by the way i choose figma. they seem pretty similar but figma seems more popular to me when i search the web. it is not the most scientific way but works mostly :)

[@Nbomber]

you dont even have a beard

[@teresalopes6637]

Just get a laptop. Legit

[@vanessacostantino8411]

Adderall