Previewing a template

screenKeywords:
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
. . . . .
oost — eSPOHSIve Boost is a collection of fully responsive website templates that are
o ready for production. You can use pre-built sections to quickly
WebSIte I em plqtes assemble pages from various categories and you can customize
everything to your business’s needs.
By Framer
. @ boout el - ] @ boose @ boost el - ] @ soost el - ]
‘ Boost your website. p— Boost y - s Empowering creators.
Boost your website. G =it Boost your = website. "
i it oy =3 website. - I . Ty _— -r
“ ] - e . r e 7 -- i ﬁ y
wen I = = | =
Building t;l;:;:ks; for your p——r. E £ j r L;ading
next website. Building blocks for your l - development for
next website. 5 modern teams.
ol D]
for your next 20+ 60+ development for

website. == (i‘ - - modern teams. 80 5

P — S o = ? -
|C3 Boost Overview Pages Style Guide Use Template
/
m . o
Empowering creators. =
aistami tyour usiasss neods Empowering B P
- T ‘ o creators. i
FREE FRAMER TEMPLATE " _ | TS T I | \ e e e P, il & \ |
R 1 | s S
b | ¥ oF e = " Q o J i 4
| - z. \ v \'L I ‘\: | ’)
L 57 IV
Boost your o]
j - ‘ 5 «
. [\ P 'y ’ ouRsuccess
Leading development
We S I e for modern teams.
D e ey
g . : 20+ 60+ 20+ 60+ 80
Quickly assemble pages from various e m
development for
categories and customize them to your LSS w2 | S
bUSIneSSlS needs & Boost verviow  Pages  Siylecude & Boost ovrview  Pages  StyloGuide
Use Template Explore P
P plore Fages Empowering creators. Wecanhelp
Combine sections from a range of categories to easily [T o = Getintouch
assemble pages that meet the needs of your growing business | S ot b ey it
S = i T
- EE T iy e T G e
- S0~ W) E ‘ W' e .
g "fl B i L Laa A “ R ‘ }%'*9 B trenotmorincs
s i) ") e
20+ 60+ 80 6 W e M}(h‘.\:m—a Ty seee


Adding effects

appName: Framer

appCategory: Graphics & Design

appTagline: Where teams design and publish stunning sites

companyHqRegion: Europe

companyStage: Growth Stage

platform: web

pageType: Application

hotspotType: Click

screenElements:
Popover
Segmented Control

screenElements:
Popover
Segmented Control
Dropdown Menu
Side Navigation

screenPatterns:
Add & Create
Add & Create

pageType: Application Application Application Application

allAppCategories:
Artificial Intelligence
Graphics & Design

screenKeywords:
T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Grow « =l ¢
Pages Layers Assets
Effects +
Web + o Desktop v 1200 Breakpoint '+
A Home Set Effect X Appear Set Effect b3
FRAMER
@ /about
Trigger Load Scroll Styles +
@ /contact 4
@ /404 Preset Scale In v Opacity 1 I
I'm John Smith Enter iz * Visible Yes No
CMS +
B Make beautiful websites overfiow D .
Canvas + — You've never made a website
this fast before. Really. Rotation 0°
Get Started
Text
Styles Title (L) x
oy, Content I'm John Smith
3
i ) Color #FFFFFF X
" :
i
e Shadows Add...
Align = = B
World-class hosting
Infrastructure built for scale,
performance and reliability. Accessibility o _
Tab Index Clear
Tag h1 v
‘ w . 50% v Upgrade Now
Code Overrides +
|v B9 msert B Layout F @ Text cMs Portfolio FREE
¥ kg Inser '- ayou . rame T RIS g ortfolio e o] » m
Grow > =l o
Pages Layers Assets
Effects '
Web + o Desktopv 1200 Breakpoint + Appear
A Home Styles Scroll Appear
FRAMER About  Contact
@ /about
Opacity 1 Scroll Speed
@ /contact
Visible Yes No
@ /404
. Overflow Visible v
I'm John Smith
CMS + Rotati -
. . otation
Make beautiful websites
Canvas + = You've never made a website
this fast before. Really.
Text
Get Started
Styles Title (L) x
Content I'm John Smith
. Color #FFFFFF X
€,
1 Shadows Add..
&y Yy
S Align = = =
Accessibility @ -
World-class hosting
Infrastructure built for scale,
performance and reliability. Tab Index Clear
Tag h1 v
Code Overrides +
‘ w . 50% v Upgrade Now Handoff +
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Grow « =l ¢
Pages Layers Assets
Effects +
Web + o Desktop v 1200 Breakpoint '+
A Home Set Effect X Appear Set Effect b3
FRAMER
@ /about
Trigger Load Scroll Styles +
@ /contact 4
@ /404 Preset Fade In v Opacity 1 I
I'm John Smith Enter iz * Visible Yes No
CMS +
B Make beautiful websites overfiow D .
Canvas + — You've never made a website
this fast before. Really. Rotation 0°
Get Started
Text
Styles Title (L) x
oy, Content I'm John Smith
3
i ) Color #FFFFFF X
" :
i
e Shadows Add...
Align = = B
World-class hosting
Infrastructure built for scale,
performance and reliability. Accessibility o _
Tab Index Clear
Tag h1 v
‘ w . 50% v Upgrade Now
Code Overrides +
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Pages Layers Assets I- + -I T + 8 I'I =
Link +
Web + o Desktop v 1200 Breakpoint +
A Home Position
FRAMER About  Contact
® [about Type Relative v
@ /contact
® /404 Size +
oMs + Width Auto Fit v
Make beautiful websites
= You've never made a website Height s A e
Canvas + this fast before. Really.
Grow > =l o
Get Started
Effects +
Styles +
oy,
‘;j'f‘ Opacity 1 —
L i Visible Yes No
| Overflow Visible v
World-class hosting Rotation 0
Infrastructure built for scale,
performance and reliability.
Styles D Select...
Font Inter v
k w . 50% v Upgrade Now Weight Regular v
P [ PN


Showing out of view content

hotspotType: Pan

screenElements: Toolbar Button

screenElements: Toast Button

screenElements: Toast Button Toolbar Button

pageType: Application Application Application

screenKeywords:
[} .
v B9 msert Layout F @ Text cMs Portfolio FREE
¥ kg Inser '. ayou . rame T RIS g ortfolio e o] » m
Pages Layers Assets I- + -I T + 8 I'I =
Overlays +
Web +
o Desktop v 1200 Breakpoint +
PR Button Add...
@ Jabout i FRAMER About  Contact i
: : Position
@ /contact
@ /404 Type Relative v
CMS + . . Size
Make beautiful websites
Canvas + You'vg never made a website Width 368 Fixed v
this fast before. Really.
Get Started Height Auto Fit v
Fit Content
Effects +
: g, i
: ;J:’:‘ i Styles +
i}”"ﬁ, W, Opacity 1 _—
i Visible Yes No
| =R ‘ |
i World-class hosting i Rotation 0°
i Infrastructure built for scale, i
] performance and reliability. |
i i Elements/Card Component
T T Title World-class hosting
Text Infrastructure built
_ for scale,
° )
é Edit k W . 50% v Upgrade Now performance and
reliability.
|[} .
. Insert Layout Frame Text CMsS Portfolio FREE
v Qe B @ E) e >
Pages
Overlays +
Web +
Button
A Home
/about
Position
/contact
1404 Type Relative
CMS + Size
Canvas + Width 368 Fixed
Height Auto Fit
Fit Content
Effects +
Styles +
Opacity 1 —
Visible Yes
Rotation 0°
Elements/Card
i) Yourcontentis out of view  Show Title World-class hosting
Text Infrastructure built
0 for scale
o )
4 Edit w U ® s0% Upgrade Now e A
reliability.
|[} .
v B9 msert Layout F @ Text cMs Portfolio FREE
¥ kg Inser '. ayou . rame T RIS g ortfolio e o] » m
Pages Layers Assets I- + -I T + 8 I'I =
Overlays +
Web +
o Desktop v 1200 Breakpoint +
PR Button Add...
@ Jabout I FRAMER About  Contact I
: I Position
@ /contact
@ /404 Type Relative v
CMS + . . Size
Make beautiful websites
Canvas + You'vg never made a website Width 368 Fixed v
this fast before. Really.
Get Started Height Auto Fit v
Fit Content
Effects +
: g, i
: ;J:’:‘ i Styles +
i}”"ﬁ, W, Opacity 1 _—
i Visible Yes No
| =R ‘ |
I World-class hosting i Rotation 0°
I Infrastructure built for scale, I
] performance and reliability. |
I I Elements/Card Component
T T Title World-class hosting
Text Infrastructure built
_ for scale,
° )
é Edit k W . 50% v Upgrade Now performance and
reliability.


Archived

screenElements:
Side Navigation
Banner
Icon
Button
Card

screenPatterns:
Home
Empty State

pageType: Application Application

screenKeywords:
John
Get Started
© Recent
® Archived
.+ https://your-next-website.framer.app
Upgrade now to access
more premium features.
App Tour O Learn Framer 7
Upgrade An interactive tour to learn Browse video tutorials,
the basics of Framer. examples, and articles.
o Mobbin
an
s Templates
W Archived Q Search 2 projects... Last viewed by me v
+ New Folder...
K N < L VY i
e NS LN
NS ¥ §6 ]
/ : N Mrrs
J %':"’"s SUS ”.%”':%.\ v
S B N ey
e :"r\" S Y ' =
N o 25 NGRS
BTN N I R /"? - i
a0 RS e S, RS by S
S }»\\_ ¥ X/ ? N &2
+ Create Team... SR \\\\; " N 4
‘ Soog A i S, N
|John .
Archived e =
© Recent
® Archived
>
Upgrade now to access
more premium features.
Upgrade
No Archived Projects
All archived projects
will be listed here.
v o Mobbin
% Al
s Templates
® Archived
+ New Folder...
+ Create Team...


Learn

pageType: Marketing

pagePatterns:
Hero Section
Landing Page

hotspotType: Scroll Vertically

screenElements:
Grid List
Card
Thumbnail

screenElements:
Stacked List
Icon

screenElements:
Logo
Button
Animation & Video
Floating Action Button
Banner
Grid List
Card
Thumbnail
Grid List
Animation & Video
Keyboard Key
Stacked List
Icon

pagePatterns:
Hero Section
Landing Page
Guides & Tutorials Page
Guides & Tutorials Page
Guides & Tutorials Page
Guides & Tutorials Page

pageType: Marketing Marketing Marketing Marketing Marketing

screenKeywords:
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -
Ship si ith sty
Ip sites with style.
Go from design to world-class site with Framer,
the web builder for creative pros.
¥ Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing
I W s l“lv’ 'l“vvv’ vl\“lllrlvv’ -l
L] [J
articles to get started with Framer.
| out
ST e ETI . . ot A7
»w — R — e . . T N S
. = ) " . Mix 3D . 2
e L T and 2D design ) D SO
L -,‘;_,‘,‘, - — o with Framer “f’"i:os &P
@ e - iy Clnemut[cvl leo . . p< /¢
T P—— i ol = S g
made simple D = W - B . 4
= et - ]
Detail works with OLIC ) - !
®
Videos
Browse all 30+ videos on YouTube. - )
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
] °
Tutorials, videos, examples, and
L] [J

articles to get started with Framer.
= : Lo : Mix 3D . “w,
i e’ =3 Lo and 2D design )
T ‘ngft c.":(d o with Framer A ',:i-""oo: G
- P e T Lo ‘?"f/}

- e [ >
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing
Get sta rted Use 8+F or CTRL+F tosearch.
You’ve never made a . . = W:m m‘d fw | R
website this fast A new model for ~ apen collaboration el
bu' open collaboration ,» - m ‘ hv /
s e iy &
= [l PR = e
T ; e B S
= . Reimagining what it means to work Reimagining what it -
- e e i ,L.":“"v‘:‘,"“if; W joatrub
Create a landing page Start from Figma Create a blog with the CMS
15m 10m 5m
[ Whatis Framer?
i Importing from Figma
= Importing from Sketch
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing

[ Whatis Framer?
= Importing from Figma
i Importing from Sketch
[ Publishing your Site
i Previewing your Site
i Collaborating in Framer
[ Managing Content (CMS)
i Configuring Site Settings
[ How to use templates

Layout

| B .


Searching for a CMS item

hotspotType: Keyboard Input

screenElements:
Table
Stacked List
Icon
Searchbar

screenElements:
Searchbar
Table
Stacked List
Icon
Searchbar

screenKeywords:
& + New ltem Q B
Collections Title Slug Tint
€ Project 1
+ Add..
No search results
Documentation
|& + New ltem Q Search
Collections Title Slug
€ Project 1 R . .
& ProjectA project-a
+ Add..
Documentation


Copying project invite link

screenElements: Avatar Button

screenPatterns:
Invite Teammates
Invite Teammates

screenKeywords:
T v Insert '= Layout . Frame Text g CMs Portfolio FREE e’ o] > m
Invite Collaborators
Pages Layers Assets
Email address Can edit v
Web + o Desktop v 1200 Breakpoint <+
n Mobbin Can access
‘ Home 35t All team members
i FRAMER About  Contact i
@ /about i | 4] John Smith Owner
Viewing now
@ /contact
Jane Doe _—
@ /404 . Never viewed Can edit
cMs + Make beautiful websites
You've never made a website
Canvas + this fast before. Really.
Get Started
Anyone with the link can view v Copy Link
I s |
i Qv,n i Styles +
] & i {
i “‘;é"‘ Opacity 1 B —
(=]e ® Visible Yes No
i World-class hosting i Rotation 0
i Infrastructure built for scale, i
] performance and reliability. |
e |
] 4 Elements/Card Component
Variant Variant 1 v
Title World-class hosting
4 Edit w ¥ @& s50% -~ Upgrade Now
Text Infrastructure built
for scale,
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e’ o] > m
Invite Collaborators
Pages Layers Assets
Email address Can edit v
Web + o Desktop v 1200 Breakpoint <+
Mobbin Can access
‘ Home 35t All team members
i FRAMER About  Contact i
@ /about i | 4] John Smith Owner
Viewing now
@ /contact
Jane Doe _—
@ /404 . Never viewed Can edit
cMs + Make beautiful websites
You've never made a website
Canvas + this fast before. Really.
Get Started
Anyone with the link can view v v Copied
i o ;
i v"‘ i Styles +
] & i {
i “‘;é"‘ Opacity 1 B —
(=]e ® Visible Yes No
i World-class hosting i Rotation 0
i Infrastructure built for scale, i
] performance and reliability. |
e |
] 4 Elements/Card Component
Variant Variant 1 v
Title World-class hosting
4 Edit w ¥ @& s50% -~ Upgrade Now
Text Infrastructure built
for scale,


