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 ЁЯСПЁЯП╗

More from Tech

You May Also Like

A brief analysis and comparison of the CSS for Twitter's PWA vs Twitter's legacy desktop website. The difference is dramatic and I'll touch on some reasons why.

Legacy site *downloads* ~630 KB CSS per theme and writing direction.

6,769 rules
9,252 selectors
16.7k declarations
3,370 unique declarations
44 media queries
36 unique colors
50 unique background colors
46 unique font sizes
39 unique z-indices

https://t.co/qyl4Bt1i5x


PWA *incrementally generates* ~30 KB CSS that handles all themes and writing directions.

735 rules
740 selectors
757 declarations
730 unique declarations
0 media queries
11 unique colors
32 unique background colors
15 unique font sizes
7 unique z-indices

https://t.co/w7oNG5KUkJ


The legacy site's CSS is what happens when hundreds of people directly write CSS over many years. Specificity wars, redundancy, a house of cards that can't be fixed. The result is extremely inefficient and error-prone styling that punishes users and developers.

The PWA's CSS is generated on-demand by a JS framework that manages styles and outputs "atomic CSS". The framework can enforce strict constraints and perform optimisations, which is why the CSS is so much smaller and safer. Style conflicts and unbounded CSS growth are avoided.
рджрдзреАрдЪрд┐ рдЛрд╖рд┐ рдХреЛ рдордирд╛рд╣реА рдереА рдХрд┐ рд╡рд╣ рдЕрд╢реНрд╡рд┐рдиреА рдХреБрдорд╛рд░реЛрдВ рдХреЛ рдХрд┐рд╕реА рднреА рдЕрд╡рд╕реНрдерд╛ рдореЗрдВ рдмреНрд░рд╣реНрдорд╡рд┐рджреНрдпрд╛ рдХрд╛ рдЙрдкрджреЗрд╢ рдирд╣реАрдВ рджреЗрдВред рдпреЗ рдЖрджреЗрд╢ рджреЗрд╡рд░рд╛рдЬ рдЗрдиреНрджреНрд░ рдХрд╛ рдерд╛редрд╡рд╣ рдирд╣реАрдВ рдЪрд╛рд╣рддреЗ рдереЗ рдХрд┐ рдЙрдирдХреЗ рд╕рд┐рдВрд╣рд╛рд╕рди рдХреЛ рдкреНрд░рддреНрдпрдХреНрд╖ рдпрд╛ рдкрд░реЛрдХреНрд╖ рд░реБрдк рд╕реЗ рдХреЛрдИ рднреА рдЦрддрд░рд╛ рд╣реЛредрдордЧрд░ рдЬрдм рдЕрд╢реНрд╡рд┐рдиреА рдХреБрдорд╛рд░реЛрдВ рдиреЗ рд╕рд╣реГрджрдп рдкреНрд░рд╛рд░реНрдердирд╛ рдХреА рддреЛ рдорд╣рд░реНрд╖рд┐ рд╕рд╣рд░реНрд╖ рдорд╛рди рдЧрдПред


рдФрд░ рдЙрдиреНрд╣реЛрдиреЗрдВ рдмреНрд░рд╣реНрдорд╡рд┐рджреНрдпрд╛ рдХрд╛ рдЬреНрдЮрд╛рди рдЕрд╢реНрд╡рд┐рдирд┐ рдХреБрдорд╛рд░реЛрдВ рдХреЛ рджреЗ рджрд┐рдпрд╛ред рдЧреБрдкреНрддрдЪрд░реЛрдВ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдЬрдм рдЦрдмрд░ рдЗрдиреНрджреНрд░рджреЗрд╡ рддрдХ рдкрд╣реБрдВрдЪреА рддреЛ рд╡реЗ рдХреНрд░реЛрдз рдореЗрдВ рдЦрдбрд╝рдЧ рд▓реЗ рдХрд░ рдЧрдП рдФрд░ рдорд╣рд░реНрд╖рд┐ рджрдзреАрдЪрд┐ рдХрд╛ рд╕рд░ рдзрдбрд╝ рд╕реЗ рдЕрд▓рдЧ рдХрд░ рджрд┐рдпрд╛редрдордЧрд░ рдЕрд╢реНрд╡рд┐рдиреА рдХреБрдорд╛рд░ рднреА рдХрд╣рд╛рдВ рдЪреБрдк рдмреИрдардиреЗ рд╡рд╛рд▓реЗ рдереЗредрдЙрдиреНрд╣реЛрдиреЗ рддреБрд░рдВрдд рдПрдХ рдЕрд╢реНрд╡ рдХрд╛ рд╕рд┐рд░ рдорд╣рд░реНрд╖рд┐ рдХреЗ рдзрдбрд╝ рдкреЗ...


