Free Framer Portfolio Templates for Creatives

Step 01

Get your content ready

Gather everything before you open Framer. When your text, images and links sit in one folder, building your site is only swapping things in. You finish in a few hours, without stopping every few minutes to write a bio or hunt for a file.

What to prepare

Your projects

Pick how many projects go in your portfolio. 3 to 6 is enough.

A cover image or cover video for each project

Decide how many images and videos each case study gets. Export the images and upload the videos to Gumlet, my pick for video hosting.

A name for each project

A short overview of each project, 2 to 3 sentences

The details of each project: project type, categories, year, your role and client

Example: one project, ready to go

One folder per project. Do this for every project and step 5 becomes copy and paste.

Brew Can Co

cover.jpg

Gallery

01.jpg

02.jpg

03.jpg

… 08.jpg

video links.txt

project.txt

Project name

Brew Can Co.

Overview

Brew Can Co. needed to stand out in a crowded coffee market filled with colorful, busy designs. I created a bold black-and-white identity that feels like a premium art piece.

Project type

Packaging Design

Learn the basics

You don’t need to learn all of Framer to launch your portfolio. You need to know six places in the editor and three rules. Learn them once and every next step goes faster.

Where things are

Numbers match the video

Toolbar

Top

Add new elements and switch between Canvas and CMS. Preview and Publish sit on the right.

Left panel

Left

Three tabs. Pages lists every page of your site. Layers shows everything on the page you are on. Assets holds your colors, text styles and components.

Canvas

Middle

Your page as visitors see it. Double-click any text to edit it. Click an image once, then swap it in the right panel.

Right panel

Right

Settings for whatever you select, like size, color, font and link. The Agent tab sits next to Style.

Breakpoints

On the canvas

Desktop, tablet and phone versions of each page, side by side. Desktop is the main one and the others follow it.

CMS

Next to Canvas

Where your projects live. Every item in the Projects collection is one project page.

Three rules that save hours

Styles change the whole site. Colors and text styles live in the left panel under Assets. Whatever you change there updates on every page.

Projects live in the CMS. You edit your projects and add new ones in the CMS, never on the canvas. More on this in step 5.

Components have variables. Repeating elements, like project cards and buttons, are components. Select one and change its content in the right panel. Only the one you selected changes, so you never need to edit inside the component.

Watch out

Don’t open a component to change its text or image. Use the fields in the right panel, or your change shows up everywhere that component is used.

Make changes on desktop first. A change on tablet or phone stays only on that breakpoint.

The Agent uses AI credits from your plan. Small edits cost less than building whole sections.

Founder tips

From Lazar, who made this template

Made a mistake? Cmd+Z (Ctrl+Z on Windows) undoes any change. Version history (Cmd+Shift+H) brings back an earlier version of your site.

Press Preview often. It shows your site exactly how a visitor sees it.

Don’t rename or move layers for now. You are only swapping content, so the structure can stay as it is.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Explain how this project is built in simple words. Tell me which parts are components, which parts use the CMS, and which texts I can edit directly.

Mark step 2 as done

Next: Change your name →

Step 03

Change your name

Start with the hero on the home page. Replace the name, the headline and the short intro with your own.

Write your intro with the formula below. Swap each part in brackets for your own words. A client should know in five seconds if you are the right fit.

Your intro formula

Copy prompt

I [what you make] that help [who you work with] [the result they get].

Example

I design strategic brand identities that help small businesses and startups stand out and connect with their customers.

[what you make]

design strategic brand identities

[who you work with]

small businesses and startups

[the result they get]

stand out and connect with their customers

Founder tips

From Lazar, who made this template

Use the words your clients use. “Brand identity for coffee shops” says more than “visual storyteller”.

Read your intro out loud. If it sounds stiff, shorten it.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Update the hero on the home page. Name: [YOUR NAME]. Intro: I [WHAT YOU MAKE] that help [WHO YOU WORK WITH] [THE RESULT THEY GET]. Keep the current layout and text styles.

Mark step 3 as done

Next: Edit the navigation and footer →

Step 04

Edit the navigation and footer

The navigation and the footer live in a layout template. A layout template is a shared frame around your pages: the navigation on top, the footer at the bottom and a placeholder in the middle where each page shows its own content.

We use it so you edit the navigation and the footer once and every page updates. No page can end up with an old name or a broken link.

