What Does a UX Portfolio Website Actually Need?

A UX portfolio needs case studies that show process, not just final screens, plus two things a generic portfolio template doesn't handle automatically: a way to gate a case study built on confidential (NDA) client work, and a way to show a live, interactive prototype instead of static images. The first is a judgment call about what to publish; the second two are mechanical, and every major builder documents a different way to do them. This guide covers what a UX case study needs to include, then how Webflow, Squarespace, Framer, and Figma actually document password-gating a page and embedding a working prototype — sourced from each vendor's own pages, checked September 2026.

What should a UX case study actually include?

A hiring manager or client reading a UX case study is evaluating how you think, not just what you shipped. That's a different job than a visual portfolio, where the final screen is the whole story. A case study earns its place by showing:

• The problem, stated in one or two sentences before any visuals — what was broken, unclear, or missing, and for whom.
• Your process, at whatever level of detail the work actually had: research, sketches, wireframes, iterations you rejected and why. Screenshots of a polished final screen with no visible thinking behind them read as a highlight reel, not a case study.
• Constraints, named honestly — a tight deadline, a legacy codebase, a stakeholder disagreement you had to resolve. This is often the most credible part of a case study, and the easiest to leave out.
• The outcome, described concretely where you can (what changed, what you measured) and honestly where you can't (a metric you don't have permission to share, or one that was never tracked).

None of that is a builder feature — it's writing and editing work you do regardless of platform. Where the platform actually matters is the two problems below.

How do I handle NDA or confidential client work in a public portfolio?

Two separate approaches solve this, and they aren't mutually exclusive:

1. Write around the confidential parts. Describe the process and your reasoning without naming the client, showing proprietary data, or including screens covered by an NDA. This works for the sections of a case study about your approach and what you learned, which usually don't require the confidential material anyway.
2. Gate the page or the prototype itself, and share access only with someone who has a legitimate reason to see the real work — a specific hiring manager, for instance. This is where password protection and controlled-access sharing come in, covered next.

Neither approach is a substitute for actually checking your NDA or client agreement before publishing anything — a portfolio's password page is not a legal opinion about what you're allowed to share.

How do I password-protect a single case study instead of my whole site?

This differs by builder, and the differences are worth knowing before you build around an assumption.

Webflow protects at the page level directly. Its help center: "You can set unique passwords on each site page. This is useful if you want to password protect pages to share with clients or a specific audience (e.g., internal documentation, sensitive client prototypes, etc.)" (Webflow Help Center, "Password protect your site or web pages", checked September 2026). To set it: open the page's settings in the Pages panel, toggle on Password protection, set a password, save, and publish. One requirement to plan around: "You'll need to add a Site plan in order to unlock password protection on pages and folders" — it isn't available on the free Starter plan.

Squarespace also protects individual pages, including a portfolio page specifically. Its help center: "Passwords are case-sensitive and must be 30 characters or fewer" (Squarespace, "Page passwords", checked September 2026). One behavior matters if your case studies live under a portfolio page: "When you password-protect a collection page, such as blog pages, calendar pages (or event pages on 7.0), portfolio pages, or store pages, it also password-protects the page's individual collection items" — so locking the parent portfolio page locks every project under it, not just one. If you only want to gate a single NDA case study, password-protect that project page directly instead of the whole portfolio. Squarespace is also explicit about a real limit: "Everyone uses the same password to access a password-protected page. It's not possible to create unique passwords for different people" — this is a shared gate, not per-viewer access control.

Framer works differently again: its built-in password protection covers the whole site, not one page. Framer's Academy says it "places one shared password in front of the site," enabled from the general tab of project settings (Framer Academy, "Password-protect your site in Framer"). There's no first-party per-page password in Framer's own documentation the way Webflow and Squarespace offer — if a project needs one case study gated while the rest of the portfolio stays public, that's a real limit to plan around rather than something Framer's own settings solve directly.

How do I embed a live Figma prototype instead of screenshots?

For a UX case study specifically, an embedded interactive prototype is often more convincing than static screens, because a reviewer can click through the actual flow. Figma's own help center gives the mechanism directly: open the file, click Present to enter presentation view, select a flow, click Share prototype in the toolbar, then "Click the Get embed code link to open the embed code window," copy it, and "paste the embed code in your application of choice" (Figma Help Center, "Embed files and prototypes", checked September 2026). The result is a standard iframe you can drop into any page that accepts embedded HTML — a case study page on nearly any builder.

Two access details matter before you embed one into an NDA-sensitive case study:

• Who can view the embed depends on the file's own sharing settings, not the embed itself. Figma's help center notes that "if the file is only shared with members of your organization, they must be logged in to view the embed" (Figma Help Center, "Embed files and prototypes") — so an embed of a file shared only within your old employer's organization won't work for an outside viewer at all, regardless of what your portfolio page shows around it.
• Figma's own audience controls can restrict who sees the design without your site's password doing the work. Figma's sharing documentation describes an "Only invited people" audience option, where "Only those directly invited to the file can access it" (Figma Help Center, "Share files and prototypes", checked September 2026). On a paid Figma plan, additional link controls are available too — Figma's help center states that on a paid plan "you'll have access to additional sharing features" including the ability to "password protect files."

One limitation Figma documents for its app integrations: "it's not possible to add or use these embeds within a native or desktop application. You can only add and use embeds in the browser-based version of these applications" (Figma Help Center, "Embed files and prototypes"). That caution is about embeds inside tools like documentation apps; on a portfolio site, reviewers open the page in a browser, which is where the embed works.

Do I need to build a real prototype for every case study?

No — an embedded Figma prototype is one option for showing interaction, not a requirement for every project. A case study built around a completed, shipped product might rely on a short screen recording or a sequence of annotated screenshots instead, especially if the live Figma file no longer exists or belongs to a former employer's workspace you no longer have access to. Reserve the live embed for work where the interaction itself — a transition, a gesture, a conditional flow — is part of what you're demonstrating, and use static walkthroughs everywhere else.

Where does Figment fit in?

Figment publishes a website from a Figma design through its Figma plugin, which fits the visual side of a UX portfolio — laying out case study pages, image galleries, and process diagrams directly in Figma before publishing. It has no built-in password-protection feature or NDA-gating mechanism of its own, so a case study that needs a password gate would rely on a separate access-control layer rather than a setting inside Figment. Our Figma portfolio templates guide covers ready-made Figma files worth starting from if you want a design-first structure to adapt into case studies; if a Framer or Webflow project fits your NDA and prototype-embedding needs better, our Framer portfolio guide and Squarespace portfolio guide cover the CMS and page-password mechanics for those platforms in full.

Bottom line: A UX portfolio's real work — clear problem statements, visible process, honest constraints — doesn't depend on which builder you use. What does depend on the builder is whether you can gate one specific case study (Webflow and Squarespace can do this at the page level; Framer's own password protection covers the whole site) and whether you can embed a live, clickable Figma prototype (any builder that accepts an iframe can, but the file's own Figma sharing settings — not your site's password — control who can actually view it).