XD Competency

Level 1

Learn the foundational tools for working in XD and answering simple questions.

In the Design Tab:

Create at least two artboards from presets (same size) and name them

Create and edit primitives

  • Add at least one of each: rectangle, ellipse, and line
  • Add at least two polygons that have different numbers of sides from each other
  • Add both point and area text
  • Demonstrate Rounding Corners on a whole shape and an isolated corner

 Paths

  • Double Click to convert primitive to path
  • Draw a new shape with the Pen Tool

Properties panel

  • Color
    • Create at least two swatches
    • Change the fill from the default of at least two objects
    • Include at least one linear and one radial gradient
  • Borders: Set varying colors, weights, dashes, cap styles, and locations
  • Add and edit an object’s shadow effect
  • Change the opacity of an object

Images

  • Import
  • Resize
  • Rotate

In the Prototype Tab: 

  • Designate Home board
  • Create an interactive wireframe using drag-and-drop transitions
  • Preview prototype on desktop

In the Share tab, create a user testing link to share.

Submission:

Before submitting, please verify you demonstrate use of all of the above tools and include the answers the following questions either within your project or in your message to the XD sage:

  • What are UI and UX design? How does XD do each?
  • What is a prototype and how can it be helpful?
  • What kind of image files (raster AND vector) can be imported?

To submit your badge, enable coediting and send to the sage’s Adobe email address, which may not be the one they use for emails! It’s usually [netID]@byu.edu, but please verify before sharing.

Level 2

Learn the other tools we teach in the XD Essentials class. Finishing this level shows that you have mastered the core of XD and could reasonably teach the classes yourself. You may find it helpful to attend an XD class while you work on these skills.

In the Design Tab:

  • Download at least one UI Kit and include relevant elements in your project
  • Mark elements for export and understand when and why to do so
  • Export items or artboards as selections

Artboards

  • Create one artboard to overlay another
  • Create layout for alternate screen (a different mobile or web will work well)
  • Create a custom artboard size to allow for scrolling
  • Use guides in your design
  • Add a grid in your design

Properties

  • Pathfinder options (Boolean operations)
  • Place an image in a shape
    • Masking
    • Use image as fill
  • Include a blur effect
  • Repeat Grid
  • Pin Content

Groups

  • Group
  • Ungroup
  • Responsive Resize (TRY THIS to adjust your content to your new screen size.

Components

  • Create a component; include at least two instances thereof in your design
  • Override at least one property in an instance of a component
  • Import an asset from Creative Cloud (recommend Photoshop or Illustrator)
  • Create at least two color assets, and edit at least one
  • Create at least one character style

In the Prototype tab:

  • Create two separate wireframes: one for each screen (artboard preset) size
  • Explore new animations, including Slide and Push, and change the easing and duration settings
  • Actions
    • Overlay
    • Return to Previous Artboard
    • Scroll To
  • Set up scrolling with pinned and dynamic content

Share:

  • Create a new link for Development
  • Update a link
  • Know why and when to use the User Testing or Development links AND when to create a new link or update an old one.
  • Create any link with the privacy setting “anyone with the link”

Answer the following questions:

What does XD do well, compared to other Adobe programs? What is it not suited for? What programs would you use with it to create a quality project?

Submission:

Once you’ve created a project with all of the above requirements, send at least one User Testing link, one Development link protected with password, and the necessary password for your completed project to an evaluator.

Level 3

Expand your XD knowledge and skills and become a master UX designer. 

Overall Saving

  • Save different marked versions in Adobe Cloud
  • Incorporate elements from a previous version to the current version.

In the Design tab:

  • Copy guides from one artboard to another
  • Install missing typeface (e.g., from a UI kit)
  • Convert text to outline, use as mask
  • Replace a component
  • Design different states for a component
  • Adjust the manual settings in Responsive Resize for a group
  • Integrate your XD project fully with a CC library
  • Download and explore plug-ins

In the Prototype tab:

  • Use a new trigger, such as drag, time, voice, or keys and gamepad
  • Use at least one new action, such as auto-animate, audio playback, or speech playback
  • Preview your design on a device

Share:

  • Adjust the privacy settings on a link
  • Know why and when to use all link settings
  • Use the embed code (This should be feasible on WordPress site)
  • Export a batch of elements

Submission:

To earn the level 3 badge, either meet with the sage or record a screencast to demonstrate your skills and knowledge of the above tools.

Suggested Projects 

This competency project is intended to be flexible. Unfortunately, that may leave some feeling directionless or even lost at the start. If that’s you, here are some ideas for projects which will use several of the required tools and hopefully be fun and presentable as well! The files we use in class are another great resource, as they are specifically designed for practicing these tools. YouTube and LinkedIn Learning tutorials for these tools also have great project ideas, often with practice files included.

  • Photography app
  • Personality quiz
  • Shape game
  • Finding game
  • Portfolio website
  • Storytelling
  • Brand guide
  • Digital magazine