How to Build a UI/UX Portfolio With Figma

How to Build a UI/UX Portfolio With Figma (Step by Step)

Your portfolio is your most important design project. Recruiters and hiring managers often spend only a few minutes on it, so it has to show how you think, not just how your screens look. Figma is a good tool for this because you can design, prototype, and present everything in one place.

Here’s how to build a portfolio that gets you interviews.

1. Decide What Your Portfolio Needs to Say

Before opening Figma, answer three questions:

• Who is it for? Startups, agencies, product companies, or freelance clients each care about different things.

• What role do you want? UI designer, UX designer, product designer, or researcher.

• What’s your angle? One sentence, like “I design simple, accessible mobile experiences for fintech.”

This shapes which projects you include and how you describe them.

2. Choose 3 to 5 Strong Projects

Quality beats quantity. Three well-told case studies are better than ten shallow screenshots.

Good project types include:

• A real project from work or an internship

• A freelance or volunteer project

• A redesign of an existing app or website (clearly labeled as a concept)

• A self-initiated project that solves a real problem

Choose projects that show range: for example, one mobile app, one web product, and one project with heavy research.

3. Structure Each Case Study Around a Story

Hiring managers want to see your process and your decisions. A reliable structure:

1. Overview: project name, your role, timeline, tools, and team.

2. Problem: what needed solving, and for whom?

3. Research: interviews, surveys, competitor analysis, or usability findings. Keep it brief and show the insights.

4. Define: user personas, journey maps, or “How might we” statements.

5. Ideate: sketches, wireframes, and early explorations. Show the messy middle.

6. Design: high-fidelity screens, the design system, and key decisions with reasons.

7. Test and iterate: what changed after feedback, and why.

8. Outcome: metrics if you have them (conversion up 18%, task time down 30%), or what you learned.

Always explain why you made a choice, not just what you made.

4. Set Up Your Figma File

Organization makes the final result look professional.

• Create one Figma file for the portfolio, with separate pages: Cover, About, Case Study 1, Case Study 2, and so on.

• Use Frames for each screen or slide. Common sizes are 1440×1024 for desktop or 1920×1080 for a presentation style.

• Set up Styles and Variables early: colors, text styles, and spacing. This keeps everything consistent and saves hours.

• Use Auto Layout for cards, buttons, and sections so content resizes cleanly.

• Build Components for repeated elements like navigation bars, project cards, and tags.

• Name your layers. A tidy file signals a tidy designer, especially if someone inspects it.

5. Design the Portfolio Itself

Your portfolio is also a UI/UX project, so apply the same principles.

Typography: pick one or two fonts at most. Use clear hierarchy: large headings, comfortable body text (16px or larger), and generous line height.

Layout: use a grid (a 12-column grid works well for desktop), plenty of white space, and consistent margins.

Color: choose a restrained palette with one accent color. Make sure text has enough contrast to meet accessibility standards (WCAG AA).

Imagery: use high-quality mockups. Show your screens in context (on a device, in a browser) but don’t let the mockup overpower the work. Zoom in on interesting details.

Navigation: make it obvious. Visitors should reach your best project within one or two clicks.

6. Add Interactive Prototypes

This is where Figma stands out. Instead of only showing static screens:

• Build a clickable prototype of your key flow using Prototype mode.

• Use Smart Animate for smooth transitions between states.

• Add interactive components (like toggles or dropdowns) to demonstrate micro-interactions.

• Embed the prototype link in your case study so viewers can try it.

Keep prototypes focused on one core user flow. A short, polished flow beats a sprawling, buggy one.

7. Write Clear, Scannable Copy

Good design with poor writing still loses people. Tips:

• Lead each section with a one-line takeaway.

• Use short paragraphs, bullets, and bold key phrases.

• Avoid jargon without explanation.

• Be honest about your role. If it was a team project, say what you did.

• Include a short About section with a friendly photo, your background, and how to contact you.

8. Publish Your Portfolio

You have several options:

• Figma Sites: publish directly from Figma with no code. Fast and a good option if you want everything in one tool.

• Figma plus a site builder: tools like Framer, Webflow, or Squarespace let you design in Figma and publish a polished site.

• Share a Figma prototype link: the quickest option. Present it in Prototype mode with a clean start frame.

• Export a PDF: useful as a backup to attach to applications.

Whichever you pick, test it on desktop and mobile, and make sure links work without requiring a login.

9. Get Feedback and Iterate

Share your portfolio with designers, mentors, or communities (ADPList, Reddit’s design forums, Discord groups, or LinkedIn). Ask specific questions:

• Is it clear what I do within 10 seconds?

• Which case study is the strongest?

• Where did you get bored or confused?

Then revise. A portfolio is never “done.”

Common Mistakes to Avoid

• Showing only final screens with no process

• Including too many projects

• Using trendy effects that hurt readability

• Not explaining your role or the results

• Broken links or slow-loading pages

• Copying a template without personalizing it

Quick Checklist

• 3 to 5 strong case studies

• Clear intro and about section

• Consistent styles, grid, and components

• At least one interactive prototype

• Process plus outcomes explained

• Mobile-friendly and easy to navigate

• Contact info and resume link

• Feedback gathered and applied

Final Thoughts

A great UI/UX portfolio isn’t about showing everything you’ve ever made. It’s about showing how you think, how you solve problems, and how you communicate. Start with a few solid projects, build them in an organized Figma file, tell each story clearly, and keep improving it over time.

Open Figma, create that first frame, and start building.