The wireframes get a face
This is the fifth step of how we run a Magento project. We take the layouts from the objective phase and turn them into the actual visual design: a design system, page-level mockups, the components, and notes on how things move. What comes out is production-ready Figma your developers build against.
The look, made buildable
The wireframes settled how the store works. This phase settles how it looks and feels, and gets it into a state engineers can build from without guessing. We design every page at full fidelity, define the reusable parts, and write down the small interactions that make a store feel finished rather than thrown together off a template.
The aim is a set of files where the design decisions are already made, so they do not get reopened and re-argued in the middle of development.
What UI design covers
Usually three to five weeks, led by the design team. These are the pieces.
A design system
Colours, type, spacing, button states and form patterns, all written down as design tokens. That way nobody is debating whether something should be 14 or 16 pixels during development.
Page mockups
Every page in your sitemap drawn at high fidelity across mobile, tablet and desktop, annotated so engineering knows exactly how to build each one.
A component library
Buttons, cards, headers, modals and forms built as Figma components with their variants. Engineering treats them as the source of truth.
Motion and interaction
Hover, focus, loading and transitions written up as motion specs, so the finished store behaves the way the design intended.
What you sign off at the end of Phase 5
You get the design system with its tokens, type scale, spacing, colours and components; the full set of page mockups across every breakpoint and state; the reusable component library in Figma; and the motion specs for hover, focus, loading and transitions.
It is all in Figma and you own it. If you bring in another designer or agency down the line, they can pick it straight up.
Common questions about this step
Do you design in Figma?
Yes. Everything is delivered as Figma files you own, so a future agency or your own designer can pick them up.
How many revision rounds?
Two structured rounds at the design-system stage and three at the page-mockup stage. We keep the feedback loops tight so it does not turn into endless tweaking.
Can we use our existing brand guidelines?
Yes. We extend them into a digital design system tuned for Magento. If you do not have brand guidelines, we will build them.
Do you handle illustration and icons?
Yes. Custom illustrations and bespoke icon sets are part of this phase if your brand needs them.
Want the design done right before dev
Tell us about your store and we will set up a design session. You will come away with a clear creative direction and a timeline.