⚡ TL;DR
- • Best for: Designers who want motion-rich, component-based portfolios
- • Cost: Free to build; $5-15/month for custom domain + CMS
- • Learning curve: Medium — easier if you know Figma, harder if you don't
Why Framer for Portfolios
Framer has gone from a prototyping tool to a legitimate website builder, and for interaction-focused designers, it's arguably the best portfolio platform available right now. Where Webflow thinks in CSS and HTML, Framer thinks in components and motion — which is exactly how most designers already think.
The core advantage is how naturally animations integrate into the design process. In Webflow, animations are a separate system you configure after designing. In Framer, motion is built into the component model. You design a card, then you make it animate — and the animation is part of the component, not layered on top. For a deeper comparison of all the major platforms, see our portfolio platform comparison.
The other thing Framer gets right: it produces React code. If you ever need to extend your portfolio with custom logic — a dynamic project filter, an API integration, a custom animation — you can write React components directly in Framer. That's a massive advantage over template-based builders.
Framer is the right choice if:
- Motion and interaction design are core to your identity as a designer
- You're comfortable with Figma and want a similar mental model
- You want polished page transitions and scroll-triggered animations
- You know (or want to learn) React for custom components
- Your portfolio has fewer than 8-10 pages (Framer's CMS is newer and more limited than Webflow's)
Framer vs Webflow: The Real Differences
This is the question everyone asks, and the honest answer is: they're both excellent, but they think differently. Choosing between them is less about which is “better” and more about which matches how you work. For a detailed walkthrough of the Webflow approach, see our Webflow portfolio guide.
Design model
Framer works like Figma — frames, auto-layout, components with variants. If you design in Figma daily, Framer's interface will feel familiar within minutes. Webflow works like CSS — classes, flex/grid, cascading breakpoints. If you understand the box model, Webflow will feel logical. If you don't, it'll feel frustrating.
Animation and motion
Framer leads here significantly. Animations are first-class — scroll effects, page transitions, hover states, and spring physics are built into the component system. You design the motion alongside the layout. Webflow has a powerful interaction builder, but it's a separate tool you configure after designing. The results can be equivalent, but the workflow is less fluid.
CMS and content management
Webflow wins here. Its CMS is mature, flexible, and well-documented. Framer's CMS is functional but newer — it covers basic portfolio needs (project pages, blog posts) but lacks the depth of Webflow's filtering, reference fields, and complex data relationships. For 4-6 projects, Framer's CMS is fine. For content-heavy sites, Webflow is better.
SEO
Webflow has more mature SEO tools — auto-generated sitemaps, robust redirects, clean semantic HTML output. Framer has improved significantly (meta tags, sitemap, social previews) but is still catching up. For a portfolio (where SEO is important but not critical), Framer is adequate. For a content-heavy site targeting search traffic, Webflow is safer. Our SEO checklist applies to both.
Pricing
Framer is cheaper: free to build, $5/month for custom domain (Mini), $15/month for CMS (Basic). Webflow starts at $14/month for custom domain and $23/month for CMS. Both offer free plans for building and previewing. Framer's free tier is more generous for published sites.
The simple heuristic: If your portfolio is about showcasing interaction and motion design skill, use Framer. If it's about deep case studies with lots of content, use Webflow. If you genuinely can't decide, try both on their free plans for a weekend and see which one clicks.
Getting Started
Before you open Framer, do your content prep. Write your case studies, optimize your images, decide on typography. The same advice from every portfolio guide applies here — content first, design second. Our case study structure guide covers the content framework.
Step 1: Set up your project structure
Create a new blank project (not a template — this is your design portfolio). In the pages panel, create your core pages: Home, About, Work (this will either be a static page or a CMS collection page), and Contact. Framer uses a familiar page tree structure.
Set your canvas width to 1440px for desktop design. You'll add responsive breakpoints later, but start with a comfortable desktop canvas.
Step 2: Define your design tokens
Before designing anything, set up your color palette and typography in Framer's style panel. Framer supports design tokens (colors, fonts, spacing) that propagate throughout your project. Define:
- • 2-3 colors: Primary, secondary, and text color. Add hover/active states as variants.
- • Typography scale: Heading (H1-H3), body, and caption styles. Use Google Fonts or upload custom fonts (WOFF2 format). Our typography guide can help if you're choosing typefaces.
- • Spacing system: Pick a base unit (8px is standard) and use multiples: 8, 16, 24, 32, 48, 64, 96.
Step 3: Create shared components
Build your navigation and footer as components first. In Framer, components work like Figma components — change the master, all instances update. Create a navigation component with your logo/name and 4-5 links. Create a footer with contact info and social links. These go on every page, so get them right early.
Building with Components
Framer's component system is its secret weapon. If you think in components (and most designers do, thanks to Figma), Framer lets you build your portfolio the same way — reusable pieces with variants that adapt to different contexts.
Essential components for a portfolio:
- Project card. Your most important component. Thumbnail image, title, category tag, brief description. Create variants for: default state, hover state, and optionally a featured/large variant. Hover states should reveal additional info or add subtle motion — not transform the entire card.
- Section container. A reusable wrapper with consistent max-width, padding, and vertical spacing. Apply this to every content section so spacing stays consistent across pages without manual adjustments.
- Image block. A responsive image component with optional caption. Set up variants for full-width, contained, and side-by-side layouts. You'll use this constantly in case study pages.
- Stat/metric card. For displaying project outcomes. Number + label + optional context. Useful in case study results sections.
- Button. Primary (filled) and secondary (outlined) variants. Apply consistent padding, border-radius, and hover animations across your whole site.
Component variants with interactions: This is where Framer shines. You can create a component with multiple variants and define animated transitions between them. A project card that smoothly expands on hover, revealing the description with a spring animation — that's one component with two variants and an interaction, not separate elements glued together.
Keep your component library small and intentional. 8-12 components is plenty for a portfolio. Every component should serve a clear purpose. If you find yourself creating a component you'll only use once, it probably doesn't need to be a component.
Project Pages and CMS
You have two approaches for project pages in Framer: static pages or CMS collection pages. The choice depends on how many projects you have and how much design control you want per project.
Option A: Static project pages (2-4 projects)
Create each project page individually. This gives you complete design freedom per page — different layouts, custom interactions, unique visual treatments. The downside: each page is independent, so you can't globally update the structure. For 2-4 projects, this is often the better choice because each case study can be truly unique.
Option B: CMS collection pages (5+ projects)
Create a “Projects” CMS collection with fields for: title, slug, thumbnail, hero image, category, role, timeline, tools, and rich text content. Design one template that pulls from these fields. Adding a project = adding a CMS entry.
Framer's CMS supports: plain text, rich text, image, link, number, boolean, color, date, and file fields. That covers most portfolio needs. The rich text field handles inline images, headings, and formatted text for your case study narratives.
Recommendation: If you have 4 or fewer projects and want each one to feel distinct, use static pages. If you have 5+ or plan to add projects regularly, use CMS. You can also hybrid — CMS for most projects, with one or two “featured” projects as custom static pages.
Animations Done Right
This is Framer's biggest draw — and its biggest trap. The animation tools are so good that it's tempting to animate everything. Resist that urge. The best portfolio animations are ones the viewer barely notices because they feel natural.
Animations that enhance portfolios:
- Page-load stagger. Elements fade in sequentially as the page loads — hero text first, then image, then secondary content. Duration: 200-400ms per element, 50-100ms stagger delay. Use opacity + subtle translateY (20px max).
- Scroll-triggered reveals. Content sections fade in as they enter the viewport. Keep it simple — opacity from 0 to 1 with a slight upward movement. Trigger when the element is 20-30% visible.
- Hover states on cards. Scale slightly (1.02-1.05), lift with a subtle shadow increase, or reveal additional information. Use spring easing for a natural feel. Transition duration: 200-300ms.
- Page transitions. A smooth crossfade or slide between pages. Framer makes this easy with its built-in page transition system. Keep transitions under 400ms — any longer feels slow.
- Cursor interactions (sparingly). Custom cursor effects or magnetic hover on CTAs can add personality. But only use these if interaction design is literally what you do — otherwise it feels gratuitous.
Animations that hurt portfolios:
- • Parallax backgrounds on every section (disorienting and performance-heavy)
- • 3D transforms and rotations on text (unreadable during transition)
- • Entrance animations longer than 500ms (people are waiting to see your work)
- • Scroll-jacking (overriding native scroll behavior — everyone hates this)
- • Loading screens for a 5-page portfolio (your site isn't that heavy)
- • Auto-playing video backgrounds (performance killer on mobile)
The rule: if someone notices the animation and thinks “cool animation,” you might have overdone it. If they navigate your portfolio and it just feels good without thinking about why — that's the sweet spot. Animation should serve the content, not compete with it.
Responsive Design in Framer
Framer handles responsive design differently than Webflow. Instead of cascading breakpoints, Framer uses a more fluid approach with stack layouts and responsive properties on individual elements. For the UX principles behind good responsive portfolios, see our mobile portfolio design guide.
Framer responsive essentials:
- Use Stack layout everywhere. Framer's Stack is the equivalent of flexbox. Set your project grid as a horizontal stack that wraps — on desktop it shows 2-3 columns, on mobile it naturally stacks to single column. No breakpoint needed.
- Relative sizing. Use percentages and “Fill” width rather than fixed pixel values. A container set to 90% width with a max-width of 1200px works across all screen sizes without breakpoint overrides.
- Breakpoint overrides. Framer has breakpoints at Tablet (810px) and Mobile (390px). Use these to override specific properties: reduce font sizes, change stack direction from horizontal to vertical, hide decorative elements.
- Simplify animations on mobile. Some desktop animations (parallax, complex hover states, cursor effects) should be disabled on mobile. Framer lets you set different animation properties per breakpoint.
- Test on real devices. Framer's preview mode simulates mobile, but real devices render differently. Publish a staging version and test on your phone before going live.
SEO and Performance
Framer's SEO tools have improved significantly. They're not as robust as Webflow's, but they cover the essentials for a portfolio. Our portfolio SEO checklist covers the full strategy; here's the Framer-specific implementation.
SEO checklist for Framer:
- Set page titles and meta descriptions for every page (Page Settings → SEO)
- Add Open Graph images (1200×630px) — this is what shows when shared on LinkedIn/Slack
- Add alt text to all images (right-click → Image Settings)
- Use semantic headings (H1 for page title, H2 for sections — one H1 per page)
- Submit your sitemap to Google Search Console (yourdomain.com/sitemap.xml)
- Compress images before uploading (target under 200KB per image, WebP format)
- Check PageSpeed Insights after publishing (aim for 80+ on mobile)
Performance considerations: Framer sites are React-based and automatically code-split, which is good. But React hydration adds a baseline JavaScript cost. Keep your component tree reasonable — 50 unique components is fine, 200 is a problem. Avoid embedding heavy third-party scripts (analytics is fine; chat widgets, cookie banners, and social embeds add up).
Image optimization: Framer auto-optimizes uploaded images, but “auto” has limits. Upload images at 2x your display size (not 4x), use WebP format, and keep hero images under 400KB. For case study screenshots, 1440px wide is plenty — don't upload 3000px originals. Our image optimization guide covers the details.
Publishing Your Portfolio
Framer's publishing is simpler than Webflow's. Hit publish, and your site is live. But there are a few things to handle first.
Pre-launch checklist:
- All pages tested on mobile (real device, not just preview)
- All links working (project links, email, social profiles)
- Favicon uploaded (Site Settings)
- SEO settings complete for all pages
- Contact method tested (form submission or email link)
- Custom domain connected (requires paid plan)
- Google Analytics connected (optional but recommended)
Connecting a custom domain
In Site Settings → Domains, add your domain. Framer provides DNS records to configure at your registrar:
- • A record: Point root domain to Framer's IP
- • CNAME: Point www to your Framer subdomain
- • SSL: Automatic — Framer provisions certificates for you
Allow 24-48 hours for DNS propagation. Don't launch on a .framer.app subdomain if you're job-hunting — the custom domain is worth the $5/month.
After publishing: submit your sitemap to Google Search Console. Share the link on LinkedIn (your OG image will make the post look polished). Get feedback from other designers while it's fresh — and before you send it to recruiters.
Common Framer Mistakes
Animation overload
The #1 Framer portfolio mistake. Every element fades, slides, scales, and bounces. The portfolio feels like a motion graphics demo, not a professional showcase. Your work should be the focus — animations support the experience, they don't replace the content. If a recruiter remembers your animations more than your case studies, that's a problem.
Template dependency
Starting from a Framer template and just swapping content. For the same reason as Webflow — a design portfolio should demonstrate that you can design. Templates are for studying, not shipping.
Ignoring mobile entirely
Building a desktop-perfect portfolio with zero attention to mobile. A significant percentage of portfolio views come from phones — recruiters checking LinkedIn on their commute, hiring managers forwarding links via text. If your portfolio is broken on mobile, you're losing interviews you don't know about.
Scroll-jacking
Overriding native scroll behavior to create “sections” that snap into place. This felt fresh in 2018. In 2026, it's hostile UX. Users expect native scroll. Let them control the pace at which they move through your content.
No fallback for no-motion preferences
Some users have “reduce motion” enabled in their OS settings. Framer respects this by default for some animations, but custom interactions might not. Check that your site is still navigable and content is accessible with reduced motion. As a designer, showing this awareness is itself a positive signal. Our accessibility guide covers other considerations.
Too many pages
Framer is optimized for sites with 10-30 pages. If you're building a 50+ page content site, Webflow or custom code would serve you better. For a portfolio (typically 6-12 pages), Framer is perfectly capable.
Everything You Need to Know
Quick answers to help you get started
