Figma product mockup

#shorts #figma #mockup
Master Figma with our new course, Figma for Web Designers: t.ly/qG-Ig
🤑 FREE Brand Design Workshop - Enroll here 👉 bit.ly/3EJOf9M 🤑
Don't forget to subscribe to our channel for more Design Content. Click here 👉 bit.ly/33byV7L
🎨 Learn the Art & Business of Web Design. Check out all our courses 👉 bit.ly/3jMxocU
📱 Find us on SOCIAL MEDIA
Flux Academy's Instagram 👉 / flux.academy
Thanks for watching our video!

[@ItsFoxCrafter]

The Designers Dream Is a Developer Nightmare 💀💀💀

[@HashirEhtisham]

Just use a plugin it converts the figma files to html and css 🧑‍💻😃

[@Garbage-s1f]

what are you talking about? he just has to use the finished image not code it from the scratch

[@bhatshakir817]

Thats how u give numerous hours of frustation to a developer

[@josh0147]

Can you explain how?

[@alikhanhotak511]

@@josh0147 The UI designer is just dragging, dropping and sliding for the opacity, while the developers have to do that with actual code, which takes a lot of time. They have to get the opacity right the position, have that show upside down. So much things

[@josh0147]

@@alikhanhotak511 would It be easier to get the image he’s just made and merge it into one? Would that save the guy who’s coding it from having to do opacity etc and they could just use the 1 image he’s made?

[@yashsharma1080]

​@@josh0147Yeah, that's how it's done

[@alikhanhotak511]

@@josh0147 yea that would be possible, as long as the image quality stays as it is.

[@danieldey]

Dude! Make more such tutorials!!!

[@FlixFitz]

Animations with kzbin.info/www/bejne/l36phqh9j55_e9U

[@DavidStavegard]

I love that ending - "And it's done!". Give me like 5-6 hours and I'll say the same! Maybe swapping out "it's"to "I'm" 😂

[@benherbst3620]

😂

[@tamaraboo00]

😂😂

[@cedrictheveneau9141]

Really cool ! Love it ! Now we need a code tutorial

[@uncolorr]

[@Oxytocin_NA]

should keep the final image for a second or two in the end so that we can use the progress slider and compare the final result

[@johngunthner2558]

Press pause

[@swaroop4una]

We need more tutorials like this please make more

[@ButtonWalls]

Why are developers acting like they have to code this. I would make the designer hop on photoshop and make a simple image for me to use.

[@Sparkee05]

can someone let me know what the point of doing something like this in Figma over photoshop? Seems like a lot of unnecessary clicks in Figma when this can be done in only 3 layers in photoshop (shoe, shadow, reflection).

[@infinitedesigns_io]

Super awesome but even better if you would slow down a hair and show what the end product looks like. Cut away way too fast. I understand that's the trend nowadays but geez! haha Awesome stuff though!

[@thatsalot3577]

I can think of the corresponding css as he's explaining.

[@Pantokratorass]

Is it easy in coding?

[@thatsalot3577]

@@Pantokratorass wouldn't consider it easy but I'm kinda used to it as I'm not very good at using figma or adobe xd, With enough practice you can also do it in real time as he's explaining. It's all about experience and very little about knowledge.

[@vaisakh_km]

@@Pantokratorass as i am not good at figma, it is easier for me to do this in css

[@arsalanali7512]

Add new color and use gradient on that instead of making new layers

[@therankingworld7627]

Woahhhhhh soooo cooooollll

[@tomashruska2171]

we need more of these tutrials

[@madhoundes]

Make blur for solid black is old school try instead to make black radial gradient instead with lower opacity

[@salawudeenambali4700]

Simple and straight forward

[@KENISLIVE3]

Instead of reducing opacity u could do multiply on the screen

[@irzq_z]

I’m falling love with Figma

[@Jutenas]

Sweet! Thanks for showing 🙂

[@radeveloper0]

Awesome 👍

[@friday077]

I didn't understand the use mask part

[@andyatmosphere]

So simple but effective!

[@myfeatheredfriends254]

Wow this is so helpful

[@felipeschossler]

It’s difficult to say if this is really Figma work or Photoshop in Figma 😂😂

[@ahmedhafiz2419]

That Shadow trick is new to me

[@obinnaibem]

Very simple and powerful

