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 comprehensive exercise, you'll master the fundamental skills of importing, creating, and styling vector elements in Figma. These techniques form the backbone of professional interface design and will dramatically improve your workflow efficiency. You'll learn to work with scalable vector graphics, create reusable color systems, and apply sophisticated visual effects that make your designs stand out.

Importing & Modifying Vector Graphics

Vector graphics are essential for creating crisp, scalable designs that look perfect at any resolution. Let's start by setting up your workspace and importing professional-quality vector assets.

1. First, ensure you're in Figma's file browser to access your project files:

   • 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 import your project file, click Import file (located near the top right of your interface).

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

   Once the file uploads successfully, click Done and double-click the file to open it. This design represents a partially completed NYC tourism website—we'll enhance the navigation area by adding a professional logo and creating a semi-transparent background that provides visual hierarchy and improves readability.

4. To maintain design integrity during our modifications, let's lock the hero image. CTRL-click (Mac) or Right-click (Windows) on the cab photo and choose Lock/Unlock.

   Pro Tip: You can also use Cmd-Shift-L (Mac) or CTRL-Shift-L (Windows) to quickly lock elements, or hover over layers in the Layers panel and click the lock icon. Locking prevents accidental modifications to completed elements—a crucial habit for professional workflows.

5. Now we'll add a professional logo using Figma's vector import capabilities. While copying and pasting from Adobe Illustrator works well, importing vector files maintains better file organization and preserves all vector properties.

   In the toolbar, click the dropdown arrow next to the Rectangle tool and select Place image/video .

6. Navigate to Desktop > Class Files > Figma Class > NYC and observe the file format options:

   • The NYC Logo is provided in both AI and SVG formats for maximum compatibility.
   • AI (Adobe Illustrator) files appear grayed out on Mac and aren't visible on Windows—this is normal behavior.
   • SVG (Scalable Vector Graphic) files are universally supported and maintain perfect scalability across all platforms.

7. Double-click on NYC Logo.svg to import it into your project.

8. Position the logo in the top-left area of the design with a single click.

   For precise alignment, drag the logo so its left edge aligns with the first pink content column guide. Leave modest spacing between the logo top and frame edge—we'll refine this positioning in subsequent steps using Figma's alignment tools.

   

9. Set your view to 100% zoom by pressing Shift-0 for accurate logo assessment (scroll as needed to maintain visibility).

10. With the logo selected, examine the Layers panel—notice that NYC Logo displays a frame icon .

    To efficiently modify the logo color, we need to convert this frame structure. Frames include their own background properties, while groups provide direct access to individual vector shapes—making color modifications more intuitive.

11. In the Design panel header, click the Frame dropdown and change it to Group.

12. In the Design panel, locate Fill and click the Plus (+) button to add a new fill property.

13. Click the newly appeared Fill color swatch to access the color picker.

14. Select white for optimal contrast against the upcoming dark navigation background.

15. Close the color picker to apply your changes.

16. Let's optimize the logo size for better visual hierarchy. With the logo selected, hold Shift (to maintain proportions) and drag the bottom-right handle inward to reduce the logo size appropriately.

17. Clean up your workspace by hiding the layout grid. Press Control-G (Mac) or CTRL-Shift-4 (Windows) to toggle grid visibility.

18. If rulers and guides are visible, hide them by pressing Shift-R or clicking the Main menu and selecting View > Rulers (Mac users choose View > Show Rulers).

Creating a Navbar Background

Now we'll enhance the navigation area's visual prominence by adding a sophisticated background treatment. This technique improves text readability and creates clear content hierarchy—essential principles in modern interface design.

1. Press Shift-1 to zoom and view the entire design layout.

2. Select the Rectangle tool from the toolbar.

3. Create a navigation background by dragging a rectangle across the complete top section of the frame:

   

4. In the Layers panel, locate the selected Rectangle 1. Double-click its name and rename it to nav bg for better project organization.

5. Establish proper layering by dragging the nav bg layer below the EVENTS text (the final navigation item) in the layers panel.

6. With the rectangle selected, navigate to the Design panel and set the H (height) value to 80 for consistent navigation spacing.

7. Apply the brand color by locating Fill in the Design panel. Set the Hex code to 6b4656 and press Return (Mac) or Enter (Windows).

   Pro Tip: Figma's intelligent color input accepts shorthand values—type a single character like B and it expands to #BBBBBB, or use three characters like 2ab to get #22AABB. This feature speeds up color workflows significantly.

8. Add visual definition with a bottom border. In the Design panel, find Stroke and click the Plus (+) button.

9. Click the stroke color swatch to open the color picker.

10. Choose white for crisp contrast.

11. Close the color picker to confirm your selection.

12. For precise border placement, click the Strokes per side button in the Design panel's Stroke section and select Bottom.

13. Click an empty canvas area to deselect and review your work.

    You should now see a clean white stroke exclusively on the bottom edge, creating professional visual separation.

Aligning & Distributing Layers

Professional layouts require precise alignment and consistent spacing. Figma's alignment tools ensure pixel-perfect positioning and create the visual harmony that distinguishes amateur work from professional design.

1. Ensure visibility of the three navigation text links in the top-right navbar area.

2. Click EVENTS to select it as your starting point.

