5.2App DemoHow-To hookEducation

Hook

How to Design Glass Tab Bar like Instagram in Figma

@janm_ux

60.8K followers · usually 3.7K views a post

Views

18.8K

Likes

1.2K

Comments

7

Shares

53

SoundTikTok sound · original sound - electronicdancemusic_ofc

Promoted product

Figma

Figma is a design tool used for creating album covers and UI screens, with discussions around its IPO performance and potential AI integrations.

10 videos10 creators

Why it worked

The video provides a clear, step-by-step tutorial for a popular design trend (glassmorphism) using a widely used design tool (Figma). The inclusion of a free component file as a lead magnet further incentivizes engagement and sharing.

Summary

This video demonstrates how to design a glass tab bar inspired by Instagram within Figma. It guides viewers through creating a frame, rounding corners, adding a semi-transparent dark background, applying a light stroke, and utilizing the glass effect with specific values. Finally, it shows how to add icons using Iconsax and arrange them with auto layout.

Structure

1Create frame and round corners
2Add dark background and stroke
3Apply glass effect
4

Original caption

How to Design Glass Instagram-Inspired Tab Bar in Figma 1. Create a frame 335x50 2. Round those corners 3. Add 5 items and apply auto layout 4. Add dark background in 90% opacity 5. Use lighter stroke 0.5px 6. Apply glass effect with these values 7. Switch to Iconsax and copy icons 8. Paste to your component 9. And that’s it! #figma #ui #appdesign #ux #userinterfacedesign

More from @janm_ux

Product placement

Figma (ACTS - interface is operated to design a UI element; removing it would change what happens in the video) Instagram (APPEARS - inspiration for the design, not operated; removing it would not change what happens in the video) Iconsax (ACTS - interface is operated to copy icons; removing it would change what happens in the video)

Call to action

Link in caption for free component Figma file!

On-screen text

1. Create a frame 335x50 2. Round the corners 3. Add dark background in 60% opacity 4. Use lighter stroke 0.5px 5. Apply glass effect with these values 6. Add 5 items and apply Auto layout 7. Switch to Iconsax and copy the icons 8. Paste them to your component And that's it! Link in caption for free component Figma file!

Transcript

How to Design Glass Tab Bar like Instagram in Figma 1. Create a frame 335x50 2. Round the corners 3. Add dark background in 60% opacity 4. Use lighter stroke 0.5px 5. Apply glass effect with these values 6. Add 5 items and apply Auto layout 7. Switch to Iconsax and copy the icons 8. Paste them to your component And that's it! Link in caption for free component Figma file!

Amazing sites for UX/Ul designers, part 11 1. Grainient Supply for static and an