Vector Graphics, Colors, Shadows, & More

Topics covered in this Figma tutorial:

Importing & modifying vector graphics, Aligning & distributing layers, Layer opacity vs. fill opacity, Reusing colors (color styles), Adding a drop shadow

Exercise Preview

Exercise Overview

In this exercise, you’ll learn about importing, creating, and styling vector elements.

Importing & Modifying Vector Graphics

1. In Figma, if you’re not on the homescreen (file browser), do the following:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: Click the Main menu button and choose Back to files.
2. To open a local file, click Import file (may be an icon near the top right).

3. Navigate into Desktop > Class Files > Figma Class > NYC and double–click on About Page - Ready for Graphics.fig to choose it.

   Once the file has uploaded, click Done and double–click on the file to open it.

   This design is further along than the earlier NYC exercises. We want to finish the navigation at the top by adding a logo and a semi-transparent background to distinguish the navbar area from the rest of the page.

4. To prevent ourselves from accidentally moving the cab photo, Ctrl–click (Mac) or Right–click (Windows) on the cab photo and choose Lock/Unlock.

   TIP: You can also hit Cmd–Shift–L (Mac) or Ctrl–Shift–L (Windows) to lock an item, or hover over a layer in the Layers panel and click the lock icon.

5. We need to add a logo to the top left of the page. We want to import the logo as a vector graphic so it remains as editable vectors in Figma. While we could copy and paste from Adobe Illustrator into Figma, let’s see how to import vector files into Figma.

   In the toolbar, click on the down arrow next to Rectangle tool and from the menu that appears choose Place image/video .

6. Navigate to Desktop > Class Files > Figma Class > NYC and notice:

   • We’ve provided the NYC Logo in 2 file formats: AI and SVG.
   • AI (Adobe Illustrator) files are grayed out on Mac, and not even shown on Windows.
   • SVG (Scalable Vector Graphic) files are available to import.
7. Double–click on the NYC Logo.svg to import it.

8. Near the top left of the design, click once to place the logo.

   As shown below, drag the logo so its left edge aligns with the first pink content column. Leave a little bit of space between the top of the logo and the top of the frame, but don’t worry about an exact amount as we’ll tweak it soon.

   

9. Zoom to 100% by hitting Shift–0 so you can see the logo better (scroll so you can see the logo if needed).

10. With the logo is still selected, look in the Layers panel and notice that NYC Logo has a frame icon .

    We want to change the logo color to white, but frames have their own background color. It will be easier to color the vector shapes if we convert the frame into a group.

11. At the top of the Design panel, click on the menu that says Frame and change it to Group.
12. Also in the Design panel, to the right of Fill, click Plus(+) button.
13. Click on the Fill color swatch that appeared to open the color picker.
14. Choose white.
15. Close the color picker.

16. Let’s make the logo slightly smaller. With the logo still selected, hold Shift (to maintain the aspect ratio) and drag the bottom-right handle to make the logo a bit smaller.

17. We don’t need to see the grid anymore, so let’s hide it. Hit Control–G (Mac) or Ctrl–Shift–4 (Window) to hide the layout grid.

18. If the rulers are visible (and therefore so are the guides), hide the rulers/guides by hitting Shift–R or at the top left click the Main menu and choose View > Rulers (Mac users can choose View > Show Rulers).

Creating a Navbar Background

Let’s darken the area behind the logo and navigation text links so they stand out more.

1. To see everything, zoom to fit all by hitting Shift–1.
2. In the Toolbar, select the Rectangle tool .

3. As shown below, drag a rectangle across the entire top portion of the frame:

   

4. In the Layers panel, Rectangle 1 should be selected. Double–click on its name and rename it nav bg.
5. Drag the nav bg layer below the EVENTS text (the last item in the navigation).
6. With the rectangle still selected, In the Design panel, set H (height) to 80.

7. In the Design panel, next to the Fill color swatch set the Hex code to 6b4656 and hit Return (Mac) or Enter (Windows) to apply it.

   TIP: You can type in a single character hex color value (such as B) and Figma will expand it to #BBBBBB automatically! You can also type in 3 character values (like 2ab) and Figma will expand it to #22AABB for you.

8. Let’s add a white border to the bottom. In the Design panel, to the right of Stroke, click Plus(+) button.
9. Click on the color swatch that appeared below Stroke to open the color picker.
10. Choose white.
11. Close the color picker.
12. We only want the border on the bottom of the box. In the Design panel’s Stroke section, click the Strokes per side button and choose Bottom.

13. Click in an empty area so nothing is selected.

    You should only see the thin white stroke on the bottom.

Aligning & Distributing Layers

