← Back to Overview

4. Figma & Design QA

QA Process

Design QA ensures that the implemented UI matches the approved Figma design accurately across all states, breakpoints, and interactions.

The goal is to maintain visual consistency, usability, and design system alignment throughout the product.

A. Visual Accuracy

1. Typography

Typography validation includes checking:

  • Font family
  • Font size
  • Font weight
  • Line height
  • Letter spacing
  • Text colour

Every text element is compared against Figma specifications.

Browser DevTools are used to inspect actual CSS values and confirm implementation accuracy.

Typography consistency is important for:

  • Readability
  • Accessibility
  • Brand consistency
  • Professional UI presentation

2. Colour Accuracy

All UI colours are verified against the approved Figma design.

This includes:

  • Background colours
  • Text colours
  • Border colours
  • Button colours
  • Hover colours
  • State colours

Colour values are inspected using:

  • DevTools colour picker
  • CSS inspection tools
  • Design tokens where applicable

Incorrect colours can affect:

  • Accessibility compliance
  • Branding consistency
  • User trust

3. Spacing & Layout

Spacing validation ensures the layout follows the approved design structure.

This includes:

  • Margins
  • Padding
  • Grid spacing
  • Element gaps
  • Section alignment
  • Container widths

The implementation is compared against:

  • Figma inspect values
  • Responsive layout specifications
  • Design system spacing guidelines

Spacing inconsistencies can make the UI appear unpolished or difficult to use.

4. Corner Radius

Border radius values are validated for:

  • Buttons
  • Cards
  • Inputs
  • Chips
  • Modals
  • Images

Even small inconsistencies in border radius can affect design consistency across the product.

5. Shadows & Borders

Shadow and border validations include:

  • Box-shadow values
  • Blur radius
  • Opacity
  • Border thickness
  • Border colour
  • Border styles

Incorrect shadows or borders often make UI components appear visually inconsistent.

6. Alignment

Alignment testing ensures that UI elements are positioned correctly.

This includes:

  • Horizontal alignment
  • Vertical alignment
  • Text alignment
  • Icon alignment
  • Container positioning

Special attention is given to responsive layouts where alignment issues are more common.

7. Icon Accuracy

Icons are validated for:

  • Correct icon usage
  • Proper sizing
  • Correct colour
  • Alignment
  • State behaviour

Icons should never be:

  • Distorted
  • Replaced incorrectly
  • Misaligned
  • Blurry

8. Image Handling

Image testing validates:

  • Correct image rendering
  • Aspect ratio preservation
  • Cropping behaviour
  • Resolution quality
  • Responsive scaling
  • Lazy loading behaviour

Images should never appear:

  • Stretched
  • Pixelated
  • Broken
  • Incorrectly cropped

B. Interaction & States

1. Default State

Every UI component is first validated in its default or resting state.

This includes checking:

  • Initial appearance
  • Text visibility
  • Icon placement
  • Button styling
  • Layout consistency
  • Default selections

The default state should match the approved Figma design before any user interaction occurs.

2. Hover State

Interactive elements are tested for hover behaviour.

This includes:

  • Background colour changes
  • Underlines on links
  • Tooltip appearance
  • Cursor changes
  • Hover animations
  • Shadow transitions

Hover interactions should provide clear visual feedback without creating layout shifts or visual glitches.

3. Active / Pressed State

When buttons or interactive elements are clicked, the pressed state is validated.

Testing includes checking:

  • Visual feedback during interaction
  • Active colour states
  • Press animations
  • Tap responsiveness
  • Click acknowledgement

This helps confirm that the application feels responsive and interactive to the user.

4. Focus State

Keyboard navigation and accessibility focus states are tested carefully.

This includes validating:

  • Focus outlines
  • Focus visibility
  • Keyboard navigation order
  • Focus trapping inside modals
  • Accessibility compliance

Focus indicators should always remain visible and should never be removed without an accessible alternative.

5. Disabled State

Disabled components are tested to ensure:

  • They appear visually inactive
  • Interaction is blocked
  • Cursor behaviour is correct
  • Styling matches Figma
  • Accessibility expectations are met

Disabled states should clearly communicate to users that an action is unavailable.

6. Loading State

Loading states are validated during:

  • API requests
  • Page transitions
  • File uploads
  • Form submissions

Testing ensures:

  • Skeleton loaders render correctly
  • Spinners appear when expected
  • Layout does not break while loading
  • Users receive visual feedback during wait times

Applications should never display broken or partially rendered content during loading.

7. Error State

Error handling is validated for:

  • Form validation errors
  • API failures
  • Network failures
  • Permission issues
  • Invalid input scenarios

Testing includes verifying:

  • Error messages are meaningful
  • Styling matches Figma
  • Error icons appear correctly
  • Users understand how to resolve the issue

Error states should guide users instead of confusing them.

8. Success State

Successful actions should provide clear confirmation to users.

This includes validating:

  • Success messages
  • Confirmation banners
  • Green check indicators
  • Success redirects
  • Toast notifications

The success state should reassure users that their action completed correctly.

9. Empty State

Empty states are tested when:

  • No records exist
  • Search results are empty
  • Filters return no data
  • Sections have not been configured yet

Validation includes:

  • Empty state illustrations
  • Messaging clarity
  • CTA visibility
  • Layout alignment

A good empty state helps users understand what to do next instead of presenting a blank screen.

C. Figma ↔ API Mapping

1. Map Every UI Field to an API Field

Every UI element displaying dynamic data should have a known API source.

During this process:

  • UI fields are mapped to API response fields
  • Data dependencies are documented
  • Missing backend mappings are identified

This helps ensure frontend implementation accuracy.

2. Identify Unmapped Fields

If a field appears in Figma but has no corresponding API field:

  • The issue is raised immediately
  • Backend clarification is requested
  • Product requirements are revalidated

Unmapped fields can lead to incomplete implementations later.

3. Validate Data Types

The frontend must correctly handle the data type returned by the API.

Testing includes validating:

  • Strings
  • Numbers
  • Booleans
  • Dates
  • Arrays
  • Nested objects
  • Null values

Incorrect handling of data types often causes rendering or validation issues.

4. Null & Empty Handling

Applications must gracefully handle:

  • Null values
  • Empty strings
  • Missing fields
  • Empty arrays

Testing ensures:

  • The UI does not break
  • Placeholder content appears correctly
  • Empty states render properly
  • Error-free rendering occurs

5. Enum Values Coverage

API enum values are validated against UI behaviour.

Examples include:

  • Status values
  • Priority labels
  • User roles
  • Workflow states

Every possible enum value should:

  • Render correctly
  • Use proper styling
  • Display the correct label
  • Trigger correct business behaviour

6. Date & Number Formats

Dates and numerical values are validated according to design and business requirements.

Testing includes:

  • Date formatting
  • Currency formatting
  • Decimal precision
  • Thousand separators
  • Timezone conversions

Formatting inconsistencies can confuse users and reduce data clarity.