From Figma to a Live Portfolio, Part 3: Shipping It (And Why Done Beats Perfect)

Part 3: from Figma to a live portfolio. Choosing a platform, designing with process, and why done beats perfect.

You’ve done the research. Now it’s time to build your design portfolio site and actually ship it. You’ve written the case studies. You have a visual direction and a clear sense of what your portfolio needs to communicate. Now you need to actually build and publish the thing.

This is Part 3 of the portfolio series. If you’re starting here, go back to Part 1 (what to include) and Part 2 (writing case studies) first.

The Irony of Building a Portfolio Right Now

Here’s something I find genuinely interesting about this moment: the same AI tools that are making people question whether designers are needed are also making it easier than ever for designers to build their own portfolios.

Vibe coding tools, no-code platforms, AI-assisted development, you have more options to build a design portfolio than at any point in history. But here’s the catch: the tools can build what you describe, but they can’t decide what should exist. The layout decisions, the information hierarchy, the responsive behavior, the interaction patterns, those are design decisions that need a designer’s brain.

So even the act of building your portfolio is a design exercise. The tool is just the tool.

How to Build a Design Portfolio Site

I’m deliberately not recommending a specific tool because the right choice depends on your situation. But here are the factors that actually matter:

How much control do you need?

If you want pixel-perfect control over every detail, you need either code (custom build) or a design-to-web tool that gives you fine-grained layout control. If you just need something clean and professional up quickly, a template-based platform works fine.

Can you maintain it?

The best portfolio is one you’ll actually update. If building it was so painful that you never want to touch it again, that’s a problem. Choose something you can realistically add new projects to without dreading it.

Do you need to show technical skills?

If part of your positioning is that you can build as well as design, like it is for me, a custom-coded portfolio demonstrates that. But only if you have the time. An imperfect portfolio that exists is infinitely more valuable. You can build a design portfolio site that’s good enough to launch and iterate on later than a custom-coded portfolio you’ll finish ”someday.”

Responsive is non-negotiable

According to StatCounter’s platform market share data, over half of web traffic is mobile. Whatever you choose, your portfolio needs to work on mobile. Recruiters and potential clients will look at it on their phones. If your case studies break on a small screen, that’s a design failure on your actual design portfolio, not a great look.

The Design Process (Yes, Your Portfolio Gets One Too)

Treat the portfolio build exactly like you’d treat a client project. This isn’t just good practice, it’s also a meta-demonstration of your skills. If your portfolio’s design process was thoughtful and structured, that comes through in the result.

Wireframe First

Before any visual design, lay out the structure. Gray boxes, no colors, no typography choices, just information hierarchy and layout. Which content goes where? How do the pages connect? How long is each case study page and how does someone navigate through it?

This is the UX phase of your portfolio. You’re solving structural problems before visual ones, the same separation you’d use on any project.

Then Apply the Visual Direction

Once the structure makes sense, layer in the UI. This is where the visual research from Part 1 comes in. Apply the color palette, typography, spacing, and visual personality to your wireframes.

Your portfolio’s visual design communicates what kind of designer you are before anyone reads a word. A clean, restrained design signals a different kind of thinking than a bold, experimental one. Make it intentional.

Mockup in Figma Before Building

Design the full portfolio in Figma before touching your build tool. Every page, every case study layout, every responsive breakpoint. This seems like extra work, but it saves enormous time during the build because you’re not making design decisions and technical decisions simultaneously.

It also gives you a reference to check against. When you’re deep in the build and things start drifting from the design, you can always go back to the Figma file and remember what it’s supposed to look like.

Building It

Start with the homepage, not a case study

The homepage has the most variety, navigation, project grid, intro section, footer. If you can get the homepage working, the case study pages mostly follow the same patterns. Getting the hardest page right first prevents discovering structural problems late.

Desktop first, then adapt

Get everything working and looking right on desktop, then adapt to tablet and mobile. Responsive design is important, but trying to design for all breakpoints simultaneously is a recipe for slow progress and frustration.

Animations: less is more

Subtle loading animations and hover states add polish. Heavy animations on case study pages can distract from the content. The case study writing should hold attention, if you need flashy animations to make it interesting, the writing might need more work.

The Hardest Part: Publishing It

At some point, you need to hit publish. And this is genuinely the hardest part because it will never feel ready.

You’ll look at it and think it’s not good enough. You’ll compare it to portfolios from designers with ten more years of experience. You’ll want to tweak one more thing, adjust one more margin, rewrite one more paragraph.

Here’s what I’ve learned: the imperfect portfolio that’s live gets you clients. The perfect portfolio that’s still in Figma gets you nothing.

Publish it. It doesn’t need to be perfect. It needs to exist. You can iterate after it’s live, and you will, because within a few months you’ll have grown enough that parts of it feel outdated already. That’s normal. That’s growth. The portfolio is a living thing, not a finished product. The goal is to build your design portfolio site once, then keep improving it.

After Publishing: The Portfolio Is Never Done

Some practical things to do once it’s live:

• Add new projects as you complete them. Set a reminder to update quarterly at minimum.
• Watch how people interact with it. Where do they click? How far do they scroll on case studies? This is UX research on your own product.
• Keep a running list of improvements. Don’t try to fix everything at once. Note what bugs you and batch the updates.
• Share it. Post it on social media. Include it in your email signature. Send it to people in your network. A portfolio only works if people see it.

The Bigger Picture

We’re in an interesting moment as designers. The tools are evolving fast, the line between design and development is blurring, and the question of what makes a designer valuable is being asked more loudly than ever.

I think the answer is exactly what a good portfolio demonstrates: clear thinking, intentional decisions, the ability to solve problems for real people, and a process that produces consistent results. Those skills don’t become less valuable because AI can write code or generate screens. They become more valuable, because they’re the thing that AI can’t replace.

Your portfolio isn’t just a showcase. It’s proof that you have something the tools don’t.

So build it. Ship it. Iterate on it. And then go get the work you want to do.