Inserting a Frame

screenElements:
Side Navigation
Accordion

screenKeywords:
L Insert .= Layout . Frame Text CMs Portfolio FREE @ o] °
+
Pages Layers Assets v Phone
iPhone 13 390 x 844
Web +
iPhone 13 Mini 375 x 812
A Home iPhone 13 Pro 390 x 844
® /about iPhone 13 Pro Max 428 x 926
@ /contact iPhone 11 414 x 896
@ /404 iPhone 11 Pro / X 375 x 812
iPhone 11 Pro Max 414 x 896
CMs + iPhone 8 375 x 667
iPhone 8 Plus 414 x 736
Canvas +
iPhone SE 320 x 568
0 Gaesi Android 360 x 800
Google Pixel 5 360 x 780
Google Pixel 4 360 x 760
Google Pixel 4XL 360 x 760
v Desktop
MacBook Air 1440 x 900
MacBook Pro 14" 1512 x 982
MacBook Pro 16" 1728 x 1117
iMac 24" 1280 x 720
iMac 27" 2560 x 1440
Pro Display XDR 3008 x 1692
Dell XPS 1920 x 1080
Microsoft Surface Book 1500 x 1000
w ¥ & 50% - Upgrade Now
> Tablet
|L Insert .= Layout . Frame Text CMs Portfolio FREE e o] °
Pages Layers Assets
Web +
A Home
@ /about
@ /contact
@ /404
CMS +
Canvas +
& cCanvas1
w ¥ & 50% - Upgrade Now
|L Insert .= Layout . Frame Text CMs Portfolio FREE e o] °
Pages Layers Assets
Interactions +
Web +
A Home Screen
® /about Device iPhone 13 v
@ Jeontact .’ Prone 3 o Orientation [u] o
@ /404
Position 490 x 0 Y
cms + Width 390 Fixed v
Canvas + Height 844 Fixed v
& cCanvas1
Layout +
® Styles +
Opacity 1 —
Visible Yes No
Radius 0 o o
Overflow Hidden v
e e Rotation 0°
Fill #FFFFFF X
Border Add...
Shadows Add...
w ¥ & 50% - Upgrade Now
Code Overrides +


Quick Actions menu

screenElements:
Dropdown Menu
Keyboard Key

screenElements:
Icon
Keyboard Key

screenElements:
Icon
Keyboard Key
Dropdown Menu
Keyboard Key

screenKeywords:
; v Insert '= Layout . Frame Text g CMS Portfolio - objects-wait-224783.framer.app FREE e o » m
Pages Layers Assets |- + -l [T L |'| =
Type a command or search... Overlays +
Web + o C nt gk
. Create Web Page... Button Add...
A Home + g
FRAMER Contact
bout
® /abou ~+  Create Component... X 8K .
Position
@ /contact
Website i
@ /404 Type Relative v
@ Publish Website o ®P
CMS + Size
@ Open Published Page... & #0
Canvas + Width 368 Fixed v
Collaborate
Height Auto Fit v
A Invite Collaborators...
Fit Content
Help
@ Learn Framer Effects +
—>  Start App Tour Styles +
T Opacity 1 —
(=]e L o Visible Yes No
World-class hosting Rotation 0°
Infrastructure built for scale,
performance and reliability.
Elements/Card Component
Variant Variant 1 v
Title World-class hosting
4 Edit w ¥ ® s0% - Upgrade Now
Text Infrastructure built
for scale,
|A B Insert H Layout Frame by Text CMS Portfolio - objects-wait-224783.framer.app FREE » Publish
» +
Go to Dashboard = & @ 3 4 0 8 =
Quick Actions... #K Overlays +
o Desktop v 1200 Breakpoint +
File N L Button Add...
Edit N E FRAMER About  Contact E
View N Position
Tool > Type Relative v
Layout >
Text ’ Make beautiful websites size
680
Graphic > You've never made a website
this fast before. Really. Width 368 Fixed v
Component >
Get Started
Preview > Height Auto Fit v
Code ’ Fit Content
Preferences >
b r ] . Effects +
Site Settings > : . !
I v I
Help > i ¥ i Styles +
Your Account & .
f 3 A% H .
e Opacity 1 —
] = =0 < = ! Visible Yes No
: i
I World-class hosting i Rotation 0
i Infrastructure built for scale, i
] performance and reliability. |
e |
] 4 Elements/Card Component
Variant Variant 1 v
Title World-class hosting
4 Edit w ¥ ® s0% - Upgrade Now
Text Infrastructure built
for scale,


Browse a template category

screenElements:
Side Navigation
Grid List
Thumbnail

pageType: Marketing Marketing

screenKeywords:
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
Free tem plates.
Browse through all free website templates and create a professional-
looking site without spending a fortune. They come in all shapes, colors,
and sizes with various features, options, and plugins. All free website
templates are fully responsive and compatible with the major browsers.
All Website Templates
Free =
e 8°°8ty ) .
e Oy
= e By, Wep.. A%
Agency bt . S Site, om0 .
. g Ny it By v
o J r,,)s, 3
Blog S Q Q e,
RS % \. ‘ Joo ; *»»
Brand Guideline e \ B s
oy tours ety d
Changelog My name is Dana Parker, R e nenoreciel) . Y A = o - —
I'm a digital artist working ‘ / Y i ‘ e j € Made in Framer
Landi P and living in Amsterdam. Instagram Twitter Mail LA i e s < Sooge.
anding Page Ry 7 Moy, - a s
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
All Popular Website Templates
Free . S ‘
S 'O . .
. . ost}’o,,,w% o ) A tfoo) fo
Agency BTN Site, ey 0 ‘ Your ¢ ©Groy,
L e, [y N W e e SHartyp &
' el o e oy, -
/8 QS /8
Brand Guideline e \ e . —ll
N S, & - -
P N itg, "okt Pty g, ° Nee
Changelog / W & o °° O,
~ \ et hox tq
Landing Page RS 0 ¥ 4 Mmpo, ~ e \ Soly,
4 7Y A "’Gr/;,gc’ea y = % S~ ] , ° o ;_?blee;l:fohwr
2 3 opg Yetiveyy,
Personal L A :
20, J 7 weea” h :b Y the be. % ’
L R 9 es in the st y
Photography “ & IJI
AN : < ; » R ' %"50/
Podcast < / %&""m BB Zfsro O
S s, o 5 »p e B‘uil:ye ? reatcy,
Splash Page
= E Boost Free 3D Landing Page Free SaaS Free
Startup
Web3 ‘
e o (D
2 i N
3D | ) P — Stay close to your SATRNERSOTy O


Home page

appName: Peanut

appCategory: Lifestyle

appTagline: Fertility pregnancy motherhood

companyStage: Early Stage

platform: ios

hotspotType: Scroll Horizontally

screenElements: Avatar Carousel Card

screenElements: Card Carousel

screenPatterns:
Home
Invite & Refer Friends

screenElements:
Card
Carousel
Tab Bar
Avatar
Carousel
Card
Top Navigation Bar
Avatar
Carousel
Card

screenPatterns:
Home
Home
Home
Invite & Refer Friends
Home

allAppCategories:
Social Networking
Lifestyle

screenKeywords:
9:419 il @
§3) Qa Q0
Upcoming pods >

Nov 3, 2022 at Nov 3, 2022 at
12(())\(/) AM ’ Q ZZ%VO AM ’ Q
Ask a ©
@ Marriage T... @ Relationshi...
& )
Posts you might like
M-BRACE THE CHANGE
Sharon - Tue, Nov01 @ Railey Mo
M-brace Symptom
Handbook @® 7
¥
4 Q e?
Invite your friends
(o)

) 22 (@) By
|9:419 all T @
§3) Qa Q0
Be thankful for what you
already have.

Meet other women - >
Q010000
Live pods © >

i1 Live ilr Live
Squad Sesh After dark pod
Recently active groups >
PRO GROUP PRO GROQUP
Maryland'Singler-and Spill The'Te
Solo/Moms Tips for.Si
vy, o0y Miss)Masie %4, by Miss M
Upcoming pods >
0 e (©) .y
|9:41 4 -Ill ? @'
§2) Qa Q0
Posts you might like

M-BRACE THE CHANGE
Sharon - Tue, Nov01 @ Railey Mo
M-brace Symptom
Handbook @ °°
Vi1
Invite your friends
Stay connected with your friends on Peanut and
help them find support.
go (©) 8y
an
|2414 all T @)
§3) Qa Q0
Be thankful for what you
already have.

Meet other women - >

. B ] a /
1900000 ¢

Live pods © >
i|v Live 1l Live
Mommy Time ¥ & Podding in
W g the morning
Recently active groups >

PRO GROUP
a Club:
myRESHEY Bromley bump$
dset Coach @ by Erin
Upcoming pods >
0 g2 (©) W


Unlocking a premium post

hotspotType: Tap

screenElements: Button Tab

screenPatterns:
Subscription & Paywall
Pricing

screenElements: Button Button Tab

screenPatterns:
Post Detail
Subscription & Paywall
Pricing
User / Group Profile

screenKeywords:
9:41 all F @)
< Healing your anxious mind - An Anxiety 000
Support Group ¢ ...
PREMIUM
& W Admin
Vancouver, Metro Vancouver Regional Distric...
5 *EFFECTIVE* skills to
reduce anxiety in your life as
(4
amama ¢
Self-care More
¥ 2 Follow (" Share
W Admin - 2
Today | wanted to focus on 5
effective ways to reduce
anxiety in your life as you
move through motherhood.
When | first started typing this
the title was '5 ways to calm
anxiety quickly' but then |
started to think...what
message is that sending to
anyone struggling by saying
anxiety is something we can
essentially 'rid’' ourselves of
quickly.
| would love to say there is a
|9:41 -Ill ? (G
< Healing your anxious mind - An Anxiety 000
Support Group ¢ ...

not about healing ‘pertectly’
its about embracing those
imperfect moments of healing
as a way to learn and grow.
| hope these tips resonate
with you, and remind you that
healing IS possible and you
ARE so much more capable
than you realize. You are
enough, just as you are. Even
on the difficult days, the days
that you may struggle to show
up as a mama, or days where
you're frustrated with how
things went. You. Are. Always.
Enough.
Sending you love,
Carly

Have your say.

Be the first to comment

@ Message...
|9:41 all § (@)
< Healing your anxious mind - An Anxiety 000
Support Group ¢ ...
Have your say.
Be the first to comment
Want to get access?
L]
Pay - e o E “arly.
You're all set
Your purchase was successful.
OK
o
-

Individual plan only. Terms and conditions apply.
Payment will be charged to your iTunes account at
confirmation of purchase. You can manage your
purchases in settings.

@ Message...
S S
|9:41 -Ill ? @'
< Healing your anxious mind - An Anxiety 000
Support Group ¢ ...
Have your say.
Be the first to comment
Want to get access?
L]
Pay to unlock this exclusive post from Carly.
ACCESS NOW
$1.48
(N
-
P4
Individual plan only. Terms and conditions apply.
Payment will be charged to your iTunes account at
confirmation of purchase. You can manage your
purchases in settings.
. ]
|9:41 all F @)
< Healing your anxious mind - An Anxiety 000
Support Group ¢ ...
Have your say.
Be the first to comment
X
Want to get access?
Pay to unlock this exclusive post from Carly.
ACCESS NOW
$1.48
UNLOCK NOW
Individual plan only. Terms and conditions apply.
Payment will be charged to your iTunes account at
confirmation of purchase. You can manage your
purchases in settings.
. ]
|9419 ' . all(F (=)
[eXeXe}
0 @ -
Healing yur anxious Mld =/An An...
PREMIUM
€ W Admin
PREMIUM
5 *EFFECTIVE* sKkills to reduce anxiety
in your life as a mama ¢’
L 4
€ W Admin
PREMIUM
5 steps to reframing negative/
intrusive thoughts ¢
|App Store Cancel

Unlock Premium Post
a Peanut: Find Friends & Support
In-App Purchase
ACCOUNT
PRICE SGD 1.48
Purchase
. ]


Logging out

screenKeywords:
Welcome to Framer
Don’t have an account? Sign up for free
G Continue with Google
Sign in with email instead
|John
Account Settings Get Started
© Recent Night Mode
@ Archived Desktop App
Start App Tour
Import From... >
.* Hide Get Started https://your-next-website.framer.app
Upgrade now to access Hide Template Selection
more premium features.
Homepage APP Tour O Learn Framer 7
Upgrade Feedback An interactive tour to learn Browse video tutorials,
Support the basics of Framer. examples, and articles.
Community
Sign Out
o Mobbin
% Al
s Templates
W Archived Q Search 2 projects... Last viewed by me v
+ New Folder...
3 N NN Y KA i
VUINRTYER/
NN -9 §6
7 /s Ny N ¥ =
VE: R -
/ % ( ;~ ;\ RS S&:}k Make beautiful websites
- ASGs . 4 \i l_
o = X Q
O N
SO S,
Lo NN/ VYK
NG S AN AL
N 1“"{\- 2N 4 ’ N =
+ Create Team... SR " N %
S S . N
R Sty
‘ RN AN


