Скачать или смотреть Icon Design Tutorial | Pixel-Perfect icon in Figma | Thumbs Up Icon

Use Beautiful Free Icons: https://hugeicons.com/icons
In this video, you can see how to draw the Thumbs Up icon in Figma following grid.

Today, you’ll learn how to design a clean, pixel-perfect icon from scratch.
This Icon Design Tutorial walks you through every step of how to draw a Thumbs Up icon.
If you want to master pixel-perfect icon in Figma, this is the perfect guide.

In this Figma tutorial, we’ll show you how to build a professional Thumbs Up icon using simple shapes, editable points, and clean geometry. We’ll combine rectangles, adjust corner radii, refine strokes, and use Figma’s vector tools the right way to craft a crisp, scalable icon.

Whether you're a beginner or polishing your icon design skills, this Icon Design process helps you understand structure, consistency, and form, the foundations of great UI icons.

Today, let's learn how to design the Thumbs Up icon in Figma:

Step 1: Use the rectangle tool (R) to create a 7 x 7 pixel rectangle. Press enter to make it editable, select the top left point and shift it to the right by 6 pixels, give it a 1 pixel corner radius. Now select the top right point and shift it 2 pixels to the right, give a 4 pixel corner radius.

Step 2: Use the rectangle tool (R) to create a 15 x 11 pixel rectangle. Press enter to make it editable, add one point manually on the right side, then select the bottom right point and shift it 3 pixels to the left. Select all points except for the top left point, and give it a 4 pixel corner radius.

Step 3: Combine the two shapes using the Union tool. Make them flatten and change it to centered stroke, give it a 1.5 pixel stroke size and make the Join round.

Step 4: Press enter to make it editable. Select the left side point and give it a 4 pixel corner radius.

Step 5: Use the rectangle tool (R) to create a 5 x 11 pixel rectangle. Press enter to make it editable, then select the left side points, give them a 2 pixel corner radius, Also select the right side points and give them a 3 pixel corner radius.

Step 6: Change it to centered stroke, give it a 1.5 pixel stroke size.

Subscribe for more weekly Figma icon tutorials and icon design lessons.

#figmatutorial #icondesign #uiicondesign #iconography #uiicondesign #vectoricons #figmaicondesign #uiicons #shorts #iconsdesign #hugeicons #thumbsupicon #icontutorial