Reading a Figma file
Auto layout is flexbox with different words, components are your components, and variables are your tokens. Once the mapping is clear, handoff stops being translation.
Auto layout is flexbox. Direction is flex-direction, spacing between items is gap, padding is padding, and the alignment grid is justify-content crossed with align-items. Hug contents is width: fit-content or auto; fill container is flex: 1 or width: 100%; fixed is a fixed value. Learning those five equivalences removes most of the friction in handoff.
Variables are tokens and should map one to one onto yours. If the file has a variable your code does not, that is a conversation, not a licence to invent a value. Text styles and effect styles are the same story for type and shadows.
What a static file cannot tell you: what happens on hover, what happens while loading, what happens when the string is four times longer, what happens at 320px, and what happens when the list is empty. Those five questions asked before you start save more time than any tooling, and asking them is what separates implementing a design from copying one.
You should now be able to
- Map auto layout properties onto flexbox equivalents
- Extract variables, styles and components from a file
- Identify what a Figma file cannot tell you
Loading…