Figma to Next.js: How a Proper Website Actually Gets Built
Most people hiring a web agency have no idea what they're actually paying for. They see a price, they see a portfolio, and they sign. Six weeks later they get a site that looks close to what they approved in the mockup and slightly off in every way that matters, fonts a bit wrong, spacing inconsistent, animations janky, mobile layout clearly an afterthought.
This happens because most web projects involve a handoff. A designer does their part, hands a Figma file to a developer, and the developer interprets it. Nobody owns the result end to end. The gap between design and code is where quality goes to die.
Here's how a project should actually work, from first conversation to launch.
Discovery comes before design
Before anything is opened in Figma, you need a shared definition of what success looks like. That means understanding who you're trying to reach, what action you want them to take, and what's currently getting in the way. It means looking at what competitors are doing, not to copy it, but to understand the visual and structural conventions of your space and decide which ones to follow and which to break.
It also means making decisions about content before design starts. The single biggest reason web projects stall is that design gets finalized and then the client doesn't have the copy to fill it. A good brief forces those conversations early, when changing course is still cheap.
Design in Figma: all of it, before any code
The design phase doesn't end when the homepage looks good. It ends when every page, every component state, every responsive breakpoint, and every edge case has been resolved in Figma. That means the empty state, the error state, the mobile navigation, the 404 page, the form validation feedback, all of it.
This sounds like more work upfront, and it is. But fixing something in Figma takes ten minutes. Fixing the same thing in code takes an hour and creates the risk of breaking something adjacent.
A proper design system gets built here too: spacing tokens, a type scale, a color palette with semantic meaning, and a component library that maps directly to what gets built in code. When the developer opens the Figma file, there should be nothing ambiguous. Every decision should already be made.
Next.js is the right tool: here's why
There are a lot of ways to build a website. WordPress is still the most common. Webflow is popular for agencies who want to ship fast. Squarespace exists for people who don't want to think about it.
For companies that need a site that performs, meaning it loads instantly, ranks well, scales cleanly, and can grow into a full web application if needed, Next.js is the right choice.
Server-side rendering means your content is available to search engine crawlers immediately, without waiting for JavaScript to execute. Static generation means frequently-visited pages are pre-built and served from a CDN, which is why Next.js sites routinely hit sub-second load times. The App Router in Next.js 15 makes it straightforward to mix static and dynamic content on the same page, which matters for sites with any kind of real-time data.
TypeScript keeps the codebase maintainable over time, whoever inherits the project in two years can understand it. Tailwind CSS keeps styles co-located with components and eliminates the bloated, conflicting stylesheets that plague older projects.
None of this is magic. It's a well-chosen foundation built on by people who know how to use it.
Performance is built in, not bolted on
A Lighthouse score of 100 isn't a finishing move. It's the result of decisions made throughout the project. Images optimized and served in modern formats. Fonts loaded without layout shift. No render-blocking scripts. A server close to your users. Semantic HTML that tells browsers and crawlers exactly what kind of content each element contains.
These things matter because Core Web Vitals are a ranking signal. A slow site doesn't just frustrate visitors, it ranks lower. And a site that ranks lower gets fewer visitors, who become fewer leads, who become fewer clients.
The performance conversation and the SEO conversation are the same conversation.
Launch isn't the end
Deploying to Vercel takes about four minutes. What comes after that matters more than most agencies acknowledge. Connecting to Google Search Console. Verifying structured data markup. Setting up analytics that measure actual business outcomes, not just pageviews. Planning a content strategy so the site earns authority over time rather than sitting static.
The best websites aren't finished at launch. They're the beginning of something that compounds.
D&A builds Figma-to-Next.js websites for companies that want to show up in search and convert when they get there. Based in Lugano — working across Europe and North America.