Figma Tutorial: Fake 3d Rotation in Figma

hi everyone shift Studio here in this video we'll show you how to create a fake 3D rotation in figma before we start design file for this tutorial is available in our figma community link is in the description so let's get started create an artboard of 1920x1080 make a large rectangle size of artboard drag it inside the artboard then filled it with background color now bring the mock-up can from assets into the artboard I will adjust the size and alignment [Music] press P for pen tool and start making Vector shape around the can where we will be keeping our design contents after making Vector shape just hit Control Plus X I'm just changing the background to White here but you don't have to change the background as it won't affect our masking [Music] bring in the design contents from the assets it is just a simple can label design you can choose to make however you like now simply adjust the can and design contents select both with design contents in front and Vector shape behind click mask button then just simply change the contents layer blend mode to multiply [Music] before we move on let me explain how our fake 3D will work when we mask our content with the can and move the contents layers from left to right or right to left it gives the illusion of can rotating in 360 degree with the blending mode multiply applied it gives even more realistic feel to our fake 3D rotation I will go back to assets layer and grab button headers and images assets to create visually good looking design for our fake 3D rotation you can adjust or change the design to your preferences I will select the background rectangle duplicate it and then rename upper one to background and then lower one to mask let's select orange images can and background layer and group them I will push them behind the nav bar and button I will rename the group to animation component because we will be animating this group mainly to give more realistic feel to our prototype animation select the animation component group and mask layer rectangle hit mask button to mask now we will rename the group to Orange simply duplicate the layer and rename it to pineapple [Music] hide the orange layer open pineapple layer change the text images design contents colors and its background [Music] after that then just show the orange layer we will convert this entire frame to component by selecting the frame and just hit the component button click on plus to create a variant now our design is ready let's prepare the design for Prototype animation select the default component hide orange layer go inside pineapple layer select pineapple images and move it all to the left near to the frame Edge select pineapple text behind the can and move it all the way to left side almost out of frame now select the can design contents and move it to the right till we will see the design labels and adjust it to the center then simple turn on orange layer back now go to variant two open orange layer select all the orange images and move it to the right near to the frame Edge select design contents of can and move it to the left till we will see the design labels and adjust it to the center select orange text and move it all the way to right outer frame so now we will select the masked layer of orange group then move it to the left all the way till we see the underlying layer of pineapple completely now we are ready to prepare for Prototype go to prototype select the button of default component and take prototype arrow to the variant 2. in the interaction detail select smart animate and click on ease in and out and select custom busier adjust the curves little bit and change the time to 800 MS similarly go to variant 2 button and take the Prototype arrow to the default variant and settings from previous prototype settings will be automatically applied as you can see here to see our prototype first let us create an artboard of 1920x1080 I will drag the default variant component and place it inside the artboard and adjust it little bit I will just rename the artboard to prototype now let's select the Prototype artboard and hit play button so here in Prototype when we click on button we will see the entire fake 3D rotation effect if you enjoyed this tutorial don't forget to hit that like button share it with your fellow creators And subscribe for more awesome design inspiration and as always feel free to drop your questions and comments down below we love hearing from each and every one of you

Channel: Shift studio

Views: 65,653

Keywords: #figma, #FigmaTutorial, #Fake3dRotation, #fake3d, #figmacommunity, #designtutorial, #uiux, #webdesign, #webdesigntutorial, #figmaprototype, #motiondesign, #figmaAnimation, #uidesign, #uxdesign, #figmadesign, #figmadesigntutorial, #figmamotion, #figma3d, #figmarotation, #3d, #3ddesign, #figmawebdesigntutorial, #figmaprototypetutorial

Id: xrDrzqjVKw0

Length: 5min 50sec (350 seconds)

Published: Mon Aug 14 2023