[@connectionism3754]

There was a time when this was seen as an absolute no no for any product online.

[@jonyeazel]

good stuff brother.

[@mrpixelgrapher]

Why not just do it in photoshop and then add it to figma??

[@amitkoyande]

I use Photoshop.

[@julleketbulleke]

What if the shop sells something other than shoes, or different shapes of shoes, u cant realistically create a mirror and dropshadow per item.

[@iben1195]

Is one click on PowerPoint 🤗

[@mdstyles_]

Amazing video gonna try this

[@1wayLane26]

thank you! keep up the good work bro

[@akane8615]

MORE OF THIS PLS

[@mirka488]

Thank you 👍

[@luizg.zambrano]

how can I make the same thing for 3D objects like a box mockup? Because in this case, the reflection must have another dimension, and not just a linear reflection as a 2D object.

[@acetechnics3420]

Regular classes available?

[@gauravsharma9794]

no way that shadow looks realistic :/

[@MrFarqi180]

Very cool! ❤

[@abdullahmohammed5236]

You just master it

[@realmeee]

Figma need an option right click over image to set a mask with out dropping a rectangle

[@domni4699]

Very nice!

[@denisgut]

Dude, you don’t have to make all these 3 layers, but instead you could have made only 1 with all that settings

[@aquiyahdesigns]

This is awesome

[@freefellow]

make full vid

[@gujjarch83]

Amazing

[@savitawalki1730]

Awesome

[@ahmedamber]

Witch software you are using?

[@letmewatch.]

What does mask do?

[@_manishray_]

Awesome. 😮

[@purpleintogreen]

Should I start figma or html css for web

[@FluxAcademy]

Design in Figma before developing.

[@entrinsek9230]

Very fast need a video for it about 2 or 3 minutes hhh

[@colsjit]

In canvas that's 3 steps

[@yanimihaylova]

can we make a same thing on framer

[@umarabduqahhorov7608]

How did u take this picture

[@molokofreak]

wow, it's like Photoshop 3.0

[@OrewaPein]

To all the people who are commenting, "Nightmare for developers 😭😱" You are either not a developer and if you are then please chose some other field because you will be only wasting time and resources of the company you are working with by trying to actually "develop" this image rather than just exporting this image from figma and using tag 🙂🙂

[@rahulochani578]

Love it

[@arunbelur6759]

Why do always show you face in tutorials. Isn’t the whole idea to see what you’re doing rather than see your face?

[@uzzmah]

"Amateur" Graphic designer here. Can Figma be used as an alternative to Adobe Illustrator? If not, why so?

[@savvosg]

They are used for different fields. Think about Figma as Adobe XD. They are tools for UI/UX designing.

[@hobisdimples94]

As someone who uses both, Illustrator definitely has more advanced tools for certain functions. Personally Figma is incredibly user friendly and honestly I like the interface better and find it useful for quick layouts. But there's no replacement for AI when trying to do complex graphics. I think it's good to be proficient in both programs and use them together for efficiency, rather than just one or the other.

[@uzzmah]

@@savvosg Got it, thanks👍🏼

[@uzzmah]

@@hobisdimples94 Thank you, great suggestion 👍🏼

[@outpost31737]

Dude you need to sort your head out and I mean quite literally move it out of the way so we can see what you're doing.

[@mikeyturralde]

oh yeah, didn't even notice that but you're right. This would be better if the face cam was out of the way on the left or something

[@karansharma1gaming]

I can literally do this in picsart😜😭👆🏻

[@WhoFarted69]

Haha, stop making it look so easy... Thanks Ace!

[@damirrashidullin9323]

Круто! Спасибо😁

[@Vibe4ant]

Shadow needs more work.

[@JayPatel-ou2ud]

Wow 😍

[@aj-lan284]

Mannnn🤩

[@gold571]

Figma B-

[@ofaded-b4w]

nice 0:12

[@mefizto.]

Pretty useful!

[@badbrother_2023]

Huh now code it

[@zouhrrr]

Genious

[@Oscar4u69]

figma what 🤨😳

[@janehogan3345]

🎉

[@chestify950]

Wtf

[@eloreneloreneloreneloreneloren]

Figma mоnkeys haven't heard about Photoshop

[@MacChoo]

This reminds of making emblems in the bo2 days