1:1 with your Figma file
+ tablet, mobile, hover, motion
Booking November
Porto Alegre · UTC−3

Your Figma file,
built as drawn —
plus the parts
it forgot.

I build your agency’s Figma designs in Webflow, under your name — then keep the site and design system in sync after launch.

3–5 days
Typical landing-page build
Client-First
Classes your team can edit
From $800
Per landing page, fixed quote
UTC−3
Overlaps US East Coast hours
How I build

One detail, start to finish.

What happens between Figma and Webflow, shown on one real build: Frame & Form.

In the file
Not in the file — resolved in the build
01 · Specified
Three widths, nothing in between

The Figma decision

Frame & Form’s file shows the layout at exactly three widths: 1280, 800 and 375, each with a 15px edge. Real screens land everywhere in between, and past the widest one.

02 · Built
.padding-global
padding 0 0.9375rem · 15px, as drawn
.container-large
width 100%
max-width 120rem
margin 0 auto
One rule for every page

The implementation

One container for every page: fluid width, the same side padding everywhere, and every section lining up on the same edges as you move between pages.

03 · Resolved
Capped at 1920, centred

The detail nobody specified

The file stops at 1280. Plenty of people browse on large monitors, so the content grows with the screen up to 1920px, then stops and centres instead of stretching edge to edge.

Selected builds

Two builds, side by side
with their Figma files.

Frame & Form studio portfolio built in Webflow
3 breakpoints + hover states — as drawn
Scroll + load motion — not in the file

Frame & Form

Studio portfolio
Build
Interactions
Client-First
View case →
Aetherfield SaaS website built in Webflow
6 pages × 3 breakpoints + hover — as drawn
Journal + Jobs as CMS collections

Aetherfield

SaaS website with CMS
Build
CMS
Motion
View case
→

Watch a build

One Figma file rebuilt in Webflow, narrated start to finish.

Handover

Built to be
handed over.

Your file’s structure becomes the site’s structure. Same variables, components and spacing, so your team edits Webflow the way they edit Figma.

What carries over · Figma → Webflow
Variables & modes
Webflow variables, same names and modes
Components & variants
Webflow components and is- combo classes
Auto Layout
Flex and grid, gaps from the same spacing scale
Text styles
Tag styles and utility classes
Layer names
Client-First classes your team can read
Beyond the file

Most files stop at desktop.
Builds don’t.

I flag each gap in the quote. You approve. I design it in your style before building, priced per item.

Tablet & mobile

Tablet and phone layouts in your type and spacing.

Hover & focus

Every link and button, plus empty and error states.

Motion

Load, scroll and hover interactions.

Accessibility & performance

Checked against WCAG and Lighthouse before handover.

Pricing

Fixed prices.
You know the number before I start.

Landing page
From $800
  • Built from your Figma file
  • Desktop, tablet and mobile
  • Hover, focus and press states
Landing page + motion
From $1,200
  • Everything in Landing page
  • Scroll reveals and staggered entrances
  • Page transitions
Multi-page site
Quote in 48h
  • Fixed price per project
  • Priced on pages and complexity
  • Scoped from your Figma file

Every build: accessibility and performance checked before handover.

After launch: new pages designed in your system and your design system kept in sync — ask for a care plan.

1 round of revisions
Staging link from day 1, Loom updates as I build
Send your Figma file
→
About

I’m Rafael, a designer who builds,
so nothing gets lost in the build.

Product designer, building in Webflow. Before this, two years designing inside a shared design system at Dell. Based in Brazil, working async with agencies in the US, UK and Europe. Your name on the site, mine stays out of it.

Full background on LinkedIn ↗︎
FAQ

Questions agencies ask.

Is it really white-label?

–

Yes. I never contact your client, and my name isn’t on the site or in the code.

Who pays for the Webflow plan?

+

How do I pay?

+

How do revisions work?

+
Contact
Figma link → quote in 48h

Send your
Figma file.

Fixed quote within 48 hours, Monday to Friday. Async by default — happy to jump on a call if you prefer.

Motion?

I only use your details to reply. Privacy →

Got it. You'll have a fixed quote within 48 hours, Monday to Friday.
That didn't send. Email me at hello@rafaeldranoff.com instead.
✕