🎯 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
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!
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.
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.
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.
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
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
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 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 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.
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
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
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😎
@@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
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?
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.
@@maddybeardUX 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.
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☺
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.
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
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! 😊👍🎉
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?
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.
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.
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 :)
9:48 You can use scale tool ( "K" is the shortcut key ) for resizing any object/text size then pixel perfect it later
Ooooo thank you!! 👏 great tip
GAME CHANGER! I am today years old thanks mate!
🎯 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
Xd is easier and more delightful to use on simple projects. But Figma is more powerful and meant for big projects
I would agree with that!
I love to know, but there is no version for MacBook Air 2023. Someone help me please
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!
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.
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.
💯
For Figma icon plugin, I'm using Feather Icons and Material Design Icons.
Thank you!! 👏
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
Ooooh good to know! Thanks!
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.
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
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
Aw thank you!! Haha I know right?!
Button font you mentioned is actually serif -- not san-serif. I agree though -- -serif font feels too finicky for a button.
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.
Would love to know what component functionality is missing in XD?
@@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?
@@steveschreiner7444 All the problems I have wouldn't matter for long as Adobe has bought Figma
@@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.
@@steveschreiner7444 Hey no problem!
Loved seeing those two tools side-by-side - thank youuu!
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
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
How you created your icons folder in XD , as you serached inside easly ! ?2:26 minute in your video .
That's a plugin for Xd called Icons 4 Design! :)
Loved this!
Question: Why was their use of a sans-serif font on a button questionable?
hey I like your channel, was wondering what you used to create ypur portfolio website?
Thank you! I use Webflow :)
Completely off-topic - What camera are you using to record your videos? Quality is outstanding!
Thanks!! I use the Sony ZV 1 🤗
@@maddybeardUX wow a PnS camera with this quality? It's your lighting work, then :D
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😎
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 :)
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.
@@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
What is version your Adobe XD at this video ?
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?
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 🤷🏼♀️
What VERSION of XD are you making use of and are you connected while using the XD or you're using it offline?
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.
This is a great idea! Yeah I’m much more comfortable animating in XD. Thanks for the suggestion! :)
@@maddybeardUX 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.
Watching this at 4am.. i love it you made it look fun.. got a new sub
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☺
Hahaha it was a struggle!!😂 thank you thank you :)) glad you enjoyed
wait why would you call Georgia a sans serif font? 5:11
Oops yeah I meant serif 😂😅
@@maddybeardUX more like sheriff
to make text bigger while stretching use the scale option which is below move tools
that was fun, thanks for showing the differences!
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.
Yay I’m glad you like it! And LOL you really are a design detective 😂 good catch, thanks for pointing that out! 🔎
can anyone please suggessed me which one is best ,,
what will be better to learn?
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
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! 😊👍🎉
100% agree!! 🤗💯 and thank you!!
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?
Nice video thanks, for the icons in figma i prefer box icons or phosphor plugins. They are cool!
Thanks for the recommendations!!
great work. Learned so much.
Hey! Thanks so much for this video!
9:45 yes center alignment
Heads up, the Image Line affiliate link is broken and needs to be updated.
Sorry, which link?
@@maddybeardUX 🤣😂🤣
Thanks for your walkthrough video @MaddyBeard 🙏
Thank you so much this helped a lot!!!! You saved my life
Figma, but I need to know how to record (to video) the animation like XD
100% they need a way to do that!
that would be a *serif font* on a button... :)
Well, XD lets you design for production, Figma pushes you to design stuff your developer will hate you for.
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.
Nothing Ever Comes Close To Adobe When They Want To Overshadow you
Just say you’ve never used any other than Adobe before
Thanks Maddy
i really enjoyed this
Finally thank you very much
Can't beat Figma. Nice video
Figma is the most irritating tool. XD is simply more intuitive and faster to use.
@Mark ... Nonsense.
@Mark mistaken answer haha there are another tools for pros than those figma and XD are for normal people
What tools are you talking of.. I'm curious 😍
I know a developer would be like what the heck is this shadow in the figma version 😄
Haha 100% 😂
Adobe next year:
$9.9 to get Figma Pro + Adobe XD
Probably the best app from you..
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.
OMG nice i liked an subbed
FIgma > Adobe XD
I fell in love with you stop being perfect
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 :)
you dont even have a beard
Adderall
Just get a laptop. Legit