...рдкреНрд░рддреНрдпрд╛рд░реЛрдкрд┐рдд рдХрд░ рдЙрдиреНрд╣реЗрдВ рдЬреАрд╡рд┐рдд рд░рдЦ рд▓рд┐рдпрд╛редрдЙрд╕ рджрд┐рди рдХреЗ рдкрд╢реНрдЪрд╛рдд рдорд╣рд░реНрд╖рд┐ рджрдзреАрдЪрд┐ рдЕрд╢реНрд╡рд╢рд┐рд░рд╛ рднреА рдХрд╣рд▓рд╛рдП рдЬрд╛рдиреЗ рд▓рдЧреЗредрдЕрдм рдЖрдЧреЗ рд╕реБрдирд┐рдпреЗ рдХреА рдХрд┐рд╕ рдкреНрд░рдХрд╛рд░ рдорд╣рд░реНрд╖рд┐ рджрдзреАрдЪрд┐ рдХрд╛ рд╕рд░ рдХрд╛рдЯрдиреЗ рд╡рд╛рд▓реЗ рдЗрдиреНрджреНрд░ рдХреИрд╕реЗ рдЕрдкрдиреА рд░рдХреНрд╖рд╛ рд╣реЗрддреБ рдЙрдирдХреЗ рдЖрдЧреЗ рдЧрд┐рдбрд╝рдЧрд┐рдбрд╝рд╛рдП ред

рдПрдХ рдмрд╛рд░ рджреЗрд╡рд░рд╛рдЬ рдЗрдиреНрджреНрд░ рдЕрдкрдиреА рд╕рднрд╛ рдореЗрдВ рдмреИрдареЗ рдереЗ, рддреЛ рдЙрдиреНрд╣реЗ рдЦреБрдж рдкрд░ рдЕрднрд┐рдорд╛рди рд╣реЛ рдЖрдпрд╛ред


рд╡реЗ рд╕реЛрдЪрдиреЗ рд▓рдЧреЗ рдХрд┐ рд╣рдо рддреАрдиреЛрдВ рд▓реЛрдХреЛрдВ рдХреЗ рд╕реНрд╡рд╛рдореА рд╣реИрдВред рдмреНрд░рд╛рд╣реНрдордг рд╣рдореЗрдВ рдпрдЬреНрдЮ рдореЗрдВ рдЖрд╣реБрддрд┐ рджреЗрддреЗ рд╣реИрдВ рдФрд░ рд╣рдорд╛рд░реА рдЙрдкрд╛рд╕рдирд╛ рдХрд░рддреЗ рд╣реИрдВред рдлрд┐рд░ рд╣рдо рд╕рд╛рдорд╛рдиреНрдп рдмреНрд░рд╛рд╣реНрдордг рдмреГрд╣рд╕реНрдкрддрд┐ рд╕реЗ рдХреНрдпреЛрдВ рдбрд░рддреЗ рд╣реИрдВ ?рдЙрдирдХреЗ рдЖрдиреЗ рдкрд░ рдХреНрдпреЛрдВ рдЦрдбрд╝реЗ рд╣реЛ рдЬрд╛рддреЗ рд╣реИрдВ?рд╡реЗ рддреЛ рд╣рдорд╛рд░реА рдЬреАрд╡рд┐рдХрд╛ рд╕реЗ рдкрд▓рддреЗ рд╣реИрдВред рджреЗрд╡рд░реНрд╖рд┐ рдмреГрд╣рд╕реНрдкрддрд┐ рджреЗрд╡рддрд╛рдУрдВ рдХреЗ рдЧреБрд░реБ рдереЗред

рдЕрднрд┐рдорд╛рди рдХреЗ рдХрд╛рд░рдг рдЛрд╖рд┐ рдмреГрд╣рд╕реНрдкрддрд┐ рдХреЗ рдкрдзрд╛рд░рдиреЗ рдкрд░ рди рддреЛ рдЗрдиреНрджреНрд░ рд╣реА рдЦрдбрд╝реЗ рд╣реБрдП рдФрд░ рди рд╣реА рдЕрдиреНрдп рджреЗрд╡реЛрдВ рдХреЛ рдЦрдбрд╝реЗ рд╣реЛрдиреЗ рджрд┐рдпрд╛редрджреЗрд╡рдЧреБрд░реБ рдмреГрд╣рд╕реНрдкрддрд┐ рдЗрдиреНрджреНрд░ рдХрд╛ рдпреЗ рдХрдареЛрд░ рджреБрд░реНрд╡реНрдпрд╡рд╣рд╛рд░ рджреЗрдЦ рдХрд░ рдЪреБрдк рдЪрд╛рдк рд╡рд╣рд╛рдВ рд╕реЗ рд▓реМрдЯ рдЧрдПредрдХреБрдЫ рджреЗрд░ рдкрд╢реНрдЪрд╛рдд рдЬрдм рджреЗрд╡рд░рд╛рдЬ рдХрд╛ рдордж рдЙрддрд░рд╛ рддреЛ рдЙрдиреНрд╣реЗ рдЕрдкрдиреА рдЧрд▓рддреА рдХрд╛ рдПрд╣рд╕рд╛рд╕ рд╣реБрдЖред