# 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**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bryan-guner.gitbook.io/my-docs/lambda-labs/canvas/ux-engineer/design-tools.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
