overview_
This is a tool built to automate one of the most error-prone parts of the design handoff process: viewport calculations and accessibility validation.
By connecting to the Figma API, the generator extracts layout data from a selected frame and automatically calculates viewport-based values for width, height, spacing, padding, and icon sizes. It also pulls typography and color tokens, and checks contrast accessibility between backgrounds and surface elements.
It is built using Figma Make, combining design-driven prompts with a structured logic focused on developer communication. The goal was simple: reduce manual calculations, speed up documentation, and eliminate human error.
the problem_
During a design system revamp, I needed to document detailed responsive behavior and accessibility requirements for multiple components.
Manually calculating viewport units and verifying color contrast:
At scale, this became unsustainable.
the solution_
The Viewport Generator is designed to act as a translation layer between design and development. By inputting a Figma API token and frame link, the tool programmatically retrieves layout properties, spacing values, icon dimensions, typography tokens, and applied color variables. It then calculates viewport-based dimensions proportionally and evaluates contrast relationships between background and surface elements to validate accessibility compliance.
The output is structured for immediate reuse, whether pasted directly into documentation, shared with engineers, or transformed into structured specs using AI workflows in FigJam. Rather than manually deriving and formatting specifications, it's a repeatable system that guarantees responsive logic and accessibility standards are embedded into every handoff.
Responsiveness
Ensures layouts scale properly across zoom levels and screen sizes
Accessibility
Automatically validates color contrast compliance
Accuracy
Removes manual calculation errors
Developer clarity
Provides structured, implementation-ready specs
Speed
Significantly reduces documentation time