Create a UI into a 3D Perspective in Figma

Learn how to add 3D Perspective to your UI in Figma
➡ Figma file: www.figma.com/community/file/...
🔗 Visit our website for more free tutorials
➡ Website: designcode.io/figma-handbook-...
👋🏻 Let's connect!
➡ Instagram: / sou.design
➡ Twitter: / souranyphomhome
Music from Uppbeat (free for Creators!):
uppbeat.io/t/soundroll/feelin...
#figma #uidesign #3Dperspective #tutorial

[@aidenfaulconer9193]

You can also do this quicker with a figma plugin called fig3D which takes svgs and puts them in a 3d space you can work within, you can customize things like lighting and thickness for the flat items you select for the plugin

[@hayatgamer2304]

No words to thank you 🥰

[@TheCalmWoodsman]

I was trying to do the same with one of my cards and figma is just blocking and there is nothing I can do more. Do You know how to fix that?

[@blackant1311]

anything for wordpress?

[@mohamedhamada7588]

thanks you are life saver
note for new users like me if you cant see the stroke extroded and you cant see options
# just double click on your object in 3d view and the advanced option will appears

[@pratika.chavan]

This plugin is not working :(

[@kennethn.9960]

very cool the way you design the floating. Thanks for sharing

[@Sandeep-tn8mz]

Cant believe souch content is for free .. Great work, god bless you

[@tentacle_sama3822]

Woah amazing, just what I was looking for

[@PATOUIUX]

Thanks! This kind of tutorials are amazing for people like me (junior trying to learn) copying the designs with a step by step guide is really helpful! thanks a lot!

[@vaibhavsaxena2127]

Awesome work and aswesome tutorial. Thank you :)

[@texasrobotaxi2727]

Exciting stuff! Looking forward to trying this over the holidays

[@DesignCodeTeam]

Awesome! Happy holidays!

[@nicafaustinoVC]

Amasingly good. Well done and many thanks for sharing it.

[@DesignCodeTeam]

Glad you enjoyed it ☺️

[@harshdadhich8232]

Thanks a lot✨

[@CH3THIN]

design code literally makes the best designs out there

[@DesignCodeTeam]

haha, we're trying. glad it's being noticed. :)

[@user-do8vj6rr7r]

You just elevated my professionalism one step ahead...Thank you ✨DesignCode✨

[@zar_germany]

just amazing. thankyou😍😍😍

[@aidpool]

I learnt somethings new today. Thankyou! Btw in love with your accent.

[@Callemos7]

That’s really cool.

[@Ervan_rainy]

It work, ah thanks for your tutorial😊

[@unhumano2713]

Thanks a lot for your time and shared experience!!!

[@DesignCodeTeam]

It's my pleasure

[@kelvinpraises]

awesome! 🔥

[@HiepTran-fh2jz]

damn, looking so good. Nice plug in . Thank you

[@DesignCodeTeam]

it's great that it's non destructive too!

[@lilyyang5779]

Thanks for share！

[@sengv1987]

this will go great for my future portfolio update, thanks

[@DesignCodeTeam]

Great! You're welcome ! 😉

[@Ryanae]

wow, thanks for sharing

[@anzysthomas2716]

it's very helpful!!! thanks a lot Sourany 😁

[@ahtishamulhaq6677]

hm

[@BreathingInPixels]

Wow,,, love it...

[@MuhammadYusufMakhsudov]

it was incredible thanks sister

[@rukiee.b.ovwigho5709]

Nice tutorial 👏👏

[@lakshaynagpal3626]

never expected this in figma!

[@epitaph8704]

what is figma

[@ongame2264]

Thanks for sharing!

[@DesignCodeTeam]

Thanks for watching!

[@heloisaviana5636]

thank you so much

[@starvemarve5530]

Amazing. I was just abt to go to Blender

[@josuegisber8150]

You guys rock!

[@DesignCodeTeam]

Very kind of you to say!

[@mdiqbalhossain9832]

Thank you

[@Houston93]

This is so great content😊

[@sudharsan7202]

Thank you very much!!

[@DesignCodeTeam]

You're welcome!

[@uxuidesigner1048]

Awesome design and cute voice

[@NatadTech]

Skew That 💙💙💙💙

[@randominternetmedia]

Thank you!!

