Vector Graphics, Colors, Shadows, & More

Topics Covered in This Adobe XD Tutorial:

Importing & Modifying Vector Graphics, Aligning & Distributing Layers, Layer Opacity Vs. Fill Opacity, Reusing Colors (color Swatches), Adding a Drop Shadow

Exercise Preview

Exercise Overview

In this comprehensive exercise, you'll master the essential skills of importing, creating, and styling vector elements in Adobe XD. These techniques form the foundation of professional UI/UX design workflows, enabling you to create scalable, high-quality interfaces that maintain their integrity across all screen sizes and resolutions.

Importing & Modifying Vector Graphics

Vector graphics are the backbone of modern interface design, offering infinite scalability without quality loss. Let's start by importing and customizing a logo for our navigation bar.

1. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or CTRL–Shift–O (Windows).

2. Navigate into Desktop > Class Files > Adobe XD Class > NYC and double–click on About Page—Ready for Graphics.xd to open it.

   This design represents a more advanced stage of our NYC project. We'll complete the navigation by adding a professional logo and creating a semi-transparent background that enhances readability while maintaining visual hierarchy. These finishing touches separate amateur designs from professional-grade interfaces.

3. To prevent accidental modifications during our workflow, CTRL–click (Mac) or Right–click (Windows) on the cab photo and choose Lock.

   TIP: Locking elements is a crucial workflow habit in professional design. You can also hit Cmd–L (Mac) or CTRL–L (Windows) to lock an item, or hover over a layer in the Layers panel and click the lock icon for quick access.

4. Now we'll import a logo as an editable vector graphic, preserving its scalability and editability within XD. While copying from Adobe Illustrator works seamlessly, understanding XD's import capabilities gives you more flexibility when working with assets from various sources.

   Go to File > Import.

5. Navigate to Desktop > Class Files > Adobe XD Class > NYC and observe the file format options:

   • We've provided the NYC Logo in three industry-standard formats: AI, PDF, and SVG.
   • The PDF file appears grayed out on Mac and isn't visible on Windows—XD prioritizes truly vector-native formats.
   • The AI (Adobe Illustrator) and SVG (Scalable Vector Graphic) files are both fully supported and maintain complete vector fidelity.
6. Double–click on the NYC Logo.svg to import it. SVG files offer the best cross-platform compatibility and smallest file sizes for web delivery.

7. The logo imports at the artboard center by default. As shown below, drag the logo so its left edge aligns with the first aqua content column. Leave modest spacing between the logo top and artboard edge—we'll refine this positioning in the next steps.

   

8. Zoom to 100% by hitting Cmd–1 (Mac) or CTRL–1 (Windows) for pixel-perfect precision when making color and sizing adjustments.
9. Let's customize the logo color to work with our dark navigation theme. Ensure the logo remains selected.
10. In the Property Inspector, click on Fill to open the color picker.
11. Choose white for optimal contrast against our upcoming dark background.
12. Hit Esc to close the color picker.

13. Now we'll scale the logo to appropriate proportions for the navigation hierarchy. With the logo selected, hold Shift (to maintain aspect ratio) and drag the bottom-right handle inward to reduce the size (as shown below):

    

14. With our logo properly positioned, we can hide the layout guides for a cleaner workspace. Hit Cmd–Shift–' (Mac) or CTRL–Shift–' (Windows) to hide the layout grid.

15. Choose View > Guides > Hide All Guides or hit Cmd–; (Mac) or CTRL–; (Windows) to complete the cleanup.

Creating a Navbar Background

Professional interfaces require thoughtful contrast management. We'll create a semi-transparent background that enhances text legibility while maintaining the underlying design's visual impact.

1. To see the complete layout context, zoom to fit all by hitting Cmd–0 (Mac) or CTRL–0 (Windows).
2. In the Toolbar, select the Rectangle tool .

3. As shown below, drag a rectangle across the entire navigation area. Extend beyond the artboard edges to ensure complete coverage—this prevents unwanted borders from appearing in the final design:

   

4. Switch to the Select tool in the Toolbar for precise adjustments.
5. With the rectangle selected, set H (height) to 80 in the Property Inspector for consistent navigation bar proportions.

6. To ensure clean edge treatment, click Outer Stroke under Border in the Property Inspector:

   

7. Click Fill in the Property Inspector to open the color picker.

8. Set Hex to 6b4656 and press Return (Mac) or Enter (Windows). This warm purple provides sophisticated contrast without overwhelming the design.

   TIP: XD's intelligent hex expansion saves time—type B and XD expands it to #BBBBBB, or type 2ab for #22AABB. This feature accelerates your design workflow significantly.

9. Click Fill again to close the color picker.
10. Click Border to open the color picker.
11. Choose white to create subtle definition along the navigation edge.
12. Click Border again to close the color picker.
13. In the Layers panel, locate Rectangle 1 and double–click its name. Rename it nav bg for clear project organization.

14. Drag the nav bg layer below the EVENTS text in the layer hierarchy, ensuring proper stacking order.

Aligning & Distributing Layers

Precise alignment distinguishes professional interfaces from amateur attempts. XD's alignment tools ensure pixel-perfect positioning that enhances both aesthetics and user experience.

