Network icons vector

Vector Network

Instead of connecting paths one to one, you can create web-like connections. Like this, you don’t need to always continue your vector points, you can just draw new ones from any existing ones and connect them to others.

Create a rectangle 24x24 and rotate 45 degrees. Press enter to edit and select the Pen tool. Create a new vector point from the bottom point, and click at the nearest pixel. Press Shift and down arrow twice to move by 20 downwards. Repeat the same steps for the other 2 points. Then, close the bottom points from each side. Voila, you have a 3D-like cube.

You can customize the perspective by moving the top point down by 5, and the bottom point upwards by 5.

Paint Bucket Tool

As you Flatten shapes, Figma does shapes separation, which can be useful to divide into areas. The Paint Bucket will allow you to enable or disable Fill.

In the Cube, press Enter to go into Edit mode. Go to the Paint Bucket tool and click on each face of the Cube. After that, set the a 1px Stroke to black. Also, change the Fill to one of the Gradients.

Pen Tool

The Pen tool allows you to create new vector points or the edit existing points. You can hold click while creating a new vector point by curve your vector lines.

Bézier Curve

Vectors are composed of points, which can be curved using the Bezier Curve. At any point, you can select a vector point and edit the Bezier Curve by clicking on the endpoints.

Select the Pen tool and long click 20px down while pressing Shift. While holding Shift and mouse click, move the cursor to 10px left. This creates a drop! You can edit the Mirroring option and set to Mirror Angle and Length. Then, you can press Shift and move the Bezier Curve left and right.

Pencil Tool

The Pencil is useful for quick drawing or hand-writing, like a signature. If you combine that with Real-time collaboration, this can be a powerful meeting tool.

Path Icon

Draw a curved path with the Pencil tool. The drawing will smooth out and become vector. Then, you can start editing the vector points. Select the endpoints and set the Advanced Stroke Cap to Line Arrow. You can set the stroke width to 2 and only have one of the vector endpoints to have Line Arrow, and the other to have Round.

Download Icon

Create a 12x12 circle first. Then, create a 10x10 circle and place it right on the top right of the first one. Create a bigger 18x18 third circle and place it on the right of the second. The fourth circle of 12x12 should be placed on the same level as the first circle. Finally, draw a rectangle to cover the empty space.

Select all circles and select Boolean / Union. Remove the Fill and set the Stroke width to 2. Then, Flatten the whole thing. Go to edit mode by pressing enter and use the Pen tool to place 2 points, one on each end. From there, you can delete the line between those 2 points.

Create the arrow by drawing a line first and deviate by 45 degrees by holding Shift to place a point to the left side. Using the Vector Network, place another point from the bottom point to the right point, again at 45 degrees. Finally, set the Advanced Stroke cap to Round.

Check Icon

Use the Pen tool to draw check icon using the Shift key to ensure that you draw at a 45 degrees angle.

Turn Icons to Components

First, select all icons and set the constraints to Center/Center. You can select an icon and embed it into a Frame (Options + Command + G) to make it easier for alignment. Set the frame to 50x50 or 100x100 depending on icon size. Then, turn the Frame into a Component and rename. Do the same for all icons.

Article Page

Let’s duplicate a frame and create the Article page using the Background and Header bar.

Bend Tool

Instead of editing the bezier curves of vectors, which can be an arduous process that can require a lot of patience, the Bend tool simplifies the process of morphing your shape into something interesting. For example, we used it for the Waves for Design+Code 3.

Create a Rectangle 1440x350. Make it white. Go to vector edit mode and select the Bend Tool. On the top left of the line, start dragging that region to get a curvy shape. Then, you can edit the Bezier curves to your liking.

Close Button

We need to draw a circle that’s 60x60 and apply a gradient. Set an outline of 2px. Bring a Close icon component and center. You can add a Fill to a group to apply to its inner vectors.

Tooltip

Create a rectangle that’s 420x500, corner radius 20. Create another rectangle that’s 32x32. Union the two and set the background to #040825.

Boolean Corner Radius

When you Union the 2 rectangles, you can change the corner radius for the entire shape to 20.

Then, create Heading 3 and Caption text layers to use as titles.

Cell Component

Let’s create a repeated Cell Component for each section of the tooltip. Create a Frame that's 420x44. Inside it, add a Normal Text white and a Line that's 380 and 20% white at the bottom of the frame. Place the Check icon Blue on the left and a Download icon 80% white on the right.

Move to Design System

The Cell should exist in the Design system so that anyone can take advantage of it. Create a new Frame for cells and place the cell there. Publish the change and start using it back in the design file.

Drag and drop the cell and duplicate many times for each section and fill their respective content. For some of the cells, you can press Delete on the Line and Check icon to hide them. It won't actually delete them.