butchorpeza.comLive websites drift from their Figma designs when the design leaves decisions open: missing screen sizes, fake content and undefined states. A shared style system, three designed breakpoints, real content, Figma auto layout and side-by-side screenshots before launch keep the build close to the mockup.
- Most design drift comes from undecided details, not bad code.
- Design long text, missing images and hover states too.
- Define colors, type and spacing once as styles.
- Design desktop, tablet and phone.
- Compare screenshots with the mockup before showing the client.
Who this is for
Designers handing off to developers, and developers building from Figma.
Why I wrote it
I work in both roles and see the same handoff gaps on every project.
What you will get
A handoff checklist that keeps live sites close to the design.
Table of contents
- Introduction
- The familiar disappointment
- It's usually not the code
- Design the Boring States Too
- Mockups show the happy path
- Guesses add up
- My Handoff Checklist
- Four habits that prevent drift
- Screenshot Before You Ship
- Ten minutes that catch most problems
- Fix before anyone else sees it
- Building in WordPress Without Drift
- Set global styles first
- Build sections, not pages
- Check each breakpoint while you build
- Keeping Design and Site in Sync After Launch
- Update the design file too
- Document the decisions
- Review screenshots quarterly
- Conclusion
- Consistency builds trust
Introduction
The familiar disappointment
The Figma file looks perfect. Then the website goes live and something is off: wider spacing, heavier fonts, and a layout that falls apart on phones.
It's usually not the code
After working as both designer and developer, I've learned that most of this comes from decisions that were never made in the design file.
Design the Boring States Too
Mockups show the happy path
Mockups usually show perfect text length, perfect images and desktop width. Real websites have long names, missing photos, tablets and hover states.
Guesses add up
If the design doesn't show those states, the developer guesses, and the guesses add up.
My Handoff Checklist
Four habits that prevent drift
- A small set of styles. Colors, font sizes and spacing defined once.
- Three breakpoints. Desktop, tablet and phone actually designed.
- Real content. Real headlines and photos instead of lorem ipsum.
- Auto layout in Figma. If it resizes in Figma, it translates cleanly to Elementor or CSS.
Survey and data source: W3Techs CMS usage statistics, October 2026
Screenshot Before You Ship
Ten minutes that catch most problems
Before showing a client a live page, I screenshot it at desktop, tablet and phone sizes and place it next to the mockup.
Fix before anyone else sees it
It takes about ten minutes and catches most issues before the client does.
Building in WordPress Without Drift
Set global styles first
Before building any page, set the site's global colors and fonts in Elementor or the theme. Every widget then inherits the same values, and changes happen in one place.
Build sections, not pages
Headers, hero blocks, cards and footers repeat across pages. Building them once as reusable sections keeps spacing and type identical everywhere.
Check each breakpoint while you build
Switch to tablet and phone view after every section, not at the end. Fixing one section is quick. Fixing a whole site at once is not.
Keeping Design and Site in Sync After Launch
Update the design file too
When the client asks for a change on the live site, update the Figma file as well. Otherwise the next redesign starts from an outdated source.
Document the decisions
A short note on spacing rules, button styles and image sizes helps anyone who edits the site later stay consistent.
Review screenshots quarterly
Every few months, compare key pages with the design. Small edits add up, and a quick review keeps the site looking intentional.
| Area | Common gap | What to prepare in Figma |
|---|---|---|
| Styles | Colors and sizes picked per frame | Shared color, text and spacing styles |
| Screens | Desktop only | Desktop, tablet and phone frames |
| Content | Lorem ipsum and perfect photos | Real text lengths and real images |
| States | Only the default look | Hover, empty, error and long-text states |
| Layout | Free-placed elements | Auto layout for resizing |
The long-name problem
A team page is designed with short names like "Ana Cruz". The real list includes "Maria Theresa Villanueva-Santos", which breaks onto three lines on mobile. Designing that long case in Figma first would have saved a round of fixes.
Conclusion
Consistency builds trust
A site that matches its design feels trustworthy, even if visitors can't say why. That care often separates a site that converts from one that just exists.
References
FAQ
Why doesn't my website look like the Figma design?
Usually because the design didn't define every screen size, content length or state, so details were decided during the build.
How many breakpoints should a design have?
At least three: desktop, tablet and phone.
Does Figma auto layout help developers?
Yes. It describes how elements resize and stack, which maps closely to CSS flexbox and page builders like Elementor.
Who is Butch Orpeza?
Butch Orpeza is a Philippines-based creative technologist: a web designer, developer, 3D artist and AI automation specialist. He builds WordPress and Elementor websites, creates photoreal 3D product images, and sets up AI workflows that let teams hand repetitive work to AI agents.
Leave a comment
No comments yet. Be the first to share your thoughts.