1. Ensure the three navigation text links are visible in the top-right area.
2. Click EVENTS to select it.
3. Hold Shift and click HISTORY and RESOURCES to create a multi-selection.
4. Click Distribute Horizontally (fourth icon from left) in the Property Inspector to create perfect spacing.
5. Before proceeding with vertical alignment, verify that the NYC logo sits completely within the navbar background boundaries—elements extending beyond the reference object will disrupt alignment calculations.
6. In the Layers panel, click the NYC Logo group name (avoid the folder icon to select the entire group).
7. Hold Shift and click nav bg to add it to your selection.
8. Click Align Middle (Vertically) (second icon from left) to center all elements perfectly.
9. With all elements selected, hit Cmd–G (Mac) or CTRL–G (Windows) to create an organized group structure.
10. In the Layers panel, double–click Group 1 to edit the name.
11. Type nav and press Return (Mac) or Enter (Windows) for clear identification.
12. Click a blank canvas area to deselect and review your organized navigation structure.

Layer Opacity Vs. Fill Opacity

Understanding opacity controls is crucial for creating sophisticated visual hierarchies. XD offers granular control over different opacity properties, mirroring modern CSS capabilities and giving you precise control over every visual element.

1. Let's apply transparency to our navigation background. Click the navbar background to attempt selection.
2. Notice in the Layers panel that the entire nav group is selected rather than the specific nav bg element we need.
3. Click a blank canvas area to deselect the group.
4. Double–click the nav background to enter the group and select the target element.

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

   While double-clicking works for simple nested structures, deeply nested groups require a more efficient approach. Let's explore the direct selection method.

6. Click blank canvas area to deselect.

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

   This modifier-click bypasses all group structures and selects the target element directly—invaluable for complex interface designs with multiple nesting levels.

8. With nav bg selected, experiment with the Opacity slider in the Property Inspector. Notice how it affects both fill color and white border simultaneously.
9. Since we want the border to maintain full opacity for definition, reset Opacity to 100%.
10. Click Fill to open the color picker for targeted opacity control.
11. Set the transparency value (far right of Hex) to 50% for optimal background visibility.
12. Click blank canvas to close the color picker and deselect.

13. Observe how the fill is now transparent while the white border remains fully opaque, creating professional layered contrast.

    NOTE: Border opacity can be controlled independently using the same technique, giving you complete creative control over every visual element.

Reusing Colors (Color Swatches)

Color consistency defines professional brand implementation. XD's swatch system not only ensures visual consistency but enables global color updates—a game-changing feature for maintaining design systems across large projects.

1. Hold Cmd (Mac) or CTRL (Windows) and click the navbar background to select it directly.
2. Open the Libraries panel by clicking the icon at the bottom left.
3. Click the + button next to Colors to save this custom color as a reusable swatch.
4. Click empty artboard space to deselect.
5. The white border was automatically saved as a swatch, but it's unnecessary for our workflow. CTRL–click (Mac) or Right–click (Windows) the white swatch and choose Delete.
6. Scroll to the page footer to find the gray footer rectangle—we'll demonstrate the power of linked color swatches.
7. Click the gray footer rectangle.
8. In the Libraries panel, click the semi-transparent purple swatch to apply it instantly.
9. Notice how the footer now matches the navigation background exactly—this is design system consistency in action.
10. CTRL–click (Mac) or Right–click (Windows) the purple swatch and choose Edit to see global updates in action.
11. Select any different color in the picker and watch as both the navigation and footer update simultaneously across the entire file.
12. Click blank canvas to close the color picker.
13. Now let's create another swatch to fully understand this powerful system. Notice that both headings (UNLIKE ANY OTHER CITY and Popular New York Attractions) share the same reddish color.
14. CTRL–click (Mac) or Right–click (Windows) either heading and choose Add Color to Assets.
15. In the Libraries panel, CTRL–click (Mac) or Right–click (Windows) the new reddish swatch and choose Edit.

16. Change to any color and observe how both headings update instantly.

    XD's intelligent color linking works by exact color matching—when you edit a swatch, every instance of that precise color updates globally. This behavior surpasses many traditional design tools and reflects modern design system thinking.

Adding a Drop Shadow

Strategic use of drop shadows enhances readability and visual hierarchy. We'll add a subtle shadow to improve text contrast against the photographic background, ensuring accessibility without compromising aesthetics.

1. Scroll up and select the large NEW YORK CITY heading.
2. In the Property Inspector, check Shadow to enable the effect.
3. Click the word Shadow to open shadow-specific color controls.

4. Drag the Alpha (transparency) slider on the far right to the top position for maximum shadow intensity.

   NOTE: The transparency value appears to the right of the Hex field and should now read 100%.

5. Click Shadow again to close the color picker.
6. Click in the B (blur) field to focus your cursor there.
7. Press the Down Arrow to reduce blur from 6 to 5 pixels.
8. Hold Shift and press Up Arrow twice to increase blur to 25 pixels for a softer, more professional appearance.
9. Click the Y value to control vertical shadow offset.

10. Use Shift+Up/Down Arrow keys to adjust shadow position—this creates the illusion of light direction and depth.

    NOTE: Shift+Arrow moves in 10-pixel increments for faster adjustment, while Arrow alone moves single pixels for precision.

11. Set Y to 0 for a subtle glow effect rather than directional shadow.
12. Click empty artboard space to deselect and evaluate the enhanced text readability.

13. Save your work and close the file to complete this comprehensive vector graphics workflow.