1. Make sure you can see the 3 text links in the navbar at the top right of the page.
2. Click on EVENTS to select it.
3. Hold Shift and click on the two other text links: HISTORY and RESOURCES.
4. To evenly space out the text, at the top right of the Design panel, click the More options button and choose Distribute horizontal spacing.
5. We want to vertically center all the navbar elements. If part of the NYC logo is positioned below the bottom of the navbar background, the alignment won’t work. Make sure the NYC logo is completely inside the navbar background before proceeding.
6. Let’s select everything in the navbar. In the Layers panel, click on the NYC Logo group name to select it.
7. Hold Shift and click on the nav bg.
8. To vertically center all the elements to each other, at the top of the Design panel click Align vertical centers (the 3rd icon from the right).
9. While everything is still selected, let’s group the navbar elements for organization. Hit Cmd–G (Mac) or Ctrl–G (Windows) to group them.
10. In the Layers panel, double–click on the new Group 1 name to edit it.
11. Type nav and hit Return (Mac) or Enter (Windows).
12. Click on a blank area of the canvas to deselect the group.

Layer Opacity vs. Fill Opacity

Anywhere you use a color in CSS, you can specify opacity (using RGBA). Figma offers the same control, so we can set different opacities on the layer, fill, and border.

1. Let’s make the navbar’s background color semi-transparent. Click on the navbar background to try to select it.
2. Look in the Layers panel and see that the entire nav group is selected. This means the nav bg we want to edit is not selected.
3. Click on a blank area of the canvas to deselect the group.
4. Double–click on the nav background to enter the group and select it.

5. Look in the Layers panel and see that the nav bg layer is selected!

   When dealing with nested groups you may have to double–click many times to drill down into the group you want to work in. Let’s see a more direct way.

6. Click on a blank area of the canvas to deselect the layer again.

7. Hold Cmd (Mac) or Ctrl (Windows) and click on the navbar background again.

   Your click should have reached through the group and directly selected the nav bg layer. This works no matter how nested your groups are!

8. With the nav bg layer selected, go to the Design panel and under Layer, change the Opacity percentage from 100% to 50% to see that it affects both the fill and the white border.
9. We want the border to stand out to better delineate the content, so we only want to change the fill’s opacity. Put Opacity back to 100%.
10. Below Fill, change the Opacity percentage from 100% to 50%.
11. Click on a blank area of the canvas to close the color picker and deselect the nav bg.

12. Notice the fill is now transparent, but the white border is still fully opaque.

    NOTE: You can also set Stroke opacity the same way as Fill opacity.

Reusing Colors (Color Styles)

We want to reuse the purple color you just create elsewhere in this file, so let’s save it as a color swatch. Colors swatches not only let you quickly apply colors, you can quickly change that color everywhere it’s used in the entire file!

1. Hold Cmd (Mac) or Ctrl (Windows) and click on the navbar background again.
2. In the Design panel, to the right of Fill click the Style button
3. In the Color Styles panel that opens, click the Plus(+) button at the top right.
4. Name the color style primary bg and click Create style.
5. Scroll down to the bottom of the frame and find the gray footer.
6. Let’s change this to the same color we used for the nav background. Click on the gray footer rectangle.
7. In the Design panel, to the right of Fill click the Style button
8. In the Color Styles panel that opens, just below the Search field click the circle for the color style you just created.
9. Click on an empty part of the canvas to make sure nothing is selected.
10. In the Design panel, notice there’s a list of Color Styles.
11. Hover over the primary bg style and click the Edit Style button that appears to the right.

12. In the Edit style panels that opens, click the color swatch and choose any new color (it doesn’t matter what you choose).

    Notice that the color changes everywhere you’ve used that style!

13. Close the color picker.

Adding a Drop Shadow to Type

Let’s add a drop shadow to the NEW YORK CITY heading to make it stand out more from the taxicab photo behind it.

1. Select the large NEW YORK CITY heading.

2. In the Design panel, to the right of Effects click the Plus(+) button (you may have to scroll down to see Effects).

   A Drop shadow effect should now appear.

3. Click on the Effect settings button to the left of Drop shadow.

4. To the right of the hex color code, set transparency to 100% to make the shadow darker.
5. Click in the Blur value to put your cursor there.
6. Hold Shift and press the Up Arrow key two times to increase the value in increments of 10.
7. To vertically move the shadow, click into the Y value.

8. Hold Shift and hit the Up or Down Arrow keys to move the shadow.

   NOTE: Shift–Arrow keys move 10 pixels. Arrow keys move 1 pixel at a time.

9. When done, set Y to 0.

10. Click on an empty part of the canvas to deselect and see the final layout.