Skip to lesson
Exit
Motion, Interaction & Prototyping1 / 3

2 min lesson

The bidirectional bridge

Answer this: "While building a header from a Figma frame, you discover that a realistic 40-character title wraps and pushes the primary action off-screen - the mock only showed a short title. What's the right move?"

Step 1 of 3

The bidirectional bridgewhen code reveals a design flaw, propose the fix

Implementation surfaces problems Figma hides: a layout that breaks at a real string length, a contrast ratio that fails in dark mode, a transition the static frames implied but never specified. The Design Engineer doesn’t silently “fix” it or rigidly ship the broken spec - you raise it with a concrete proposal.

Say it like this

“The header works in the mock, but at a real 40-character title it wraps and pushes the action off-screen. I’d truncate with a tooltip and keep the action pinned - here’s a quick build of both. Which reads better to you?”

Learn more

References

Tokens as the single source of truth

Tokens as the single source of truthone definition, two consumers

When Figma and code drift, every screen becomes a negotiation. Keep design tokens authoritative - color, spacing, type, radius defined once and consumed by both the design tool and the codebase, ideally via an export pipeline so a token change propagates instead of being hand-copied.

  1. 1Define once. Tokens live in a single source - a tokens file or a Figma variables set that exports.
  2. 2Consume in both. Figma styles and CSS variables both reference the same names.
  3. 3Change in one place. Update the token; Figma and code both move, no per-screen edits.
  4. 4Guard drift. A renamed or removed token should break loudly, not silently mismatch.
Learn more

Full explanation

Be ready to walk through a real translation

Be ready to walk through a real translationthe portfolio round will ask

Have one Figma-to-code story rehearsed in detail: the frame you started from, the values you matched, the flaw implementation exposed, the fix you proposed and the polish you added that the mock couldn’t show. That single story demonstrates the whole bridge at once.

Interview move

When you walk a translation, lead with a decision, not a feature list: “The spec used a 200ms linear fade; in the build it felt sluggish, so I moved to a 150ms ease-out and showed both to the designer.” Defending a craft decision with a reason is exactly what the portfolio round grades.

Learn more

Optional practice

Practice: The bidirectional bridge