What Tools Do UI/UX Designers Use on the Job Today?

Figma skills employers expect from a fresher

Basics
[ ] Frames, groups and layers named properly
[ ] Text styles and colour styles
[ ] 8-point spacing grid

Components
[ ] Create a button component
[ ] Add variants (default / hover / disabled)
[ ] Use instances and override text

Layout
[ ] Auto layout for cards, lists and navbars
[ ] Constraints for responsive frames

Collaboration
[ ] Comments and version history
[ ] Organised pages: Research / Wireframes / UI / Archive

A realistic day for a junior UI/UX designer

09:30  Stand-up with product and developers
10:00  Update screens from yesterday's feedback
12:00  Review components with senior designer
13:00  Lunch
14:00  Usability test call or research notes
15:30  Wireframes for the next feature
17:00  Answer developer questions on handoff
17:45  Clean up file, write notes for tomorrow

Usability Test Script (20 minutes)

Intro (2 min)
"We are testing the design, not you.
 Please think aloud as you use it."

Task 1 (5 min)
"Find a course and add it to your wishlist."

Task 2 (5 min)
"Change your phone number in settings."

Task 3 (5 min)
"Book a free demo class for Saturday."

Wrap-up (3 min)
- What was easiest?
- What was confusing?
- Anything you expected but did not find?

Usability Findings Log

Issue                         Users   Severity   Fix idea
1. Wishlist icon not noticed   3/5    High       Add text label
2. Settings menu hidden        2/5    Medium     Move to profile
3. Date picker confusing       4/5    High       Show calendar view
4. Button text unclear         1/5    Low        Rename to "Book demo"

Severity guide:
High   = user could not finish the task
Medium = finished, but with effort
Low    = small annoyance

/* Design tokens shared by designers and developers */
:root {
  --color-primary: #0b6e75;
  --color-text: #1e2a36;
  --color-surface: #ffffff;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;

  --radius-card: 12px;
  --font-body: 16px;
}

.card {
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  font-size: var(--font-body);
}

Handoff Note - Course Card component

States designed:
- Default, Hover, Selected, Disabled

Behaviour:
- Whole card is clickable
- Long titles wrap to 2 lines, then "..."
- Price hidden if not available

Responsive:
- 3 cards per row on desktop
- 1 card per row below 600px

Empty state:
- "No courses match your filters" + Reset button

Tool Learning Plan (6 weeks)

Week 1: Interface tool basics - frames, text, styles
Week 2: Components, variants, auto layout
Week 3: Wireframe 3 screens of a food app
Week 4: Turn wireframes into high-detail UI
Week 5: Prototype the main flow, test with 3 people
Week 6: Fix issues, write a case study

Weekly check:
[ ] Did I finish a real screen, not just a tutorial?
[ ] Did someone else give feedback?

Portfolio Case Study Outline

1. Project title and your role
2. Problem: who struggles, and with what?
3. Research: what you learnt from users
4. Ideas: sketches and wireframes
5. Design: final screens and components
6. Testing: what changed after feedback
7. Result: what improved, what you would do next

Keep it short: images first, short captions.

Developer Handoff Checklist

[ ] All colours and text use shared styles
[ ] Spacing follows the grid (4 / 8 / 16 / 24)
[ ] Components named clearly
[ ] Hover, focus, disabled and error states shown
[ ] Empty and loading states designed
[ ] Mobile and desktop frames included
[ ] Icons exported as SVG
[ ] Notes added for animations and behaviour
[ ] Walkthrough call booked with developers