CSSHTMLIntermediate~3h

Figma for Developers

The half of the file that is yours

A design file is a layout algorithm with the numbers in it. Auto layout is flexbox in another vocabulary, constraints are a resize rule with exact outputs, and a component set is a prop signature. Five modules of computing what a frame measures, where a child lands, and what a designer’s next edit does to your mock.

Start this project See the modules

Modules: 5
Drills: 9
Build steps: 0
Time: ~3h

Walk out able to

Open a file you did not make, derive every number an implementation needs, and say what the layout does when the content grows.

What you work on

Frames and coordinates

What a position is measured against, and both conversions.

Auto layout, computed

Hug, fill and the CSS each control really means.

Constraints on resize

Five values, one rule, and where the child lands.

Components and the spec

Variants as props, and the numbers nobody printed.

The pitch

What you practise, and what you leave with

A notification card built from a spec written at 2x, plus the spec sheet and prop signature another developer could build from.

You will practise

Frame and page coordinates, both directions
Hugging frames, filling children, and the gaps
Auto layout translated into flex declarations
Constraints, variant sets and spec arithmetic

Afterwards you can

Compute a frame’s size before it is drawn
Say what a layout does when the content grows
Write the CSS any auto layout frame means
Derive the numbers a handoff never states

Modules

5 modules, 29 items

Lessons explain one idea. Drills repeat it until it sticks. Build steps make something that exists afterwards.

1
Frames and coordinates
~24 min
Read any layer’s position against the right origin, and convert it in both directions.
- LessonWhat a developer takes off a file4 min
- LessonRead a layer’s position7 min
- LessonWhat a clipping frame hides4 min
- DrillConvert frame and page coordinates9 min
2
Auto layout, computed
~49 min
Compute what a frame measures and what its children get — then write it as CSS.
- LessonMeet auto layout as flexbox5 min
- LessonAdd a hugging frame up5 min
- DrillSize a hugging frame10 min
- LessonWork out what a fill gets5 min
- DrillShare out the leftover space10 min
- LessonTranslate a frame into declarations6 min
- DrillTranslate a frame into CSS8 min
3
Constraints and resizing
~35 min
Say where any child lands after its frame is resized, and pick the value that holds it.
- LessonWhat resizing does to a child6 min
- LessonWork out where the child lands6 min
- DrillResize the frame, place the child10 min
- LessonWhere constraints stop applying4 min
- DrillPick the constraint that holds9 min
4
Components and instances
~37 min
Read a component set as a prop signature, and predict what a main edit does to it.
- LessonMain, instance, override6 min
- LessonWhat an instance can never change6 min
- DrillPredict what the instance shows11 min
- LessonRead a variant set as props6 min
- DrillCount a complete variant set8 min
5
Reading a design spec
~56 min
Take a file you did not make and get every number an implementation needs out of it.
- LessonThe units are not your units4 min
- LessonDerive the numbers nobody printed5 min
- LessonTell a decision from an accident5 min
- LessonWhat a stroke does to a width4 min
- DrillTake the number off the spec10 min
- LessonWrite the spec sheet10 min
- LessonState the set as a prop signature6 min
- LessonBuild the card in a browser12 min