Example package
Marketing page from Figma
One marketing or landing page built to match the design.
You get
- Page matching desktop, tablet and phone
- Editable content where the platform allows
- Accessibility and speed checks
- A preview link before launch
Sound familiar?
What we hear from businesses before a project like this starts.
- We paid for a beautiful design and the built site looks nothing like it.
- Our designer handed over Figma files and we don't have a developer.
- The desktop design is done, but nobody designed the mobile version.
- We need it in Webflow (or Shopify, or WordPress) so marketing can edit it.
- The page builder version is slow and impossible to change.
What buyers usually need
The requests that come up most often for this kind of work, and what each one takes to work properly.
01
Pixel-accurate marketing pages in React
Production-quality components, matching the design at every breakpoint.
02
A Figma page recreated in a website builder
Built in Squarespace, Wix or Webflow as accurately as the builder allows, with the limits explained up front.
03
A Figma redesign turned into a Shopify theme
Sections and templates built into the theme so the store team can edit them.
04
Hand-written HTML, CSS and JavaScript
Clean, fast pages without a page builder, for a site that has to load quickly.
05
Mobile versions where only desktop was designed
Sensible mobile layouts derived from the design, shown to you before building.
06
Interactions and animations
Hover states, transitions and scroll effects from the prototype, kept light.
Tools that come up most: Figma, HTML, CSS, JavaScript, React, Next.js, Tailwind, Webflow, Shopify, WordPress, Squarespace, Wix.
What you get
Concrete pieces, each one something you can open and check when it's done.
Responsive pages
Pages that match the design on desktop, tablet and phone.
HTML, CSS, TailwindReact and Next.js components
Reusable components built from the design system in Figma.
React, Next.js, TypeScriptBuilder builds
The design built inside Webflow, Shopify, WordPress, Squarespace or Wix with editable content.
Webflow, Shopify sections, WordPress blocksAccessibility
Headings, contrast, alt text and keyboard navigation done properly.
WCAG checksPerformance
Optimised images and fonts, and no unnecessary scripts.
LighthouseHandover
A component list and notes on how to add new pages.
DocumentationTypical projects
Example packages to show the shape of the work. These are examples, not past clients; yours gets its own written scope.
Example package
React components from a design system
Your Figma components and pages built as React or Next.js code.
You get
- Components matching the design system
- Pages assembled from the components
- Responsive at every breakpoint
- Source code in your repository
Example package
Figma to Shopify theme
A Figma redesign built into your Shopify theme as editable sections.
You get
- Sections and templates from the design
- Editable in the theme editor
- Built on a copy, published on approval
- Mobile and desktop checked
Example package
Figma to Webflow or WordPress
A multi-page design built in Webflow or WordPress for your team to edit.
You get
- Pages and CMS collections set up
- Reusable components or blocks
- Editing guide for your team
- Launch checklist completed
Example projects
Figma to code: marketing site for a field-reporting SaaS
Fieldnote's designer handed over a Figma file for a new marketing site, and the team needed it built pixel-accurate, fast and easy to edit. We turned the design into a responsive site with reusable components, matching the spacing, type scale and breakpoints from the Figma file. It is wired to their CMS so marketing can edit copy and add pages without a developer.
- Pixel-accurate build from Figma: desktop, tablet and mobile breakpoints
- Reusable component library (hero, feature grid, logo strip, pricing, FAQ)
- CMS integration so marketing can edit copy and publish pages
- 95+ Lighthouse scores, accessibility pass, SEO metadata and sitemap
Next.js, React, Tailwind CSS, headless CMS, Vercel
iOS and Android app for a dog-walking company
A local dog-walking company was booking walks by text and sending updates as camera-roll photos. We built a client app for iOS and Android, plus a walker app and an admin panel. Owners book walks or recurring schedules with their usual walker, follow the walk live on a map, and get a report afterwards with photos, a checklist and a note from the walker. Payments, tips and cancellations run through the app.
- Client app: booking, recurring schedules, live walk tracking, walk reports, payments
- Walker app: day schedule, start/stop with GPS tracking, photo and checklist report
- Admin panel: walkers, service areas, pricing, payouts
- Push notifications for walk start, end and report
React Native (Expo), TypeScript, Node.js API, PostgreSQL, Stripe, Mapbox, push notifications
Sample build
A working example we built to show this kind of work. It is a demonstration, not a client project.
Sample build
Responsive landing hero + features from a design spec
A landing-page hero and a six-card features section built from a written design spec with color and type tokens, a spacing scale and three breakpoints. Two columns on desktop, stacked on tablet, single column with a collapsed nav on mobile.
HTML5, CSS (custom properties, grid, media queries), Google Fonts
About the screenshots: Built from a written design spec, shown on desktop and mobile.
How we approach it
The habits that keep this kind of project from going wrong.
1
Check the design before scoping
We look through the Figma file for missing states, mobile layouts and fonts, and list them in the scope.
2
Match it, then check it
Built pages are compared against the design at each breakpoint before you see them.
3
Hand-written code
Clean code you can maintain, not generated output pasted in.
4
Editable where it matters
Text and images your team will change are editable without a developer.
How we work
You know what you're getting before work begins, and you see it working at every milestone.
You describe it
Tell us what you need in your own words, and which tools you already use. A few lines is plenty to start.
A written scope
We reply with a short written scope: what gets built, what is out of scope, which accounts we need, and how we'll both know it works. You know what you're getting before work begins.
Milestones you review
The work is split into milestones. At each one you see it working in your own account and sign it off before we go on.
Handover and a 30-day fix window
You get the working system, its documentation and a walkthrough. If anything we built breaks in the next 30 days, we fix it at no charge.
What shapes the scope
- Number of pages and unique layouts
- Target platform
- Whether mobile layouts are designed
- Animations and interactions
Always included
- A written scope before work starts
- Milestones you review and sign off
- Documentation and a walkthrough at handover
- A 30-day window for fixes, at no charge
Pushbuild has built software for businesses since 2010, for more than 40 clients. Every project is led by a former public-company CTO, from Groton, Massachusetts. See products we've built.
Questions people ask first
Does the design need to be finished?
Mostly. Missing mobile layouts or states are fine; we propose them and show you before building.
Will it look exactly like the design?
In code, yes, at the breakpoints designed. In website builders, some details are limited by the builder; we list any differences in the scope.
Who owns the code and accounts?
You do. Code goes into a repository you own, and builder sites are in your account.
Do you design too?
Our focus is building designs you already have. Small design gaps, like a mobile layout, we fill in and show you first.
How long does it take?
A single page usually takes a few days; a multi-page site one to three weeks from the signed scope.
What happens after launch?
For 30 days we fix anything we built that does not work as the scope describes, at no charge.
Tell us what you need built.
Email a few lines about what you want and which tools you use, or call. We reply with questions or a written scope.
hello@pushbuild.com