How to Use Framer for Portfolios

Framer is the best tool for a designer's portfolio right now. It produces genuinely polished sites without requiring code knowledge, handles case studies well via its CMS, and has built-in animations that make a portfolio feel alive without being excessive.

Here's how to set one up properly.

Template vs starting from scratch

Start with a template. This isn't a shortcut — it's the right decision for most designers.

The two reasons to start from scratch are: you have a very specific visual concept that no template accommodates, or you're very experienced with Framer and want full control. For everyone else, a template saves 10-15 hours of layout and responsive work that you shouldn't spend on infrastructure.

Framer's built-in template marketplace has strong portfolio options. Filter by "Portfolio" category. Look for templates with:

• CMS-powered case studies (not individual hardcoded pages)
• Clean typography (easy to customize vs a template with complex type treatments)
• Mobile-responsive layouts you'd actually use

Community templates from designers on Framer's marketplace are often better than the official ones. Search for portfolio templates with recent update dates — older templates may not use current Framer features.

After choosing a template, duplicate it to your workspace, then immediately rename it to your own name. Start customizing before you've added any real content — this helps you see how the template responds to your actual design style.

Setting up pages

A portfolio site needs these pages at minimum:

Home: Your name, role, a brief positioning statement, and links to selected work. Curate ruthlessly — show 3-4 projects, not everything.

Work/Case Studies: Either a list page linking to individual case studies, or a grid with previews. The case study index and the individual case study pages are usually handled by Framer's CMS.

About: Your background, skills, and the kind of work you do. Keep it concise — hiring managers spend less than a minute on About pages.

Contact: An email address or a simple contact form. Don't hide this.

Optional but useful: a Lab or Experiments page for smaller visual work, explorations, or side projects that don't warrant full case studies.

Adding case studies with Framer CMS

Framer's CMS is how you add case studies without duplicating page templates manually.

In your project, go to the CMS panel and create a Collection called "Case Studies." Add fields for:

• Title (text)
• Slug (text — used for the URL)
• Description (text — for the project grid preview)
• Featured image (image)
• Project date (date)
• Role (text)
• Tags (array)
• Body content (rich text or a separate set of content fields)

The body of each case study is either a single rich text field (simpler, easier to edit) or a collection of content blocks (more flexible layout control). For most portfolios, rich text is sufficient.

Connect the CMS collection to your case study template page. Framer automatically creates one page per collection item using that template.

After setup, add your case studies in the CMS editor. You'll write the content and add images here, not by editing Figma files — though you can embed Figma files in your case study body using an embed block.

Build your portfolio in Framer

Customizing animations and scroll effects

Framer's animation capabilities are genuinely better than Webflow for this kind of work. Built-in scroll animations and transitions don't require custom code.

Scroll-triggered entrance animations: Select any element, go to the Scroll panel, and add an appearance animation. Set the trigger to "On Scroll Into View" and choose an animation style (fade, slide up, scale). Keep durations between 300-500ms. Slower feels sluggish; faster doesn't read as intentional.

Page transitions: In Project Settings → Transitions, you can set how pages transition when navigating. A simple fade or slide works well for a portfolio. Avoid anything that takes longer than 400ms or that might disorient users navigating back from a case study.

Hover states: Add hover effects to project cards in the grid. A subtle scale (1.02) or overlay reveal on hover looks clean without being distracting.

The guiding principle: animations should make the portfolio feel polished, not performative. If you can remove an animation and nothing important is lost, remove it.

Connecting your domain

In Framer, go to Project Settings → Domain. Add your custom domain (buy one from Namecheap or Cloudflare if you don't have one — around $10-15/year for a .com).

Framer provides the DNS records to add in your domain registrar. Usually two records: a CNAME or A record for the root domain and a CNAME for the www subdomain. DNS changes propagate in 5-30 minutes.

Framer's free plan doesn't support custom domains — you need at least the Mini plan ($5/month) or the Basic plan ($10/month). Basic is worth it for the custom domain, removed Framer branding, and password protection feature.

SEO settings

Framer handles the basics well, but you need to configure them.

Page titles and meta descriptions: Set these for every page. In Framer, go to each page's settings (right-click in the Pages panel → Page Settings). Your page title should be "Your Name – UX Designer" or similar. Meta description for the home page should describe who you are and what kind of work you do in 150 characters.

Open Graph image: Set a custom OG image in Project Settings → SEO. This is what appears as the preview image when you share your portfolio link on LinkedIn or in job applications. Make it a simple, branded card with your name and role.

Case study slugs: Keep them clean and descriptive. /work/checkout-redesign is better than /work/project-3.

Alt text on images: Add meaningful alt text to every image in your case studies. It's good for accessibility and search indexing.

Design your case study images in Figma

What makes Framer portfolios look better

A few things that are easy to do in Framer and noticeably improve the result:

Variable fonts: Framer supports variable font weights and sizes natively. Using a variable font (like Inter or Plus Jakarta Sans) lets you fine-tune weight and optical size in ways that static fonts don't allow.

Consistent spacing: Use Framer's spacing variables to maintain consistency. Define a base spacing unit and reference it throughout.

High-quality project images: This matters more than any Framer-specific feature. If your case study images are low-resolution or visually inconsistent, no amount of animation will save the impression. Export images from Figma at 2x for retina displays.

A Framer portfolio with clean images and thoughtful copy will beat a technically impressive one with mediocre work every time.