Create a Skeuomorphic Toggle (On / Off) Button in Figma

In this Figma tutorial I'm going to show you how to create an interactive skeuomorphic on / off power toggle button in Figma. Skeuomorphic design is a design that imitates the original thing. In case of UX / UI design, user interface elements mimic real world buttons, levers and controls. This is a great example – this skeuomorphic / photorealistic design is trying to mimic a metallic look, a dent in a surface with a button that literally stands out.

This is a Figma interactive component prototyping tutorial. We will be using the smart animate prototyping settings to achieve this result.

—————————
© 2022 Mavi Design

[marziyeh]

thank you so much, your videos are amazing and so helpful🌹

[moonsurfx]

Hi Great video!!! I completed but how would we change the size as its too big to fit in my current project...? WOuld I have to remake everything within the custom size?

[ekemininelsn]

This beautiful. I will practice it later on

[whennn]

Really nice, but u skipped the last step too quick, , couldnt see what u did to the blur

[uhpykmk]

are you going to catch a flight? your video is awsome but most of the steps you skipped and you moved mouse pointer too fast. we cant catch your flow.

[OLOGY]

too fast and then felt like you changed too many values along the way
It would be better to perfect what you want to do before posting

[maquindesign]

how did you create the new component in the final test frame. was it a copy/paste on the new frame?

[maquindesign]

if any one gets lucky on learning how he did it let me know. Not working he is too fast, especially with the magical test frame?