Sitemap

How I used Figma Sites to rethink my portfolio website

and why I went back to code

4 min readMay 31, 2025

--

Press enter or click to view image in full size

I’m always building on and improving my portfolio website. Mostly just for me. It’s one of the few spaces where I get to play, try things out, and make something that actually reflects how I work, not just what I’ve worked on.

Like always, I started in Figma. I’ve designed plenty of sites this way, but this time, I had a new thought: what if I just built it here too?

Figma Sites had just launched; it looked slick, and honestly? The idea of skipping code completely was tempting. I figured that if I could stay in a design tool and still get something live, perhaps I could finally stop battling with all the tiny layout bugs and just focus on what I enjoy: making it look good and feel like me. And yes, I read the warnings; it’s still in Beta, they need to fix loads of stuff, etc., etc., etc. Yeah, yeah, yeah. My personal theory was that if I worked on it now, then once it was ‘fixed’, I could publish.

So I gave it a go. And spent days (actual days) trying to get it to work the way I wanted. Wasn’t this a tool meant to make building sites almost instant? I mean, my work was already IN Figma, the demos made it look as simple as a click.

Every time I made progress, I’d hit another weird bug or limitation, don’t even get me started on mobile overrides or typography styles overrides. It wasn’t broken exactly, just… really fiddly. I found myself making endless tweaks to get things behaving sort of how they should, then I was met with the bugs, some of which couldn’t even be fixed, and others I’m still unsure how I fixed. I had moments where I felt reminded of the Microsoft Word memes, wondering to myself, how the hell did I end up here, I can code ffs.

Press enter or click to view image in full size

But weirdly, despite what you might be thinking at this point, I didn’t hate it. Because, for the first time in ages, I wasn’t thinking in terms of static pages or technical constraints. I was thinking interactively.

Instead of “can I even do this in CSS?”, it was “what should this feel like?” Instead of “how do I wire that up?”, it was “what happens if I try this?”

It removed the ceiling of my own technical knowledge and gave me space to think more ambitiously, even if half of it broke.

Eventually, though, I hit a wall. After weeks of wrestling with Figma Sites, I decided to return to coding. Not out of defeat, but clarity. I’d figured out exactly what I wanted the site to do, and now I just needed the control to make it happen.

And that’s where things clicked.

With the help of AI (which, by the way, is basically my new dev pair), I managed to recreate things in code that took hours in Figma, in about 30 minutes or less I made sweeping changes to my website, without having to wait for Figma to maybe make their product better. The difference wasn’t just speed. It was precision. I wasn’t fighting the tool anymore. I was finally building the thing that had lived in my head for weeks.

So what did I learn?

Tools like Figma Sites, Framer, and others are amazing for expanding our thinking. They let us prototype beyond our limitations. They help us dream a bit bigger.

But there’s still something to be said for knowing what’s going on behind the curtain. Code provides us with robustness, control, and the ability to scale effectively. And honestly, if we’re not careful, these visual tools can start to feel a bit Dreamweaver 2.0. Beautiful on the surface, chaotic underneath.

I’m probably biased. I like having both the design freedom and the technical grounding. However, I think the combination is where the magic lies. Dream in Figma. Build with code. Use tools to open up new ideas, but don’t lose sight of how things actually work.

That’s how we create things that aren’t just pretty, but also solid, maintainable, and our own.

My portfolio website is still a work in progress, but I’m excited for what’s to come.

--

--

Responses (1)