3. Add the remaining navigation items to your selection by holding Shift and clicking HISTORY and RESOURCES.

4. Create professional spacing by clicking the More options button at the top-right of the Design panel and selecting Distribute horizontal spacing.

5. Before proceeding with vertical alignment, verify that the NYC logo sits completely within the navbar background boundaries. Protruding elements will interfere with proper alignment calculations.

6. Select all navigation elements by clicking the NYC Logo group name in the Layers panel.

7. Expand your selection by holding Shift and clicking the nav bg layer.

8. Achieve perfect vertical centering by clicking Align vertical centers (the third icon from the right) in the Design panel.

9. Maintain organization by grouping these aligned elements. Press Cmd-G (Mac) or CTRL-G (Windows) with all elements still selected.

10. In the Layers panel, double-click the new Group 1 name to edit it.

11. Type nav and press Return (Mac) or Enter (Windows) to confirm the meaningful name.

12. Click a blank canvas area to deselect the group and review your precisely aligned navigation.

Layer Opacity Vs. Fill Opacity

Understanding opacity control is crucial for creating sophisticated visual effects. Figma mirrors CSS capabilities, allowing granular opacity control over different layer properties—a technique that separates novice designers from seasoned professionals.

1. Let's create visual depth with semi-transparent backgrounds. Click the navbar background to select it.

2. Notice in the Layers panel that the entire nav group is selected instead of the specific background element we want to modify.

3. Click a blank canvas area to clear the selection.

4. Double-click the nav background to enter the group and directly select the background element.

5. Confirm in the Layers panel that nav bg is now specifically selected.

   When working with complex nested groups, you may need multiple double-clicks to reach deeply nested elements. However, there's a more efficient approach for direct selection.

6. Click a blank area to deselect, then we'll try the professional shortcut.

7. Hold Cmd (Mac) or CTRL (Windows) and click the navbar background.

   This command-click technique penetrates group nesting and directly selects the target layer, regardless of hierarchy depth—invaluable for complex design files.

8. With nav bg selected, locate the Layer section in the Design panel. Change the Opacity from 100% to 50% and observe how this affects both the fill color and the white border simultaneously.

9. For better content definition, we want the border to remain fully opaque while only the background becomes transparent. Reset the Layer Opacity to 100%.

10. Under the Fill section, change the Opacity from 100% to 50% instead.

11. Click a blank canvas area to close any open panels and deselect the element.

12. Observe the sophisticated result: the background fill is now elegantly transparent while the white border maintains full opacity, creating professional visual separation.

    Note: Stroke opacity can be controlled independently using the same technique, giving you complete control over each visual element.

Reusing Colors (Color Styles)

Color styles are fundamental to scalable design systems. They enable consistent branding across projects and provide the ability to update colors globally—essential for maintaining design consistency as projects evolve and brands mature.

1. Select the navbar background using Cmd (Mac) or CTRL (Windows) + click for direct selection.

2. In the Design panel, locate the Fill section and click the Style button .

3. In the Color Styles panel that opens, click the Plus (+) button at the top-right corner.

4. Name the color style primary bg and click Create style to establish this as a reusable brand asset.

5. Scroll to the bottom of the frame to locate the gray footer section.

6. Apply consistent branding by changing the footer to match our navigation color. Click the gray footer rectangle to select it.

7. In the Design panel, click the Style button next to Fill.

8. In the Color Styles panel, click the color circle for your newly created style below the Search field.

9. Click an empty canvas area to deselect all elements.

10. Notice the Color Styles list now appears in the Design panel for easy access.

11. To demonstrate the power of color styles, hover over the primary bg style and click the Edit Style button that appears.

12. In the Edit style panel, click the color swatch and select any different color to see the magic in action.

    Watch as the color updates simultaneously across all elements using that style—this demonstrates why color styles are indispensable for professional design workflows and brand consistency.

13. Close the color picker to complete the demonstration.

Adding a Drop Shadow to Type

Strategic use of drop shadows enhances readability and creates visual depth, particularly when text overlays complex imagery. This final technique will make your headline text stand out professionally against the dynamic background photography.

1. Select the prominent NEW YORK CITY heading that overlays the taxicab photograph.

2. In the Design panel, locate the Effects section and click the Plus (+) button (scroll down if necessary to locate Effects).

   A Drop shadow effect is automatically applied to your text.

3. Click the Effect settings button positioned to the left of Drop shadow to access detailed controls.

4. For maximum text legibility, set the shadow transparency to 100% next to the hex color code field, creating a bold, opaque shadow.

5. Click in the Blur value field to position your cursor there.

6. Hold Shift and press the Up Arrow key twice to increase the blur value by increments of 10, creating a softer, more professional shadow effect.

7. To adjust the shadow's vertical positioning, click into the Y value field.

8. Hold Shift and use the Up or Down Arrow keys to precisely position the shadow for optimal visual impact.

   Professional Tip: Shift + Arrow keys move elements 10 pixels at a time, while Arrow keys alone provide single-pixel precision—use this for fine-tuned adjustments in professional work.

9. For this exercise, set the final Y value to 0 to create a subtle glow effect rather than a directional shadow.

10. Click an empty canvas area to deselect and review your completed, professional-quality layout.