04 — Design Engineering
We align component structure, naming, design tokens, states and responsive rules so designers and engineers share one vocabulary. We stay involved through implementation review and design QA.
- Typical duration
- 1–4 months
- Indicative price
- From ¥600,000
A design that worked in Figma falls apart once implemented. That is rarely carelessness on either side — it happens because the two are built in different vocabularies.
We align component structure, naming, design tokens, states and responsive rules so both sides describe the same units. We stay in through implementation review and design QA, and take responsibility for the quality at launch.
This tends to fit when
- Implementation drifts from the design and rework is routine
- There are so many components that nobody knows which to use
- You want a design system but doubt it will survive contact with operations
- You need a prototype running quickly in order to validate something
Scope
- Frontend implementation
- Prototype development
- Design system build
- Component design
- Design and code integration
- Quality and performance work
What you end up with
- Implemented frontend code
- A component library and design tokens
- Documented naming, states and responsive rules
- Design QA results and the fixes made
- Performance and accessibility measurements
How we work
- STEP 01
Compare what exists
We map the gap between Figma and the codebase — not just where they differ, but why they keep diverging.
- STEP 02
Agree the vocabulary
Design tokens, component granularity, naming, how state is held. Both sides end up describing the same units.
- STEP 03
Implement
We build to the agreed rules, keeping the work in a state a designer can review as it goes.
- STEP 04
Design QA and measurement
Before launch we check layout, missing states, accessibility and performance.
Duration and team
- Typical duration
- 1–4 months, depending on implementation scope and the state of the existing code
- Team
- One or two design engineers, with a UI/UX designer alongside when design is in scope.
Indicative pricing
- Prototype developmentAssumed size：3–6 weeks. Something running, for validationFrom ¥600,000
- Frontend implementationAssumed size：1–4 months. Screen implementation through design QAFrom ¥1,200,000
- Design system buildAssumed size：2–4 months. Token design through components and operating rulesFrom ¥1,500,000
※ These are indicative. The final figure follows a quote based on implementation scope, existing code and team.
※ Backend development and infrastructure are out of scope. We map them as dependencies.
Questions we get about this service
Yes. Depending on the project we cover prototypes, frontend engineering, component design, CMS integration and post-launch measurement.
Where backend or specialist infrastructure is involved, we work with your in-house team or an external partner.
Yes. Beyond the design files we share the specification, states, responsive behaviour, accessibility and the thinking behind the components.
Where useful, we also take part in implementation review and design QA.
Not necessarily a large one. We look at the size of the product, how often it changes, how many people work on it and where effort is being duplicated, then design the minimum that's actually needed.
For something small, starting with basic tokens, the key components and a few operating rules is usually the right move.
Yes. We review how it's used, where it duplicates itself, where it has drifted from the code, how much effort it takes to run and how accessible it is, then set out what to fix and in what order.
We align component structure, naming, design tokens, states and responsive rules to give designers and engineers a shared language.
Where needed, we go as far as design-to-code integration and implementation review.