Moving a project

screenElements: Dialog Button

hotspotType: Hover

screenElements:
Button
Dropdown Menu
Dialog
Button
Dropdown Menu

screenPatterns:
Move
Bookmarks & Collections
Action Option
Acknowledgement & Success
Move
Move

pageType: Application Application Application Application Application Application Application

screenKeywords:
John
© Recent psilyour-next-website framer.app
® Archived
App Tour O Learn Framer 7
An interactive tour to learn Browse video tutorials,
* the basics of Framer. examples, and articles.
Upgrade now to access
more premium features.
Upgrade
Move “Portfolio”
. Mobbin / Personal v i
Mobbin Q  Search 2 proji Last viewed by me v
There are no available teams to move
TN your project to.
- N
@ Personal 4 >\ . \ o NV
— . 36'33."% R t"“"“\».:;» v
[ ] Archived ‘\‘-\ti\‘f\; .~ W S Make beautiful websites
+ New Folder... o ~ A, %,%; N Y
N QS Q""m S
- N “ I Sy & ", 4
NNV T A i
D AR NN i, N SCERASS O
0 Q% 3\\\ 2 R RN
SN o N N 4
‘ oo A %@‘ S
«u Boost Framer Template (copy) Portfolio
Viewed 8 minutes ago - Edited 12 minutes ago Viewed 8 minutes ago - Edited 4 minutes ago
+ Create Team...
|John
° Recent \ttps://your-next-website framer.app
® Archived
App Tour O Learn Framer 7
An interactive tour to learn Browse video tutorials,
* the basics of Framer. examples, and articles.
Upgrade now to access
more premium features.
Upgrade
Move “Portfolio”
. Mobbin / All A
o Mobbin Q  Search 2 proji Last viewed by me v
v Mobbin >
H Al -
fa Templates ”“’v».% \ Cancel m
@ Personal o, N N \ = Q) -
> / % - sz“:.\ \
—_— . SOy \ & o,
® Archived V [ S5 > N S B el wobsiios
RS ‘UN‘/ y ‘tﬁ e
+ New Folder... SR - <A &%.%; B
N Q 3
X NN & Ly & "%, .
S N s N Sl ’
N S o MRS [e—
L7 SRR &y M\\\\‘g‘ e
‘ ool i %ﬁ*ﬁ‘ S
«u Boost Framer Template (copy) Portfolio
Viewed 8 minutes ago - Edited 12 minutes ago Viewed 8 minutes ago - Edited 4 minutes ago
+ Create Team...
|John
© Recent e framerapp
® Archived
App Tour O Learn Framer 7
An interactive tour to learn Browse video tutorials,
> the basics of Framer. examples, and articles.
Upgrade now to access
more premium features.
Upgrade
Personal - 8=
o Mobbin Q Search 1 project... Last viewed by me v
% Al
s Templates
@ Personal -
@  Archived (——
4+ New Folder... -
=
w2

Portfolio

Viewed 9 minutes ago - Edited less than a minute ago
+ Create Team...
|John
° Recent https://your-next-website framer.app
® Archived
App Tour O Learn Framer 7
An interactive tour to learn Browse video tutorials,
* the basics of Framer. examples, and articles.
Upgrade now to access
more premium features.
Upgrade
o Mobbin Q Search 2 projects... Last viewed by me v
% Al
R SRR Y Y - i
fa Templates ’ %M N *-i;’::s . \4 2
_ 3 B\ - §§ I Js
@ Archived : >\ N L / \ ,\\‘
X e gy 2N
,::}"’a ™ *\ N’&:}
+ New Folder... 4 \\ﬂ A X Make beautiful websites
= e & e
Y *ﬂ)\\}f\/ 4 \t o
> & <4 M. N
A S 2540 &"““»;
TN -q}"ﬂ§\ N %’% S .
P ~ 3 % A B Open in New Tab
N / \‘Ni L7 .y ‘{47 /NG i Copy Link
ﬁ{'( :{\;\g \\\‘ N :f’:‘i;%m a % Wi '\z\\i‘: P Copy Remix Link
9 T;'i\ NS - —_=
;| ‘i\f\\“i 2 R - Save as Template
‘ \\::\\5 A%i":h TN 3 Duplicate
. M
«s Boost Framer Template (copy) Portfolio ove
Viewed 4 minutes ago - Edited 8 minutes ago Viewed 4 minutes ago - Edited 23 mit  Rename
Upgrade Plan
+ Create Team...
Archive
|John
© Recent & hitps/lyour-next-websiteframer.app
® Archived
App Tour O Learn Framer 7
An interactive tour to learn Browse video tutorials,
* the basics of Framer. examples, and articles.
Upgrade now to access
more premium features.
Upgrade
o Mobbin Q Search 2 projects... Last viewed by me v
% Al
N RN X Ty
s Templates %%%c'*’% N {’;’4& = 54 N P
= | SN S A S L .
@ Personal B, 8 ~ SV —
> 3 W e gy 2N
— . oo R Nif:}
@ Archived N Ny S R T
. '.v", 4, ‘/ g i fast efore Reat
+  New Folder... e N sk : T N / & e
N g v ! Sy, N
NS Q P, S
N ~ ) o, I
LR R N ~ . SIS 1.? / \ ia
O (S, R e
Ry k) \v\: 4\\\\ \\\ o N 2 < & ‘-\r\ X $\ =
SR S 5 .
SN & N
R Poggys. N
e G
«s Boost Framer Template (copy) Portfolio
All - Viewed 9 minutes ago - Edited 13 minutes ago Personal - Viewed 9 minutes ago
|John
° Recent \ttps://your-next-website framer.app
® Archived
App Tour O Learn Framer 7
An interactive tour to learn Browse video tutorials,
* the basics of Framer. examples, and articles.
Upgrade now to access
more premium features.
Upgrade
Move “Portfolio”
A Mobbin / All v
o Mobbin Q  Search 2 proji Last viewed by me v
There are no available teams to move
TN your project to.
fa Templates ”“’v».% \ Cancel m
= \.
@ Personal o, N N \ = Q) -
> / % = sz“:.\ \
—_— . SOy \ & o,
® Archived V [ S5 > N S B el wobsiios
B3 ‘UN‘/ g ‘tﬁ -
<+ New Folder... o - UP %“'».; N
N QS Q SRS
X NN & Ly & "%, .
S N s N Sl ’
Ba T O VEUN N &8s s
L7 SRR &y M\\\\‘g‘ e
‘ ool i %ﬁ*ﬁ‘ S
«u Boost Framer Template (copy) Portfolio
Viewed 8 minutes ago - Edited 12 minutes ago Viewed 8 minutes ago - Edited 4 minutes ago
+ Create Team...
|John
© Recent psilyour-next-website framer.app
® Archived
App Tour O Learn Framer 7
An interactive tour to learn Browse video tutorials,
* the basics of Framer. examples, and articles.
Upgrade now to access
more premium features.
Upgrade
Move “Portfolio”
. Mobbin / All A
o Mobbin Q  Search 2 proji Last viewed by me v
@ Al \
Personal
fa Templates % \ Cancel m
@ Personal VYA N NV -
> / % Y Q"ﬁ”“:: \
= f [y AN e,
@  Archived X SWE re——
+ New Folder... o ~ A, %,%; N i
X A & i/ s %’“’e,/, o
% «55\75;“7< ~ o & J?' S, S i
SRR Ny o N i
LSRR R &S z\r s
/’ﬁfs*\ NS NN B T ==

\.5 > e N N 4

‘ oo A %@‘ S

«u Boost Framer Template (copy) Portfolio

Viewed 8 minutes ago - Edited 12 minutes ago Viewed 8 minutes ago - Edited 4 minutes ago
+ Create Team...


Template detail

pagePatterns:
Feature Section
Templates Page

screenElements: Accordion Link

screenElements:
Button
Button
Chip
Accordion
Link
Grid List
Accordion
Side Navigation
Grid List
Thumbnail
Chip
Tooltip

pagePatterns:
Templates Page
Templates Page
Templates Page
Feature Section
Templates Page
Templates Page
Templates Page

pageType: Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing

screenKeywords:
& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
All Popular Website Templates
Free ‘
- ' Atooy
Py a/fZ;;’O T )'Oursf;‘:ffow
"’/}‘/;,9_‘9”::: o "q T \* g ’ Up v
Blo \ Over 30, o P 2 o By
o - \ /e
Brand Guideline . %/N oy —
A= 8 .. :
Changelog b = -t O, —
Bty A :
Landing Page i i ‘ S
g Pag e - ProgUstome,
“ = Progeg! :Iy
Personal @.
—- ! )
\ :,‘::fhebesf =
| %esa,
&y -
POdcht m | /.z;fts’o 6";1,:':;:’ B
v 5 Wzssl’re." * cugy,
Portfolio -~ -~ Honshipomer
Splash Page
= E Boost 3D Landing Page Saa$S

Startup
Web3 \ — e

\
3D i b Stay close to your SATRNERSOTy O
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
. . . . .
oost — eSPOHSIve Boost is a collection of fully responsive website templates that are
o ready for production. You can use pre-built sections to quickly
WebSIte I em plqtes assemble pages from various categories and you can customize
everything to your business’s needs.
By Framer
. @ boout el - ] @ boose @ boost el - ] @ soost el - ]
‘ Boost your website. p— Boost y - s Empowering creators.
Boost your website. G =it Boost your = website. "
i it oy =3 website. - I . Ty _— -r
“ ] - e . r e 7 -- i ﬁ y
wen I = = | =
Building t;l;:;:ks; for your p——r. E £ j r L;ading
next website. Building blocks for your l - development for
next website. 5 modern teams.
ol D]
for your next 20+ 60+ development for

website. == (i‘ - - modern teams. 80 5

P — S o = ? -
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
I | I = flf=——s=—m} :
Packed with features. — All posts
. NN e R .
° ° ° Pages
Ready to ship responsive landing pages
Home Landing Page 1
Choose from over 20 responsive, ready-to-publish pages with various themes. Landing Page 2 Landing Page 3
Update the template or only copy pieces of it to your project. Adapt the copy as Landing Page 4 Contact 1
needed, tweak the styling, and instantly publish your site. Contact 2 Contact 3 About 1
About 2 About 3 Pricing 1
Pricing 2 Pricing 3 Features 1
Features 2 Features 3
L] L]
Reusable content sections and design Sueguide  © 404 & Blog1
€ Blog2 £ Blog3 € Blog Post
components
€ Changelog detail € Legal
You can build pages out of smaller sections and components optimized for reuse.
This makes it easy to copy and adapt them to any project. You can create unique Support
experiences by mixing and matching different components.
® How templates work
® Contact template author
® Get help on Discord
] [}
Easy to customize with shared styles
The color palette and typography are carefully set up to use the built-in shared
styling feature. This makes it easy to adapt your template to your branding by
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free

Features

Animations X

Add transitions to create interactive component that change states like toggles,

checkmarks, radio buttons and even component with auto-playing animations,

like loaders. All this can be done linking component variants with each other.

Learn more

Scroll Effects +

Text Styles +

Breakpoints +

Plugins +

Content Management System (CMS) +

Overlays +
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
Latest templates All templates >
| . ot o Blush —Moréau,  Colecton b Contac
Manage your finances
in one platform. r =
oo v ] My name is Dana Parker, e e e ﬁ ! iqi i i
I'm a digital artist working 3 Hello - 'man NYC-based Brand & Digital Design Di
! — and living in Amsterdam. Instagram Twiter Mail B freelance projects occasionally if they fit my pers
- M, = a Senior Designer at Stripe.
—
$15,289.00 e - -
— | 4
e —— Core X ’ | B \
lllustration, 3D design and motion 2D o besin \ A i !{m
design for the festival website. Wostaton E ] T !_Tvli :
' . v 1
) ~
T E N 9 | ~
3 > J e | Cups —setortz | S— l
Vibrant $30 Dana Portfolio Free  Blush $20  Minimal Portfolio $30
Chris Krupa Monika Michalczyk Gediminas Connelly Rader
€ Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
Features
Animations +
Scroll Effects +
Text Styles 2=
Breakpoints +
Plugins 2=
Content Management System (CMS) +
Overlays +
Scroll Targets +
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
All Popular Website Templates
Free . S ‘
S 'O . .
. . ost}’o,,,w% o ) A tfoo) fo
Agency BTN Site, ey 0 ‘ Your ¢ ©Groy,
L e, [y N W e e SHartyp &
' el o e oy, -
/8 QS /8
Brand Guideline e \ e . —ll
N S, & - -
P N itg, "okt Pty g, ° Nee
Changelog / W & o °° O,
~ \ et hox tq
Landing Page RS 0 ¥ 4 Mmpo, ~ e \ Soly,
4 7Y A "’Gr/;,gc’ea y = % S~ ] , ° o ;_?blee;l:fohwr
2 3 opg Yetiveyy,
Personal L A :
20, J 7 weea” h :b Y the be. % ’
L R 9 es in the st y
Photography “ & IJI
AN : < ; » R ' %"50/
Podcast < / %&""m BB Zfsro O
S s, o 5 »p e B‘uil:ye ? reatcy,
Splash Page
= E Boost Free 3D Landing Page Free SaaS Free
Startup
Web3 ‘
e o (D
2 i N
3D | ) P — Stay close to your SATRNERSOTy O
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
i 3 l L — E’ 9 b |
s;;}g‘ = ‘L> v ‘ 7 : 1 : ] " v
Vibrant $30 Dana Portfolio Blush $20  Minimal Portfolio $30
Categories
Free Agency Blog Brand Guidelines Changelog Landing Page Personal
Photography Podcast Portfolio Startup Splash Page web3 3D
Company Templates Resources
About New Desktop Apps
Careers Free Figma Plugin
Cookies Agency SEO
¥ Made in Framer
Security Blog Experts
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
I | I = = :
Packed with features. — All posts
. NN e R —
° ° ° Pages
Ready to ship responsive landing pages
Home Landing Page 1
Choose from over 20 responsive, ready-to-publish pages with various themes. Landing Page 2 Landing Page 3
Update the template or only copy pieces of it to your project. Adapt the copy as Landing Page 4 Contact 1
needed, tweak the styling, and instantly publish your site. Contact 2 Contact 3 About 1
About 2 About 3 Pricing 1
Pricing 2 Prici es 1
Features 2 Fed
L] L]
Reusable content sections and design Suleguide  © 404 € Blog
€ Blog2 £ Blog3 € Blog Post
components
€ Changelog detail € Legal
You can build pages out of smaller sections and components optimized for reuse.
This makes it easy to copy and adapt them to any project. You can create unique Support
experiences by mixing and matching different components.
® How templates work
® Contact template author
® Get help on Discord
] [}
Easy to customize with shared styles
The color palette and typography are carefully set up to use the built-in shared
styling feature. This makes it easy to adapt your template to your branding by


