We design in Figma and build what we design
The same team draws the screens and writes the code, so the handoff is a conversation rather than a document. If you already have a Figma file, we can pick it up.
How we work in Figma
We build design systems in Figma rather than folders of pictures. Colors, type, and spacing live as variables and styles. Buttons, cards, and form fields live as components with their states drawn. Changing a brand color becomes one edit instead of forty.
We also annotate accessibility in the file itself. Which contrast pairs pass, what the focus order through a form should be, and what a screen reader should announce for an icon-only button. Deciding that in the design file costs minutes. Discovering it in code review costs a sprint.
Component libraries
A shared set of components with variants for every state, so pages get assembled rather than redrawn and everything stays consistent as your site grows.
Prototypes for the decisions worth testing
Clickable flows we can put in front of real users before anything gets built, which is a far cheaper place to find out that a navigation idea does not work.
Review in one place
You comment directly on the design instead of marking up a PDF in an email chain. Feedback stays attached to the thing it refers to.
Handoff into code
Spacing, tokens, and assets pulled straight from the file, mapped onto the Tailwind variables the site is actually built with, so the design system and the code stay the same system.
What Figma is good for, and where it misleads
Good for: agreeing before anyone builds
Changing a layout in Figma takes an hour. Changing it after it is coded, tested, and populated with content takes a great deal longer.
Good for: keeping a system honest
When components and variables are the only source of styles, drift stops. The fifth person to add a page cannot invent a sixth shade of blue.
Misleading: the happy path only
A polished mockup shows short names, three items, and perfect photos. The real screen has an empty state, an error, a loading moment, and a product title that runs to four lines. We draw those, because otherwise a developer invents them.
Misleading: a prototype is not a working thing
Prototypes are excellent for testing a flow and useless for judging speed, keyboard behaviour, or how something feels on a three-year-old phone. Do not sign off on performance from a prototype.
Misleading: files without a system
Most Figma files we inherit are a canvas of loose frames with no components and no variables. That is fine as a starting point, and it is worth knowing that structuring it is real work rather than tidying.
The design tools we work in
Figma for interface and system design, Illustrator for vector and print, Photoshop for imagery, and Canva for the templates we hand to your team.
Questions we get about this
- Can you work from a Figma file we already have?
-
Yes, and we often do. We start by reviewing how it is put together, because a file built on components and variables is much cheaper to build from than a canvas of loose frames.
We will also tell you what is missing before we quote. Empty states, error states, loading, long content, and mobile layouts are the four things absent from almost every design file we receive, and a developer will otherwise invent them.
- Do you design and build, or just design?
-
Usually both, and that is where the work is strongest. We can also deliver design files for your own developer to build, with the documentation they will need.
- What do I actually receive at the end?
-
Logo files in the formats you will need, your color and type definitions, and a brand guide. See "What you walk away with" above for the full list.
- Will my new brand be accessible?
-
Yes. We check color combinations for contrast and choose type that stays readable. Accessibility is part of the brief, so your brand works for everyone who encounters it.
Have designs waiting for someone to build them?
Send the file. A free consultation will tell you whether it is ready to build, what is missing, and what we would want to draw before anyone opens a code editor.