Back to archive

Scaling artboards for ai2html

Observable · Apr 5, 2024

Context

This tool solves a repetitive newsroom task in ai2html workflows: resizing one Illustrator artboard design to another target artboard without trial and error.

My role

• Tool development

I designed and implemented the full notebook in Observable, from the scaling logic to the interaction flow and copy-to-clipboard output.

Data and methodology

The notebook asks for the current artboard size, the source preset, and the destination preset, then computes the resize value by applying the ratio between both target widths.

It includes default presets (mobile, mobile2, tablet, desktop), numeric input parsing that supports px/commas, and immediate feedback for invalid values.

Key decisions

• I kept the interface intentionally minimal so users can get the resize number in seconds and paste it directly into Illustrator's Transform panel.
• The preset dictionary is editable, so anyone can fork the notebook and adapt it to their own ai2html naming and breakpoint system.

Result

The final notebook provides a quick, reliable way to compute the exact resize percentage for artboard transfers.

Impact and learnings

• It reduces manual rescaling mistakes and speeds up day-to-day map production when handling multiple ai2html outputs.

Links