Pages as Sections

Use Figma pages to organize your portfolio into logical sections. My recommended structure:

• 📄 Cover — Your landing page with hero, intro, and navigation
• 📄 Project 1, Project 2, Project 3 — One page per case study
• 📄 About — Your background, skills, and contact info
• 📄 🔧 Components — Your reusable elements (prefix with emoji so it sorts to the bottom)

Frame Size and Grid

Start with 1440px wide frames. This matches most laptop viewports and is the standard design width in the industry. For your grid, set up a 12-column layout grid with 72px margins and 24px gutters — this gives you a clean, flexible structure that mirrors real web layouts.

For scrollable pages (which your case studies will be), set the width to 1440 and let the frame height grow with your content. In the prototype settings, you'll set these to “Scroll vertically” so they behave like real web pages.

Typography and Color Styles

Before you design anything, set up your text and color styles. This isn't optional — it's the difference between a portfolio that looks intentional and one that looks like you winged it.

For typography, pick two fonts maximum. One for headings, one for body. Some combinations that work beautifully in Figma:

• • Inter + Inter — Clean, professional, no-nonsense. Hard to go wrong.
• • Playfair Display + Source Sans Pro — Elegant serif/sans pairing for editorial portfolios.
• • Space Grotesk + DM Sans — Modern, slightly techy feel without being cold.
• • Sora + IBM Plex Sans — Geometric and clean, great for product designers.

Create styles for: H1 (48–56px), H2 (32–36px), H3 (24px), Body (16–18px), Caption (14px), and Label (12px). You probably won't use all of them on every page, but having them ready keeps things consistent.

Name Your Layers

I cannot stress this enough. Rename your layers. “Frame 437” tells a reviewer nothing. “Hero/CTA Button” tells them you think in systems. It takes 10 seconds per layer and it's the single easiest way to signal that you're detail-oriented. Every senior designer I know checks layer names when reviewing Figma files. Do the work.

The Portfolio Page Pattern

Here's the auto layout structure I use for every portfolio page:

Page Frame (1440px wide, auto layout vertical)
  ├── Hero Section (auto layout vertical, padding 80px 72px)
  │   ├── Heading (fill width)
  │   ├── Subheading (fill width, max-width 720px)
  │   └── CTA Row (auto layout horizontal, gap 16px)
  ├── Project Grid (auto layout vertical, gap 48px, padding 80px 72px)
  │   ├── Project Card (auto layout horizontal, gap 32px)
  │   ├── Project Card
  │   └── Project Card
  ├── About Section (auto layout vertical, padding 80px 72px)
  └── Footer (auto layout horizontal, padding 40px 72px)

The key insight: every section is an auto layout frame with consistent horizontal padding (72px on each side for a 1440px frame gives you a ~1296px content area). This creates the visual rhythm that makes a portfolio feel cohesive instead of assembled from random pieces.

Auto Layout Tips That Actually Matter

🃏 Project Card

This is the workhorse of your portfolio. Build it as a component with variants:

• • Default state — Project thumbnail, title, short description, and tags
• • Hover state — Slight scale-up or overlay with “View Case Study →”
• • Size variants — Full-width feature card and half-width grid card

Use component properties for the thumbnail image, title text, description, and tags. This way you swap content per instance without detaching the component.

🧭 Navigation Bar

Build a sticky nav with your name/logo on the left and page links on the right. Create a variant for the “current page” state (underline, bold, or color change on the active link). In prototype mode, you'll fix this to the top of each frame so it stays visible on scroll — just like a real website header.

📊 Metrics Row

A horizontal row of 3–4 key metrics for case studies: “40% increase in sign-ups,” “12-week timeline,” “4-person team.” Build this as a component with text properties for the number and label. Drop it at the top of every case study to immediately give reviewers context before they start reading.

💬 Pull Quote / Callout

A styled block for testimonials, key insights, or important callouts within case studies. Vertical line on the left, slightly larger italic text, maybe a subtle background color. Simple to build, but it breaks up walls of text beautifully and adds visual rhythm to long case study pages.

🏷️ Tag / Pill

Small component for skills, tools, project types. Use component properties for the label text and a variant for color (or just one neutral color — less is more). These are great on project cards and in your About section for listing your skillset.

1. Hero + Context (First Viewport)

This is what the reviewer sees before they scroll. It needs to answer three questions instantly: What is this project? What was your role? What was the outcome?

• • Project title and one-sentence summary
• • A polished hero image or mockup (this is your hook — make it gorgeous)
• • Your metrics row component: role, timeline, team size, key result
• • Tags for tools and skills used

2. The Problem

Two to three paragraphs max. What was the business problem? Who were the users? What were the constraints? Don't write a novel — write enough that a reviewer understands why this project existed and why it was hard. Include a screenshot or photo of the “before” state if you have one. Nothing makes a redesign more compelling than showing what it replaced.