Article detail (SEO guide)

pagePatterns:
CTA Section
Misc

screenPatterns:
Article Detail
Article Detail

pageType: Marketing Marketing Marketing Marketing

screenKeywords:
& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
websites typically only focus on signups and sales leads (user or
customer acquisition). That’s what this guide will focus on too.
When not to use SEO
Before we begin, it’s good to know when SEO /s not going to help you:
« You’re looking for some fully automated way to get signups or sales.
The day that search engines can be cheated or gamed is over. If you
want SEO to work you will need to produce high-quality and useful
content, which is a lot of work.
* You need results fast. Building SEO out relies on building authority
and that takes from months to years, in which you’ll have to continue
to invest and carefully monitor your results. If you need results fast,
you might be better off with paid acquisition.
L] L]
Why is SEO important?
A great site converts visitors into sales, signups, bookings, followers, or
meetings. The best way to increase your results is to increase the
I P < LY R I T A S P | DN B L T S W W LR R
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
rome *
* Get more traffic
°
to your website.
j Learn the goals, key decisions, trade-offs, and
Eo expectations for your SEO strategy,
5“""?9 D Read guide>
(o SO L
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
"'Q‘/ by Koen Bok
<€
O 72022
.\ @ Unique Visitors 7,702
\ @ Total Pageviews 6,811
\/\\//\\
There are many great SEO guides online, but most of them focus on e- - .
& Made in Framer
commerce or marketing a “wedding photographer in Toronto”. Startup
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
This guide is meant for founders, marketers, or business
owners that want to define an SEO strategy that they
can execute themselves or outsource to an agency.
a‘f by Koen Bok
q{
O ui72022
.\ @ Unique Visitors 7,702
\ . Total Pageviews 6,811
S P
|


Guided tutorial

hotspotType: Swipe

screenElements: Icon Card

screenElements:
Icon
Card
Card
Coach Marks
Progress Indicator
Top Navigation Bar
Card
Tab Bar
Photo
Segmented Control
Tab
Badge
Status Dot

screenPatterns:
Guided Tour & Tutorial
Guided Tour & Tutorial
Guided Tour & Tutorial
Other Content
Guided Tour & Tutorial

screenKeywords:
9:41 all & @m
®©0 % 00

@

NEARBY SEE WAVES
| 2

\

3]

CC

Au

o
0 282 (©) | ]
|9:41 all T @
® 0 % Q0
)
NEARBY SEE WAVES
Swipe up to wave
If you both wave, you'll be notified
that it's a match.
(o) o
O 22 (@) »
|9:41 all T @
® 0 % Q0
)
NEARBY SEE WAVES
Swipe down to skip
You can hit undo above if you
change your mind.
0 e @° W
|9:41 -Ill ? (G
® O %00
-
NEARBY SEE WAVES
Send waves to help us understand your
preferences
Swipe up to wave
If you both wave, you'll be notified
that it's a match.
(o) o
O 28 (@)
|9:41 -Ill ? @'
90 =00
®
NEARBY SEE WAVES
¢ 7 “‘\
l [\,\I v -~
W
b",}j
, ¢’ 29 weeks 3.
N I3 @° W
|ol = -
% 00

_o-
9:41
@

NE/
SWipe up to Wwa Ve
If Yoy boz‘h Wa Ve Yoy, be not/ﬁed
that it's a match.
° »
((o))
ga

a


Webflow vs Framer

screenElements:
Grid List
Card
Icon

screenElements:
Grid List
Card
Icon
Dropdown Menu

pagePatterns:
Competitor Comparison Page
Competitor Comparison Page
Competitor Comparison Page
Feature Section
Competitor Comparison Page
Competitor Comparison Page
Competitor Comparison Page

pageType: Marketing Marketing Marketing Marketing Marketing Marketing Marketing

screenKeywords:
& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
°
A Webflow alternative that
takes no-code web
development to the next level.
Both Framer and Webflow are capable, powerful professional tools used
by thousands of companies, from running their entire site (including a
CMS) to high-performing landing pages.
Try for free >
92 PX 70.9 % (@ e e &
B Image |¢_ P Image Styles oee
= “ Selector
= 2 — +F Select a Class or Tag
Changelog - framer.com/sites G o} [ Published ‘ Framer e Webf'ow
Webflow is a web builder that relies on a lot of
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing Start for free
websites in a visual
ith cl
canvas with no code.
Much faster Truly collaborative
(nO I'ebl"ldlng needed) In Webflow, only one person can be in the designer at
Webflow sites typically start in Figma or Sketch and a time, and additional collaborators can only use the
have to be rebuilt from scratch in Webflow. Framer is a editor, where they can change a few options on static
mix of a design tool and a web builder where you can pages and work in the CMS. In Ft:omer, you can have
start from scratch or import your Figma or Sketch as many collaborators as you'd like, doing whatever
projects project directly. they want.
° Photo
. % How does this look Hunter?
J -
P
L zv‘- 74

v - % - W& % Lgs ‘.}x P T U I T I T N |
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
I s N 1 I i | 1
Why are people switching
from Webflow to Framer?

@ e

No page limits Page load speed SEO for dynamic

With Webflow, you cannot While Webflow page load content

have more than 100 static speed is definitely above the Search engines typically can’t

pages on a project. While not industry standard, Framer sites index some of your best

every site needs more than 100 are built using more modern content if it’s generated

pages, Framer easily scales technologies like React server- dynamically with JavaScript,

beyond it to support advanced side rendering, automatic for example product names or

use cases when you need it. image compression and smart descriptions from your CMS or
asset bundling. The result is the an API. Framer uses server side
fastest site current technology rendering to pre render your
can ship. content on the server so

Google can index it.
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
fastest site current technologg rendering to pre render your
can ship. content on the server so

Google can index it.
Symbols Rigidity Global privacy and Enterprise-ready
Instead of symbols, Framer GDPR compatibility Framer is truly ISO 27001
builds on Smart Components Framer hosting fully complies certified and used by many of
with variations that make it with global privacy regulations the largest tech companies
much easier to centrally and completely anonymizes that rely on big company
manage your site design or visitor analytics (using random features like multi-team
even create a component daily salts) so you can offer organizations, advanced
library for your entire team. your visitors the best member reporting, advanced
experience possible. security options, custom billing
and contracts.
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources - Support ~ Pricing -
Desktop apps
Figma plugin
e
= e Experts
—_ e Partner program
Ship si ith styl
Ip sites with style.
Go from design to world-class site with Framer,
the web builder for creative pros.
¥ Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
92 px 709 % @ o) e &
P Image Styles oee
| 2 ' “g@é 0 ‘ Selector
: : ' | = 37 ’f: . Select a Class or Tag
SRae T - g
Changelog - framer.com/sites S » - ‘ Framer vs. Webf'ow
Webflow is a web builder that relies on a lot of
Breakpoint + » Tablet - 1199 - 810 Breakpoint 4+ HTML Gnd CSS knOW|edge Ilke CIQSSGS. Wlth
- Framer, the experience of building a website is
‘ very similar to the design workflow you are likely
Changelog used to with Figma or Sketch — with added
features and to make responsive, high-performing
vi28 Improved Collections
an : gyt i b websites.
S Webflow is a great tool and there are some things we would
5 - — - - recommend them over Framer for like: e-commerce capabilities, a no-
== sk =: code membership layer and advanced logic (much like Zapier).
vi127 Fields Editing
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
What if | need something
truly custom?
Framer allows you to add custom code if you need to drop down to the
raw capabilities of the browser. You can easily add custom head
snippets or create full-blown React components in code that you or
your team can use directly on the canvas. Ideal for advanced
integrations or dynamic states like login.
https://your-website.framer.website/
o »r' e ”
Welcome back ¥ Made in Framer


Article detail

screenElements:
Animation & Video
Grid List
Animation & Video
Keyboard Key

screenPatterns:
Article Detail
Article Detail
Article Detail

screenKeywords:
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing
over layers from Figma to Framer. All you need to do is
copy the layers you want to bring over in Figma and
paste them on the Framer canvas.

Q2 Open Enterprise Wy Oren Eserase | [recases 11 Commrran 1 mequnes ey Sesmes E 7‘191

QO Opentepeie  Uyoomipns Pt Cntn ( -
P Sy — A new model for
A new model for opeu collaboration
open collaboration P a & el |
e e T \ ’ %
e i i e
Reimagining what it means to work Reimagining what it
Tears and communites using Open Enterprise fundamentally nlock a realty of werk hat remagines how people means to work

The best way get an overview is by watching the video tutorial.
How to Paste
1. Install the Figma to HTML with Framer plugin
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
1. Install the Figma to HTML with Framer plugin
2. In Figma, select what you want to copy
3. Go to the Figma menu - Plugins = Figma to HTML with Framer
L. In Framer, open a new or existing project
5. Paste on the canvas
You can run the last plugin again with \_8P.
f - [, ] “* Doka X +
i r 0w Bon B @ O - B - o O % T 8 & D
- ,._“ et Q  Quick actions. ®/ peskiop
v doka S File S
- EET B ioka
.2 — Object » |
W ™ . ’
"-x:' i >
Libraries T.m last plugin %P
Find more plugins.
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing
Get sta rted Use 8+F or CTRL+F tosearch.
You’ve never made a . . = W:m m‘d fw | R
website this fast A new model for ~ apen collaboration el
bu' open collaboration ,» - m ‘ hv /
s e iy &
= [l PR = e
T ; e B S
= . Reimagining what it means to work Reimagining what it -
- e e i ,L.":“"v‘:‘,"“if; W joatrub
Create a landing page Start from Figma Create a blog with the CMS
15m 10m 5m
[ Whatis Framer?
i Importing from Figma
= Importing from Sketch
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing
Importing from Figma
With the Figma plugin installed, you can easily copy
over layers from Figma to Framer. All you need to do is
copy the layers you want to bring over in Figma and
paste them on the Framer canvas.
Q2 Open Enterprise WhyOpenEnterprise  Features  Conurbute  Request early acces: # !
Q2 Opantrerprie  YnyOomnase  Feries  Conttn '—,,w‘:‘m
= Sy — A new model for
A new model for open collahﬂrgli(m
- | opencollaboration y “
st | y . p
Irlae me PR -y |
! “' ﬁ ';
‘ Reimagining what it means to work Reimagining what it
Tears snd communties using Open Enterprise undamentally unlock 3 ity of vk that reimagines how people means to work


Landing page

screenElements:
Icon
Animation & Video

pagePatterns:
Templates
Landing Page

screenElements:
Grid List
Thumbnail

pagePatterns:
Feature Section
Landing Page

screenElements:
Grid List
Card
Thumbnail

screenElements: Card Avatar

pagePatterns:
CTA Section
Landing Page

pagePatterns:
Footer Section
Landing Page

screenElements:
Button
Button
Logo
Button
Animation & Video
Floating Action Button
Banner
Button
Card
Avatar
Grid List
Thumbnail
Grid List
Card
Thumbnail
Button
Icon
Animation & Video

pagePatterns:
Social Proof (Testimonial) Section
Landing Page
Templates
Landing Page
Hero Section
Landing Page
CTA Section
Landing Page
Footer Section
Landing Page
Social Proof (Testimonial) Section
Landing Page
Landing Page
Landing Page
Landing Page
Feature Section
Landing Page
Landing Page
Feature Section
Landing Page
Feature Section
Landing Page
Landing Page

pageType: Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing

screenKeywords:
DESIGN YOUR MOST CREATIVE PERSONAL SITE IN FRAMER AND JOIN THE #FRAMERAWARDS2022
& Framer Templates Plugins Learn Gallery Use cases Resources ~ Support ~ Pricing Start for free
“It’s lik ic.”
s like magic.
Our customers love how easy it is to design
and publish a professional site in Framer.
software. Within half an -
|DESIGN YOUR MOST CREATIVE PERSONAL SITE IN FRAMER AND JOIN THE #FRAMERAWARDS2022
& Framer Templates Plugins Learn Gallery Use cases Resources ~ Support ~ Pricing Start for free
' g — ity — /Uﬂﬂ - ;w_ww e
~ T =D & & 6@ ¢ Y S0 N T
[op-notch templates
@
Browse dozens of professionally designed
templates. Easily change structure, style,
and graphics—then publish instantly.
Browse templates

e oy [ ¥ e
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -
Ship si ith sty
Ip sites with style.
Go from design to world-class site with Framer,
the web builder for creative pros.
¥ Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -
Start for free.
Design and publish your first
free site with Framer today.
[ 332 Insert '= Layout . Frame Text g CMS Mission . o] [ ] -
¥ Made in Framer
» Desktop - 1200 Breakpoint 4
|I RS SRR oM ST MeRAMER A SO THE wrRaMERAWARBSZ02
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -

Company Templates Resources
About New Desktop Apps
Careers Free Figma Plugin
Cookies Agency SEO
Security Blog Experts
Privacy Brand Guidelines Partner program
Abuse Changelog Webflow vs. Framer
Charges Landing Page
Terms Personal Support

Photography Updates
Product Podcast Discord
Learn Portfolio Startups
Plugins Splash Page Contact
Gallery Startup
Agencies Web3 y o 0 3 0
Startups 3D Framer BV. © 2022
Freelancers
Prototyping
Pricing

& Made in Framer
|DESIGN YOUR MOST CREATIVE PERSONAL SITE IN FRAMER AND JOIN THE #FRAMERAWARDS2022
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
More tweets
™  Lauren Waller
ned hour | got hang of the

. 3 Morgan Pezzo L ¢ Bryce Bjork L4

interface and | end up b &
Honestly the @framer . . ‘ -

o moving my links from
publish time is insanely webflow to framer. @framer is a banger. Lost @framer wow. | am blown
fast. Just published 2 .
P ashlinks.framer.website. +k€ paying an agency for away
weeks of changes in 5 . .
o g' Great job l@jornvqndijk a website that was qute

seconds & like it’s almost and team G § bad. Took me less than 2
too fast for such a big days to build our website @ olaia irigoyen v
moment & with Framer and it's @oliialioli

@ manoj nayak L working way better. Loved to play with

j k
: @manoinaya @framer sites! At
Christopher Lo L
@ChristopherLoCC Websites built on @framer @GetCapchase we have
e Sanket Sahu 4 entirely designed and built
oenbok Thank look so beautiful '~ @ @sanketsahu Y g ‘

@koenbok @framer Than mp;dcqpchqse.deggﬂ
you for building such an | can't get enough of incredibly qut.
empowering tool, - . e Aframer oitec!l B We are tool &
|S$2022
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free i
e & ®
Project updates 0 N QP o o -
& deliverables. f .
[ 7 - @ template for m a freelance designer from Amsterda
By X —— Superchargeyour I SRWER
5 oo e productivity, with e Gumroad.
ooo b ﬂ | \ l | Q
D i
TR aa R
your i il
B,
* — log =
Agency o pam
hy 1 . - 7 - Above, Hyundai
& -
£ / ! st':‘:g%%( Yourcaandar e brokan
) =y rectme, -
.
Agency Blog Landing Pages Personal
o =
-y o yesting Q
one: )
EveryorT
. for s
. [ r,;::\:;:nw vm:‘;;;“::fi et
- BN ¥ Made in Framer
= \ N\
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -
¥ v Insert .= Layout . Frame Text CMS Mission . fo] » -
» Desktop - 1200 Breakpoint 4
ISSIO Home How it works Pricing -
o -2
f r -
- N
CALLING ALL FREELANCE DESIGNERS & CREATIVE AGENCIES .
118 alr
esigh something th
L a1 3
i g
blows your client's
i e =
without having to read their mind!
¥ Made in Framer
|DESIGN YOUR MOST CREATIVE PERSONAL SITE IN FRAMER AND JOIN THE #FRAMERAWARDS2022
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
Link To [pricing “ R g™
New Tab No
Figma to Framer Import (» ]
Copy and paste your web designs
from Figma to Framer and hit publish.
https://your-website.framer.website/ O
B BN -
Layers Assets d o k a
= Desktop A collection of photos from around the world. ‘
Hero
Header b
Space ‘
Button
SEO ,
Give your page a title and description,
|DESIGN YOUR MOST CREATIVE PERSONAL SITE |
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -
Ites wihlle dellivering pest-In-CIo
performance on the web.

Design Layout

A freeform canv Easily create layouts that

packs, stock p adapt to any size.
- i,
l oot : Tablet
— " R .

\3‘?:“‘.:’ d : «\,t}ﬁ» > HAY
- g
N N
Collaboration Content Management System
A/~ P B A T i e [ p T Y PR [P P T
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -
Desi blish, d
esign, publish, done.
Framer’s canvas is incredible for web design.
Create web pages with text, links, media, and
animations—no code needed. Ready to ship?
Publish your site with a single click.
SN
just design and... ...publish! ¥ Made in Framer
Y y
|DESIGN YOUR MOST CREATIVE PERSONAL
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -
Matt Building a Navigation H.M'PM
Navigation Animations & Effects (> ]
Turn anything into a link and easily Set up stunning (scroll-based)
navigate your site. animations with a few clicks.
Bog About [Signup -
| Woodies
> 1
Link - Ve
Link To [pricing :_~__ 'a
New Tab
|DESIGN YOUR MOST CREATIVE PERSONAL SI 022
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for fg
Powe mple.
Framer’s tools simplify building professional
sites while delivering best-in-class
performance on the web.

Design Layout
A freeform cc | Easily create layouts that
packs, stoc adapt to any size.
|DS2022
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free i
just design and... ...publish! ;7
_— P2R ° - €D
C. t. .
es  UseCases v Login detail — o
Cinematic video made m q d e s I m F
simple.
(]
| Vldeo ALl Making great video is really f*cking hard. Detail mal
n |e e s~ creativity with seamless video production - record,
p * simple but powerful app.
ail makes it easy. Unlock your
ecord, stream, and edit in one —
X A -r -
=l
% P o
" \\og ey
L o b AS
5| = = ¢ /]
AN i . , '
| A f/ (4 A
Wi From podcasts to beauty, no matter what type ( 7 \ ~ [
VE A . of video you're making, Detail is a tool for | e k
— everyone ‘fa’ff',-.', S O ‘
) I = 2 ¢ 8. ¥ MadeinFramer |g


Social feed

screenElements:
Tab Bar
Floating Action Button
Tab

screenElements: Card Carousel Avatar

screenPatterns:
Social Feed
Suggestions & Similar Items

screenElements: Carousel Card Tab

screenElements:
Tab Bar
Card
Carousel

screenElements:
Card
Carousel
Avatar
Tab
Tab Bar
Card
Carousel
Carousel
Card
Tab
Tab Bar
Floating Action Button
Tab
Button
Card
Avatar
Carousel
Progress Indicator

screenPatterns:
Social Feed
Suggestions & Similar Items
Social Feed
Social Feed
Social Feed
Social Feed
Social Feed
Social Feed
Social Feed
Account Setup

screenKeywords:
949 all F @)
a > Q o 3
MY FEED TRENDING NEW GROUPS
stupid for being paranoid someone...
No? It's kinda cute &
Uh, yea... grow up
Advice? Comment plz
Oa (™ Share
v a Message...
£? Groups you may like
PRO GROUP .
Mamas who Manifest
Learn mindset & manifestation tips to create '
your dream life. Perfect for the mama who is...
t _,“ v by Chloe ,
g N i Naane e
1hr
0 (©) By
. ]
|941« all T @)
§3) > Q Lo Qg
MY FEED TRENDING NEW GROUPS

in Baby products
. 10 hr
Baby zen yo-yo dupes??
Hi all does anyone have any
recommendations for a cheaper pram simil...
Oa (M Share
V ’ Message...
in Fertility treatments
1 day
4AA embaby on board!!
Keeping our fingers crossed « « «
¥i6 O6 (M) Share
V ’ Message...
‘ ‘ in Bottle feeding
& 1day
Really stucbe much
appreciated:
Nuar littlA halhAa ia 12 wiAaAalzae AlA AKA -~
® o
O 22 () B,
. ]
|949 all F @)
£2) % Q Q0
MY FEED TRENDING NEW GROUPS

in Fertility treatments

1 day
4AA embaby on board!!
Keeping our fingers crossed « « «
¥i6 O6 (M) Share

y Message...
in Bottle feeding

1 day
Really stuck! Advice would be much
appreciated.
Our little baba is 13 weeks old and is
breastfed. I've expressed milk from the be...
¥s3 D (M Share

y Message...
| in Other

2 days
How many times does everyone feeds
their 7months at night? My LG still fe...

U [
a 22 (@) B,
|oM< all ¥ @m)
Q > Q L 0
MY FEED TRENDING NEW GROUPS
Recently active groups
PRO GROUP \
Maryland Single and
SoloMems
Fer moms: locateddn'MARYLAND, USSChat, pl.k
2 .
b = 1
Y&, oy
Suggested groups for you
PUBLIC GROUP F
Fithess and Motivation =
A place where you can get motivated and share '
Relp Ul ftNESSISUOTE StioNs: i
16,200/ members :
Suggested grq
G
A (©) By
|oM< all ¥ @m)
§3) > Q Q3

MY FEED TRENDING NEW GROUPS
s Peanut Picks

M-BRACE THE CHANGE :

- Tue, Nov 01 a

M-brace Symptom

Handbook ®

. e in

10 hr

Baby zen yo-yo dupes??

Hi all does anyone have any

recommendations for a cheaper pram simil...
Oa (™ Share

@ e Message...

Iy

' 1 day

4AA embab}

Keenina niir finaers crocced o8 o0

A (©) By
|9414 all ¥ @m)
£2) % Q Q0
MY FEED TRENDING NEW GROUPS
X
2]
Finish setting up
your experience
You have completed O of 3 steps
Explore relevant groups >
Select meaningful topics >
Discover helpful advice >
in Your BEST Marriage with
Dr. Chavonne
5 min
How can | have my husband
understand me when | feel like I'm st...
A DA +hA fivat +A ranhil
®
A 22 (@) 8y,
|oM< all ¥ @m)
) % Q00
MY FEED TRENDING NEW GROUPS
I
My Groups
PRO GROUP ° \
Peaceful Parenting,
Together
Welcome Conscious Mamas!...
—
V4
s =
<y
Groups are a place to communicate about
shared interests with others.
N (©) By,
|949 all T @)
' = Q Lo 3
MY FEED TRENDING NEW GROUPS

in Your BEST Marriage with
» Dr. Chavonne
6 min
How can | have my husband
understand me when | feel like I'm st...
(O Reply ﬁ Share
@ ' Be the first to reply!
. in August 2022 Babies B
5 min
Does this look like Torticollis or can
the head tilt be normal? (Itisn't like t...
ool P
2o AR - -
0 N e
! P A L
i 7 AGEN &
R ‘ : SRR 5‘1‘:1151
% AN Yoo
e = 3 N r =3,
L Y N
A% - POST Bl
a Y (©)° 0
aa
. ]
|949 all ¥ @
£3) *Q ao
MY FEED TRENDING NEW GROUPS

Recently active groups
PRO GROUP
Being Well Community
Wel@®me to our space, Beautiful Beings.4'm
Darcel B., Personal TransfofmationsMentorihi..
— N‘
[ -}I
< v Y
Suggested groups for you
PUBLIC GROUP
Adventurous Friends =
AYGIOUR Tor thelliom en wRBISaY e shtomnefy
adventures.
6,923 members
Suggested grq
&
O (©) By
|9:419 all & @
£2) % Q Q0
MY FEED TRENDING NEW GROUPS
X
o
Finish setting up
your experience
You have completed 2 of 3 steps
Explore relevant groups >
Select meaningful topics >
Discover helpful advice >
in Your BEST Marriage with
Dr. Chavonne
5 min
How can | have my husband
understand me when | feel like I'm st...
A DA +hA fivat +A ranhil
0 °
A 22 (@) 8y,


Framer for Freelancers

screenElements:
Dropdown Menu
Avatar

pagePatterns:
Solutions & Use Cases Page
Solutions & Use Cases Page
Solutions & Use Cases Page

screenKeywords:
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support - Pricing Start forﬂ
R \ N \ Ny
\ \ \ AN \ N\ \ N\ \ \ .
\ [ 332 Insert '= Layout . Frame Text g CMS vibes - vibes.framer.website
Framer for Freelancers \\:
\
.I .t \ \ :\\ esktop - ﬁ,‘i"‘w -‘\7 rea pom.
‘ iy Mg ~
Build SN T R e
UliQ SItesS i e e
f Z \ \ \ % _— https://vibes.framer.website/
romAtoZ. . NJ [
. \ z % | P =4
With Framer, you get a complete set of it { s /\/\Lfﬁ\ o
tools to design, ship, host, and maintain \ N BER ‘ ' |
stunning websites for your clients. Take on \\ Ny ""‘G
any project confidently, knowing you can N FREELANCE
. . . . 3 N'\,\-,\ .
deliver high-quality work quickly. < :
Start for free s <. 5 2
— pPER k=2
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -
Agencies r =
Marketing
) seres g
Freelancers
Ship si ith sty
Ip sites with style.
Go from design to world-class site with Framer,
the web builder for creative pros.
¥ Made in Framer
|Shi f i | sit
ip professional sites.
Framer has all the tools you need to ship
professional websites for your clients faster
and without using a single line of code.
INanNnkK you Ttor bullaing gOLII’ pI’OOUC[/S[OI’g N the @framer iS a bcmger. LOSt he new (@ ITS
such an empowering medium itself. As friendly k€ paying an agency super easy to create a
tool, especially for & powerful as it is. for a website that was really nice looking
designers! The site went quite bad. Took me less responsive website.There
from Figma to Framer in than 2 days to build our are many well designed
less than a week! ﬁ Iddan Aaronsohn % website with Framer and elements you C
@iddan T T Aalreadir re tical letiallin
|- -~ —
Glue
(] Entrepreneurs
== 2\
{57\ + SUPERCREATIVE
$16,200 . TEMPO 8 AP '
i 92 Product & ==
| ' contens web designer  pm ==
= i‘:::-i - Websites that give e . —id‘:
= e growing startups an —— s
»;m > fl‘ A unfair advantage. e | 5
l e i P A ‘
—_ e — e
1A% NEMAD : ® s s
¥ Made in Framer


Hiding Get Started section

screenKeywords:
John
© Recent
® Archived Q  Search 2 projects... Last viewed by me v
S N N MY A o
N YRR A
g ST R - o
ey N
Upgrade now to access >\.» N \ y < ~\\ ]
more premium features. J %':""*s S S, v
SR ’ RS - Make beautiful websites
/T 4 ] g
Upgrade e N "”:N Do / b A
N P S f &7 g, NS
§~“f-“fq~, Q o, N ‘
AN ), < % oy, e
LN/ V)R
Bl RN O Ny o, T LY M R
% %t AT 4 o m
. NG W'Y & =
o Mobbin N *‘:;“ 4
™Y rolng T N
‘ oo &'%%Zm S
% Al .
«x Boost Framer Template (copy) Portfolio
'. Templates Viewed 6 minutes ago - Edited 10 minutes ago Viewed 6 minutes ago - Edited 1 minute ago
® Archived
+ New Folder...
+ Create Team...
|John
Account Settings Get Started
© Recent Night Mode
@ Archived Desktop App
Start App Tour
Import From... >
.* Hide Get Started https://your-next-website.framer.app
Upgrade now to access Hide Template Selection
more premium features.
Homepage APP Tour O Learn Framer 7
Upgrade Feedback An interactive tour to learn Browse video tutorials,
Support the basics of Framer. examples, and articles.
Community
Sign Out
o Mobbin
% Al
s Templates
W Archived Q Search 2 projects... Last viewed by me v
+ New Folder...
3 N NN Y KA i
VUINRTYER/
NN -9 §6
7 /s Ny N ¥ =
VE: R -
/ % ( ;~ ;\ RS S&:}k Make beautiful websites
- ASGs . 4 \i l_
o = X Q
O N
SO S,
Lo NN/ VYK
NG S AN AL
N 1“"{\- 2N 4 ’ N =
+ Create Team... SR " N %
S S . N
R Sty
‘ RN AN


Inserting an existing component

screenElements: Toolbar Button

screenElements:
Tree
Accordion
Segmented Control

screenElements:
Dropdown Menu
Side Navigation
Text Field
Text Field
Slider
Button
Toolbar
Button
Tree
Accordion
Segmented Control

screenPatterns:
Action Option
Edit
Edit
Add & Create

pageType: Application Application Application Application Application Application Application Application Application

screenKeywords:
; v Insert '= Layout . Frame Text g CMS Portfolio FREE e o » m
Pages Layers Assets Height Auto Fit v
Fit Content
Components + o Desktop v 1200 Breakpoint <+
~ Project T Effects +
| FRAMER About  Contact 1
~ Elements
& Card Styles +
% Topbar
Opacity 1 —
> Framer
Visible Yes No
Make beautiful websites
Styles + , R
You've never made a website Rotation 0
. Text this fast before. Really.
T. I Get Started
H1 Title Manrope, 40px Elements/Card Component
H2 Subtitle Manrope, 24px I
Variant v Variant 1
H3 Section Title Manrope, 18px Variant 2
P Paragraph Manrope, 16px Title .
v Links : 2y, : Text Infrastructure built
. i Wiz ] for scale,
A Link #0099FF : it : performance and
: : ; reliability.
A Logo Link #1111 : ?‘3}: v :
A Topbar Link #999999 Y Button Read More
5 (=D - 5
: : Radius 16 -
Code + : World-class hosting !
i Infrastructure built for scale, i Edit Component
i performance and reliability. i
| |
: ! Scroll Target @ +
| o, |
: 28 : A
! ';,J ! Code Overrides +
i ; ’ i
i é Edit k W . 50% v Upgrade Now ; Handoff +
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Pages Layers Assets @ & o 7T § 0 8 =
Overlays +
Components + @ Desktopv 1200 Breakpoint +
- Project e Button Add...
E FRAMER About  Contact E
v Elements
& Card Position
% Topb Insert
#» Topbar R
Edit Type Relative v
*  Framer
Rename
Styles Duplicate Make beautiful websites size
Delete You've never made a website
. Text this fast before. Really. Width Auto Fit v
Copy Import  BETA
H1 Title Manrope, 40p Py imp i Height Auto Fit v
Add to Library
H2 Subtitle Manrope, 24p.
Fit Content
H3 Section Title Manrope, 18px
P Paragraph Manrope, 16px
b r ] . Effects +
v Links | oy H
| i |
A Link #0099FF : 3/ ! Styles +
A Logo Link #1111 ! g\i}' !
WS Opacity 1 —
A Topbar Link #999999 ! \ :
(=]e o Visible Yes No
Code + ! ~ . :
i World-class hosting i Rotation 0
i Infrastructure built for scale, i
] performance and reliability. |
e |
] 4 Elements/Card Component
Variant Variant 1 v
Title World-class hosting
4 Edit w ¥ @& s50% -~ Upgrade Now
Text Infrastructure built
for scale,
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Pages Layers Assets I- + -I T + 8 I'I =
Overlays +
Components +
o Desktop v 1200 Breakpoint +
' Button Add...
v Project
v Elements FRAMER About  Contact
& Card : : Position
RS
% Topbar Type Relative v
> Framer
o - Size
Styles + Make beautiful websites
You've never made a website Width Auto Fit ~
v Text this fast before. Really.
H1 Title Manrope, 40px Get Started Height Auto Fit v
H2 Subtitle Manrope, 24px
Fit Content
H3 Section Title Manrope, 18px
P Paragraph Manrope, 16px
Effects +
v Links i i N !
i b it ;
A Link #0099FF : N : Styles +
' ki i
A Logo Link #1111 ' . o '
g\i}' : Opacity 1 —_—
A Topbar Link #999999
: Visible Yes No
| o < |
Code +
: World-class hosting : Rotation 0°
i Infrastructure built for scale, i
] performance and reliability. |
i i Elements/Card Component
T T Variant Variant 1 v
Title World-class hosting
4 Edit w ¥ @& s50% -~ Upgrade Now
Text Infrastructure built
for scale,
|T v Insert '= Layout . Frame Text g CMS Portfolio FREE e o] » m
Pages Layers Assets Height Auto Fit v
Fit Content
Components + @ Desktopv 1200 Breakpoint +
v Project T Effects +
| FRAMER About  Contact 1
~ Elements
& Card Styles +
% Topbar
‘ P Opacity 1 —
*  Framer
Visible Yes No
Make beautiful websites
Styles + .
You've never made a website Rotation 0°
v Text this fast before. Really.
T. | Get Started
H1 Title Manrope, 40px Elements/Card Component
H2 Subtitle Manrope, 24px
Variant Variant 1 v
H3 Section Title Manrope, 18px
P Paragraph Manrope, 16px Title World-class hosting
v Links : 2y, : Text Infrastructure built
f 7 ;
. : e : for scale,
A Link #0099FF : it : performance and
: i ; reliability.
A Logo Link #1111 : g\@ y ;
A Topbar Link #999999 Y Button Read More
i o4 4 |
: : Radius 16 -
Code + : World-class hosting !
i Infrastructure built for scale, i Edit Component
i performance and reliability. i
| |
! ! Scroll Target @ +
| o, |
' 38 i .
! ';,J ! Code Overrides +
i i ’ i
i é Edit k W . 50% v Upgrade Now ; Handoff +
|T v Insert '= Layout . Frame Text g CMS Portfolio FREE e o] » m
Pages Layers Assets Height Auto Fit v
Fit Content
Components + @ Desktopv 1200 Breakpoint +
v Project Effects +
| FRAMER About  Contact 1
~ Elements
& Card Styles +
% Topbar
Opacity 1 —
> Framer
Visible Yes No
Make beautiful websites
Styles + .
You've never made a website Rotation 0°
v Text this fast before. Really.
T. I Get Started
H1 Title Manrope, 40px Elements/Card Component
H2 Subtitle Manrope, 24px
Variant Variant 2 v
H3 Section Title Manrope, 18px
P Paragraph Manrope, 16px Title World-class hosting
v Links i
] ; Text Infrastructure built
_ : i w‘::’:;flm : for scale,
A Link H#O099FF : Vi "9 : performance and
: / Infrastructure built for ; reliability.
A Logo Link #1111 : e oo i ¥ scale, performance and :
] 1"&" reliability. i
A Topbar Link #999999 \ Button Read More
' . lel lore 1
; B ; Radius 16 ~
Code + @
' ‘,‘};,» |
i o 4 i Edit Component
| 2 | |
: o : Scroll Target +
Code Overrides +
] i 9 !
é Edit k W . 50% v Upgrade Now Handoff +
z z
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Pages Layers Assets I- + -I T + 8 I'I =
Overlays +
Components + @ Desktopv 1200 Breakpoint +
- Project e Button Add...
i FRAMER About  Contact i
v Elements
& Card Position
RS
% Topbar Type Relative v
> Framer
Make beautiful websites size
Styles +
You've never made a website
. Text this fast before. Really. Width Auto Fit v
H1 Title Manrope, 40px i Height Auto Fit v
H2 Subtitle Manrope, 24px
Fit Content
H3 Section Title Manrope, 18px
P Paragraph Manrope, 16px
b r ] . Effects +
v Links | oy H
i b i
A Link #0099FF : 3/ ! Styles +
A Logo Link #1111 ! g\i}' !
i Fd Opacity 1 —
A Topbar Link #999999 ! \ :
(=]e o Visible Yes No
Code + ! i . i
i World-class hosting i Rotation 0
i Infrastructure built for scale, i
] performance and reliability. |
e |
] 4 Elements/Card Component
Variant Variant 1 v
Title World-class hosting
4 Edit w ¥ @& s50% -~ Upgrade Now
Text Infrastructure built
for scale,
|[} .
v B9 msert Layout F @ Text cMs Portfolio FREE
¥ kg Inser '. ayou . rame T RIS g ortfolio e o] » m
Pages Layers Assets I- + -I T + 8 I'I =
Overlays +
Web +
o Desktop v 1200 Breakpoint +
PR Button Add...
@ Jabout I FRAMER About  Contact I
: I Position
@ /contact
@ /404 Type Relative v
CMS + . . Size
Make beautiful websites
Canvas + You'vg never made a website Width 368 Fixed v
this fast before. Really.
Get Started Height Auto Fit v
Fit Content
Effects +
: g, i
: ;J:’:‘ i Styles +
i}”"ﬁ, W, Opacity 1 _—
i Visible Yes No
| =R ‘ |
I World-class hosting i Rotation 0°
I Infrastructure built for scale, I
] performance and reliability. |
I I Elements/Card Component
T T Title World-class hosting
Text Infrastructure built
_ for scale,
° )
é Edit k W . 50% v Upgrade Now performance and
reliability.
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Pages Layers Assets I- + -I T + 8 I'I =
Overlays +
Components + @ Desktopv 1200 Breakpoint +
- Project e Button Add...
i FRAMER About  Contact i
> Elements
% Topbar Position
» Framer Type Relative v
Styles +
Make beautiful websites size
o oText You've never made a website
W Title Manrope, 40px this fast before. Really. Width Auto Fit v
R Get Started
H2 Subtitle Manrope, 24px Height Auto Fit v
H3 Section Title Manrope, 18px
Fit Content
P Paragraph Manrope, 16px
v Links
b r ] . Effects +
A Link #0099FF i oy H
I b I
A Logo Link #1111 i LA i Styles +
A Topbar Link #999999 -
¥y A Opacity 1 —_—
Code + (=]e o Visible Yes No
I World-class hosting i Rotation 0
i Infrastructure built for scale, i
] performance and reliability. |
e |
] 4 Elements/Card Component
Variant Variant 1 v
Title World-class hosting
4 Edit w ¥ @& s50% -~ Upgrade Now
Text Infrastructure built
for scale,
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Pages Layers Assets I- + -I T + 8 I'I =
Overlays +
Components + @ Desktopv 1200 Breakpoint +
' Button Add...
~ Project F T o oooossoooooooooooog
i FRAMER About  Contact i
v Elements
& Card Position
Ry
% Topbar Type Relative v
> Framer
Make beautiful websites size
Styles +
You've never made a website
v Text this fast before. Really. Width 380 Fixed v
H1 Title Manrope, 40px i Height Auto Fit v
H2 Subtitle Manrope, 24px
Fit Content
H3 Section Title Manrope, 18px
P Paragraph Manrope, 16px
! ' Effects +
v Links 1 2y, 1
| b |
A Link #0099FF : 3/ i Styles +
A Logo Link #1111 ?\% ¥
WS Opacity 1 —
A Topbar Link #999999 Y
Visible Yes No
Code + :
: World-class hosting i Rotation 0
: Infrastructure built for scale, ;
i performance and reliability. i
| |
: ; Elements/Card Component
i | o o v
: ‘ : Title World-class hosting
! 4 Edit w ¥ @& s50% -~ Upgrade Now i
! ! Text Infrastructure built
1 y N n . "


