Keeping design intent from Figma to code.

A layout has a reason for being arranged the way it is. A heading establishes priority. Space separates one thought from the next. A repeated alignment connects things that belong together. When a design becomes a website, those decisions need to remain legible as the content, viewport and input method change.

That makes the handoff a useful moment to describe what each decision is doing. A finished frame gives the developer a reference. The rules behind it explain how the design should respond when the browser presents a situation the frame does not show.

Consider a project grid. The useful instruction might be: keep each project title close to its image, align the metadata within a row, and let a featured project occupy more space where the viewport allows it. Those relationships can survive several layouts. A fixed set of coordinates cannot describe them all.

Describe what must stay together

Start with the reading order and the relationships between elements. Which text introduces the section? Which details belong to a particular image? What should still feel connected when two columns become one?

Write down the few rules that carry the composition. A caption follows its image. A project title stays ahead of its discipline and year. The space between projects is larger than the space inside one project. These statements give responsive decisions a clear basis.

Check them with longer text and enlarged text as well as at the designed widths. Reflow should preserve information and functionality as content adjusts to the available space. W3C’s explanation of Reflow provides a useful reference for this part of the review.

Separate layout from input

A narrow desktop window can still have a mouse. A large screen can have touch input. Width tells us how much room the layout has; it does not tell us how someone will interact with it.

A navigation grid may need fewer columns in a narrow window while keeping its pointer interaction. On touch, the same links need a clear resting state and an immediate response to a tap. A label or action should remain available without waiting for a hover.

The CSS hover media feature checks whether the primary input mechanism can conveniently hover. It is one useful signal for choosing an interaction, alongside actual keyboard and touch checks.

Give labels and states the same attention as layout

The name of a link sets an expectation about its destination. On the CR8V Studio homepage, “Selected Work” names a section of the page, while “View all work” leads to the catalogue. The wording explains the difference before either link is used.

The same care applies to states. A table of contents needs to communicate the current section after the pointer leaves a link. A filter needs to show which category is selected. Keyboard focus needs to remain visible as someone moves through the page.

Include these states in the design review. Otherwise, the implementation has to invent decisions that affect how the interface is understood.

Define the job of motion

For each animation, write down its trigger and what it helps the visitor follow. A transition can connect a project card to its case study. An active marker can keep the current reading position clear. This makes it easier to decide which elements move, when the movement finishes, and what happens if another action interrupts it.

Describe the reduced-motion behaviour too. The prefers-reduced-motion media feature exposes a request to reduce non-essential movement. A reduced version should still communicate the destination, selection or change of state.

Review the page with its real content

An image has its own proportions. A title may wrap onto an extra line. A case caption may need to explain that the visual is a concept or a detail of a larger interface. These are part of the composition, so use actual material early enough to see their effect.

Before accepting the implementation, review a few situations deliberately:

• Resize through the widths between the supplied frames.
• Follow the reading order with longer text and enlarged text.
• Use links and controls with a pointer, keyboard and touch.
• Check resting, hovered, focused and selected states.
• Repeat key journeys with reduced motion enabled.

The final review returns to the decisions behind the frame: what leads, what belongs together, and what the visitor understands after an action. If those relationships remain clear in the browser, the design has carried through.