How to make a "Briefcase" icon in @figmadesign.

🧡 thread πŸ‘‡
In a 24 x 24 pixel artboard, use the rectangle tool (R) to draw a 18 x 10 pixel rectangle positioned horizontally centered and 6 pixels from the top of the artboard.
Using the ellipse tool (O), draw a 96 x 96 pixel circle and align the top to the center/top of the rectangle. Select both shapes and use the boolean tool to intersect the group.
Using the ellipse tool (O), draw a 48 x 48 pixel circle and align the bottom to the center/bottom of the rectangle. Select both shapes and use the boolean tool to intersect the group.
Flatten the shape (command + E) and double click it to make it editable. Select the top left and right points and give them a 2 pixel corner radius. Select the bottom left and right points and give them a 1 pixel corner radius.
Using the rectangle shape tool (R), draw a 16 x 10 pixel rectangle positioned horizontally centered and make the bottom 3 pixels from the bottom of the artboard.
Using the ellipse tool (O), draw a 96 x 96 pixel circle and align the bottom to the center/bottom of the rectangle. Select both shapes and cut them using the intersect boolean group tool.
Flatten the shape (command + E) and double click it to make it editable. Select the bottom left and right points and give them a 2 pixel corner radius.
Select both shapes and convert them to a centered stroke and flatten them together (command + E). Using the pen tool (P), add 2 points where the shapes intersect (zoom in if the pen isn’t snapping into position).
Delete the overlapping lines.
Double click the shape to make it editable so you can add connecting points. Use the pen tool (P) to manually draw the handle connected to the top. I made it ~3 x 8 pixels. Give the points a 2 pixel corner radius.
To create the dot button, draw a rectangle and manually adjust the size to 0.01 and give it a stroke.
Flatten the layers (command + E) and adjust the stroke to your desired radius/width (Rounded/1.5 pixel stroke shown below).

TA DA πŸ‘πŸ»

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Steve Schoger

Steve Schoger Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @steveschoger

10 Feb
How to make a "Megaphone" icon in @figmadesign.

🧡 thread πŸ‘‡
In a 24 x 24 pixel artboard, use the rectangle tool (R) to draw a 13 x 18 pixel rectangle.
Using the ellipse tool (O) draw a 48 x 48 pixel circle and position the bottom/center of it on the left side of the rectangle 5 pixels from the top.

Duplicate the circle (command + D) and position the top/center of it 5 pixels from the bottom of the rectangle.
Read 15 tweets
8 Feb
How to make a β€œQuestion Mark” icon in @figmadesign.

🧡 thread πŸ‘‡ Image
In a 24 x 24 pixel artboard, use the ellipse tool (O) to draw a 18 x 18 pixel circle with a centered stroke.
πŸ’‘ Making the icon smaller than the artboard is so it looks optically balanced next to other icons in the same set that have a differently proportioned shape. Image
Read 10 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!