Tom the Designer
A designer’s portfolio built pixel-accurate from his own Figma file in Elementor, with type scale and spacing treated as non-negotiable.
The brief
Tom needed his portfolio to look exactly as he had drawn it. Not close, not “within a page-builder's limits” — the same. For a designer the site is the work sample, so a sloppy build costs him actual jobs.
The second requirement was quieter but just as important: adding a new project later should take him ten minutes, not an email to me. So the case-study layout had to be a repeatable template, not four hand-built pages.
The problem
Exactness
A designer reads a 2px error the way a musician hears a wrong note. Every heading, gap and line-height had to match the file rather than approximate it.
Repeatability
New projects get added by him, forever. That meant one flexible project template with global styles, not a page duplicated and edited by hand each time.
Restraint
A portfolio should get out of the way of the work. No decorative animation, no plugin doing something clever — just images that load fast and type that reads.
How I built it
01 · Set the system before the pages
Global colours, global type, container presets and a spacing scale taken straight from the Figma file — so every page after the first one inherited the design rather than re-implementing it.
02 · Build to the design, ask before improvising
Every section checked against the file at desktop, tablet and phone. Where the design didn't specify a breakpoint I proposed one and got it signed off instead of guessing quietly.
03 · Make the work the fastest thing on the page
For a portfolio the images are the product, so they load first and load light: modern formats, exact sizes per breakpoint, nothing decorative competing for bandwidth.
04 · Hand it over properly
Named containers, a short recorded walkthrough of the sections they'd actually edit, and two weeks of cover afterwards for anything that came up.
Building straight from a designer’s own file is the hardest version of a Figma to Elementor conversion, because the client can see every pixel you got wrong. The method behind it is written up in full in how to convert a Figma design to Elementor.