All work

Internal tool · Handoff

Responsive Specs & Accessibility Generator

A Figma Make tool that turned a week of handoff documentation into two days, generating responsive specs and accessibility notes every sprint.

Role
Design lead
Duration
2 months
2025
Focus
AI-driven
Documentation
Design systems
Skills & tools
Figma Make
Design-oriented prompting
Prototyping
Design systems
Documentation

01overview

A week lost to the same problem in every sprint

Redesigning the POS system required documenting the responsive behavior and accessibility requirements of every component before the development handoff.

Manually calculating viewport units, checking color contrast, and formatting specifications for developers was a repetitive task that resurfaced every sprint for each new or updated component.

On large projects, this step alone consumed nearly a full week of the design team’s time. A week spent on documentation while the sprint waited.

  • ~1 weekDocumentation time per major delivery (before the tool)
  • Every sprintHow often the problem came back
  • Internal useA tool built by the team, for the team living the problem

02the problem

Manual, repetitive, and prone to human error

The documentation workflow involved:

  1. Opening the frame in Figma manually
  2. Recording every width, height, padding, spacing and icon size
  3. Converting values into viewport units (vw/vh) and rem by hand
  4. Checking the contrast ratio of every foreground/background pair in external tools
  5. Formatting all of it into documentation developers could easily read

Native Figma plugins were tested too, but none solved the problem end to end. When a developer needed to verify a specific component value, updating the documentation, validating the information and confirming the right value could take up to an hour.

The whole process was repetitive, which made it prone to mistakes. A single wrong calculation at the start of a sprint could easily turn into rework by the end of it.

how might we

How might we eliminate manual documentation time without sacrificing accuracy, and do it directly within Figma, without disrupting the team’s existing workflow?

03process

The solution was the API. The challenge was the prompt.

The idea came from realizing that all the necessary information already existed in Figma. The real problem was extracting, calculating and formatting that data.

The approach was to build an automation layer with Figma Make, connected directly to the Figma API: it extracts layout data from a selected frame and applies viewport calculations and color-contrast validation automatically.

This project began well before MCPs (Model Context Protocol servers) were widely available in today’s leading AI agents. A fast, practical solution was needed, and Figma already provided the connectors to build it.

The biggest challenge was writing design-oriented prompts that guided the tool to understand not only the component values but the design logic behind them. The goal wasn’t just to generate documentation: it was to make the tool document and reason like a designer.

  1. Diagnosis

    Mapped the manual workflow to find where time was lost and where errors happened most.

  2. Exploration

    Evaluated native Figma plugins and ruled them out: none covered the full scope of the problem.

  3. Prototyping

    Built the first version with Figma Make and the Figma API to extract layout data and automate viewport calculations.

  4. Refinement

    Iterated on design-oriented prompts until the output was accurate, structured and easy for developers to use.

  5. Adoption

    Integrated into the team’s recurring workflow, where it became part of every sprint delivery.

04solution

Select the frame. Run the tool. Documentation ready.

The generator is a translation layer between design and development, automating the repetitive work so designers can spend more time on what matters: creating.

  • Reads directly from Figma

    Connected to the Figma API, it extracts width, height, padding, spacing and icon sizes from the selected frame. No copying values by hand.

  • Checks contrast automatically

    Reads the applied color tokens and evaluates contrast between foreground and background, flagging whether each pair meets accessibility standards.

  • Calculates vw, vh and rem

    Converts absolute dimensions into viewport and rem units, so layouts scale correctly across screen sizes and zoom levels.

  • Developer-ready documentation

    Outputs text, a prompt or a Figma frame, ready to paste into docs, share with engineers, or use in AI-powered FigJam workflows.

fig. 01–03 · The tool in action: extraction, calculation and documentation output in under 5 minutes.

05result

From one week to two days. From one hour to five minutes.

The tool was integrated into the team’s recurring workflow and has been used in every sprint since.

The impact showed in delivery speed and in the team’s capacity: instead of getting stuck in documentation, the design team delivered both projects and their documentation within the same sprint.

before

Full documentation per major delivery
~1 week
Single-component check
~1 hour
Process
Manual, linear, needing constant attention
Risk
Human error in repetitive calculations
Sprint impact
Recurring delivery delays

after

Full documentation per major delivery
2 days
Single-component check
Under 5 minutes
Process
Automated, repeatable, auditable
Risk
Eliminated for viewport calculations and contrast checks
Sprint impact
Delivered within the sprint
  • 5× fasterFull documentation per major delivery (1 week → 2 days)
  • 12× fasterSingle-component verification (1 hour → 5 minutes)
  • 0 pluginsExternal plugins needed: everything runs inside Figma
Next projectSystems Portal