Generated code, assets and tokens: fix the translation¶

Exercise generated-code-assets-tokens-annex.pdf · PDF

Open a page in your browser, window maximised. You get a 390-pixel strip in the top-left corner, three broken images, and the rest of the screen empty. Drag the window narrower: nothing reacts. Press Tab a few times. Where is the focus? Nowhere.

A machine made that page from a perfectly good Figma frame called Notes · 390, for an app called NoteBox. Every colour is right. Every font size is right. And it is useless. This page teaches you to read what a machine wrote, name what is wrong with it, and fix it. You will need those eyes every time an exporter, a plugin or a site builder hands you code.

A machine translation¶

Keep one picture in your head for the whole page: translation. This is what a machine gives when it translates a rigid Figma frame word by word: every layer becomes a div, every position a pair of pixels. Every word is right. Is it what the designer meant?

Here is one row of the note list, as the machine wrote it (the CSS is shortened):

<div class="instance-2">
  <div class="rectangle-2"></div>
  <div class="text-5">Maths homework</div>
  <div class="text-6">Edited yesterday</div>
</div>

.notes-390  { position: relative; width: 390px; height: 844px; background: #FFFFFF; }
.instance-2 { position: absolute; left: 0px; top: 69px; width: 358px; height: 69px;
              border-bottom: 1px solid #D4D4D8; }
.text-5     { position: absolute; left: 48px; top: 12px; color: #111111; font-size: 16px; }

position: absolute pins an element at exact coordinates, whatever happens around it. .instance-2 is 69 pixels from the top because the row before it is 69 pixels tall. What if that row's title wraps to two lines?

Not every machine goes this far. Figma's Dev Mode gives only snippets. Exporter plugins and site builders give whole pages like this one.

Eight problems, named¶

To spot them, compare the page with the original frame. Narrow the window. Press Tab. Read the tag names. Each problem has a name you can reuse every time you inspect generated code.

A magic number is a value typed directly into the code, with nothing to say what it means or where else it is used. The viewport meta is the line that tells a phone to use its real width instead of pretending to be a desktop.

Design tokens: one name for one decision¶

Start with the magic numbers, because the fix is the most satisfying.

A design token is a design decision with a name, stored in one place, that both the design file and the code use.

The name was coined at Salesforce, by Jina Anne and Jon Levine, for their design system. In Figma a token is a variable. In CSS it is a custom property: a value you name yourself, with two hyphens in front, and read back with var().

The translation rule is short: a slash becomes a hyphen, two hyphens go in front, numbers get px. The definitions live in a :root block, so the whole page can use them:

:root {
  --color-bg: #FFFFFF;
  --color-text: #111111;
  --color-muted: #666666;
  --color-surface: #F1F5F9;
  --color-border: #D4D4D8;
  --space-3: 12px;
  --space-4: 16px;
  --radius-md: 8px;
}

Link tokens.css in the HTML before style.css. Try changing --color-text to red at this point. Nothing changes. Why not? Because nobody uses it yet. A token does nothing until a rule says var(--color-text).

The idea has grown into a standard: the Design Tokens Community Group published the first stable version of its specification, 2025.10, in October 2025.

Fix it, in order¶

Fix in this order, because each step makes the next one easier. The first three matter most.

:hover styles an element when the mouse is over it. :focus-visible styles it when the keyboard has reached it. DevTools is the set of developer tools inside your browser: press F12 to open it.

From stacks to CSS¶

You already know flexbox. You just learned it with other names, in Framer and in Figma, where Hug is Fit Content:

Here is the row from before, translated by a person who knows what the designer meant:

<li class="note-row">
  <input type="checkbox" id="n2">
  <label for="n2">
    <span class="row-title">Maths homework</span>
    <span class="row-meta">Edited yesterday</span>
  </label>
</li>

.note-row { display: flex; align-items: center; gap: var(--space-3);
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--color-border); }
.note-row label { display: flex; flex-direction: column; flex: 1; }
.row-title { color: var(--color-text); font-size: 16px; }
.row-meta  { color: var(--color-muted); font-size: 13px; }

No coordinates, no fixed width. A longer title now pushes the row taller instead of crashing into its neighbour. And the classes say what they style: what is text-7? Nobody knows. What is row-title? Renaming is part of a good translation.

What the real tags give the user¶

This is what you learned in accessibility: use the real control. A div with onclick is a button for a mouse. It is not a button for a keyboard, a screen reader or a form.

Expect these four bumps on the way:

Export the assets¶

Three images are broken because the files are missing. An asset is a file your page uses but does not contain, such as an icon or a logo. They come from the design file, and you choose the format by what the image is:

In Figma, select the layer. At the bottom of the right panel, go to Export, press +, choose the format, and export. For the logo, press + twice: PNG at 1x and PNG at 2x. Figma adds the suffix @2x for you.

The layer name becomes the path: the slash turns into a folder. So layers named icon/search and logo/notebox give you:

assets/icon/search.svg
assets/logo/notebox.png
assets/logo/notebox@2x.png

Reload the page and the broken images heal by themselves, because the generated HTML already pointed at those paths. That is why a clean layer name in Figma is worth the five seconds.

Which images need words?¶

An icon next to the words "New note" adds nothing, so alt="" tells the screen reader to skip it. The search icon stands alone, so it needs a name, and it should be a real button:

<button type="button" aria-label="Search notes">
  <img src="assets/icon/search.svg" alt="" width="24" height="24">
</button>
<button type="button">
  <img src="assets/icon/plus.svg" alt="" width="20" height="20"> New note
</button>

aria-label gives an element a name for screen readers when it has no visible text. As you learned with WCAG, text alternatives are for content, not for decoration.

Figma can export assets, and its variables too. What it cannot know is that a rectangle is a checkbox. That part is yours.

Key takeaways¶

• A machine translates a rigid frame word by word. You keep the values and replace the structure.
• The eight problems: frozen size, absolute everything, magic numbers, div soup, fake buttons, fake checkboxes, images with no alt, missing head lines.
• A design token is a named decision. In Figma it is a variable, in CSS a custom property: space/4 becomes --space-4: 16px;.
• Stacks are flexbox: Fill along the direction is flex: 1, and Fit Content along the direction means writing nothing.
• Real tags bring keyboard focus, roles and names for free.
• SVG for drawings, PNG at 1x and 2x for pixels. Decorative images get alt="", and a lone icon gets a name.

Quick check¶

You can now read a machine's code and fix its grammar. Next you open the code of your own Framer page with the same eyes, and start the Unit 2 project: Framer: code, components and project.