Design Audit

Overview

Design Audit analyzes your work against proven UX heuristics and accessibility standards, then hands you a prioritized list of UX issues with actionable recommendations. It runs on two surfaces:

Figma — audit a frame inside the Floto plugin
Web — audit any live page with the Floto Chrome extension, no Figma file required

Figma
Web

Audit a Figma frame from the Floto plugin.

Time to audit: ~2 minutes per frame
Cost: 20 credits per audit
Supported frames: Any single Figma frame (recommended: screens, wireframes, mockups)

How It Works in Figma: 5 Steps

Step 1: Open Design Audit

Click Design Audit in the Floto plugin.

Your frame is evaluated against established design principles, accessibility standards, and usability heuristics:

5 Usability Heuristics - Core UX principles (see below)
WCAG 2.2 & EN 301 549 - Accessibility standards
Your design system - Token compliance, if you’ve uploaded one

Step 2: Select a Frame & Audit Type

Select the frame you want feedback on
Choose the audit type depending on the feedback you need

Floto audits one frame at a time. Select the specific screen, component, or layout you want analyzed.Available Audit Types:

Usability Audit - Evaluates your design across five dimensions: visual hierarchy and layout, typography and microcopy, color contrast and accessibility, aesthetic tone, and CTA clarity
Copy & Microcopy - Reviews all visible text for clarity, tone, and effectiveness
Accessibility (WCAG 2.2) - Checks WCAG 2.2 AA compliance — contrast, touch targets, focus appearance, dragging alternatives, redundant entry, accessible authentication
Accessibility (EN 301 549) - Checks EN 301 549 v3.2.1, the EU standard for public sector digital services
Design System Check - Verifies colors, spacing, typography, and radii use your design system tokens instead of hardcoded values (requires an uploaded design system)

Step 3: Run Your Audit

Floto scans your frame for:

UX Issues - Usability problems and potential confusion points
Accessibility Problems - WCAG violations and accessibility gaps
Usability Gaps - Deviations from established best practices

Processing stages:

Processing design elements
Analyzing UI patterns
Evaluating usability
Generating recommendations
Finalizing analysis

You receive:

Overall Score (0-100) - Your frame’s compliance score
Severity Breakdown - Issues categorized by impact

Step 4: Place Audit in Your File

Drop the audit results directly onto your Figma canvas.Keep feedback visible as you work:

No switching tabs or losing context
Reference issues while making design changes
Track progress as you fix problems

Step 5: Fix and Retest

Make changes to your design, then run the audit again.Watch your compliance score improve with each iteration:

Identify which issues were resolved
Focus on remaining high-severity problems
Ship when you’re confident in your design

Understanding Your Audit Results

Overall Score

Your frame starts at 100 and loses points per issue found — 15 for each Critical, 8 for each Major, 3 for each Minor. Suggestions don’t affect the score.

Score Range	Evaluation
90-100	Excellent Adherence
60-89	Good/Partial Adherence
20-59	Needs Significant Improvement

Valid frames never score below 20, no matter how many issues are found. An empty or invalid frame scores 0.

Issue Severity Levels

Each issue is categorized by impact:

Critical - Severe usability problems that block users
Major - Significant issues affecting user experience
Minor - Small improvements that enhance usability
Suggestion - Optional enhancements and best practices

Issue Details

For each issue, you receive:

Field	Description
Category	Heuristic name or accessibility rule
Location	Where in the frame the issue appears
Description	What the problem is and why it matters
Recommendation	How to fix the issue
Severity	Impact level (Critical/Major/Minor/Suggestion)

The 5 Usability Heuristics

The Usability Audit evaluates your frame across these five dimensions:

Visual Hierarchy & Layout - Visual flow from primary to secondary elements, grouping via alignment, spacing and proximity, grid consistency, balance, white space, cognitive load
Text, Typography & Microcopy - Text hierarchy, font sizing, weight and spacing; labels, headings, body text and microcopy for clarity, tone, and action-oriented phrasing
Color, Contrast & Accessibility - Sufficient contrast for text and interactive elements, and color never the only indicator of meaning
Aesthetic & Emotional Tone - Cohesion, brand voice, consistent iconography and style, composition, balance, polish
Functionality & CTA Clarity - Primary calls-to-action visually distinct and prioritized, interactive elements recognizable and appropriately sized, next steps unambiguous

Frame Requirements

Supported Frames

Single Figma frames
Screens, wireframes, mockups
Component designs
Prototypes and flows

Frame Size

No minimum size
Maximum size: 20MB
Recommended: 320px - 1920px width for best results

Frame Contents

Text content - Readable text and labels
UI elements - Buttons, forms, navigation
Visual design - Colors, spacing, typography

Audit Limitations