3. Process (Show, Don't Tell)

This is where most portfolios either shine or fail. The mistake is describing your process in text: “I conducted user research, then created wireframes, then iterated on the design.” That's a recipe, not a story.

Instead, show the artifacts. Embed your actual sketches, whiteboard photos, user journey maps, wireframes — the messy, real stuff. Put them in a clean layout with brief captions explaining what each artifact is and what decision it led to.

A particularly effective Figma technique: use sections with a light gray background (#F7F7F7) for process content and white backgrounds for final designs. This creates a visual hierarchy between “how I got there” and “what I shipped” without needing to explain it.

4. The Solution

Now show the final designs. This is your moment — make it count. Use high-fidelity mockups, real device frames, and generous spacing. Some approaches that work well in Figma:

• • Full-width hero shots — Let your best screens breathe at full 1440px width
• • Device mockups — Use Figma's community device frames (search “device mockup” in Community) to show mobile and desktop side by side
• • Detail callouts — Zoom into specific interactions or UI details with annotated close-ups
• • Embedded prototypes — Link to interactive Figma prototypes so reviewers can click through flows themselves

5. Results + Reflection

End with what happened. Did metrics improve? Did users respond positively? What would you do differently? This section doesn't need to be long — three to five sentences and maybe a metrics row showing before/after numbers. Hiring managers love seeing that you connect design decisions to business outcomes, even if the results are modest. Honesty about what you'd improve next time is a strength, not a weakness.

Flow Starting Points

Set your Cover page as the default flow starting point. This is what people see first when they click your prototype link. Go to the Prototype panel, select your Cover frame, and click “Add flow starting point.” Name it something clear like “Portfolio” — not “Flow 1.”

Navigation Interactions

Connect your nav links and project cards to their destination frames using “On click → Navigate to” interactions. For transition animation, use “Smart animate” with “Ease in and out” at 300ms. This creates smooth page transitions that feel polished without being distracting.

Don't use “Move in” or “Push” transitions — they feel like a mobile app, not a portfolio website. Dissolve or Smart Animate are your only good options here.

Scroll Behavior

For case study pages that are taller than the viewport: select the frame, go to the Prototype panel, and set the overflow to “Vertical scrolling.” Set the frame height to match the viewport (900px for a 1440×900 setup) and let your content extend below it.

To make your navigation bar “sticky,” select the nav component instance, enable “Fix position when scrolling” in the Design panel, and position it at the top of your frame. Now it stays visible as the reviewer scrolls — exactly like a real website.

Presentation Mode Settings

When sharing your prototype link, choose your settings carefully:

• • Device — Set to “None” (you don't want your portfolio squeezed into a phone frame)
• • Background color — Match your portfolio's background color, or use a dark gray (#1A1A1A) for a presentation feel
• • Starting frame — Your Cover page
• • “Show Figma UI” — Uncheck this for a cleaner viewing experience

Personal Portfolio by Sagar Shah36.8k duplicates

Clean, responsive layout with both mobile and desktop versions. This is the best “just get started” template — it uses proper auto layout, has a solid component library, and the design is neutral enough to customize without fighting it. Good for beginners.

Best for: Junior designers who want a professional structure to fill with their own content. Swap the fonts, adjust the colors, and you're 70% done.

Arik Portfolio by Pawel Gola11.7k duplicates

Bold, visually striking, with a strong typographic presence. This template has more personality than most — it feels like a real design portfolio, not a generic template. The layout structure is more opinionated, which means less customization work if the style fits you, but more work if it doesn't.

Best for: Designers with strong visual work who want their portfolio to feel as bold as their projects. Especially good for brand designers and visual/UI specialists.

Bentolio by Abdul Rauf18.6k duplicates

The trendy pick. Bento grid layouts are everywhere in 2025–2026, and this template does it well — clean cards, nice typography, and a modern aesthetic that photographs well (important if you're sharing screenshots on LinkedIn or Dribbble). The grid structure also makes it easy to rearrange sections.

Best for: Designers who want a contemporary, visually interesting layout without building complex structures from scratch.

Share the Prototype Link

The fastest option. Click “Share prototype” in the top right and set it to “Anyone with the link can view.” This gives reviewers the full interactive experience — scrolling, clicking, transitions. The URL will look like figma.com/proto/.... This is what you put in job applications and your LinkedIn profile.

Export as PDF

Some application forms need a file upload. Select all the frames you want to include, go to File → Export frames to PDF. The export order follows left-to-right, top-to-bottom positioning on the canvas — so arrange your frames accordingly before exporting. PDF is also a good backup for when someone doesn't have a Figma account.

Publish to Figma Community

If your portfolio doubles as a template others can learn from, publish it to the Figma Community. This gives you visibility, builds your reputation, and creates a shareable URL that looks more professional than a raw prototype link. Add a clear description, tags, and a cover image.

Pair with a Landing Page

The best of both worlds: build a simple one-page website (even a free Carrd site or a basic HTML page) with your name, a brief intro, and a prominent “View My Portfolio” button that links to your Figma prototype. This gives you a custom domain, SEO presence, and a professional URL to share, while your actual portfolio lives in Figma where it belongs.