4.1

Open the layout template

Select the Desktop breakpoint of any page. At the top of the right panel, choose Edit.

A new screen opens with the navigation, the footer and a placeholder where your page content usually sits. This is where you make the changes below.

4.2

Edit the navigation

Select the navigation component. Everything you need is in the right panel.

Name

Replace Mike Bennet with your first and last name.

Example: mike bennet

CTA title

The text of the call to action on the right.

Example: start a project

CTA link

Where the call to action takes visitors, like your email or a booking page.

Example: mailto:you@yourname.com

Want your logo instead of your name?

Open the Navigation component with Edit Component.

In the Logo wrapper stack, delete the text element.

Select Logo and set Visible to Yes in the right panel.

Upload your logo and adjust its size to fit the site.

4.3

Edit the footer

Select the footer. You edit almost everything in the right panel, without opening the component.

The email text shown in the footer.

Example: Email: mike@mikebennet.design

Email link

Where the email opens. Write mailto: before your address.

Example: mailto:mike@mikebennet.design

Location

Where you are based.

Example: Based in: Portland, Oregon

Availability

What work you are open to.

Example: Available for: Freelance projects & full-time

Instagram

Link to your Instagram profile.

Example: https://instagram.com/yourname

Link to your X profile.

Example: https://x.com/yourname

Link to your LinkedIn profile.

Example: https://linkedin.com/in/yourname

The big name at the bottom is the one exception. To change it, open the footer with Edit Component and type your name directly on the text.

Watch out

Sample social links still point to demo accounts. Miss one and a client lands on someone else’s profile.

Founder tips

From Lazar, who made this template

Say what you are available for. Clients like to know you take freelance work before they write to you.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Update the layout template. In the navigation, set the name to [YOUR NAME], the call to action title to [CTA TITLE] and its link to [CTA LINK]. In the footer, set Email to [YOUR EMAIL], Email link to mailto:[YOUR EMAIL], Location to [YOUR CITY], Availability to [WHAT WORK YOU ARE OPEN TO], and the Instagram, X and Linkedin links to [YOUR LINKS]. Change the big name at the bottom of the footer to [YOUR NAME]. Keep the current layout and text styles.

Mark step 4 as done

Next: Add your projects →

Step 05

Add your projects

Your projects live in the CMS, not on the canvas. Before you edit anything, learn two things: how the CMS works and how the project detail page works. Five minutes here saves you hours later.

Part 1

CMS basics

The CMS is a small database inside Framer. It works like a spreadsheet: you fill in content, and Framer puts it into the design for you. Three words are all you need.

Like a sheet

Collection

A list of things of one kind.

In this template: Projects and Categories.

Like a row

Item

One thing in that list.

One project, like Brew Can Co.

Like a cell

Field

One piece of content in an item.

Project name, cover, gallery.

How content reaches your site

1. Open

Projects

Pick the collection

2. Pick

An item

One project

3. Fill

Its fields

Text, images, video

4. See

Your site

Framer builds the page and cards

Where is it?

Click CMS in the toolbar at the top of the editor, next to Canvas. Your collections are listed on the left.

How do I edit?

Open a collection, click an item to open its fields, change what you need and close it.

When is it live?

Your changes save as you type. Visitors see them after you click Publish.

Why use it?

Every project looks consistent and adding a new one takes minutes. You never copy pages or rebuild layouts.

Part 2

The project detail page

The detail page is the page a visitor opens when they click a project. You design it once, and Framer reuses it for every item in Projects. In the Pages panel you find it next to your other pages, connected to the Projects collection.

One template

Project detail page

Layout, fonts and spacing

Brew Can Co.

/projects/brew-can-co

Your second project

/projects/second-project

Your third project

/projects/third-project

How it works

Each item gets its own page at its own address, built from the slug. The page pulls in that item’s name, cover, overview and gallery.

Why we use it

One design keeps every project consistent. A new project page appears the moment you add an item.

The mistake almost everyone makes

Editing the detail page on the canvas. Whatever you change there shows up on every project. So never:

Type your own text or drop images onto the page. They appear on all your projects.

Replace text that comes from the CMS. It loses its link to the field and every project shows the same words.

Delete or move sections. Every project page loses them.

Do this instead: change what a project shows in its CMS item.

Your main place to edit

The Projects collection

