My Docs
DeploymentTrelloCalendar 🗓 Family Promise Roadmap
LAMBDA_LABS_Family_Promise
LAMBDA_LABS_Family_Promise
  • Home
  • navigation
    • Resume
    • My Notes:
    • NAVIGATION
    • Calendar
    • Youtube:
    • Roadmap:
    • TEAM MEMBERS
    • Running List Of Notes Links & Pertinent Info From Meetings
    • Trello
      • Github/Trello Integration
  • UX
    • UX_TOPICS
      • Action Items:
      • Accessibility
      • Figma Notes
        • Tables In Figma
        • Notes
        • Frames in Figma
        • Prototyping In Figma
        • More Notes
      • UX-Design
        • Facebook Graph API
      • Ant Design
        • ANT Components
          • Buttons
        • ANT DOCS
        • Application (Codesandbox)
      • Examples
      • How to add external URL links to your prototype
  • CANVAS
    • Interview
    • Design
      • What's Inclusive Design?
      • Accessibility
      • What are Design Systems?
    • Canvas
      • Career Readiness:
    • Notes
      • User Experience Design
      • User Research
      • Interaction Design
    • UX-Engineer
      • Accessibility
      • Patterns
      • Design Tools
      • UX Principles
      • Design Critiques
      • Product Review
      • Quiz
      • Seven Principles of Design
      • Other Articles
    • Labs
  • Front End
    • Frontend:
    • Redux
  • Back End
    • Backend:
      • API
  • Research
    • Research Navigation
      • Front End
      • Back End
      • UX
      • PTM
      • General
  • DS_API
    • Data Science API
  • ROLES
    • TEAM ROLES
      • Bryan Guner
  • Action Items
    • Trello
    • Maps
  • ARCHITECTURE
    • DNS
    • AWS
    • Heroku
  • Questions
    • From Previous Cohort
  • Standup Notes
    • Meeting Notes
      • Stakeholder Meeting 1
      • 9/29/2021
  • GitHub & Project Practice
    • GitHub
      • Github Guide
      • Github Actions:
      • Live Implementation
  • MISC
    • MISCELLANEOUS
      • Links
  • Background Information
    • Background Info
      • Swagger OPEN API SPECIFICATION
        • Swagger Docs (General)
      • GITHUB:
        • Git Bash
        • Git Prune:
  • DOCS
    • DS AP
    • What is JSON Web Token?
      • Environment Variables
      • Git Rebase:
      • Git Workflow:
      • Linting and Formatting
    • Project Docs
      • Eng-Docs-Home
      • Basic Node API
      • Contributing to this scaffold project
      • Examples:
    • PROJECT DESCRIPTION (Feature List)
    • Labs Learners Guide
    • REACT
      • Create React App
      • Awesome React
    • Labs Engineering Docs
      • Okta Basics
      • Roadmap
      • Repositories
  • Workflow
    • Workflow
    • Advice
  • AWS
    • AWS
      • Elastic Beanstalk
        • Elastic Beanstalk DNS
      • Amplify:
        • Amplify-DNS
    • Account Basics
    • AWS-Networking
  • Career & Job Hunt
    • Career
  • LABS
    • Introduction
    • User Stories
    • Why Pairing?
    • GitHub
    • Planning as an Engineer
    • Authentication and Authorization
      • Authentication VS Authorization
    • Giving Feedback
    • Modules Grades Understanding Your ISA
    • Rest Architecture
Powered by GitBook
On this page
  • Design Tools in Labs
  • Whimsical
  • Figma
  • Ant Design

Was this helpful?

  1. CANVAS
  2. UX-Engineer

Design Tools

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).

PreviousPatternsNextUX Principles

Last updated 3 years ago

Was this helpful?

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).

Whimsical

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:

Figma

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

Ant Design

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

is a diagramming and rapid prototyping tool you can use to create flowcharts, wireframes, mind maps, sticky notes, and docs.

Optionally, you can also find video tutorials for all of Whimsical's modes !

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.

If you'll be using Figma,

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 —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!

Whimsical (Links to an external site.)
here (Links to an external site.)
Figma (Links to an external site.)
here's a useful playlist of tutorials
Ant Design (Links to an external site.)
their official docs (Links to an external site.)