---
description: >-
  Design Tools in Labs: As a UX Engineer, you'll be using various industry tools
  to generate and maintain design artifacts (things you create for use by your
  team).
---

# Design Tools

## Design Tools in Labs

{% embed url="https://player.vimeo.com/video/409968809?h=fe07144837" %}

As a UX Engineer, you'll be using various industry tools to generate and maintain **design artifacts** (things you create for use by your team).

### Whimsical

[Whimsical (Links to an external site.)](https://whimsical.com) is a diagramming and rapid prototyping tool you can use to create flowcharts, wireframes, mind maps, sticky notes, and docs.

You'll mostly use Whimsical to create **user flows** and **wireframes**.

**User Flows** are flowcharts showing a user's path through your product—what decisions they make, actions they take, and what screens and features they use along the way. They provide a map (really, a graph) showing all the possible paths.

**Wireframes** are quick, lightweight sketches of the basic layout of each page, view, or feature in your product.

Check out this quick overview of how Whimsical works:

Optionally, you can also find video tutorials for all of Whimsical's modes [here (Links to an external site.)](https://whimsical.com/whimsical-video-tutorials-Log31dDEDGwf65tBPf24fp)!

### Figma

[Figma (Links to an external site.)](https://www.figma.com) is a more feature-rich prototyping tool you can use to really dive deep into UI/UX possibilities for your product. You can use it to create detailed, interactive designs that incorporate not only how your product should look, but also how users will be able to use it.

Figma has a steeper learning curve than Whimsical, but you may still use it in Labs depending on your product.

If you'll be using Figma,[here's a useful playlist of tutorials](https://www.youtube.com/watch?v=Cx2dkpBxst8\&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4)

{% embed url="https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4" %}

### Ant Design

[Ant Design (Links to an external site.)](https://ant.design) is a UI framework encompassing a **design system** and a **component library**. We'll dig into those terms more later! For now, know that almost every design element your team will need to use will be either available, composable, or adaptable from this library.

Your go-to for using Ant Design will be [their official docs (Links to an external site.)](https://ant.design/docs/react/introduce)—you'll need to get comfortable reading through and referencing documentation to succeed on the job, so this design system should give you a lot of solid practice!

Now that you've got an overview of the tools you'll use in Labs, read on to learn about **Design Critiques**.