[@DesignCodeTeam]

Welcome!

[@vctgab]

Nice!!! 🇧🇷 🇧🇷

[@sskdev5116]

I learned alot in this one video

[@DesignCodeTeam]

That's awesome to hear!

[@slava.senatorov]

Thank you for what you doing, amazing tutorial ❤️‍🔥

[@DesignCodeTeam]

Glad you like it!

[@mansweepquo]

Hi on 3:50 did you do it manually or you did something to apply it al the 3d on every elements on the icons etc? please answer me.

[@aestheticlover6305]

wow Nice Super awesom💥

[@shaniaj1879]

sooo cool

[@mitexz]

which mockup plugin did u use?
and also
figma is not showing me the option of detach instance

[@uithesecond9047]

Please how did you get that gradient for your figma background

[@aa_kasep]

where can I find such good pictures?

[@zoeho3433]

thanks a lot:)

[@DesignCodeTeam]

Welcome!

[@donbao]

cool

[@gopalkrishna7403]

Hello, I have a project, looking for UI design like this. How can I reach you to discuss further...

[@naeembabakheil]

good.. does figma need coding or its WYSIWYG ? and export for as image ?

[@varshakapil8224]

Wow

[@MACH_SDQ]

Goooooood

[@KT-User]

thanks

[@DesignCodeTeam]

You're welcome! ☺️

[@Ziku_kun_7]

can we design like this in phones?

[@jetchaolin4688]

How do you create a device, like that Iphone you took the screen from?

[@mosesadekoje3107]

Looks awesome! Thanks for the video.. I'm assuming this is just a fancy way to showcase your design or is there some other use for it?

[@busimo]

showcase of course

[@uzcryptoairdrop]

which app is this?

[@victoravr10]

Next: into Java swing interface 😆

[@ibukunoluwaodukoya8936]

Nice

[@DesignCodeTeam]

Thank you! 😊

[@alicehmchow]

May I know what UI software are you using? I am new to the field what will you suggest?

[@DesignCodeTeam]

We're using Figma to design this

[@adminmovie]

Ty Buk Lau

[@bristlearts2923]

Hey, how did you do the bodies of the smaller UI elements so quickly at 3:48 to 3:53?
Also thanks for the tutorial!

[@ira.pavlenko]

the same question))

[@mrgnch2090]

Wonder the same

[@jwilliams5063]

I have the same question hopefully she will answer

[@Bartrangames]

i think she already did that before and just reveal the layers

[@WaliaIbex]

You could do it easily with Spline 3D .

[@kiajacxxx]

thanks, you have nice voice

[@DesignCodeTeam]

So nice of you

[@andrefelixcarvalhoneiva1416]

my linear gradient does not appear the straight line like you ;/

[@asitpurohit_108]

Do u have any course

[@progyanboruah1534]

How did you do it sooo quickly 3:48?

[@BrooklynDesigne]

Hello!
What is this neon UI style called? I want to master it.

[@esjel9804]

Glassmorphism with aurora backgrounds

[@BrooklynDesigne]

@@esjel9804 hm?😂

[@fhiyyerh]

huh.....i have been looking for something like this thanks

[@karlc.5943]

Hello ! When I try to move the "cards" out of the frame, it changes the disposition and everythinh is going "linear" shaping the rectngular frame. Any advice ?

[@tomashruska2171]

ad watched :)

[@sendiafirza]

6:47 why did you cut this?

[@ttuywc1eq]

Great tutorial but the background music is a bit annoying

[@xulibo1213]

看起来炫酷，这个软件第一次听说。也不知道如何下载使用，或需要付费

[@rickyventaglio5811]

Does the plug-in still work?

[@aspirin4279]

It still works till now

[@mehmetedex]

*_".. now, look at this sorry miserable squashed thing. Can anybody tell me what's wrong with this picture? Anybody? Anybody at all?"_*

[@alexandergolubev6358]

learn blender instead

[@nabooo]

or cinema 4d

[@rorothegoatboat]

Need a tutorial like this for Illustrator, I hate figma...

[@amuaypnk9274]

Thank you for tutorial 🙏🏻☺️
but i have some problems with Flatten (3:15)
perhaps i used your UI (for trying)
and it group many strokes so i couldn’t do the next step…🥲