Floto audits one frame per request
Audits are based on visual design only - Doesn’t test live functionality
Results reflect current design state - Changes require new audit
Audit can take up to 2 minutes to process complex designs

Figma Audit FAQ

How long does an audit take?

Audits typically complete in 30 seconds to 2 minutes, depending on frame complexity. You’ll see progress updates during analysis.

Can I audit multiple frames at once?

No, Floto audits one frame at a time. Run separate audits for different screens or components.

What if my score is low?

Start with Critical severity issues - these have the biggest impact on user experience. Fix those first, then move to Major and Minor issues.

Can I retest after making changes?

Yes! Make design updates in Figma, then run a new audit on the updated frame. Compare scores to see improvement.

Are there accessibility checks?

Yes, audits include WCAG accessibility standards. Issues include accessibility problems like contrast, readability, and keyboard navigation.

How many credits does an audit cost?

Each audit costs 20 credits. Credits reset monthly on your plan.

What's the difference between audit types?

Usability Audit covers the five design heuristics — hierarchy, typography, contrast, tone, and CTA clarity. Copy & Microcopy judges the words. Accessibility audits check WCAG 2.2 AA or EN 301 549 compliance. Design System Check verifies token usage. Run whichever matches the feedback you need.

Audit any live page in your browser — staging, production, or localhost. No Figma file needed.Time to audit: ~30 seconds to 2 minutes per page
Cost: 20 credits per audit (Deep usability: 100 credits)
Access: Chrome Extension (required)
Scope: 1 page per audit

How It Works on the Web: 5 Steps

Step 1: Install the Floto Extension

Add the extension to your browser, then sign in with your Floto account. One-time setup.Chrome Extension: Install Floto: Design Feedback

Step 2: Run the Extension & Select Audit Type

Step 2: Select an audit type in the Floto widget

Open the page you want feedback on
Click the Floto extension icon
Stay on the Design Audit tab
Choose your audit type
Click Scan page

Floto audits one page at a time.Available Audit Types:

Type	What it checks	Credits
Usability	Visual hierarchy, layout, spacing, affordance, consistency, dark patterns	20
Copy	Clarity, CTA labels, form copy, error messages, tone consistency	20
Accessibility	WCAG 2.2 AA compliance, contrast, and readability	20

If a modal or drawer is open, the scan scopes to that layer — so you can audit dialogs too.

Step 3: Review Findings on the Page

Step 3: Findings highlighted on the live page

Issues are highlighted right where they are on the page, with a results panel showing:

Overall Score (0-100) and severity breakdown
Summary of how the page reads overall
Category filters - Hierarchy, Layout, Spacing, Consistency, Affordance, and more
Prev / Next to step through each issue

No switching tabs — fix issues while looking at them.

Step 4: Send Issues Straight to Your Team

Three ways to share results:

Export issues - Push findings to Linear, Jira, or Bugasura with context and screenshots
Copy prompt - Copy a fix prompt for your LLM or coding agent
PDF report - Download a report with each issue highlighted

Step 5: View Past Projects

Every run is saved. Open the Web Audits tab in the Floto webapp to revisit older audits and results.

Understanding Your Web Audit Results

Overall Score

Each page receives a score from 0-100 based on adherence to usability principles.

Issue Severity Levels

Critical - Severe problems that block users
Major - Significant issues affecting user experience
Minor - Small improvements that enhance usability
Suggestion - Optional enhancements and best practices

Analysis Depth

Where available, the Usability audit offers two depths:

Depth	Best for	Cost
Quick	Fast scan, essential issues	20 credits
Deep	Slower, comprehensive analysis	100 credits

Web Audit Limitations

Floto audits one page per request - re-scan after navigating
Results reflect the page as captured - changes require a new scan
One capture per run - responsive breakpoints and hover-only states aren’t covered
Pages where Chrome blocks extensions (chrome://, the Chrome Web Store) can’t be scanned

Web Audit FAQ

Do I need a Figma file?

No. The web audit reads the rendered page. Figma is only needed for Design Diff.

How many credits does a web audit cost?

20 credits for Usability, Copy, or Accessibility. Deep usability costs 100 credits.

What's the difference between the three audit types?

Usability judges the visual design and interaction. Copy judges the words. Accessibility checks WCAG 2.2 AA compliance. They don’t overlap — run all three for full coverage.

Can I get the findings out of the browser?

Yes — export to Linear, Jira, or Bugasura, copy a fix prompt for your LLM, or download a PDF report.

Where do past web audits live?

In the Web Audits tab of the Floto webapp.

Next Steps

Run your first Design Audit on a key screen — or scan a live page with the extension
Review Critical and Major issues
Make improvements based on recommendations
Retest to see your score improve
Export issues to Linear or Jira and share results with your team

Getting started

Features

Design Audit

Overview