Many adverts we studied mention Figma, UI implementation or turning designs into working pages. In agencies and product teams, a designer hands you a design and you build it. Doing that accurately, with reusable pieces, is a daily skill.
Reading a Figma file
Figma, a common example of a design tool, runs in the browser and has a free plan. When a designer shares a file with you, you can usually inspect it even on a free account:
- Select any element to see its size, spacing, colours and font.
- Look for the spacing between elements, not just their sizes.
- Check for styles or variables, the named colours and text styles the designer reused.
- Look at every state: a button normally, when pressed, when disabled, and any error or empty screens.
Find the system in the design
Good designs repeat a small set of values. Collect them as CSS custom properties, often called design tokens:
:root {
--color-primary: #1b5e20;
--color-text: #1f1f1f;
--space-2: 8px;
--space-4: 16px;
--radius: 8px;
}