Domains

screenElements:
Full-screen Overlay
Top Navigation Bar
Side Navigation
Icon
Text Field
Text Field
Card
Button
Side Navigation
Link
Radio Button
Text Field
Button
Badge
Status Dot

screenPatterns:
Settings & Preferences
Settings & Preferences

screenKeywords:
& Portfolio - objects-wait-224783.framer.app FREE e e [ d m
Site Settings
& General
© Domains Slte Settlngs
B Redirects
© Versions Site Title Site Language
@ Analytics My Framer Site
© Plans Site Description
Made with Framer
Page Settings

A Home
@ /about

Preview
@ /contact

yoursite.url :
@ /404 My Framer Site
Made with Framer
Accessibility
Disable transform and layout animations if the user prefers reduced motion
Danger Zone
Unpublish
Unpublish your website from all domains.
Site Imaades
|& Portfolio - objects-wait-224783.framer.app FREE e e [ d m
Site Settings
& General
© Domains Base Domain Optimized @
B Redirects
© Versions URL https://objects-wait-224783.framer.app
B Analytics Status Website is published and optimized
© Plans Version Latest - Updated 2m ago by John Smith
Page Settings

A Home

Custom Domain
@ /about
@ /contact

o Get a free Framer subdomain
© /404 Instantly connect a customized domain for free

mywebsite framer.website v v
Connect a domain you own UPGRADE
Connect a domain purchased through a web hosting service
www.site.com v
Canonical URL
Select the URL that search engines should index so they don't serve duplicate content.


Figma plugin

pagePatterns:
Integrations Page
Hero Section

screenElements:
Animation & Video
Hero Image
Dropdown Menu

pagePatterns:
Integrations Page
Integrations Page
Integrations Page
Integrations Page
Hero Section
Integrations Page
Integrations Page

screenKeywords:
& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
Exporting Figma to
°
HTML with ease.

When you publish with Framer, we ensure your site is built using all the best
practices, so it loads quickly on mobile devices and gets a good ranking in
Google search results. We convert your design mockups into HTML, CSS, and
React code. We also optimize for performance by minifying all the JavaScript
and image files.

(]
Watch tutorial »
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
~* Doka
& # O 8T & D G ® © W O -
Layers Page 1 Design
Pages +
v Page1l
do ka Frame i
£ Desktop A collection of photos from around the world. . o 0
Footer 1200
Grid 0° o o
Column Clip content
Column - |
o b.—‘ B Auto layout
Column > -
- 4 - 60 Mixed d
Ryan Wison b . . SNge } et B
r: § om
Jidai . ~3 Resizing
. =
e s . Fixed width
Hero 3
»4) ~ Hug contents
Button | ":. e y
7 4 L
Space A0 \ =g w Layer
e
Header i \ % s Pass through 00% @
Desciption ) /
K Fill i+
Logo -
G i N W 100% @
RN/ N
hckew s > ) I & & g
e’{ . Selection colors ;‘ F
- FFFFFF 80
Lair Cobge FFFFFF 100% i
4
s Linear 100%
.
Doka Blog Privacy Policy Contact r
]
= .
s & Made in Framer
e ——
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
JidalLi - Fee
Skip the manual HTML
(]
conversion process.
The Framer workflow is optimized for going from Figma to website with
ease. The cool thing about this is that you don't have to convert your
design to code — with Framer manually, you can paste your Figma file
into Framer and publish it as-is. All layer names and groups are fully
preserved.
Copy, paste and o .
puinSh- Arrange 4
Export your Figma designs by simply CIE < AT LR
CopUing what's on the canvas and Integrations 4 Unsplash
pasting it in Framer. The plugin takes Preferences > Run last plugin X#P
care of adapting your design to Libraries
Framer’s layout tools in real-time, so Help and acoount R
you can focus solely on making a
|Framer Templates Plugins Learn Galler Use cases ~ Resources ~ Support ~ Pricin
P 9 y 9
B~ gy Oy & T & & DO &
Desktop
Layers Assets Page 1
Y = Desktop
From Figma to doka
Header A collection of photos from around the world.
(]
I n secon s. https://your-website.framer.website/
Install our Figma plugin, and you are ready to
convert your Figma design to HTML code with dOka
Framer.
A collection of photos from around the world.
Copy and paste your web designs from Figma to Framer and hit publish. Ship a
simple landing page or turn your design into a fully dynamic blog with the
built-in CMS.
. o
[FRe———
Ryan Wilson e B S »&
JidalLi y 7 zh
il ¥ Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free

Copy, paste and ot R
puinSh- Arrange >
Export your Figma designs by simply Pl S Bt @y BRs
copging what's on the canvas and Integrations 4 Unsplash
pasting it in Framer. The plugin takes Preferences > Run last plugin X#P
care of adapting your design to Libraries
Framer’s layout tools in real-time, so

Help and account >
you can focus solely on making a
great website.

All layer names and
Layers
groups are fully preserved.
BN EEEEE
@ Desktop Your layer structure and naming will
e " T :: ::m all be carried over, so it is easy to
= Column pick up where you've left off. You can
4 [ =] ) continue editing your website and
= Photo make it more engaging, or you can
Column = Photo . . .
= comn : simply hit the publish button.
= Column
il Hero
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources - Support ~ Pricing -
Desktop apps
Figma plugin
e
= e Experts
—_ e Partner program
Ship si ith styl
Ip sites with style.
Go from design to world-class site with Framer,
the web builder for creative pros.
¥ Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
care of adapting your design to Libraries
Framer’s layout tools in real-time, so
Help and account >
you can focus solely on making a
great website.
All layer names and
F Layers
groups are fully preserved.
-l & O ®
= @ Desktop Your layer structure and naming will
' e : ::‘er all be carried over, so it is easy to
= coumn { pick up where you've left off. You can
[ =] continue editing your website and
= Photo make it more engaging, or you can
Column = Photo . . .
= comn = simply hit the publish button.
i = Column | i
il Hero
[ [
P ek e o oo nece o o


Creating a team

screenElements:
Side Navigation
Banner
Icon
Button
Card

screenElements:
Text Field
Button

screenElements:
Text Field
Button
Progress Indicator

screenElements:
Button
Progress Indicator

screenElements:
Text Field
Button
Side Navigation
Banner
Icon
Button
Card
Button
Progress Indicator
Text Field
Button
Text Field
Button
Progress Indicator
Dialog
Text Field
Button
Progress Indicator
Side Navigation

screenPatterns:
Invite Teammates
Home
Add & Create
Add & Create
Add & Create
Add & Create

screenKeywords:
Invite Editors
jdoe.mobbin@gmail.com
Copy Invite Link
Skip
|John
Get Started
© Recent
® Archived
.+ https://your-next-website.framer.app
Upgrade now to access
more premium features.
App Tour O Learn Framer 7
Upgrade An interactive tour to learn Browse video tutorials,
the basics of Framer. examples, and articles.
o Mobbin
an
s Templates
W Archived Q Search 2 projects... Last viewed by me v
+ New Folder...
K N < L VY i
e NS LN
NS ¥ §6 ]
/ : N Mrrs
J %':"’"s SUS ”.%”':%.\ v
S B N ey
e :"r\" S Y ' =
N o 25 NGRS
BTN N I R /"? - i
a0 RS e S, RS by S
S }»\\_ ¥ X/ ? N &2
+ Create Team... SR \\\\; " N 4
‘ Soog A i S, N
|Upload Logo
Please upload an image that is
min. 200x200px, .PNG or .JPEG
Continue
|Create Team
Acme
|Invite Editors
Emails (comma separated)
Copy Invite Link
Skip
|Create Team
Team name
|John
Get Started
© Recent
® Archived
‘§ ext-website.framer.app
Upgrade now to access
more premium features.
? App Tour O Learn Framer 7
Upgrade An interactive tour to learn Browse video tutorials,
the basics of Framer. examples, and articles.
v o Mobbin

an

s Templates

® Archived

+ New Folder...
0 -

© Al

s Templates

No Projects
@ Archived Create a new project from scratch
or use a template to get started.
+ Create Team...


Joining a Pro group

screenElements:
Avatar
Floating Action Button
Tab

screenElements: Dialog Button Icon

screenElements:
Floating Action Button
Carousel
Card

screenElements:
Dialog
Button
Icon
Floating Action Button
Carousel
Card
Avatar
Floating Action Button
Tab

screenPatterns:
Acknowledgement & Success
User / Group Profile
User / Group Profile
User / Group Profile
User / Group Profile

screenKeywords:
949 all ¥ =m)
< [eXeXe}
y -
Healing your anxious mind - An An...
o
12,
Welcome to
<
Start a conversation by
creating a post.
Engage with existing
conversations and replies.
(
Share this group with
other women.
t 40 1M -
Mindful Mama's Mental Health
Support for the mama's who are stru...
Sorry, this pod'Is no longer available.
|94149 a7 (@)
< [eXeXe}
y &7
Healing your anxious mihd="An An...
MEMBER - $PRO GROUP
12,255 members
LATEST PREMIUM
s? Pinned Posts
(
h , © O, and 2 other
women joined the group
’ | 46 min
Mindful Mama's Mental Health
Support for the mama's who are stru...
Sorry, this po! IS N0 ionger available.
|9419 all & =m,
< [eXeXe}
A
Healing your anxious mihd="An An...
PRO GROUP
12,254 members
LATEST PREMIUM
b , © O, and one other
woman joined the group
¢
@7 46 min
Mindful Mama's Mental Health
Support for the mama's who are stru...
Sorry, this pod is no longer available.
(O Reply ™ Share
v e Be the first to reply!
.. ; , and 10 other women
joined the group
. 2 hr
Giving noticato.cmployer.,
|941 all T .
<» " Healingyyouranxiousmin..: °°
‘ ; , and 5 other women joined
the group

’ 3hr

Hi! Im new to the group

Hoping to get good advice and friends @

¥ 1 OReply (N Share

@ ’ Be the first to reply!
‘. Grace, Mahlee, and 16 other women
joined the group
10 hr

Is it normal for bubs to have the

hiccups like 4 times a day ?

I'm 36 weeks pregnant and bubs just has

hiccups all the time &2 is that ok ?

V1 0O7 (M) Share

@ ’ Message...
Q Incognito
11 hr
Relapse
|9:41 g all T =
<» " Healingyouranxiousmin:.: o’
\ 4
5]
5 *EFFECTIVE* skills to
reduce anxiety in your life
asamamaw’
¥
Giving notice to employer
I'm having anxiety about going back to my
job to give my notice and clean out my des...
© W Admin
A gentle reminder "
Hi lovelies, ...
L 4
|9419 a7 (@)
< [eXeXe}
y &Y
Healing your anxious mihd="An An...
MEMBER - 3PRO GROUP
12,325 members
LATEST PREMIUM
s? Pinned Posts
WV
v
v
, 1e other woman
‘ & joined the group
7 Incognito
1hr
Mother in laws
Anyone else just think and find that since
having baby ts are over b...
POST
(O Reply (N Share
@ a [ e ——


Updates

pagePatterns:
Releases & Changelog Page
Releases & Changelog Page
Releases & Changelog Page

screenKeywords:
« Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing
+ Fixed the Discord community link in the main menu.
November Update + Fixed a bug preventing copying layers in View Only mode.
November 2, 2022 + Fixed the “Learn More” link in the Variables modal of Components.
Custom Cursors 7 . ; ' - —
October 28, 2022 : S cuor x [
e o N N
B ° = = i
/ v Sed “ t_;,:'v'i"" ; . ;
-
You can now select a custom CSS cursor for any element of your site. To do so,
select a layer and click the + menu in the Styles panel, then choose Cursor and
pick one of your liking. Once the site is published, hovering on the element will
display the custom cursor, which overrides the browser’s default.
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support - Pricing -
= Updates
- e Discord
= étiy Business
. Contact
Ship si ith styl
Ip sites with style.
Go from design to world-class site with Framer,
the web builder for creative pros.
¥ Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing
Features, fixes &
o
|mprovements.
November Update
November 2, 2022
T v Insert l= Layout . Frame Text
Pages Layers Assets @ Home > « Button
v «» Collapsed Primary
» @ Question
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
November Update
November 2, 2022
T v Insert .= Layout . Frame
Pages Layers Assets @® Home < Button
v ¢ Collapsed Primary
» @ Question
> @ Answer
v «» Expanded Instance
> @ Question
> @ Answer
This quality update brings canvas and layer panel improvements. We've updated
the Component symbol throughout the app to differentiate it from Grids. Plus,
we’ve made Primary Breakpoints and Variants more distinct in the left panel,
making it easier to see if you're editing the primary or an instance. Breakpoints
will now also show the ranges in the layer panel. See the full changelog below.
« New Component icons throughout the app.
¢« New Ul for differentiating primaries from instances.


Creating a web page

screenElements:
Text Field
Toolbar
Button

screenPatterns:
Add & Create
Add & Create

screenKeywords:
] ) :
v B9 msert Layout F @ Text @ coms Portfolio FREE
¥ kg Inser .. ayou . rame b Tex ortfolio e o] » m
Pages Layers Assets @ & = 7 § 08 [0 =
Overlays +
Web +
A Home o Desktopv 1200 Breakpoint + Link +
@ /about < Q
Breakpoint
@ /contact
® /404 Position 0 X 0 Y
4
Height 1080 Fixed v
CMS +
Canvas + Layout & +
Styles +
Opacity 1 —
Visible Yes No
Radius 0 o o
Overflow Hidden v
Fill #FFFFFF X
Border Add...
& o, Shadows Add...
Accessibility @ -
Aria Label
w ¥ & 50% - Upgrade Now riatabe
Tab Index Clear
|] ) i
v B9 msert Layout F @ Text @ coms Portfolio FREE
¥ kg Inser .- ayou . rame b Tex ortfolio e o] » m
Pages Layers Assets @ & = 7 § 08 [0 =
Overlays +
Web +
A& Home @ Desktopv 1200 Breakpoint + Link +
@ /about < Q
Breakpoint
@ /contact
® 1404 Position 0 X 0 Y
@ /page Width 1200 Fixed v
4
Height 1080 Fixed v
CMS +
Canvas + Layout & +
Styles +
Opacity 1 —
Visible Yes No
Radius 0 o o
Overflow Hidden v
Fill #FFFFFF X
Border Add...
3 o, Shadows Add...
Accessibility @ -
Aria Label
w ¥ & 50% - Upgrade Now riatabe
Tab Index Clear
|[} .
v B9 msert Layout F @ Text cMs Portfolio FREE
¥ kg Inser '. ayou . rame T RIS g ortfolio e o] » m
Pages Layers Assets I- + -I T + 8 I'I =
Overlays +
Web +
o Desktop v 1200 Breakpoint +
PR Button Add...
@ Jabout I FRAMER About  Contact I
: I Position
@ /contact
@ /404 Type Relative v
CMS + . . Size
Make beautiful websites
Canvas + You'vg never made a website Width 368 Fixed v
this fast before. Really.
Get Started Height Auto Fit v
Fit Content
Effects +
: g, i
: ;J:’:‘ i Styles +
i}”"ﬁ, W, Opacity 1 _—
i Visible Yes No
| =R ‘ |
I World-class hosting i Rotation 0°
I Infrastructure built for scale, I
] performance and reliability. |
I I Elements/Card Component
T T Title World-class hosting
Text Infrastructure built
_ for scale,
° )
é Edit k W . 50% v Upgrade Now performance and
reliability.