Almost all work on your projects happens here. The covers you set show up on the home page and the work page. Everything else fills the detail page.

5.1

Manage your projects

The template comes with 6 sample projects. To delete one, right-click the project item and choose Delete. To duplicate one, right-click it and choose Duplicate.

To add a new project, click the plus button and fill in every field.

My advice: replace the information in the existing items instead of starting from scratch. Every field is already set up, so you only swap text and media.

5.2

Project cover

For an image cover, upload your image to the Cover image field.

For a video cover, turn on Use video on cover and paste the video URL. Host your videos on Gumlet, it is my pick for video hosting.

The cover updates on every page that shows project cards, like the home page and the work page.

5.3

Content and project overview

These fields fill the text on the project page and the project cards. Here is what goes in each one.

Project name

The name clients see on the card and the project page. Usually the client or product name.

Example: Brew Can Co.

Project overview

2 sentences, about 50 words. Start with the problem the client had, then say what you made and why it works.

Example: Brew Can Co. needed to stand out in a crowded coffee market...

Project type

The main kind of work in this project.

Example: Packaging Design

Gallery

I built the gallery as one component that works for every kind of project. I often see creatives with lots of media for one project and only a few pieces for another, or a different layout in mind for each. This gallery handles all of that.

First

Pick a layout

Choose one in the Gallery Layout field. You can pick a different layout for every project.

Grid

Two items side by side in every row.

Mosaic

One large, two small, one large, and so on.

Stacked

Every item full width, one below the other.

Add your media

The Gallery field sits below Gallery Layout. Every row in it is one piece of media.

Click the plus to add a new row.

Upload an image in the Image column.

For a video, paste its Gumlet link in Video URL and turn on Use Video.

Drag rows by the handle on the left to change their order.

Any amount works

Use 10 images for one project and 3 for another. The layout adapts on its own and keeps working.

Do the same for every project, in the way that fits your work best.

Don’t change anything on the project detail page. It is a template that shows the content you enter in the CMS, so a change there hits every project.

Watch out

Use the same ratio for every cover so your project grid stays even.

Founder tips

From Lazar, who made this template

Put your strongest project at the top of the collection. Most visitors open one or two projects and then decide.

Start each overview with the problem the client had. Clients reading it see their own problem in it.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Replace the sample projects in the Projects CMS collection with mine. Create one item per project from this list, with its project name, project overview, project type, categories, year, role and client: [PASTE YOUR PROJECT DETAILS]. Set Gallery Layout to [GRID, MOSAIC OR STACKED]. Delete any sample projects that are left. Leave the cover and the gallery empty so I can upload them myself.

Mark step 5 as done

Next: Write your about →

Step 06

Write your about

You write about yourself in two places: the about section on the home page and the about page. Start with the section, then reuse the same texts on the page.

6.1

About section on the home page

Replace the photo and the three texts in the about section with the ones you prepared in step 1: your about statement, why work with me, and when I am not designing.

The big text at the top is the first thing visitors read about you, so give it the most care. Write 2 sentences, about 35 words. The first says who you are and where you are based. The second says who you work with and what they get from working with you. Keep it close to that length so the section stays balanced.

The download resume button works two ways. Upload your resume as a PDF file and visitors download it in one click. No PDF? Switch the button to the regular link option and paste any link, like your LinkedIn profile or a resume on Google Drive.

Keep each text close to 35 words. Much longer text pushes the photo and the button out of line.

6.2

About page

Open the about page from the Pages panel. At the top, upload the same photo you used in the about section.

Next come three short paragraphs. Use the same three texts from the about section, shortened to about 20 words each.

Each paragraph has a scroll animation. It fades in to full opacity when it comes into view. To keep the animation working, select a paragraph and replace the text in its variable in the right panel.

Don’t open the paragraph component to type on the canvas. Change the text only in the right panel.

6.3

Your experience

Below the paragraphs is the experience section. Every row is the same Experience card component. Select a row and change its content in the right panel.

To add a role, duplicate a row and replace its content. Delete the rows you don’t need.

Title

The company or studio, or freelance.

Example: vertex creative studio

Role

Your role there.

Example: junior designer

Description

One sentence, about 20 words, on what you did or who you worked with.

Example: collaborated with senior designers on brand identity projects for clients across food & beverage, tech, and retail industries

Year

When you worked there.

Example: 2021 - 2022

