Stop 7 of 8 · Weekly
Handoff
Tokens, spacing, type scale, states and a copy deck, written as tables a developer can build from without emailing you twice a day.
The pack, not the file
Yara's handoff used to be a link to a Figma page and a hopeful sentence. What came back was a build that was 90 percent right and 100 percent full of small guesses: a grey that was almost the grey, a gap that was 20 instead of 24, a button that said Submit.
The pack fixes that. Four tables and a note, generated from her own design and checked by her, in about half an hour. It is not more work than the emails it replaces.
The four tables
| Table | Columns | The point |
|---|---|---|
| Tokens | Name, value, where used | Names the decisions |
| Scale | Step, value, applies to | Ends the guessed gaps |
| States | Component, state, behaviour | Covers what you did not draw |
| Copy | Location, element, exact string | Nobody writes copy at build time |
Then the developer note. One page in prose: what the page is for, what has to survive on a small screen, what is deliberately not responsive, what is a placeholder and what is final, and the two or three things you care about enough to be called at seven in the evening over.
Try this
Attached is the final pricing page design with the colour and type values. Produce two tables. First, colour and radius tokens with a name, a value and where each is used, using names that describe the role rather than the colour. Second, the spacing and type scale as a numbered step list with the pixel value and what it applies to. Where I have used a one-off value that is not on the scale, list it separately and tell me the nearest step so I can decide whether to snap it.
Here are the components on this page: hero, plan card, pricing table, form, footer. For each, list every state a developer has to build: default, hover, focus, active, disabled, loading, empty, error, and any I am missing. Say what changes visually in each state using my tokens. Mark the ones I have not designed yet so I can draw them today.
Build a copy deck table for this page: location, element, exact string. Include the strings a design file never shows, which are the button labels after the click, the validation messages for every field, the empty state, the error state, the success state, and the meta title and description. Write them in the brand voice from this Project. Mark anything you had to invent so I can approve it.
Reading the frames instead of describing them
Connect Figma and Claude can read the frames rather than wait for you to explain them. That turns the tokens table from a transcription job into a review job, which is the difference between an hour and ten minutes. It also catches the thing you cannot see yourself: the same button drawn three slightly different ways across three frames.
If the client has no developer, this pack is what a build team quotes from. Yara sends the same four tables to Dasow when a client needs the page actually built, and a complete pack gets a fixed price back instead of an estimate with a hedge in it.