Gallery

screenElements:
Grid List
Card
Thumbnail
Avatar

screenElements:
Logo
Button
Animation & Video
Floating Action Button
Banner
Button
Grid List
Card
Thumbnail
Avatar

pagePatterns:
Hero Section
Landing Page
Misc
Misc

pageType: Marketing Marketing Marketing

screenKeywords:
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -
Ship si ith sty
Ip sites with style.
Go from design to world-class site with Framer,
the web builder for creative pros.
¥ Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Ert for free
F'he best sites are
'Neet your site @framer
leap P —— —— o ] R Products Communty+ Promg Leam s Suppo Gatsariod Johannes| Eckext Abstractisns L ]G]
Unlock access to TIVE Hello. Moin. GrifRgodd.
energy markets The new standard fo I'm Joh: I craft A%
e interactive graphics R
T e et g3 cleanr more restentre. Blazing fast. Tiny size. Runs everywhere. experlences for 4
creatives at ) ﬁ«
o Adobe @Lightrotin. z 8|
—— o= - — ;o ) ’ \
@ 0 . . x goao (B e
P . 0 A= s ©00g%. =00 X
: - e e e O st rapk
[—— & s © CI=5 e e LGS s 1
We make it easy for prowdgrs OO o @ {8 Maskingin Lightroom ¥ Made in Framer
of smart energy technologies pmmmm— i ——— 2 |
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing E:rt for free
"weet your site @framer
leap [Ep—— [— oo (R R Frosuets + Conmunity v Prcng Lean « Suppo Gatsariod Johannes Eckert Abstractisns v©
Unlock access to TIVE Hello. Moin. Grifsgodd.
energy markets The new standard fc aiann I craft A%
gl interactive graphics R s
. "w;“v;"m:"“‘!;”;' '"'h‘;g‘”;“ gk il Blazing fast. Tiny size. Runs everywhere. experlences for J ~

creatives at 7 ﬁ
. Adobe @LightroYin. 8|
— e 0,%% ' ,

o o . . K @OBO w‘,. S ‘
S EITY NT . = ©Ca® veEes
_— e e e O It
[r——— e e ® e B s LR s 1
We make it easy for providers B 6O o .@ 8 esinginightoom
of smart energy technologies pmrewnir— ‘
to generate revenue by B A 2 €
supplying flexible support to . ) /"f{& —» ! - ¢
the electric grid. S — P ‘ ’&»)3& ‘ € /
The design tool that creates /f ¢ . \ fr N Y /
o ! graphics N
I T A\ |
%
Leap Rive Johannes Eckert Abstractions
leap.energy rive.app eckert.io abstractions.gallery
ellie [ - e o Remy van der Winden ot Work st
L b‘et:terd al‘lpraF I'm Peter Lewis—Designer, Strategist & Leader ; Made in Framer
[ define, design, and deliver digital _ 8 s B


Prototyping

screenElements:
Card
Icon
Thumbnail
Animation & Video

screenElements:
Grid List
Card
Button
Animation & Video

screenElements: Card Button

screenElements:
Animation & Video
Card
Button
Grid List
Card
Button
Animation & Video
Card
Icon
Thumbnail
Animation & Video

pagePatterns:
Footer Section
Landing Page
Solutions & Use Cases Page
Solutions & Use Cases Page
Solutions & Use Cases Page
Solutions & Use Cases Page
Social Proof (Logo Cloud) Section
Solutions & Use Cases Page
Solutions & Use Cases Page
Solutions & Use Cases Page
Solutions & Use Cases Page
Feature Section

screenKeywords:
I RS SRR oM ST MeRAMER A SO THE wrRaMERAWARBSZ02
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -

Company Templates Resources
About New Desktop Apps
Careers Free Figma Plugin
Cookies Agency SEO
Security Blog Experts
Privacy Brand Guidelines Partner program
Abuse Changelog Webflow vs. Framer
Charges Landing Page
Terms Personal Support

Photography Updates
Product Podcast Discord
Learn Portfolio Startups
Plugins Splash Page Contact
Gallery Startup
Agencies Web3 y o 0 3 0
Startups 3D Framer BV. © 2022
Freelancers
Prototyping
Pricing

& Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
@ https:/proto.framer.website/
; PROTOTYPE 01 -
A& o:00 ave @
| |
Browse '
Cherry Indian spiced Bolivian rainbow pepper berry ) - |
appetizer banana bread matcha main course Thai 4 l | |
zesty tofu pad thai banana bread simmer basmati \
peanut butter almond milk oranges cozy cinnamon )
oatmeal lime mango crisp fall udon noodles chili. ‘
I
h |
L B |
Can we displag| .Jmm
W
“ uly [T
(LLL T |
i o |
- .
& Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
9
Get started. It’s easy.
[ ] [ ]
Our hands-on tutorials will
get you up to speed.
Share your prototypes Learn the basics
Design, animate and publish your Follow along to build your first
interactive prototype in Framer. interactive design in Framer.
-t - . inlloalilelctes - -ozm g Browse
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
Put your prototype on a
website, add some context,
then get feedback.
Learn more >
(1] (2] ©
Design a prototype Create a webpage Publish and share
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
| -
3 = ~3 DASHBOARD Q  search
4 | (- 2_
= 1 1 o
i = 1 ~ m A Overview Users \J Sales Leads
221,952 ¢ 11,589 -0z 1,385 -
B Sales
— © Products
— Activity Income
— N & Projects
‘ 3k
j @ Campaigns
2 Accounts 2k
© Settings
/’ ‘\\ 1k
| 9:00 PR ) \
®) joey X l 0
These world-class design teams prototype in Framer.
= w @
J 0 mN & hulu 6 A\ shopify
|Design and publish
stunning prototypes
with your team.
Try for free >
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
°
Learn from other designers.
o o o
Level-up by joining our
° og 0
online communities.
V=L — A e
Hu{iﬁ—* 2 ‘} Join the community B fé\ ')‘_'
o :»@t % “'\ﬁ- - .L W Chat with 15000+ members ) - '
NS ol v and get help with your \ | { _
: aN T » . . N )V
~ - ; Kix projects on Discord. T e - : .
i N am e E / B N2 -
- 3 - ‘1 j N
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing
Share your prototypes Learn the basics
Design, animate and publish your Follow along to build your first
interactive prototype in Framer. interactive design in Framer.
— . [L_E:1-F 1 Browse
: ‘" O oo —— - mw: m
o * - s + : May
e Protatyon. N
. = — -
b e D) o) L
— B
Watch and learn Start with components
.
Check out our YouTube channel Discover the power of
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
Everything you need
[ ]
to start prototyping.
9:00 ave 9:00 ave 428
Pinning Top
Photos Photos -
..’ 2 - B8 Min & Max
v‘ o Styles +
ﬂ’m T .
i 5 1 Opacity 1 .
=
N = Radius 10 o
il e
: —— ‘,:’ Overflow Visible
2 i Rotation o .
i [ T
Export &
w Y @ s Codely 4


Adding a breakpoint

screenElements: Toolbar Button

screenElements: Accordion Tree

screenElements:
Accordion
Tree
Dropdown Menu
Toolbar
Button

screenPatterns:
Add & Create
Add & Create
Add & Create

screenKeywords:
v @9 msert @B Layout F @ Text cMs Portfolio - objects-wait-224783.framer.app FREE
¥ b Inser '. ayou . rame iy Tex g ortfolio - objects-wai ramer.app e o] » m
Pages Layers Assets @ & o 7T § 0 8 =
Overlays +
«» Topbar Link +
o RO e
Breakpoint
<% Elements/Card reakpoint
v & Desktop Primary Position 1300 x 0 Y
«» Topbar
Width 390 Fixed v
» & Hero Gradient 1 - Makebeautiful
iful websites bsit
% Elements/Card webpsites Height Auto Fit v
made a website .
before. Really. You've never made a website
this fast before. Really.
B Get Started LayoLIt 0 -
Type Stack Grid
Q O
Direction <« T
e e Distribute Start v
b b
3 3
2 2 Align |® ® |
L
e Wrap Yes No
Gap 0
:lass hostil World-class hostil
i n9 i n9 Padding 0 o O
ire built for scale, Infrastructure built for scale,
ce and reliability. performance and reliability.
o=
Styles +
+
Opacity 1 —
Visible Yes No
‘ w . 50% v Upgrade Now
Radius 0 o o
|; v Insert '= Layout . Frame Text g CMS Portfolio - objects-wait-224783.framer.app FREE e o » Publish
Pages Layers Assets @ & o 7T § 0 8 =
Overlays +
Web + @ Desktopv 1200 Breakpoint +
A Home 5 Tablet 810 Link +
FRAMER
@ /about Phone 390 Breakpoint €
reakpoin
@ /contact Custom
Position 0 X 0 Y
@ /404
Width 1200 Fixed v
cMs + Make beautiful websites
Height Auto Fit v
You've never made a website
Canvas + this fast before. Really.
Get Started Layout 0 -_—
Type Stack Grid
Q O
Direction <« T
_@:' Distribute Start v
i
/ Align |® ® |
3 AL
o Wrap Yes No
Gap 0
World-class hosting i _
Infrastructure built for scale, Paddlng © o !
performance and reliability.
Styles +
+
Opacity 1 —
Visible Yes No
‘ w . 50% v Upgrade Now
Radius 0 o o
|[} .
v B9 msert Layout F @ Text cMs Portfolio FREE
¥ kg Inser '. ayou . rame T RIS g ortfolio e o] » m
Pages Layers Assets I- + -I T + 8 I'I =
Overlays +
Web +
o Desktop v 1200 Breakpoint +
PR Button Add...
@ Jabout I FRAMER About  Contact I
: I Position
@ /contact
@ /404 Type Relative v
CMS + . . Size
Make beautiful websites
Canvas + You'vg never made a website Width 368 Fixed v
this fast before. Really.
Get Started Height Auto Fit v
Fit Content
Effects +
: g, i
: ;J:’:‘ i Styles +
i}”"ﬁ, W, Opacity 1 _—
i Visible Yes No
| =R ‘ |
I World-class hosting i Rotation 0°
I Infrastructure built for scale, I
] performance and reliability. |
I I Elements/Card Component
T T Title World-class hosting
Text Infrastructure built
_ for scale,
° )
é Edit k W . 50% v Upgrade Now performance and
reliability.


Security

screenKeywords:
I RS SRR oM ST MeRAMER A SO THE wrRaMERAWARBSZ02
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -

Company Templates Resources
About New Desktop Apps
Careers Free Figma Plugin
Cookies Agency SEO
Security Blog Experts
Privacy Brand Guidelines Partner program
Abuse Changelog Webflow vs. Framer
Charges Landing Page
Terms Personal Support

Photography Updates
Product Podcast Discord
Learn Portfolio Startups
Plugins Splash Page Contact
Gallery Startup
Agencies Web3 y o 0 3 0
Startups 3D Framer BV. © 2022
Freelancers
Prototyping
Pricing

& Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
Security
Every day, thousands of people design, prototype, and share projects
made in Framer. Your work is valuable, and we strive to ensure that
your privacy and data are never compromised. Here are some of the
measures we have in place. Contact us for custom enterprise security
options.
L]
Compliance
ISO 27001
ISO 27001 is the globally accepted standard for assessing the life cycle
of an organization’s security practices. It is a rigorous assessment of
both risk, compliance, and governance that verifies that an
organization has a mature, well-managed approach to information
security. Framer has achieved ISO 27001 compliance. You can
download our ISO 27001 certificate here. A copy of the Statement of Dt
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
dashboard.
(] oge L]
Security vulnerability disclosure
If you would like to disclose a potential security vulnerability or have
security concerns about a Framer product, please reach out to
security@framer.com. Please include a description of the security
vulnerability, steps to reproduce, and the impact the vulnerability may
have. You may encrypt your messages using our PGP public key.
L]
Reset Settings
Click the button below if you want to clear your existing cookie settings.
- Made in Framer