6.4

Call to action on the about page

The about page ends with the same call to action as the home page. It is a separate copy, so update its 4 images, its text and its link here too, the same way as in step 7.

Founder tips

From Lazar, who made this template

A real photo of you works better than a logo. Clients hire people.

List your experience newest first. Clients care most about what you do now.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Update the about section on the home page. About statement: [YOUR ABOUT STATEMENT]. Why work with me: [YOUR TEXT]. When I am not designing: [YOUR TEXT]. Use the attached photo as my portrait. Link the download resume button to [YOUR RESUME LINK]. Then update the about page: use the same photo, shorten the three texts to about 20 words each and put them in the three paragraph variables. Replace the experience rows with mine, one row each, with title, role, description and year: [YOUR EXPERIENCE]. Keep the current layout, animations and text styles.

Mark step 6 as done

Next: Edit the call to action →

Step 07

Edit the call to action

The call to action above the footer is the last thing visitors see before they leave. It is one component with four parts: a text on the left, a text on the right, a slideshow of 4 images in the middle and one link for the whole thing.

Select the component on the canvas. In the right panel, under CTA Link, upload 4 images of your projects to Image 1, Image 2, Image 3 and Image 4.

Want different words? Type the left text in First part and the right text in Second part. Then change Link to where it should take visitors, like your email or your contact page. For email, write mailto: before your address, like mailto:you@yourname.com.

That is all. You never need to open the component.

Watch out

Keep both parts short. One or two words each fit the layout best, like get in and touch.

Founder tips

From Lazar, who made this template

Use your 4 strongest project images. The slideshow is a last reminder of your best work right before someone decides to write to you.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Update the CTA Link component above the footer. Use the 4 attached images for Image 1, Image 2, Image 3 and Image 4. First part: [LEFT TEXT, OR DELETE THIS SENTENCE]. Second part: [RIGHT TEXT, OR DELETE THIS SENTENCE]. Set Link to [mailto:YOUR EMAIL OR YOUR CONTACT PAGE]. Keep everything else as it is.

Mark step 7 as done

Next: Change colors and fonts →

Step 08

Optional

Change colors and fonts

This step is optional. The colors and fonts in the template were picked to work together, so my advice is to change as little as you can. Want a different look? Email me first and I will help you choose colors and fonts that fit the design.

The template has two color styles, dark and light, and a text style for every heading and paragraph. You find them all in the left panel under Assets. Whatever you change there updates across the whole site.

All text in the template is lowercase by default. To use normal capitals, open a text style, find Transform and choose None. Do this for every text style you want to change.

Watch out

Don’t set colors on single layers. Those layers stop following your styles and you have to fix them one by one later.

If you change the dark or light color, keep strong contrast between them. Light text on a light background is hard to read.

Founder tips

From Lazar, who made this template

One small change is often enough. A new dark color alone can make the site feel like yours.

If a new font looks off, adjust its letter spacing before you drop it.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Change the dark color style to [HEX CODE] and the light color style to [HEX CODE, OR DELETE THIS SENTENCE]. Change the heading text styles to the font [FONT NAME, OR DELETE THIS SENTENCE]. Set Transform to None in every text style so my text uses normal capitals [OR DELETE THIS SENTENCE]. Keep every other style as it is.

Mark step 8 as done

Next: Check it on mobile →

Step 09

Check it on mobile

Most clients open your link on a phone first. Switch to the tablet and phone breakpoints on the canvas and scroll through every page.

Look for long words that break, images that crop badly and text that runs off the screen. Fix each one on the breakpoint where you see it.

Then open the preview on your own phone and tap through the whole site once.

Watch out

A change on the phone breakpoint stays on the phone. A change on desktop flows down to smaller screens, so fix desktop first.

Founder tips

From Lazar, who made this template

Send the preview to one friend and watch them use it. You will spot problems in a minute.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Check every page on the phone breakpoint. Fix text that overflows, images that crop badly and spacing that looks off. Then tell me what you changed.

Mark step 9 as done

Next: Publish and connect your domain →

Step 10

Publish and connect your domain

The last step. Set how your site shows up in Google and in shared links, publish it and put it on your own domain.

10.1

Site title and description

Open Site Settings. In General you set the site title and the site description. Google shows both in search results, and they appear whenever someone shares your link.

