Design to Code
A design file shows one moment: one screen width, ideal content, no errors. A built page has to cope with a long German heading, an empty list, a slow connection and a visitor using a keyboard. Turning one into the other is a craft of its own.
Designers and agencies send us Figma files; we return working code on the platform they need. Where the design and the platform disagree, we say so before building rather than after.
Choose where the design is going
Shops and email
Which target suits the design
The same file can become very different things. The right target depends on who edits the result afterwards.
WordPress
For a marketing site your own team will edit. Built as a custom theme with blocks, so editors change text and images without disturbing the layout.
Plain HTML and CSS
For pages another developer will integrate, or a site that rarely changes. Clean files, no framework to keep up to date.
React, Vue or Nuxt
For an application or a front end that talks to an API. The design becomes a set of components that mirror the components in the file.
Webflow or Squarespace
For teams who want to edit visually and avoid hosting. Each platform has limits; we list what the design asks for that the platform cannot do.
Shopify or Magento
For shops. The design becomes a theme with settings, so the merchant can rearrange sections and collections without a developer.
Flutter or email
Flutter for one app on both stores from a single codebase. Email for newsletters and transactional mail, built with the tables and inline styles mail programs still require.
What makes a file quick to build
None of this is required. Each item present shortens the work and the bill.
- Frames built with auto layout rather than fixed positions
- Colours and type saved as styles or variables
- Repeated elements made into components
- A design for at least one narrow and one wide screen
- Hover, focus, error and empty states shown
- Real text lengths, including the awkward ones
- Images and icons marked for export
- A note of which fonts are licensed for web use
Asked by designers
Will the result match the design exactly?
At the widths we agree, it will match closely, and we list any place it does not with the reason. Between those widths the layout adapts, which a static file cannot show.
Do you change the design?
No. If something cannot work as drawn, we describe the problem and suggest options. The decision is the designer's.
Can you work under our agency's name?
Yes. See the pages for agencies. We stay out of contact with your client unless you ask otherwise.
Do you work from Sketch, XD or Penpot files?
Yes, though Figma is what we see most. Send what you have and we will confirm.
Share the file and the target
A view-only link is enough, along with the platform you need and the date you need it. We reply within one business day.