8 Steps to Make FAB Cut on Figma

I get this from my material design self-learning ~

First of all, open your Figma and try it, so this article gonna be useful.
Let's begin!

  1. Make your FAB and the container of App bars: Bottom.

2. Duplicate the FAB, then change it to 72x72

3. Put the bigger FAB on the center of the container.

4. Choose the bigger FAB and the container.

Because we choose two components, our top center tools gonna be like that.

5. Click the dropdown arrow right the two square icons, then click Subtract selection.

6. So, our container gonna be like this.

7. Put back the FAB on the center of the container. You can make sure the range between FAB and the container is 8.

8. Voila! You make it~
You can complete it with add your icons.

--

--

Nabila Anggie Savitri

Hello! I am a UI/UX Design self learner and freelancer. Feel free to see my Youtube channel and my another article on Medium~