Use the keyword you want to be found for in both. Think about what a client would type into Google to find someone like you, like brand designer in Portland.

Site title

Your name and what you do. Under 60 characters.

Example: Mike Bennet, Brand Designer in Portland

Site description

Who you help and what they get, with your keyword once. Under 155 characters.

Example: Brand designer in Portland helping small businesses and startups build brand identities that stand out.

Prompt: write your title and description

Copy prompt

Paste this into ChatGPT, Claude or any AI chat. Replace anything in [BRACKETS] first.

Write an SEO title and a meta description for my portfolio website. I am a [WHAT YOU DO] based in [YOUR CITY] and I work with [WHO YOU WORK WITH]. The keyword I want to rank for is [YOUR KEYWORD]. The title must be under 60 characters and include my name and the keyword. The description must be under 155 characters, use the keyword once and tell a client what they get from working with me. Give me 3 options for each.

10.2

Favicon and social image

In the same place you upload the favicon and the social image.

Favicon, light

The small icon in the browser tab when the browser is in light mode.

Size: 64 x 64 px

Favicon, dark

The same icon for dark mode. Upload a version that stands out on a dark tab.

Size: 64 x 64 px

Social image

The preview that shows up when you share your link on LinkedIn, X or in messages.

Size: 1200 x 630 px

Many creatives launch and forget this part. Their link then shows up as Mike Bennet - Free Portfolio Website Template, with the template icon and preview. Check the title, description, both favicons and the social image before you publish.

10.3

Publish and pick a plan

Delete this Start here page first. Then click Publish at the top right. Your site goes live right away on a free Framer address.

To put it on your own domain and remove the Made in Framer badge, your site needs a paid plan. You pay per site, and yearly billing costs less than monthly.

Why not stay on the free address?

It looks like a test site. A client sees yourname.framer.website and wonders if you are serious. Your own domain says you are open for business.

The badge promotes Framer, not you. The Made in Framer badge sits on every page of a free site.

It is easy to remember and share. yourname.com fits on a business card, in your email signature and in a conversation.

It stays yours. If you ever move your site, the domain and the links people saved come with you.

My advice: Basic, billed yearly. This template uses 2 CMS collections, Projects and Categories, which is exactly what Basic includes. Paying yearly costs less, and you get your domain free for the first year. Pick Pro only if you plan to add a blog or other collections later.

10.4

No domain yet? Get one free

Upgrade your site to a yearly Framer plan and Framer gives you a custom domain free for the first year. Open Site Settings, go to Domains and choose Claim a free custom domain.

Framer registers it through Hover and connects it for you. After the first year the domain renews at the normal price.

10.5

Connect a domain you already own

Bought your domain on GoDaddy, Namecheap or somewhere else? First get the Framer plan that fits you, because a custom domain needs a paid plan.

Then open Site Settings, go to Domains, choose Connect a domain you own and type your domain. Framer shows you the DNS records to add. They usually look like this:

Type

Name

Value

31.43.160.6

31.43.161.6

CNAME

www

sites.framer.app

Add the records at your provider

Log in to your domain provider and open the DNS settings of your domain. Delete any other A or AAAA records for it, then add the records from Framer one by one. Always copy the values Framer shows you, in case they change.

Go back to Framer and wait for the domain to connect. It is often quick, but it can take up to 48 hours.

Some providers want a dot at the end of the CNAME value: sites.framer.app. with the dot. If the record does not save, try it that way.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Set the site title to [YOUR SITE TITLE] and the site description to [YOUR SITE DESCRIPTION] in the site settings. Delete the Start here page. Then list anything I still need to do before I publish, like the favicon, the social image or text that is still a placeholder.

Mark step 10 as done

Launch checklist →

Launch your portfolio in hours without learning Framer

The ten steps

Get your content ready

Learn the basics

Change your name

Edit the navigation and footer

Open the layout template

Edit the navigation

Edit the footer

Add your projects

CMS basics

The project detail page

Manage your projects

Project cover

Content and project overview

Gallery

Pick a layout

Add your media

Write your about

About section on the home page

About page

Your experience

Call to action on the about page

Edit the call to action

Change colors and fonts

Check it on mobile

Publish and connect your domain

Site title and description

Favicon and social image

Publish and pick a plan

No domain yet? Get one free

Connect a domain you already own

Everything from first file to live link

Stuck on a step?