Low Fidelity First: How Paper Changed My Design Loop
Nov 2026I used to draw every screen pixel-perfect in Figma before any code. Now I sketch loose, build my own system in Paper, and raise the winner to high fidelity. By my estimate it is about three times faster, and I try more variations.
The loop I used to run
Pixel-perfect first. I designed each screen end to end in Figma at full fidelity, handed it to Cursor, and kept iterating in code. It worked, and the screens were polished.
The cost was in the order. I paid for polish before I knew the direction was right. A new idea meant redrawing a whole screen, so I tried fewer ideas than I wanted to. And the handoff to code was a translation: someone, usually me, had to re-read the picture and rebuild it.
What I changed
I recently added Paper to my workflow, and it moved two things: when fidelity happens, and where the system lives. I ideate at very low fidelity, build my own design system in Paper, and only then make the chosen direction high fidelity.
The new loop, in four steps
1. Sketch loose, and sketch many. Boxes, rough type, real copy where I have it. Nothing is aligned yet, which is the point. A direction costs minutes, so I put several next to each other and compare them as a set, not one at a time.
2. Build the system once. My own tokens and components live in the same file as the screens. On CotonAI that is one token file, a Paper library of 35 components and 13 patterns, and rules written down for agents. The full story is in the design system case study.
3. Raise the winner. I pick one sketch and rebuild it from the system. Spacing, radii, colour and type come from tokens, so most of the pixel work is already done. I spend the time on the details that are specific to the screen.
4. Hand over the same thing. Paper artboards are HTML and CSS, and agents can read them through its MCP server. Cursor sees the real values (tokens, sizes, structure) and not a screenshot to guess from. Less is re-interpreted.
Why it is faster
Variations are cheap. Low fidelity moves the expensive decision, whether this direction is right, to the front, where being wrong costs minutes.
The system does the pixel work. I used to hand-tune each screen. Now polish is mostly inherited, so high fidelity is assembly plus judgement.
Less re-translation. The design and the code read from the same tokens, so there is less drift to fix after handoff.
About the three times
My estimate, not a measurement.
I think the speed-up is more than 3x. I have not timed it. The number comes from how long a screen used to take me against how long it takes now, remembered, on different screens. I would not quote it as a benchmark.
To measure it honestly I would take five comparable screens, run half through the old loop and half through the new one, and record time from brief to approved high fidelity, plus how many directions I tried. The second number may matter more than the first: seeing more variations is where I think the quality gain comes from.
What it costs, and where it does not fit
The system is upfront work. The speed shows up after the library exists. For a one-off screen, or a first week on a new product, you pay before you save.
Loose sketches need a reader who trusts them. If the room expects polish, a rough direction can read as unfinished. I show a set of options with one line on what each tests, not a single rough screen.
This is one designer's loop on one product. I can speak for my own work. I have not compared it across a team, and I would expect shared ownership of the library to need rules, as it does in any system.
If you want to try it
Do not start by building a library. Take one screen you would normally draw in full, sketch five versions at low fidelity in an afternoon, and pick one. Then notice which values you keep re-deciding. Those are your first tokens.