Framer Awards 2022

pagePatterns:
Hero Section
Landing Page

pagePatterns:
Hero Section
Misc

screenElements:
Animation & Video
Button

screenElements:
Logo
Button
Animation & Video
Floating Action Button
Banner
Animation & Video
Button
Link
Thumbnail

pagePatterns:
Hero Section
Landing Page
Misc
Misc
Misc
Hero Section
Misc
Misc
Misc

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 Irfree
R ey . ’ i
|
Y 4 Vi 7/ -
|l 2022 o I
Apple Studio Display + 1 Year Framer Pro site
¥ oot oo
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -

"'/ NTER ¥

SUBMIT YOUR SHARE 6 GET WINNER

BEST PERSONAL THE MOST SELECTION &

FRAMER SITE UPVOTES CELEBRATION

It’s time to launch your most creative January 2nd voting opens. Sign in January 31st voting closes and the

personal site made with Framer. using your Twitter account and get sites with the most upvotes are

Design a crazy portfolio, personal your friends, family and social selected as the winners. Prizes

blog, or your music library as an following to vote for your site. include the Apple Studio Display, M2

online jukebox. Anything goes, let Gather the most upvotes and take Macbook Air, and Framer Pro Site

your creativity run wild. home one of prizes. subscriptions.

‘ I ' . I ¥ Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -
e A — =
o |
OJI = Stories/
AR
willll & ' Work
e [
4 Recent
NOW — DECEMBER 31 JANUARY 2 JANUARY 31
SUBMIT YOUR SHARE 6 GET WINNER
BEST pERSONAL THE MOST SELECTION 8 ¥ Made in Framer
EDAMED SITE 1IDVOTES CEI ERDATION
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -
Launch your crazy portfolio, personal blog, or your music
library as an online jukebox. Anything goes, let your creativity
run wild. Publish your site with Framer and Tweet it using
#FramerAwards2022 to enter.
' &€ Made in Framer
TR T L | . B B i0S icon back
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing -
r— o super ] - B S -
P— TR e >

g o Suppl ~
R o, PP W .
. - 1234567896 ., cE @ . ] [l
fo e, e, s et i . . - —
floris.website by floris verloog = 98 Vibes by ben issen @ 213 carlhauser.com by carl haus $§ 243 tr.af by traf ‘ 153
A H PRODU f"“hﬁ . )
PEOPLE LOVE TO USE. e
BASED IN BARCELONA. Hey. 'm @) Constantine. ~ g : -
Moo smrg . : - } *
A Designer, Z -
specialising in UI/UX design A ‘
&visual development e - 1
¢
S : <
o Property Dashboard .
HAN 200 PROJE |[E=S— A e
) © Webex ' o —
k ” Registration .
& Made in Framer


Creating a new post

appName: Peanut

appCategory: Lifestyle

appTagline: Fertility pregnancy motherhood

companyHqRegion: Europe

companyStage: Early Stage

platform: ios

hotspotType: Tap

screenElements:
Floating Action Button
Carousel
Card

hotspotType: Keyboard Input

screenElements:
Text Field
Bottom Sheet
Avatar

screenPatterns:
Add & Create
Post Detail

hotspotType: Slide

screenPatterns:
Post Detail
Charts

screenElements:
Text Field
Loading Indicator
Floating Action Button
Carousel
Card
Text Field
Dialog
Text Field
Bottom Sheet
Avatar
Bottom Sheet
Text Field
Toast

screenPatterns:
Post Detail
Charts
Add & Create
Loading
User / Group Profile
Add & Create
Post Detail
Acknowledgement & Success
Add & Create
Post Detail
Add & Create
Post Detail
Add & Create
Post Detail
Acknowledgement & Success

allAppCategories:
Social Networking
Lifestyle

screenKeywords:
9:4’@ all ¥ @
p <» " Healingyouranxiousmin:.: 09
<

(™ Incognito
How is everyone feeling today?

50% | Awesome!

50% | Okay

0% Could be better

& a8
5 *EFFEC POST  to
reduce anxiciy 1t your Ji{=
asamamaw
|9:41 all F @)
Cancel New poll
Incognito ’
How is everyone feeling today?

O Other X
ol Pol v
|9:41 all F (@)
Cancel New poll Share
Incognito ’
How is everyone feeling today?
Awesome!

Okay
Could be better @

O Other X

ol Pol (v
|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.
|9:41 all F @)
Cancel New post Share
Incognito ’
How is everyone feeling today?

© O Other X
g Post °
|9:41 all ¥ @m)
Cancel New poll Share
Incognito ’
How is everyone feeling today?
Awesome!

Okay
Could be better @

O Other X

ol Pol (v
|9:4’@ Al T .

p & Healing,youranxious min..: 09
<
(™ Incognito
How is everyone feeling today?
Awesome!
Okay
Could be better

& a

5 *EFFECTIVE* skills to

reduce anxiety in your life

asamama v
|9:41 -Ill ? (G
< Healing your anxious mind - An Anxiety 000
Support Group ¢ ...
0 Incognito
just now
How is everyone feeling
today?
Awesome!
Okay
Could be better
Other
A Following " Share
Have your say.
Be the first to comment
@ Message...
|Support Group ¢ ... -
Q Incognito
just now
How is everyone feeling
today?
You're on aroll @&
Wanna spread the word about Peanut?
Oth
Invite your friends
Share
Not Now Invite
@ Message...
|9:41 -Ill ? @'
Cancel New post
@0
B ©
g Post O
|9:41 all F @)
Cancel New post Share
Incognito ’
How is everyone feeling today?

© O Other X
g Post °

Poll
|9:41 all © @m)
Cancel New post Next
Incognito ’
How is everyone feeling today?

& ©

Check our Guidelines @
Smith Hi I
qwe r t vy ui op

a s d f g h j k |
£ Z X ¢ Vb nm &

123 space

9
|Support Group ¢ ... T
0 Incognito
just now
How is everyone feeling
today?
Awesome!
Okay
Could be better
Other
A Following (™ Share
Have your say.
Be the first to comment
@ Message...


Inviting a team member

appName: Framer

appCategory: Graphics & Design

appTagline: Where teams design and publish stunning sites

companyStage: Growth Stage

platform: web

pageType: Application

hotspotType: Click

screenElements:
Dialog
Side Navigation
Text Field
Button
Text Field
Avatar

screenPatterns:
Settings & Preferences
Invite Teammates
Invite Teammates

pageType: Application Application Application Application

allAppCategories:
Artificial Intelligence
Graphics & Design

screenKeywords:
Mobbin Team Settings Free Team Account
Invite via Link
Members r.com/join/Mobbin--12DzZUSMTx83F30Fv5MUJ Viewer >
Invoices
Plans
Permissions Invite via Email
Fonts Emails (comma separated) Viewer v
Details
There are no pending invites
for this team.
|Mobbin Team Settings Free Team Account
Invite via Link
Members r.com/join/Mobbin--12DzUSMTx83F30oFv5MUJ Viewer >
Invoices
Plans
Permissions Invite via Email
Fonts Emails (comma separated) Viewer v
Details
Pending... '
jdoe.mobbin@gmail.com v Viewer
Can view all projects
Cancel Invite
Will cancel invite
|Mobbin Team Settings Free Team Account
Invite via Link
Members r.com/join/Mobbin--12DzZUSMTx83F30Fv5MUJ Viewer >
Invoices
Plans
Permissions Invite via Email
Fonts jdoe.mobbin@gmail.com Viewer v
Details
There are no pending invites
for this team.
|Mobbin Team Settings Free Team Account
Invite via Link

Members r.com/join/Mobbin--12DzUSMTx83F30oFv5MUJ Viewer >

Invoices

Plans

Permissions Invite via Email

Fonts Emails (comma separated) Viewer v

Details
Pending... .
jdoe.mobbin@gmail.com Viewer v


My badges

screenElements:
Progress Indicator
Icon

screenElements:
Button
Bottom Sheet

screenPatterns:
Confetti
Achievements & Awards

screenElements:
Button
Bottom Sheet
Progress Indicator
Icon
Carousel

screenPatterns:
Confetti
Achievements & Awards
My Account & Profile
Achievements & Awards
Achievements & Awards

screenKeywords:
H
|

\ / X

| )

Icebreaker

The best way to start a conversation is to
break the ice.

First post

First comment on a post
First reaction on a post
. ]
|9:41 all F @)
See who waved
You have potential new connections
waiting. Unlock premium to see who has
already waved at you.
' Refer a friend and see waves
My badges (3)
Y Recent waves
(1] My posts
o M
jeyey Yy groups
2\ Followed posts
" Unlocked posts
. ]
|9:41 all ¥ @m)

4 My badges

Welcome to Rewards X

We want to show our appreciation for the things

you do on Peanut. These visual badges represent

acts of care and kindness. Learn more about

rewards here.
SELF-MADE
SOCIAL BUTTERFLY

November 2022 November 2022

CHATTY . ]
|9:41 all F @)
4 My badges
November 2022

CHATTY
KINDNESS

More coming soon -

Enjoying rewards? Check back soon for the chance to earn

more exciting Peanut rewards

. ]


Messages

screenElements: Card Photo

screenElements:
Avatar
Floating Action Button
Badge

screenElements:
Card
Photo
Avatar
Floating Action Button
Badge

screenPatterns:
Chat Detail
Other Content
Emails & Messages

screenKeywords:
949 all F @)
4 Messages G Q
MESSAGES New Group

16:04

Sandy! So excited to connect, how are yo...
16:03

Hey, llly. Your photo is cute, where was it...
16:03

4 Great to meet you, Naima. ﬁ( How's your...
15:50
Great to meet you, Leymar. ﬁ( How's you...

O
|949 all T @
< > Q3
2 November

Great to meet you, Leymar. &
How's your week going?
Seen - 3:50 PM W/
Hey Judy It's going ok. | have
had better weeks. How are you
doing?
11:07 PM
4 @ Message Leymar... @
|9:41 all T @)
90 W %480
NEARBY SEE WAVES
RECENTLY ACTIVE
e /) -
' / : 4 ,, ’
{7 7 e
L AEL ‘ 7
‘}f :/ W, /N
/f:‘",.f/ R oL
& ™ 2
{f ‘
k ¥ Xy L )
| -
- y ‘,n)
(o)
0O 22 (©)
. ]
|949 all F @)
4 Messages G Q
MESSAGES New Group

14:14
hey! how's it going?

23:07
Hey Judy It's going ok. | have had bet... o

16:04
Sandy! So excited to connect, how are yo...

=

16:03

Hey, llly. Your photo is cute, where was it...
. ]


Copying team invite link

screenElements:
Dialog
Side Navigation
Text Field
Button

screenPatterns:
Acknowledgement & Success
Settings & Preferences

pageType: Application Application

screenKeywords:
Mobbin Team Settings Free Team Account
Invite via Link
Members r.com/join/Mobbin--12DzUSMTx83F30oFv5MUJ Viewer >
Invoices
Plans
Permissions Invite via Email
Fonts Emails (comma separated) Viewer v
Details
There are no pending invites
for this team.
‘ Team invite link copied to clipboard
|Mobbin Team Settings Free Team Account
Invite via Link
Members r.com/join/Mobbin--12DzZUSMTx83F30Fv5MUJ Viewer >
Invoices
Plans
Permissions Invite via Email
Fonts Emails (comma separated) Viewer v
Details
There are no pending invites
for this team.


Careers

pageType: Marketing

pagePatterns:
Footer Section
Landing Page

pageType: Marketing Marketing

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
|? Perks Gallery Company Website Employees ¥ in §
l,
™M :
n View Openings e
[
Framer helps you design professional
websites without a frontend team. Use the &  Framer Sitgs Betayy Sigaup for earlyaccess g, o0
freeform unlimited canvas to express creative DN
ideas and ship with a single click. Perfect for S TR e
startups, scale-ups, agencies and freelancers =
that need to ship the highest quality sites on a > L£om ’ f:":t::1er.upp
deadline. Bendering :
Take a look at some of the sites that were . — —_—
created with Framer. y P  Cotibaration /\/\./


Watching a video tutorial

screenElements:
Grid List
Animation & Video
Keyboard Key

pagePatterns:
Guides & Tutorials Page
Misc

screenKeywords:
& 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
Get started Use %+F or CTRL+F tosearch.
¥  MakeAFramer Websit.. i T oy ey e R ——
- o —— -
vm;"w‘nm. e ; e A new model for |
before. Really. A new model for ﬂ open collaboration ~ ; - /
AL open collaboration L J— u
et oo wh ek v ¢ | |
o (] il Y Py - P e
w el bl ﬁ e = T
T B Yoiube [ Mo | F3] e
Create a landing page Start from Figma Create a blog with the CMS
15m 10m 5m
[ Whatis Framer?
= Importing from Figma
= Importing from Sketch


Creating a CMS page

screenElements: Toolbar Button

hotspotType: Hover

screenElements:
Dropdown Menu
Toolbar
Button

screenPatterns:
Add & Create
Add & Create

screenKeywords:
T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Pages Layers Assets I- + -I T + 8 I'I =
Overlays +
Web + o Desktop v 1200 Breakpoint +
Button Add...
A Home 255
| FRAMER About  Contact
@ /about ] [
Position
@ /contact
@ /404 Type Relative v
cms + Make beautiful websites size
Index You've never made a website
Canvas + Detail Page this fast before. Really. Width 368 Fhesl
Get Started
Height Auto Fit v
Fit Content
b r ] . Effects +
5 it |
i v"‘ i Styles +
] & L !
} s“’é"‘ Opacity 1 D —
(=]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,
|] ) i
6 msert Layout F @ Text @ coms Portfolio FREE
L kg Inser .- ayou . rame (g Tex ortfolio e o] » m
Pages Layers NS £ Project > @ project-a v + Add Content
Web +
A Home u Desktop v 1200 Breakpoint +
@ /about
@ /contact
® /404 ProjectA
This is project A.
CMS +
€ Project Pages 1
Canvas +
w ¥ & 50% - Upgrade Now
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Pages Layers Assets I- + -I T + 8 I'I =
Overlays +
Web + o Desktop v 1200 Breakpoint +
Button Add...
A Home 255
| FRAMER About  Contact
@ /about ] [
Position
@ /contact
@ /404 Type Relative v
cms + Make beautiful websites size
Project > You've never made a website
Canvas + this fast before. Really. Width 368 Fhesl
Get Started
Height Auto Fit v
Fit Content
b r ] . Effects +
I it |
i Qv,n i Styles +
] & L !
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,
|[} .
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.


Importing a project (Figma)

screenElements: Dialog Link

screenElements:
Dialog
Link
Dropdown Menu

screenKeywords:
Choose a Template Browse All
S T ety iz
FRanEn = S S s
o e N sty e
S E ~
About X N A >
W ST g - ,
Vo ag ~ S == - \
o £ &, o . e >
¥ R 4 \
[ T——— 7 o ,Vf:'rrfgc%m S |
U ————— * % o, )
peposr oo teagreentaa cransenysprter & ke,
ot e s st B o) S 2y
s L Y ST R
oo, o S SRS ke gy
——— | o y =W
Blank Site Starter Site Boost 3D Landing Page
Framer Framer Framer Design+Code
" J Ao e
o~ Your s;’° Sroy, .
Aty A= “ Stay close to your Say what'sonyo
One h N - o favorite people. —_—
5 p \ -~ 3 e
= s L 1 y
%o 8 = '-t‘l_‘-;':i«'{v:ii-""N"Tf;"- 4 4 ‘— _—
(] o S . : - '
< g e -
°° Rl v
-] e, s
° ° zvﬁ;?j “mer o Send money fo
e ly e\o f"f B friends & family
as, [ o Project updates DR
e thobey, e & deliverables. |
the \‘:‘;\w -
- w“c
|John
Account Settings Get Started
© Recent Night Mode
@ Archived Desktop App
Start App Tour
.* Hide Get Started Sketch 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,
S the basics of Framer. examples, and articles.
upport
Community
Sign Out
v o Mobbin
@ Al an =
Recent ® = + New
s Templates
W Archived Q Search 2 projects... Last viewed by me v
+ New Folder...
N N <. @ ~aéY/ oz o
e NS LN
R S Vs §6
7 /s Ny N ¥ =
/ " \\\ q‘%\\ \ ?
y : %:":% Y \\ - Na::;?’% ‘Make beautiful websites
3 4 \\ = Py -
o 7Y .’ Y y R
> & <4 M. %"'\a,; Y \t ~
NS R T S
RS ~1;‘\
X N N 4 3 & %), A
X\A%é}\\~ 5.5».% S .? ..-:i'v"“fl?f\
,,;/‘k‘gf‘," \?\‘:\l\ OSATT 4 Y S5 =
NC - e SR
S 7‘;'3\' *hl A ? S &2
+ Create Team... g \;,\ o, & v
SN < N
R Sty
‘ RN AN
|T v Insert .= Layout . Frame Text CMs Untitled FREE e o] » m
Q Search
Basics >
u Desktop v 1200 Breakpoint +
P Video Tutorials >
o Help Articles >
A See Templates Paste from Figma X
1. Read the guide and install the plugin
2. In Figma, select the layers to copy and
o to Plugins -> Framer Copy Paste
0 Layout > 9 9 Py
3. Paste layers to Framer with 3V
e Navigation >
Elements > ¥ 9 ‘
g CMS Content >
Audio >
o Ecommerce >
g Forms >
o Icons >
o Social >
w ¥ & 50% - Upgrade Now
) vy >
|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


Creating a text style

screenElements:
Tree
Accordion
Segmented Control

screenElements:
Dialog
Text Field
Button

screenElements:
Text Field
Button

screenElements:
Dialog
Text Field
Button
Dropdown Menu
Text Field
Button
Tree
Accordion
Segmented Control

screenPatterns:
Add & Create
Add & Create
Add & Create

pageType: Application Application Application Application Application

screenKeywords:
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 368 Fixed v
H1 Title Manrope, 40px i Height Auto Fit v
H2 Subtitle Manrope, 24px
Fit Content
H3 Section Title Manrope, 18px
P Caption Inter, 18px
} r 5 . Effects +
P Paragraph Manrope, 16px H s :
i b i
~ Links : l ; Styles +
A Link #0099FF : ) " :
f N A% H
Wz Opacity 1 —
A Logo Link #1111 ] " [
A Topbar Link #999999 (=]o b Visible Yes No
i World-class hosting i Rotation 0
Code + 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 +
- Project e Button Add...
E FRAMER About  Contact E
v Elements
& Card Position
RS
% Topbar Type Relative v
*  Framer
Size
Styles + Create Text Style
+ Text Paragraph (p) ~ Width 368 Fixed v
H1 Title Manrope, 40px Height Auto Fit v
Name
H2 Subtitle Manrope, 24px
Create a new text style to reuse across Fit Content
. . B
H3 Section Title Manrope, 18px your project. Defining a HTML element
P Paragraph Manrope, 16px will enhance the page semantics.
\ " Effects +
A Link #0099FF ! : Styles +
A Logo Link #1111 ! *F’)Z' Y :
il o Opacity 1 B —
A Topbar Link #999999 ] [
(=]e ® 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 + @ Desktopv 1200 Breakpoint +
- Project e Button Add...
i FRAMER About  Contact i
v Elements
& Card Position
RS
% Topbar Type Relative v
> Framer
Styles S Make beautiful websites size
Text Style You've never made a website
B this fast before. Really. Width 368 Fixed v
Text Link Style xe
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 H |
i b i
A Link #0099FF ! 3t/ : Styles +
A Logo Link #1111 ! Qpnr-i, . :
il o Opacity 1 B —
A Topbar Link #999999 ! " :
(=]e ® 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,
|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...
E FRAMER About  Contact E
v Elements
& Card Position
RS
% Topbar Type Relative v
*  Framer
Size
Styles + Create Text Style
+ Text Paragraph (p) ~ Width 368 Fixed v
H1 Title Manrope, 40px Height Auto Fit v
Caption
H2 Subtitle Manrope, 24px
Create a new text style to reuse across Fit Content
. . B
H3 Section Title Manrope, 18px your project. Defining a HTML element
P Paragraph Manrope, 16px will enhance the page semantics.
\ " Effects +
A Link #0099FF ! : Styles +
A Logo Link #1111 ! *F’)Z' Y :
il o Opacity 1 B —
A Topbar Link #999999 ] [
(=]e ® 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 + @ 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,


About

hotspotType: Scroll Vertically

pagePatterns:
About Page
Header Section

screenElements:
Tooltip
Animation & Video
Icon

pagePatterns:
About Page
Header Section
Footer Section
Landing Page
About Page
About Page
About Page
About Page

pageType: Marketing Marketing Marketing Marketing Marketing Marketing Marketing Marketing

screenKeywords:
We are Framer.
We believe everyone should be
able to ship blazing-fast and
beautiful sites. We’re building
the web design platform to
help you do that.
.
|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
» - »r
Benjamin %
@ o o
722N
N
O o &
ﬂ et ‘
.'4 < - @ \&
¢\( 5 ) ) e
A\ /3
) a8 = o ®©
-t
< e = ¥ £ @ .
$
|Framer  Tenpletss  Pugins  Leam  Gelery  Usecases+  Resoucest  Supportc  Pricng
Over the years, Framer has evolved from
a simple JavaScript library into a full-
blown web design platform. Focused on
helping you ship your ideas every step of
the way.
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
MRSTH 5T 5 W - 5 i 7 b 55 T\ % T S R T S r ; v b sk i AT AN R S 3 il y s
¥y b e I g o v - 3 e 4 N il }. I ft} & \ { S v 55 >u e i & ». \'(j,
e fa V49 Sl = B v RS 2’)«" RS\ i P R e S 2 1 i
ﬁ, f:';"’f. Vs ‘,rr/~ TSR /4 * AR "?"3‘*}5& ’/ P iy > = '.i. R 2 _‘;' i \(» L N \z‘" e
LI | 42 Ve 2] F N o Y ﬁ ﬁ.‘%g« e P ~ N TRl - MRS L e 2
axrt, y - s X il . A [P RS ﬁﬁ Al o " L R AR R g R B P e |
s £ NEf - AT e R N S S L et - 'kl R . e R e A
N A 5 = . \‘ 2R ‘wy r At l) A | a PR . e sin TR BoTs o o, A @ QS
RN >, O i P S| | SN SRt ey 3 S on W SRR AT L OGRS et
o+ B AV ARSI "f"t’ SR e R W () PR omRee P . 5 S v*-'j[? DR L SRR _,z‘?; = 98
.Afﬁ‘ _j] 2 s e ‘ I/. . ¥ _‘ . i A IV N = E I£3 S e ‘e i, by \.,4_»:7'«»;_- ‘_;»"fle’_ > ¥ SRS
G B #:‘ z ~.\¥> i % il [ S e.fv':_,;,.‘-ﬂ. A N ; “w:‘g A =S {& \_\‘."‘ \,’ o (AT o AR g AL
S m.;;_/ Z o R & / o “;rz% Y - R ¥ & s AL ﬁ"ﬁf . a9 R A E L L RSN, R “HIRe D -
T WIS L &) B 2 - g = 3 !):‘I', = et e e — . + A8 3 - 1Y AN e T i A ¥ 3 a5 ‘){N \
S I TN S - . AN > Rk | TSP N ~ y i NS, NP PR Ao T = s
SRS A A e S p A =\ /(/ *"'" k4 R A% \ 7 A o %z: OUSBINE | ot £ TNk
RSV e =2 A A AR I VIR W R R S s T T B
(B g ) s ; | oz A7) ‘I 1 < ; ey 2 T S i\l v.‘!.,“::'ﬂ Sa\e ‘t{' X K\ /71‘% BTt
| sy e e %4 A by \ ; . i YA Yo N ‘?p TR WSS }r . ‘32:/<’,g/':-

e - ¥ e £ p.. TR Rones N PP VALY WA R Uy o s R «‘ﬁ,ifsf- % == 2o
Pl i ? ¥k X AL W R A L SR AR IS G BN e s MRS
B e A o /'n 255 & ‘ 12 5 A ,.,y_p -w b oo NI B Nl S
X A :'?i'.'k 3 Ll g i ¥ L - N 3 2, Y S - ‘s%}_.& Pl £ ;7_7_,,;’ ‘o0 5 PR Y 1/_&4- N,L}fg e &
RS Giee iy 1702 ‘ o b A : RN R sy, = T k] S N e
- b+ B il g | 1 5 R U S ﬂ CTAREE S s IS e i W s X
5 __"0.3. :09.°b \ﬁ i .. ! = y- Ey G s \ > ‘:',s‘ ‘}"“;k’ T Y = "2" Bt 3 aadel LT L 1
e e . IR T - I BB & T 3 .ﬁ. s ; o R ﬁf‘ o maiN R S b
.)' B “.~ b p (“ '/I"i"‘é‘. - B Q I m" \“';‘ A -\q & -As r\‘ ?-: 4 ‘.'\:’:}'" \ ""’ G i ) "‘\ g f A‘» A (‘.'Tf = ﬂ, :;"i‘é‘ - d." "tf’-'—"‘:.‘
T, e IS SIS VUSRS A T ) Sic Y= b R A ol
L =4 ’k"} ~ ';{ : S \ i “ i q ] i Vo2 — AT\ 'f\\ A = S == i o TN B
” ,m[‘:ff . SN LA A B : §N9 ) ~ “ e _ \ o w > 3‘4
947 ¥4 \ ‘ . ! \ . \ LTI >
ot ~ N kD B ) AN
v - b py > v Y - y gl
4 J ibpy IS 5 a2 N
€ | ‘ (R:g‘ 1 ) I' é 2 :; L
}‘ / .!';f’:.(v - 3= ‘ . > A ~ ( [ N 3 &
) Y ‘ = 3 3 S » -
?'1}‘.&"'.” o ‘6 o oy e . Q ’ 4 v { - 4
i WV o AN = = . o : g
- ARK - ) 4 A : W\ N y oy W :
=4 "!N 1 [ yi \ 4 u - ¢ \
’ "I . A ! ﬁ I ( (] \ > Y Al
i & | s/ A~ 4 . w
2 /1A 1 (™ p \ o
R, fodih . 3 m < ‘ ;,/. 4 &
e L Y N - ,.. _re g & B
- £ == > Nl - \> S > (¥ 4 S ; -
‘ : - - e Eall i 3 ,}. A _ gl
b ot - g . « - v, // N ’ < 3 vm" 4 i ~ﬂé - ¥ —
¥ Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing
L3
R e
e oF =
’ "\
’ %fa‘\NA 154', \§
! (AR - «© \ ~
) 63
0\ e’”CE 2“‘\<° /
‘\\\\ = 4 g
® o0 -
-
& @
| $
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing
u -y u - -y ]
the way.
S $ « 0 G oi
2015 2017 2018 2018 2020 Today
Framer Studio Framer Design Framer X Framer Motion Framer Web Framer
(0] O o o o0 o O (@) (@) (o)
FramerJS Seed Series A Series B
Cramae warle with 11ie oanm suildimes e nav
|« Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing
w <5 ) e
FramerJS Seed Series A Series B
Come work with us on building the next
generation design tools for the web.
Remote or in one of our offices.
See all open jobs »
IR Pl RN B I R Y R s T Al T S e =y
Gt AP T " }P, AR R i S e ey ¢ vl
N 5";‘; # 4 é& 2 34* &R S,, M é i y w»:ﬁg.w PR A AR B\ \ D2 -
f.‘;'.- Wwane PR Pt S o TR N S i g P —“,:";.{*A Te) W / "f\‘
r:::‘??é::ih : _:‘,‘1 g ;ﬂ gaé; i 7 g ‘Q .E :‘ : . i Wy %ﬁ ; {» v L ‘Mudelin meirI


Replying to a comment

screenElements:
Side Navigation
Button
Text Field
Icon

screenElements:
Stacked List
Divider

screenElements:
Avatar
Side Navigation
Button
Text Field
Icon
Button
Stacked List
Divider

screenPatterns: Comments Comments Comments Comments

pageType: Application Application Application Application Application Application

screenKeywords:
T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Pages Layers Assets 1Comment Open v
John Smith
Web + @ Desktopv 1200 Breakpoint + Just now
This is a project card.
A Home
FRAMER About  Contact R
@ Jabout O replies
@ /contact
@ /404
cms + Make beautiful websites
You've never made a website
Canvas + this fast before. Really.
Get Started
€,
vz
World-class hosting
Infrastructure built for scale,
performance and reliability.
A ¢ w . 50% v Upgrade Now
|[+ 3 (7] i
L by Insert '- Layout . Frame by Text g CMs Portfolio FREE e o] » m
Pages Layers Assets 1Comment Open v
John Smith
Web + Just now
A H This is a project card.
ome
@ J/about .@&'% 1replies e
4 ‘Iw’f
@ /contact % IG,',
3/
® /404 oy
w? S
cMs + “’ e
i ;,ém |
W2
1 |
Canvas + Al v
Y g
.
World-class hosting
Infrastructure built for scale,
performance and reliability.
Read More
A ¢ w . 100% Upgrade Now
|[+ 5 (7] i
L by Insert '- Layout . Frame by Text g CMs Portfolio FREE e o] » m
Pages Layers Assets Back Replies Resolve
John Smith
Web + Just now
A Home This is a project card.
® /about .@&'%
g ‘iw’f
@ /contact % 16,',
3/
® /404 (W7
.‘kf—:? 2\ ; /¥
cMs + “’ e
i ;jg’m |
W2
1 |
Canvas + Al v
Y |
.
World-class hosting
Infrastructure built for scale,
performance and reliability.
Read More
A ¢ w . 100% Upgrade Now Write a reply... 2
|[+ 5 (7] i
L by Insert '- Layout . Frame by Text g CMs Portfolio FREE e o] » m
Pages Layers Assets Back Replies Resolve
John Smith
Web + Just now
A Home This is a project card.
® /about .@&'%
g ‘iw’f
@ /contact % 16,',
3/
® /404 (W7
.‘kf—:? PRy ; /¥
cMs + “’ e
i ;jg’m |
W2
1 |
Canvas + Al v
Y |
.
World-class hosting
Infrastructure built for scale,
performance and reliability.
Read More
A ¢ w . 100% Upgrade Now Noted! °
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Pages Layers Assets 1Comment Open v
John Smith
Web + @ Desktopv 1200 Breakpoint + Just now
This is a project card.
A Home
FRAMER About  Contact
@ /about Reply
@ /contact
@ /404
cms + Make beautiful websites
You've never made a website
Canvas + this fast before. Really.
Get Started
€
vz
World-class hosting
Infrastructure built for scale,
performance and reliability.
A ¢ w . 50% v Upgrade Now
|L Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Pages Layers Assets Back Replies Resolve
John Smith
Web + Just now
A Home This is a project card.
® /about .@&'%
) ?X,kf
® /contact LA/ John Smith
“Q‘a Just now
@ /404 i
V7 Noted!
.‘kf—:} 2\ ; /¥
cMs + § 5 i
it ;,ém |
A%
1 |
Canvas + 0 ol
Y |
.
World-class hosting
Infrastructure built for scale,
performance and reliability.
Read More
B


Framer for Agencies

pagePatterns:
Solutions & Use Cases Page
Hero Section

screenElements:
Button
Animation & Video

screenElements:
Grid List
Thumbnail

pagePatterns:
Solutions & Use Cases Page
CTA Section

screenElements: Photo Button

screenElements:
Grid List
Card
Icon
Button

screenElements:
Avatar
Dropdown Menu
Photo
Button
Button
Button
Animation & Video
Grid List
Card
Icon
Button
Animation & Video
Card
Grid List
Thumbnail
Carousel

pagePatterns:
Solutions & Use Cases Page
Solutions & Use Cases Page
Social Proof (Testimonial) Section
Solutions & Use Cases Page
Solutions & Use Cases Page
CTA Section
Solutions & Use Cases Page
Hero Section
Solutions & Use Cases Page
Solutions & Use Cases Page
Solutions & Use Cases Page
Solutions & Use Cases Page
Social Proof (Testimonial) Section
Solutions & Use Cases Page
Social Proof (Logo Cloud) Section
Solutions & Use Cases Page
Solutions & Use Cases Page

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

screenKeywords:
Perfect for cli k
errect ror client work.
Loop in your clients for quick feedback, collaborate with
your team like never before, and hand off your project
quickly. Framer is an excellent match for agencies.
CMS Detail ea c » m
blue-whale.framer.app -
Latest - 2h ago - Agency
|¥ Framer Templates Plugins Learn Gallery Use cases + Resources + Support Pricing Eﬂrt for fwa
‘ Albert Papadosifakis @UXD_Albert " J
Co-founder & CEO @designcoagency
“Framer enables our designers and developers to
be superheroes and create unique experiences for
our clients. We can bring our vision to reality with
next level React technology, incredible animations,
rich interactions and a state-of-the-art design
toolset that we use daily to deploy amazing
websites, at a fraction of a time.”
¥ MadoinFramer
|& 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
|B B e TS e e e i N . ST B o
https://algo.tv
algo
Case Study
Algo uses Framer to
[ ] [ ] [ ] i
simplify client work.
Algo is a data-visualisation studio specialising i
in video automation. They run a platform that
turns data into videos, at scale. They recently
switched to Framer to speed-up their process.
Algo is a data-visualization studige .
specializing in video automajgia 3 3? )
We run a platform that tur 5 Fﬁ I
into videos, at scale. JA \ )t ‘\
| '
ﬁ iy A
! € Made in Framer
|¥ Framer Templates Plugins Learn Gallery Use cases Resources + Support Pricing Eforfa

-

e

Browse professionally
®
designed templates.
Easily change structure, style, and graphics
—then publish instantly.
’mplates

e
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Eurt forfrB
[ 332 Insert '= Layout . Frame Text g CMS &blank - andblank.co
Framer for Agencies A
Meetevery .
I. " : i & https://andblank.co/
deadline. :
L e (-
B ail
Speed up the process from ideation to - -
client delivery as never before. You’ll get i &bl k
the support, tools, and awareness to grow . .
your business. Companies like DesignCo, l  agency atiny prOdUC1
&blank, and Transcend work with us to experimentinq
move fast and scale globally. i . ,
and creative ¢
v L
S G d (4B Partner with Framer > -
tc ¥ Made in Framer
|[ ] [ ] [ ]
is a mutual relationship that offers peace of
[ ] [ ] [ ] [ ] ° [ ]
mind in building and running your site.
Features Services Contract
© No hard hosting limits © Onboarding @ Business Contract
@ Reverse proxy support © Launch support @ Centralized yearly billing
@ Premium Infrastructure @ SEO & Performance audit @ Confidentiality agreement
@ Custom application limits @ Slack channel with Framer @ SOCII and ISO certificates
¥ Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
- e
blue-whale.framer.app -
Latest - 2h ago - Agency
—— Loopi i
. 3 Version 8j2mb1 - 6h ago - Client oop In your c Ients.
nematic video .
o A freeform canvas that your clients can
nade simple. : . " .
. comment directly on, and once it’s ready, just
deo is really f*cking hard. Detail makes it easy. Unlock your o o .
eamless video production - record, stream, and edit in one . press pu blish.
simple but powerful app. . .
y B8 Collaborate in realtime.
: A\ Client .
2 [ oagr) | ‘z Handoff in one go.
5 ¢ 7 5 AN o °
! St 3
v \ T\ | i
NE . .
P - :-‘ " ..
- \ Y N “\l ' E . o .
A = 47 = ! ) - == 5 o
o s e T '
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
eD - > D
3 Comments
. Client
Breakpoint (g e Just now - New Comment
‘ This looks fantastic! &
Agencg 0 replies o °
_ . Loop in your clients.
Client
1day ago
| Collab i Iti
‘ Can we add social proof in this section? . o a orate In reu tlme.
\ Testimonials or Trustpilot reviews would P g . N .
be great. . Design, code, and publish in the same
e fOI‘ . environment. Your team and clients see it all in real-
2 replies
° E o .
el Ffamily : time.
o maitshigliag ou @ Agency \ 4 : .
\ 1 day ago .
N Client Handoff in one go.
. We added a Mailchimp integration in
/ 1 here. This way you will able to gather g .
;;’ leads and messages from now on. Let... )
7
¢ | 2 replies °
( o o
‘ bul ° o
e . .
o ¥ Made in Framer
|Deli ith d
eliver with speed.
Framer’s tools let you handle feedback
quickly. Your clients will be amazed by the
speed with which you can deliver.

Easy Sharing Content Management System

Br.ing. in R team or clients Run a blog, list job openings, or

with just a link. manage your event schedule.

Invite Collaborators
il address
|Problem Solution
In the past we had a wordpress website & then needed more flexibility Framer allowed us to put the designers in control of the appearance of
so we built one without CMS. These two extremes proved to be both the website, meaning how it looks as static, responsive site. This is a big
ineffective. Our sister studio has a website built on Vue.js & an shift and we might change the way we design websites completely,
headless cms, all running on serverless lambda functions + CDN. We working directly inside Framer to put down ideas. This is one step further
were looking for something as fast as this, but with more control into and makes so much more sense compared to designing web experiences
the hands of the design team. We tried Webflow, but then ended up on a fixed board. We can now build and ship new pages much faster than
falling in love with Framer. ever before.
Transitioning to Framer.
We designed the website in Figma. Then used the plugin to import assets “We were able to take care of all the front-end
into Framer. 45 different team members (with different roles) had to intemG"Us fOCUSing the code effort onIU on the
learn how Framer works, from our founder to a designer, a project most complex interactions. We learned a very
manager and a couple of developers. Fortunately it’s really intuitive. We pOWGI’fUl tool we’re now in a pOSitiOI‘\ where
started building the website while Framer was still in private beta, so we 5

) i _ we're free to create and apply our knowledge
enjoyed new features popping up along the journey. We also
collaborated with an external development team to build the most on the A|gO site or on future projects.”
complex interactions & components.

John Hopkins — Founder at Algo.tv
¥ Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing (Sturt for free
Y/ ”
. '
Agencies already running on Framer.
0 Qivi (-
- -
|Upgrade to the
o
Business program.
Get additional premium services and features
designed for small to large companies. The key
is a mutual relationship that offers peace of
mind in building and running your site.
. . . € Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start forH
—1inen pupliisn instantiy.
Browse templates
= \ ™
- e w—t tnel Mepe M Cume Blush — Moréau Collection N -
g
ey ks,
ety e " Ny "etaiy Y00,
g B
-
N o
My name [= Bapa Sasker, = —1 F Hello - 'm an NYC-based Brand & Digital Design D ; Z:]\ \
I'm a digital artist working o - Cleiuthiiga ol (el IS/
and living in Amsterdam. Instagram Twiter M " freelance projects occasionally if they fit my persjill © * 4 = &,
Blush — Moréau — 3 z - L, = 4 Oc
E a Senior Designer at Stripe. 4 [7 £/
" T - #
https://algo.tv
¥ Made in Framer
algo


SEO

pagePatterns:
CTA Section
Misc

pagePatterns:
Feature Section
Misc

screenElements:
Icon
Dropdown Menu

pagePatterns:
CTA Section
Misc
Hero Section
Misc
Feature Section
Misc
Misc
Misc
Misc
Misc
Misc
Misc

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

screenKeywords:
& 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
Overview 30 Days v —
Last updated on Nov 22, 2021 (00:00) .
Site Images
Unique Visitors Total Pageviews
90.7k 126.3k Favieon
Appears next to the title in your browser
ramer Tor
8k | Upload
j A M |
6k i i
| Nov9,2021
% :
i @ Unique Visitors 6,903 Social Image =3 p—
* @ Total Pageviews 7,816 Appears when a link to the site is shared on a
0 H social media. All other pages will use this by B F
Oct25  Oct28  Oct31  Nov3  Nové  Nov9 Novi2 Novis Novig Nov2i default, unless overridden. Recommended ‘t\;—l“
size is 1200 x 630 px.
Framer allows you to use 3 opons e
N ° yoursite.url
every trick in the book that
s Top Sources Top Pages
the world’s best SEO experts
o
can think of.
G Google 121k ® / 38.5k Site Settlngs
° e o W Twitter 7.3k ® /product 22.2k
Start optimizing » Py - G
B Linkedin 1.4k @ /about 12k Framer: Make beautiful websites in mi... Dutch, Flemist
© YouTube 398 @ /contact 6.2k .
Site Description Danish
. The professional website design platform for ste Divehi, Dhiv
MWl within hours, straight from your canvas-nocod  Dutch, Flerm
Dzongkha
k. v English
- .
& Made in Framer
|Server Side Rendering
f °
or dynamic data.
Search engines typically only index your static data like headers
and text. But sometimes your most important content is
dynamically loaded from the CMS or generated with JavaScript.
Framer automatically optimizes your page to render the dynamic
data on the server so that the search engines can correctly index
and pages load much faster.
¥ Made in Framer
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
High perf hosti
Igh perrormance hosting.
Search engines take your site performance into account. Framers’
built-in hosting delivers the fastest page loading, anywhere in the
world.

Dramatically faster

Over 300 servers worldwide make sure your ® 20hago Jurre

site loads fast for anyone, anywhere in the

world by serving your site as close to your = ® 20hago Hunter

visitors as possible from the fastest networks

available.
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
g
any content.
Create custom blogs, articles, knowledge bases, or any content
type your site might need. Use custom fields to optimize your
content organization and display across pages and meta
descriptions. Visually manage and update your content and ship
updates in seconds.
€ + New Item Site - framer.com gn fo] » m
Collections Title Date Category Featured Tint Image
€ Blog 7 & Designing a Web Page 25 April 2022 Editorial Yes - m
N . . . . C ® ade In Framer
= Jobs 3 & How to Become a Web Designer 18 April 2022 Editorial Yes - im
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
Custom Code . wwwframer.com
Learn hiore Framer: Make beautiful websites in minutes
°
Best practices fully
automated. Advanced
°
tricks fully supported.
Framer optimizes your pages automatically for SEO
so you can focus on the most important thing: great
content.
i Jul 7,2022
.\ @ Unique Visitors 7,702
\ @ Total Pageviews 6,811
—
|& 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
Preview
www.framer.com :
Framer: Make beautiful websites in minutes
.
The professional website design platform for startups, designers and agencies. Ship |ndeXIng Clnd
within hours, straight from your canvas - no code and no limitations. °
sitemap controls
- e W e Easily customize page URLs
= 'R e . .
Appears when a link to the site is shared on - b L and titles for search engines
social media. All other pages will use this by p Qnd updote them in a single
default, unless overridden. Recommended "‘;‘j“ ? Framer s -
size is 1200 x 630 px. a S = click via our automatically
aeese : Dy ”:_': generated sitemaps.
Upload
yoursite.url Learn more >
News
. . .
Built-in analytics
More reliable tracking
through built-in analytics ¥ Made in Framer
that is not sensitive to
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
built-i
uilt-in.
Framer gives you full control over SEO markup, indexing rules,
redirects, and more. Ship updates in seconds without relying on
engineers.
& framer.com Meta titles and
. . descriptions
Managing Content (CMS) in Framer P
18 hours ago Add, edit and publish content.
The CMS in Framer has everything you
need to manage content for your blog, job
listings or...
Learn more >
|« Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing
Dramatically faster
Over 300 servers worldwide make sure your ® 20hago Jurre
site loads fast for anyone, anywhere in the
world by serving your site as close to your @ 20hago Hunter
visitors as possible from the fastest networks
available.
Extremely reliable and secure Advanced tricks
Unlimited capacity to handle any amount of Unlike normal hosting, Framer takes advantage
visitors you might get without interruptions. of knowing what you are hosting,
Built-in SSL for all sites and actively monitored automatically recompressing your images,
for security threats so you can focus on bundling JavaScript smarter, server-side
building. rendering, and custom error pages.


Waving and chatting with a user

hotspotType: Scroll Horizontally

screenElements: Accordion Card Carousel

screenElements: Carousel Card

screenElements:
Bottom Sheet
Hero Image
Floating Action Button
Button
Accordion
Card
Carousel
Carousel
Card
Floating Action Button
Avatar
Text Field
Top Navigation Bar
Accordion

screenPatterns:
Chat Detail
My Account & Profile
Chat Detail
Chat Detail

screenKeywords:
9414 all F @)
X 4 O &
Today

Great to meet you, Leymar. &
How's your week going?
3:50 PM
@ Message Leymar... @
|9:41 all ¥ @
l [eXoXe)
X
ol - . 2 P
B Be e
- e p— N
> {:,ﬁ d & -~ .»,:;}v"f’ o,
‘ (1: Wz | .' / ’
el i
/’!,t 4 e S 7 B ‘r;
d d b N
1] :
_ 3
‘ - 2 ’ . . %‘.
i -
r _‘
L& ') A
| & Stay-at-home
"% Capricorn | ® Maternity leave
moving to US. Came to SF in 2017.
I'm pretty quiet when |'m meeting
|9:41 il F (Em)
X 4 O &
Go on, break the ice. v
Leymar, what's up? Great to meet you, Thank:
Describe yourself in Leymar. k% How's Leyma
3 emojis. (- your week going? your fe
4 @ Message Leymar... @
. ]
|9:41 all ¥ @m)
X 4 O &
Go on, break the ice. v
se you're Hey, Leymar! {2 What's 7
Il we surprised you most VE@?
? about your journey?
4 @ Message Leymar... @
. ]
|9:41 all T ==
l [eXeXe}
X
ol - . 2 P
- #- e
- s - .
7= 8 ;/,; |,
» ):h ; L - i
‘ (1: Wz | .' 7 -
/?!,t 4 ‘_‘.t 7 B ‘r;
d d b N
1] :
_ 3
| p= : ' - . %
s -
.‘ _‘
qd ') A
| & Stay-at-home
" Capricorn | ® Maternity leave
moving to US. Came to SF in 2017.
I'm pretty quiet when |'m meeting
|9:41 il F (Em)
X 4 O &
Go on, break the ice. A
4 @ Message Leymar... @


Reporting a group

screenElements:
Bottom Sheet
Button

screenElements:
Toast
Bottom Sheet
Button
Dropdown Menu

screenPatterns:
Acknowledgement & Success
Flag & Report
Action Option
Flag & Report

screenKeywords:
s
y ST
Healing your anxious mihd="An An...
MEMBER - () PRO GROUP
12,256 members
LATEST PREMIUM
s? Pinned Posts
‘. © O, and 3 other
women joined the group
’ ' 57 min
Mindful Mama's Mental Health
Support for the mama's who are stru...
Sorry, this pod Is no longer available.
|X
Report group
What are you reporting Healing your
anxious mind - An Anxiety Support Group
¢’ for? Select a reason below to help us
understand the issue with this group.
Your report is anonymous.
Advertising
Hate
Other °
|» 9419 all F (am
About ®
%«‘ by
K T
Healing yo Share group ™
Disable Notifications N
MEMBER - ¢
12,256 member: Leave group &
LATES
— Report §3)
s? Pinned Posts
WV
A 4
v
Y © O, and 3 other
)& omen joined the group
’ | 57 min
Mindful Mama's Mental Health
Support for the mama's who are stru...
Sorry, this po! IS N0 ionger available.
|< Report group X
Report group
To help our team deal with this report
effectively, please let us know more about
why you reported this group.
|< Report group X
Report group
To help our team deal with this report
effectively, please let us know more about
why you reported this group.
|X
Report group
What are you reporting Healing your
anxious mind - An Anxiety Support Group
¢’ for? Select a reason below to help us
understand the issue with this group.
Your report is anonymous.
Advertising
Hate
Other


screenKeywords:
¥ Framer Templates .*Plugins Learn Galler§ Use cases - Resources + Support + Pricing -
_ N i o
- - o®
. . ® . .
. - | ®
® o -
Looks likewe -
| . .
lost that page... -
| | | | | | ®
. . ° . | ® ’


Watching beginner tutorial

screenElements:
Full-screen Overlay
Button

screenKeywords:
X
; Make A Eramer Website In Minutes 8 s
You’ve never made a
website this fast
before. Really.
Try Wa¥free
£ o 3
1< P »l o) 000/17:30 : ® % Vouube ©7
|& 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


Charges

pagePatterns:
Footer Section
Landing Page
Misc
Misc

pageType: Marketing Marketing Marketing

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
|PI\JII vvi UULUIIIU\.IbUIIH_IUIICVV 1TV LUHTT OUllIT LTl Uo LHTT 1T LSliti.
Additional usage will be billed at the next monthly renewal date.
L] og ® []

Adding additional Editors to your Team
Throughout your subscription, you may add extra editors to an individual
project or to your Team at any time. When you add an additional editor,
you will be notified that this may add new charges to your account. You
are responsible for managing these changes in your team settings page.
You will be charged for the additional editors on a monthly basis. For
annual subscriptions, additional editors will be charged on a monthly
basis pro rata through to the end of the subscription term. Depending on
which date you add additional editors, your initial subscription fee and
the fee for additional editors may not be billed on the same date.

® L] ]
View all plans and invoices
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing
Billing & Charges
and Cancellations
L]

Automatic charges
All Framer subscriptions involve recurring fees. Customers on a monthly
subscription will be charged for additional editors and/or usage at the
next monthly renewal date. Unless otherwise agreed, customers on an
annual subscription will be charged for additional editors and/or usage
on a monthly pro rata basis through the end of the subscription term.
This is separate from their annual billing. Read more about additional
editor charges here. The self-service subscriptions and any additional
editors added to your self-service subscription will automatically-renew


Navigation menu

screenElements:
Logo
Button
Animation & Video
Floating Action Button
Banner
Dropdown Menu
Dropdown Menu
Dropdown Menu

pageType: 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 -
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
|& 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 -
= 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


More tweets

screenElements: Button Card Avatar

screenElements: Button Button Card Avatar

pagePatterns:
Social Proof (Testimonial) Section
Landing Page
Testimonials & Customer Stories Page

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 -
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
1Y IR e
S I e Lan Belic L
@lanbelic
o ” | was in this loop for past 5 years. Until @framer launched Sites.
mag Ic. Now my "portfolio" is live already in its 3rd iteration in 1 month
and I'm already working on new one.
. °® °
Don’t just take our word for it.
Others love how easy it is to @ Steve v
@stvehayes
design and publish a o
Turns out @framer sites is insanely good. | wonder how long
prOfQSS|OnGI site In FrCI mer. before it takes a big chunk of the market — especially sites for
personal, freelance, and startups.
Cédric L
@cedric_design
I've been using the new @framer for quite some time now and |
can say it has completely changed building websites without
code feeina what @iornvandiill @lkoenbok and their awesome
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources Support ~ Pricing
Uber did to taxis. Keep it up &
“ ’ ° Ashish 4 ashuxi.eth L 4
s like
® ” @framer is such an uncomfortably underrated tool. ¥
magic.
Comoco [ 4
oy o R @comocolabs
Don’t just take our word for it.
oy o Thanks to the Framer team @framer for providing such a great
Others love how easy it is to : ) .
toolkit, so we can focus our time on pushing the technology and
design and publish a product forward!
professional site in Framer.
lsg= Beto y
| designed, developed, and deployed this website in 15 minutes
using @framer Sites. Still can't believe it!
ﬂ Venz L


Desktop apps

screenElements: Button Link

screenElements:
Button
Link
Dropdown Menu

screenKeywords:
& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
[ ] LS % Detail.co (3
'S ) Detail.co
Pages
Web +
A Home
detaif . revoran rmse detaif
/blog
/support
/updates o
/support/sharing —| 2 PLETN
/support/getting-started Detail in 3”__econus. -
/support/troubleshooting R § .
<ar . I
CMS + 4
RN
bl C e
CLEREmEE Ci
/updates Inem o
Canvas +
° ° ° ‘ )
. Record and stream hig
— Cinematic video
e made simple
¥ Made in Framer
Record and stream high-quality video with your
MaeiNatallas ke withiaoriBhone iPadt Bl
|& Framer Templates Plugins Learn Gallery Use cases ~ Resources ~ Support ~ Pricing Start for free
d Wind
an INAOWS.
& Download for Mac
Download for Mac with Apple M1 or Windows.
oe®oe0® T o startup W Newsletter ¢ Detail.co B8 Portfolio +
? Insert '= Layout . Frame Text g CMS Detail.co
e = Pages
Web +
¥ Made in Framer
A Home
o
|& 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


Page settings

screenElements:
File Upload
Full-screen Overlay
Top Navigation Bar
Side Navigation
Icon
Text Field
Text Field
Card
Button

pageType: Application Application Application

screenKeywords:
& Portfolio - objects-wait-224783.framer.app FREE e a » m
Site Settings
& General
Page Images
© Domains
Redirects
Page Social Image
© Versions Appears when a link to the page is shared
on social media. If not set, the social image
B Analytics set on General will be used instead. Drop Image
Recommended size is 1200 x 630 px.
© Plans
Upload
yoursite.url
Page Settings Home
A Home
@ /about
@ /contact Custom Code urcrane
@ /404 Custom code will be added to this page only, below site wide custom code. Learn More
Start of <head> tag
End of <head> tag
|& 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 Home Page Settings
B Redirects
ersions itle
© Versi Titl URL
@ Analytics My Framer Site
© Plans Page Description
Made with Framer
Page Settings
A Home
@ /about
Search
tact . .
® Jcontac Show page in search engines
@ /404
Preview
yoursite.url :
My Framer Site
Made with Framer
Page Images
Page Social Image
Appears when a link to the page is shared


Resolving a comment

screenElements:
Stacked List
Divider

screenElements:
Button
Stacked List
Divider
Dropdown Menu

screenPatterns:
Other Action
Filter & Sort
Comments
Filter & Sort

screenKeywords:
[+ 3 7] i
L by Insert '- Layout . Frame by Text g CMs Portfolio FREE e o] » m
Pages Layers Assets Back Replies Reopen
John Smith
Web + Just now
A Home This is a project card.
® /about .@&'%
B 734
® /contact LA/ John Smith
“Q‘a Just now
@ /404 i
V7 Noted!
N .‘kf—:} 2\ ; /¥
cMs § 5 i
i ;,ém |
A%
1 |
Canvas + G ol
Y y
*
World-class hosting
Infrastructure built for scale,
performance and reliability.
Read More
A ¢ w . 100% Upgrade Now
|[+ 3 (7] i
L by Insert '- Layout . Frame by Text g CMs Portfolio FREE e o] » m
Pages Layers Assets Comments Open v
Web +
A Home
® /about .@&'%
g ‘ny;’f
@ /contact % IG,',
3/
@ /404 il
+ ) Y
cMs LA
W2
Vs |
Canvas + \ oAl Y
Y |
[
No open comments.
.
World-cldss hostlng Click anywhere on the canvas
to start a conversation.
Infrastructure built for scale,
performance and reliability.
Read More
A ¢ w . 100% Upgrade Now
|[+ 5 (7] i
L by Insert '- Layout . Frame by Text g CMs Portfolio FREE e o] » m
Pages Layers Assets 1 Comment Resolved v
John Smith
Web + Just now
A H This is a project card.
ome
@ J/about .@&'% 1replies e
g ‘iyf;’f
@ /contact % 16,',
3/
® /404 oy
N .‘kf—:} 2\ ; /¥
cMs § 5 i
i ;jg’m |
W2
Y s |
Canvas + Al v
Y |
.
World-class hosting
Infrastructure built for scale,
performance and reliability.
Read More
A ¢ w . 100% Upgrade Now
|L Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Pages Layers Assets Back Replies Resolve
John Smith
Web + Just now
A Home This is a project card.
® /about .@&'%
) ?X,kf
® /contact LA/ John Smith
“Q‘a Just now
@ /404 i
V7 Noted!
.‘kf—:} 2\ ; /¥
cMs + § 5 i
it ;,ém |
A%
1 |
Canvas + 0 ol
Y |
.
World-class hosting
Infrastructure built for scale,
performance and reliability.
Read More
B
|[+ 5 (7] i
L by Insert '- Layout . Frame by Text g CMs Portfolio FREE e o] » m
Pages Layers Assets Comments Open v
v Open
Web + Resolved
A Home
® /about .@&'%
g ‘iw’f
@ /contact % 16,',
3/
@ /404 il
cMs + Nk
W2
Vs i
Canvas + \ oAl Y
R §
[
No open comments.
.
World-cldss hostlng Click anywhere on the canvas
to start a conversation.
Infrastructure built for scale,
performance and reliability.
Read More
A ¢ w . 100% Upgrade Now


Renaming a project

screenElements:
Dialog
Text Field
Button

screenElements:
Dropdown Menu
Text Field
Dialog
Text Field
Button

screenPatterns:
Action Option
Edit
Edit

screenKeywords:
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
H Al
oo, N NN Y KA i
fa Templates : %M N *-i;’::s . \4 2
_ 3 B\ - §§ ; Js
® Archived : >\ N \ ¢ o \\ 5
,:g::a"% R “’52';“ S
+ New Folder... 4 \\~ 4 SN X Make beautiful websites
SN oo 4 %‘\h; SN Y
N By J S S
NS /@
S “,,\‘5755\ ~ o~ 2 R ll? N n/” ia
SRS o T VS R RS
SERR SR Y &S £ l\r P
SN & % N 4
‘ ool i %ﬁ*ﬁ‘ S
«u Boost Framer Template (copy) Portfolio v1
Viewed 5 minutes ago - Edited 9 minutes ago Viewed 5 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 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
Rename Project
. Portfolio v1 .
Mobbin Q  Search 2 proji Last viewed by me v
This change will be reflected for anyone
TN viewing the project.
fa Templates % \ Cancel m
W Archived o, N N \ = Q) -
> / % - Q"ﬁ”“:: \
SN N e,
+ New Folder... xR SVE Make beautiful websites
& & s <~ / 7 f"b,\b’; R N
N Qe Q S, S
X A & i/ s %’“’e,/, o
AR .‘:{,\\f\ii R ;;i:% ~ SN AR P
T T SN " A R ST ———
N S AN iy -]
S S ~ t\’\\{ " N N 4
‘ oo A %@‘ S
«u Boost Framer Template (copy) Portfolio
Viewed 4 minutes ago - Edited 8 minutes ago Viewed 4 minutes ago - Edited 24 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
Rename Project
A Portfolio i
o Mobbin Q  Search 2 proji Last viewed by me v
This change will be reflected for anyone
TN viewing the project.
fa Templates < % \ Cancel m
W Archived o, N N \ = 55 -
> / % = Q"ﬁ”“:: \
BN N e,
+ New Folder... xR SVE Make beautiful websites
& & s <~ / 7 f"b,\b’; R N
N QS Q S Y
e “ e & ", 4
SELREN s . 4? N J
SN R S < MRS
RSN ER Y £S- N JRASE st
N \;‘} S AN ey e
< X > S ¥ N 4
‘ oo A %@‘ S
«u Boost Framer Template (copy) Portfolio
Viewed 4 minutes ago - Edited 8 minutes ago Viewed 4 minutes ago - Edited 24 minutes ago
+ Create Team...


Searching projects

screenPatterns:
Search
Empty State

screenElements:
Button
Searchbar
Grid List
Avatar
Segmented Control
Searchbar

screenPatterns:
Home
Search
Search
Empty State

screenKeywords:
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
H Al
oo, N NN Y KA i
fa Templates : %M N *-i;’::s . \4 2
_ 3 B\ - §§ ; Js
® Archived : >\ N \ ¢ Ny \\ 5
::::;'”'»g " \‘\ ’w,%::.& <
+ New Folder... 4 \\~ 4 SN X Make beautiful websites
SN oo 4 %‘\h; SN Y
N By J S S
-“’“~“~";~. Q e
ks :'*«_\“x_‘\\\;\f’;\\\\ o R i R
SERR SR Y &S £ 3\\\ P
SN & % N 4
‘ ool i %ﬁ*ﬁ‘ S
«u Boost Framer Template (copy) Portfolio
Viewed 3 minutes ago - Edited 7 minutes ago Viewed 3 minutes ago - Edited 22 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
o Mobbin Q Portfolio Last viewed by me v
H Al
s Templates
® Archived -
o
=
w2
Portfolio
Viewed 4 minutes ago - Edited 23 minutes ago
+ Create Team...
|active tour to learn Browse video tutorials,
John asics of Framer. examples, and articles.
© Recent
® Archived
>
Upgrade now to access _ i
more premium features. Q Portf-olio Last viewed by me v
Upgrade
© vosor
@ Al
s Templates
® Archived
+ New Folder... No Results
+ Create Team...


Switching to List view

screenElements:
Stacked List
Thumbnail
Avatar

screenElements:
Button
Searchbar
Grid List
Avatar
Segmented Control
Stacked List
Thumbnail
Avatar

screenPatterns:
Home
Other Action

screenKeywords:
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
H Al
oo, N NN Y KA i
fa Templates : %M N *-i;’::s . \4 2
_ 3 B\ - §§ ; Js
® Archived : >\ N \ ¢ Ny \\ 5
::::;'”'»g " \‘\ ’w,%::.& <
+ New Folder... 4 \\~ 4 SN X Make beautiful websites
SN oo 4 %‘\h; SN Y
N By J S S
-“’“~“~";~. Q e
ks :'*«_\“x_‘\\\;\f’;\\\\ o R i R
SERR SR Y &S £ 3\\\ P
SN & % N 4
‘ ool i %ﬁ*ﬁ‘ S
«u Boost Framer Template (copy) Portfolio
Viewed 3 minutes ago - Edited 7 minutes ago Viewed 3 minutes ago - Edited 22 minutes ago
+ Create Team...
|John
Get Started
© Recent
® Archived
‘+ t-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...
Boost Framer Template (copy)
- Viewed 3 minutes ago - Edited 7 minutes ago
) Portfolio
Viewed 3 minutes ago - Edited 23 minutes ago
+ Create Team...


Creating a folder

screenElements:
Side Navigation
Banner
Icon
Button
Card

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

screenPatterns:
Home
Acknowledgement & Success
Add & Create
Add & Create

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
Get Started
© Recent
® Archived
R & 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.
n Mobbin
S Al —
Personal - 8=
s Templates
@ Personal
® Archived
+ New Folder...
No Projects
Create a new project from scratch
= aeiicmplate to get started.
+ Create Team... ¥ Created folder Personal
|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.
New Folder
N
o Mobbin ame
Create a new folder in the Mobbin team
a to help organize your projects.
= o Al # =
s Templates Cancel m
W Archived Q Search 2 projects... Last viewed by me v
+ New Folder...
& N SN Y A -
R YA
N \%.,,Q \-\53;:“ e §6 m
/ " \\\ {%\\ \ ?
4 % / ‘.~ ;\ BN S&:}’% Makebeautiful websites
7S 7 & e
AR ‘ﬂ&'\.\/ %% [ -
& & ~ # N
N S GG ) e S
NS /@
) “‘,,\‘575;;\ ~ o~ 2 R ll? N n/” ia
eI T RS e
. /fg“;f‘/ \2\\:‘\\ SIN \%"“ A N R '\?‘\\:‘ T
N A4 S / =
+ Create Team... SR \@\; " N 4
SN < N
> Sty
‘ RN AN
|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.
New Folder
o Mobbin Personal
Create a new folder in the Mobbin team
a to help organize your projects.
= o Al # =
B Tempiates e (D
W Archived Q Search 2 projects... Last viewed by me v
+ New Folder...
K N < L VY i
R YA
. \%.,,Q \_\3‘;:\ el / §6 m
/ " R e gy 2N
/ %"”S' SN e,
N MEINN N i
\'&)t < o« :'r 4 ‘%.,%; By > E
N P <7 h S N
S /@
/ ‘«'\4{5\7\;;?& N\ ~ & < ) l'? \L i
e s SIS =
+ Create Team... SR \\f: " N 4
RN ~. N
R4 Poggys. N
‘ RN AN


In Focus

appName: Spotify

appCategory: Music & Audio

appTagline: Discover the latest songs

companyStage: Public & Mature

screenElements: Card Tab

screenElements:
Grid List
Thumbnail

screenElements:
Dropdown Menu
Card
Tab
Grid List
Thumbnail
Button
Card
Tab

pagePatterns:
Guides & Tutorials Page
Guides & Tutorials Page
Guides & Tutorials Page
Guides & Tutorials Page
Guides & Tutorials Page
Guides & Tutorials Page

pageType: Marketing Marketing Marketing Marketing Marketing Marketing Marketing

screenKeywords:
@ Spotify. for Artists ’ {
EARN REVENUE AS AN ARTIST Connect your Shopify
store to Spotify for
g, Artists to supercharge
e more j,‘,’ + E ' your virtual merch
EmiWolf table
= | oot 3
me rc . N SPOTIFY MEETS SHOPIFY oo B
- B [ ] 3 l;
Fandom goes far beyond the music. Fans love to
show their dedication with merch—and that ; 5
support is key to your livelihood as an artist. Learn Once youve linked
how to get your swag in front of your fans and keep 7.\ a % 4 your ShOplfY store,
them coming back for more. e 'sp poN ‘ refresh the three items
s i featured on your artist \
S o profile any time i e
~ [EEme—
-m READ ARTICLE
e e iiootsatcds M v O @ ENGLISH ~ ©2022SPOTIFY ~ LEGAL  PRIVACY J”;J‘b
|Your music. Your fans. Your team.
All together now.
|e TR
¥ e T
oy :, ;
.; » -}:» 45
S
7 _'f‘,ﬁ"' N >
;;’ 2 By
R S
e T
.
Create music Pror
g A
2 & more work
B AEL.
15 A V..
23 : d Uncover new ideas for writing -8
s P,
'1 . and recording your music, and
S “” for building a creative world 2
A around it.
e Focusin — g -
Ravs
’xﬁ; ; i ¢
S i
o Earn revenue
s as an artl ST
R 2 ol
S e g
|ik o
E ;A‘L'Af i
Level up your merch game—create, L
-t promote, and sell merch that will et -
resonate with fans B K
b he
Focusin —> B
’.‘ i3 .,:,.
. e
7 A
o
: ‘.z :
g
3 -
s e
- e
<& g EARN e-
%) 0
5 .
|© spotify for Artists ’
d el ; i-ff
Shopify Our data shows that LT leamrens
y for the way fans listen B e B - § ogetfanstohi
rcharge may just hold the key i : A i
: | +°  andkeep buying—

wch to stepping up your \ il g 5 mora ot (ol merch @

: it merch game gl - .,)\\ /'( -

B et ey @ e o
AIFY o Sl e ~-l"-""-","'"'{""-"",“f"'""’."“ READ THE STUDY e U 3 3 e

R é 5§ A 78 ':;
b Brand partnershi

skod / rand partnerships
lore ’ expert Frank
i fome - & Bartolotta shares his
NP Erkit (i o best advice for
p B m elevating your merch

A T game

g LISTEN TO PODCAST
P
e Back to focus areas 'J‘i\“
M v O @ ENGLISH ~ ©2022SPOTIFY ~ LEGAL  PRIVACY o
|eSPOtify.forArtists IN FOCUS
e R Lﬂ | | D P
o ke £ C :
v
Sam
5 8% an artist inep
Explore - ;,:
i
, @ W ©O  @ENGUSH  ©2022SPOTIFY  LEGAL  PRIVACY  COOKIES
|P e TR e fidies o
’.5;!{‘ :
e
e CREATE MUSIC & MORE
"-'“‘ ) N
W L
B i
Level up your ;
i 0y 0 A8
songwriting
5
e Explore tips and tricks for finding
R o B g . . &
R inspiration, capturing ideas, and ~‘-'
collaborating more effectively 4
T Focus in
s
e


Adjusting playback controls

screenElements: Slider Drawer

screenElements: Slider Drawer Drawer

screenKeywords:
i d € P —
e SpOtIfy / y ’(, / oy
V) wry ry = X o
/ ! 174 / : E
@ Home / / > / S g
PLAYLIST ) ke ey, W
Q Search b p
i f »
”D Your Library @ ' o .
I / /’ / ~; , i ‘,
. 3 A
f i i 4 ¥
Create Playlist 4 i | v ¥y . f B ey i
. Liked Songs The hottest tracks in the United States. Cover: Taylor Swift L g
) b L / A vl / 2 ‘ by ‘
Spotify « 865,555 likes + 50 songs, 2hr34 min v '\— 5
R TTINE ALBUM DATE ADDED @
Anti-Hero .
il Midnights 6 days ago 3:20
A Taylor Swift
[l ‘ Lift Me Up - From Black Panther: Wakanda For... .
2 VB Lift Me Up (From Black Panther: Wakanda... 6 days ago 3:16
! ¢ Rihanna
Something in the Orange .
3 Something in the Orange 6 days ago 3:48
Zach Bryan
7 ‘W!f Unholy (feat. Kim Petras) .
4 7 \ Unholy (feat. Kim Petras) 6 days ago 2:36
oty Sam Smith, Kim Petras
P Romantic Homicide . L
5 & Romantic Homicide 6 days ago 2:12
@ Install App = ddvd
. x 1 @ m o
Anti Héro O = g L 2 [ ) ——”
Taylor Swift
- BRI ———— 1A )
|" 3 € | —
& spotify v/ ,
4 /4 7 \‘.ﬂ S g f
Ny o
nwwrr r s,
/ V4 7/ 8 ) ’
@ Home /' / S y B et
PLAYLIST / 4 —_—
Q Search 4 f h
i ’ 1 .
”D Your Library *R 3 G
® b, 4 % b 1
q ’ I/ 1/ 4 r ad & e ;
Create Playlist / H / J " i Ci i P
i &9 ' N i/ 14 i ¥ o i
. Liked Songs The hottest 5’ e United I :fl >V ylor Swift i Pl 1
F Ran L W / b i
Spotify « 865,555 I s » 50 songs, 2 hr 34 in 7 f S », Y }
# TITLE ALBUM DATE ADDED @
Anti-Hero .
A Midnights 6 days ago 3:20
= Taylor Swift
Al ‘r Lift Me Up - From Black Panther: Wakanda For... .
2 VB Lift Me Up (From Black Panther: Wakanda... 6 days ago 3:16
L) Rihanna
Something in the Orange .
3 Something in the Orange 6 days ago 3:48
Zach Bryan
Unholy (feat. Kim Petras;
4 fw y( ) Unholy (feat. Kim Petras) 6 days ago 2:36
oty Sam Smith, Kim Petras
P Romantic Homicide . L
5 & Romantic Homicide 6 days ago 2:12
@ Install App = ddvd
- % 1 @ m o
Anti-Hero O = > L 2 [ ¢ — e [
Taylor Swift
- QHOE I ———— T4 0]
|i d € P —
e SpOtIfy / y ’I, / oy
V) wry ry = e oot
/ ! 174 / : r
@ Home / / i 74 / S g
PLAYLIST f ‘3 ey, W
Q Search b p
£ f "
”D Your Library @ ' Sealile .
I / /’ / ~; , i ‘,
, Wiy T A}
Create Playlist 4 i v ¥y . f B ey i
. Liked Songs The hottest tracks in the United States. Cover: Taylor Swift - L g
) b L / A vl / 2 ‘ by ‘
Spotify « 865,555 likes + 50 songs, 2hr34 min v '\— 5
# TITLE ALBUM DATE ADDED @
Anti-Hero .
L Midnights 6 days ago 3:20
A Taylor Swift
[l ‘ Lift Me Up - From Black Panther: Wakanda For... .
2 VB Lift Me Up (From Black Panther: Wakanda... 6 days ago 3:16
! ¢ Rihanna
Something in the Orange .
3 Something in the Orange 6 days ago 3:48
Zach Bryan
“®a  Unholy (feat. Kim Petras;
4 7 w v ) Unholy (feat. Kim Petras) 6 days ago 2:36
oty Sam Smith, Kim Petras
P Romantic Homicide . L
5 & Romantic Homicide 6 days ago 2:12
@ Install App = ddvd
. s 1 @ m o
m Anti Héro O = J 5 S 2 [ § m——
Taylor Swift
- R —————— 14 0]
|i d € P —
e SpOtIfy / y ’(, / oy
V) wry ry = X o
/ ! 174 / : E
@ Home / / > / S g
PLAYLIST / b ___
Q Search b p
i f »
”D Your Library @ ' o .
I / /’ / ~; , i ‘,
. 3 A
f i w4 ¥
Create Playlist 4 i | v ¥y . f B ey i
. Liked Songs The hottest tracks in the United States. Cover: Taylor Swift L g
) b L / A vl / 2 ‘ by ‘
Spotify « 865,555 likes + 50 songs, 2hr34 min v '\— 5
R TTINE ALBUM DATE ADDED @
Anti-Hero .
Il Midnights 6 days ago 3:20
A Taylor Swift
[l ‘ Lift Me Up - From Black Panther: Wakanda For... .
2 VB Lift Me Up (From Black Panther: Wakanda... 6 days ago 3:16
! ¢ Rihanna
Something in the Orange .
3 Something in the Orange 6 days ago 3:48
Zach Bryan
7 ‘W!f Unholy (feat. Kim Petras) .
4 7 \ Unholy (feat. Kim Petras) 6 days ago 2:36
oty Sam Smith, Kim Petras
P Romantic Homicide . L
5 & Romantic Homicide 6 days ago 2:12
@ Install App = ddvd
. x 1 @ m o
Anti Hero O = S 5 L 2 [ ) ——”
Taylor Swift
- RO ————— A
|< > ¢ 77 . Jane ¥
S svoriy -
V), f Yy . .
i A 5 # e 74
/ ! 17 / = /
@ Home /' / > 7 2 Vs
PLAYLIST j 2 ' 4 g ey, W
Q Search 4 f
”D Your Library @®*; k. 5 ’v l.'. .
O j S VU 3
i ] / B j e /'A 4 ¥ ‘.
Create Playlist A ’ $ ‘ /4 / / . , E 3
i8] g @ 57/ iy | N 4 S e g
. Liked Songs The hottest tracks in the United States. Cover: Taylor Swift \‘aw ¥ Rotdg
i L : 7 . & ot & S -
Spotify « 865,555 likes « 50 songs, 2 hr 34 min T Y 3
# TITLE ALBUM DATE ADDED @
Anti-Hero
1] m Midnights 6 days ago Q 320 eee
> Taylor Swift
[l ‘ Lift Me Up - From Black Panther: Wakanda For... .
2 VB Lift Me Up (From Black Panther: Wakanda... 6 days ago 3:16
! ¢ Rihanna
Something in the Orange .
3 Something in the Orange 6 days ago 3:48
Zach Bryan
®a  Unholy (feat. Kim Petras) .
4 7 % Unholy (feat. Kim Petras) 6 days ago 2:36
oty Sam Smith, Kim Petras
P Romantic Homicide . L
5 m Romantic Homicide 6 days ago 2:12
@ Install App ddvd
. % 1 @ m o
m Anti Hero O = > S 2 [ ) ———
Taylor Swift
- [ ORI ————————————————————————E- T4 0]


Adding a custom domain

screenElements:
Button
Text Field
Side Navigation
Link
Radio Button
Text Field
Button
Badge
Status Dot

screenPatterns:
Add & Create
Settings & Preferences
Acknowledgement & Success

screenKeywords:
& Portfolio - objects-wait-224783.framer.app FREE e a [ 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

.framer.website 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.
|& 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

jsmith 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.
|& 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.
|- Cco D
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 Optimized '@
@ /about
@ /contact
© URL https://jsmith.framer.website
1404
Status Website is published and optimized
Version Latest - Updated 2m ago by John Smith
Canonical URL
Selec index so they don't serve duplicate content.
¥ Custom domain connected
o Default


Sharing a promo card

screenElements:
Progress Indicator
Button

screenPatterns:
Share
Acknowledgement & Success

screenKeywords:
e SELECT > CUSTOMIZE > SHARE
Share your Promo Card straight to your socials or download it to use whenever
you want. And remember to include the link to your content!
Y
- o Twitter o Facebook
FAQ LEGAL PRIVACY © 2022 SPOTIFY ENGLISH
|e SELECT > CUSTOMIZE > SHARE
Share your Promo Card straight to your socials or download it to use whenever
you want. And remember to include the link to your content!
- o Twitter o Facebook
FAQ LEGAL PRIVACY © 2022 SPOTIFY ENGLISH


Install app

screenElements: Button Card Tab

screenKeywords:
]
é Spot|fy® e 0 . ane ¥
@ Home
Q. search B s .
n -
Q search { mornir
11D Yourtibrary _— i o i Soundscaps
Create Playlist B croo e ] B -
R .
8 Likedsongs - npbeski
. S g
Beats & Rhymes :,";":::},,, .@?a @ ?A %
Most Necessary T [l SRS B
o RN - e | e W BT e
Recently Played see more
Hot Hits USA x = TTTer. =
EELI S 5 e s2@o——
. o
Seamlessly listen to music you love. Download
(3
the Spotify app for your computer.
@ Install App
M AiHero o x @ M o P 2 P—
3 Taylor Swift
=1 | 2 C———————————————————————————————— 3D ()
|o < > Playlists Podcasts Artists Albums . Jane ¥
@ Spotify
@ Home PIaYIlsts
Search - -
Q (=) =  Beats& ° Pop Right
”. Your Library N Rhymes " Sgiis i
{ P ) ~ 3
s : .
\ i . e
Create Playlist ¥ ’ \}‘ 1
. Liked Songs ] % | 5 gi E
X E
5 LA i S 3
Beats & Rhymes Beats & Rhymes Most Necessary Pop Right Now
Most Necessary The hottest Hip-Hop of The official voice of the The most interesting tracks
Pop Right Now today all over the world.... next generation. Cover:... in the current world of po...
Hot Hits USA
= USA
7
/i
177&
/ -
0, ik
4
44
OTH
Y
Hot Hits USA
The hottest tracks in the
United States. Cover: Tayl...
@ Install App
- % 1 @ M o
Anti He.ro v = > S 2 [ ) ———
Taylor Swift
- 2 ——————— R v 3.9 0


Changing styles

screenElements:
Slider
Stepper
Side Navigation

hotspotType: Drag

screenElements:
Popover
Color Picker

screenElements:
Popover
Popover
Color Picker
Slider
Stepper
Side Navigation
Side Navigation

screenPatterns:
Select
Add & Create
Edit

pageType: Application Application Application Application Application Application Application

screenKeywords:
v B9 msert B Layout F @ Text cMs Portfolio FREE
¥ kg Inser '. ayou . rame T RIS g ortfolio e o] » m
Grow « =l ¢
Pages Layers Assets
Effects +
Web + o Desktop v 1200 Breakpoint +
A Home Styles +
FRAMER About  Contact
@ /about
Opacity 1 —
@ /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
Visible Yes No
Pages Layers Assets
Overflow Visible v
Web + o Desktop v 1200 Breakpoint <+ Rotation 0°
A Home
FRAMER About  Contact Text
@ /about
404
® / Font Inter v
D New Style...
. Weight Regular v
CMs + o 5 Title Manrope, 40px
Make beautiful websites =)
= You've never made a website m Subtitle Manrope, 24px Color . #000000
Canvas + this fast before. Really.
Section Title Manrope, 18px Size 16 -
Get Started
ﬂ Paragraph Manrope, 16px Letter o - 4
Line 12 Em v
Align = = B
b
3 Transform  None v
e Decoration Aa Aa S
Accessibility @ -
World-class hosting
Infrastructure built for scale,
performance and reliability. Tab Index Clear
Tag P v
Code Overrides +
A ¢ w . 50% v Upgrade Now Handoff +
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Width Auto Fit v
Pages Layers Assets
Height Auto Fit v
Web + o Desktop v 1200 Breakpoint <+ Grow PN = [=3
A Home
FRAMER About  Contact
@ /about Effects +
@ /contact
Styles +
@ /404
Opacity 1 —
CMS +
. | . Visible Yes No
Make beautiful websites
Canvas + = You've never made a website Overflow Visible o
this fast before. Really.
(o Rotation 0°
Color X
Text
Solid Linear Radial
. Styles Title (L) x
LY,
i Color Add...
y v s
Q‘,, Align = = =
D
(IS ) Accessibility @ -
World-class hosting reTE— e s
Infrastructure built for scale,
performance and reliability. 100% Tab Index Clear
a v
Presets v + 9
. . . . . . . Code Overrides +
A ¢ w . 50% v Upgrade Now . . . . . . Handoff +
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Visible Yes No
Pages Layers Assets
Overflow Visible v
Web + o Desktop v 1200 Breakpoint <+ Rotation 0°
A Home
FRAMER About  Contact Text
@ /about
@ /contact Styles D Select...
404
® / Font Inter v
CMS + Weight Regular v
Make beautiful websites
= You've never made a website Color . #000000
Canvas + this fast before. Really.
Size 16 v =
Get Started
Letter 0 = | 4
Line 12 Em v
Align = = B
€
3 Transform  None v
i ; :
3 Decoration Aa Aa Aa
Accessibility @ -
World-class hosting
Infrastructure built for scale,
performance and reliability. Tab Index Clear
Tag P v
Code Overrides +
A ¢ w . 50% v Upgrade Now Handoff +
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Grow > =l o
Pages Layers Assets
Effects +
Web + o Desktop v 1200 Breakpoint +
A Home Styles +
FRAMER About  Contact
@ /about
Opacity 1 —
@ /contact
Visible Yes No
@ /404
. Overflow Visible v
s + I'm John Smith
. . Rotation 0°
Make beautiful websites
Canvas + = You've never made a website
this fast before. Really.
Text
Get Started
Styles Title (L) x
Color X
Content I'm John Smith
Solid Linear Radial
. Color #FFFFFF x
LY,
Wl Shadows Add...
y v /s
Q‘,, Align = = =
(IS ) Accessibility @ -
World-class hosting Va
Infrastructure built for scale,
performance and reliability. #FFFFFF v 100% Tab Index Clear
a v
Presets v + 9
. . . . . . D . Code Overrides +
‘ w . 50% v Upgrade Now . . . . . . Handoff +
|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
|T v Insert '= Layout . Frame Text g CMs Portfolio FREE e o] » m
Width Auto Fit v
Pages Layers Assets
Height Auto Fit v
Web + o Desktop v 1200 Breakpoint + Grow PN =l o
A Home
FRAMER About  Contact
@ /about Effects +
@ /contact Text Styles X
Styles +
@ /404
D New Style... Opacity 1
CMS + m Title Manrope, 40px Visibl v -
. . isible es o
Make beautiful websites
= 0 i m Subtitle Manrope, 24px
Canvas + You ve never made a website Overflow Visible o
this fast before. Really. . i
Section Title Manrope, 18px
Get Started Rotation 0°
ﬂ Paragraph Manrope, 16px
Text
. Styles Title (L) x
i
1 Color Add..
e W,
S Align 5 = =
Accessibility @ -
World-class hosting
Infrastructure built for scale,
performance and reliability. Tab Index Clear
Tag h1 v
Code Overrides +
A ¢ w . 50% v Upgrade Now Handoff +


Tools

screenElements:
Top Navigation Bar
Carousel

screenElements:
Top Navigation Bar
Carousel
Thumbnail

pagePatterns: Misc Misc Misc Misc

screenKeywords:
eSpotifyg Design Stories Listen Team Tools
Backstage Tickets j 0ot

. tothe World of / -

\ Service Design at Bl ,

= ° T ;
Spotify ' 0 A
o1 —— 09 SCROLLDOWN |,
|[ JON ] @ Remote Design Sprint Template +
spoti.fi/HeuristicsTool B spotifydesign (s —
Q Search
E [Spotify.Design] - Heuristics Toolkit for Constraints ® Recent
[E Plugins
[J
© swoun Spotify
. . [ Draft +
© seotiy Design S Remote
[
. Design
int
Designing and Building for Templat
Constraints Heuristics © spotify Design ]
By Dominika Mazur, Linnea Strid 1
///I }\\
Assessing Constraints: Making Products for all Users An All-Inclusive Figma Template for Your Next Remote Design
The team behind Spotify Lite created this tool to ensure they're building products for the people around the world sprint
piholfaceiechnoiegicalichalehdes Browse the template Senior Product Designer, Alexandria Goree, uses to plan and execute a fully remote design
sprint.
|T00Ls |
How Spotify Organises Work in Figma to Improve
Collaboration
We've opened up the music box and described how we've shaped the tool to suit our needs and culture at
Spotify.
e o
Now Hiring Want more of the
[} [J
\ m pag r Ini w \ S fy
see potify Design
approach?
Check out our stories in the Process category.
JOIN THE BA 7 VIEW ALL PROCESS STORIES @
|e S .Design Stories Listen Team Tools
The design resources we rely on.
® ® $ Remote Design Sprint Template
spoti.fi/HeuristicsTool B spotifydesign e Public
Q Search
E [Spotify.Design] - Heuristics Toolkit for Constraints ® Recent
‘ E Plugins
[J
e Spotify Spotlfy
& spotity Design - " Remote


Work From Anywhere

screenElements: Card Illustration

pagePatterns:
Careers Page
FAQ Section

screenElements:
Card
Illustration
Accordion
Accordion
Floating Action Button
Illustration

pagePatterns:
Careers Page
Careers Page
FAQ Section
Careers Page
Careers Page
Careers Page
Careers Page

screenKeywords:
The Band Manifesto ~ Work From Anywhere  Grow With Us  Job Categories
Step 1 % Step 2 [
n *
I EE
- n
I N
Choose your location Choose your work mode
Stay where you are or make a change. We're flexible when it You can choose to spend the majority of your time in the
comes to our people moving locations within their region. If environment that suits you. That could mean a Spotify office,
it makes sense for your role, we can explore that during the a co-working space, or your own home. Simply put, you
interview process. work where you work best.
Got questions? | can
help! e
|L] L]
Still curious?
With Covid-19, how is Spotify handling going into the office and vaccines?
Can | really work from anywhere?
Can | work remotely anywhere in the world?
Will Spotify support me with office equipment if | choose to work from home?
Will | get access to the same learning opportunities if | choose to work
remotely?
Where can | find out more about regions? e
help!
|The Band Manifesto ~ Work From Anywhere  Grow With Us  Job Categories
\ ]
‘N |
=
——
e e ————— .
J
| / N ——— ’\
N\ | ‘ 2 W\\ \ | :
/ ) v \ <
B S (“‘ N\ - . Q
h:Ip:ques ions? | can e
|%Spotify' Locations  Being Here  Diversity, Equity & Impact ~ Students ~ How We Hire All Jobs
Work isn’t somewhere you go,
it’'s something you do
We give our people the freedom to work
where they work best, wherever that may be.
|
; S
|The Band Manifesto  Work From Anywhere ~ Grow With Us  Job Categories
Some of us work better in the office. Some of us are
more productive at home. And many of us find we're
most effective when we have options. Here at Spotify,
we don’t just recognize that one-desk-doesn’t-fit-all. We
celebrate it with a Work From Anywhere Program that
allows you to do just that.

We believe we're happier and more productive when we
have the freedom to choose where we work. It helps us
find better ways to communicate and collaborate with
one another. It means we can work with the very best
people for the job, regardless of what city or country
they call home. It helps us to become a more diverse
place to work, a place that can flex with our people as
their lives and ambitions change. And perhaps best of
all, it supports a better work-life balance. A life-work
balance.

E:I;!quesﬁons? I can e
|[ ) [ ]
Still curious?

With Covid-19, how is Spotify handling going into the office and vaccines? A

Safety is our top priority. Many of our offices are open but in a limited capacity for

those that wish to come in.

We strongly encourage all to get the vaccine against Covid-19. We follow all local

legislation when it comes to vaccine mandates.

Can | really work from anywhere?

Can | work remotely anywhere in the world?

Will Spotify support me with office equipment if | choose to work from home?
Got questions? | can
help!
|% Spotify' Locations Being Here Diversity, Equity & Impact  Students How We Hire All Jobs
Here at Spotify, we like to think
of ourselves as a band
Ok, sure, we don't look a lot like that group
you put together in high school that could
only play one Led Zeppelin song, but we still
think the comparison fits.
|The Band Manifesto ~ Work From Anywhere ~ Grow With Us  Job Categories
And there’s more
)K Work From Anywhere is the future of working at
. Spotify. And we're pretty excited about it. If you
- . want to know more about our reasons behind
_ * making the change to dynamic working, and how
/ we think it'll benefit our people and our business,
then head to our dedicated HR blog.
Go to the blog e
For Spotify employees in the US: This link leads to the machine readable files that are
made available in response to the federal Transparency in Coverage Rule and includes
negotiated service rates and out-of-network allowed amounts between health plans and
healthcare providers. The machine-readable files are formatted to allow researchers,
regulators, and application developers to more easily access and analyze data.
Got questions? | can e
help!


Privacy

pagePatterns:
Footer Section
Landing Page
Terms & Privacy Page

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
Statement
Version 1.6 — January 11, 2021
This Privacy Statement explains how Personal Information about our
(potential) customers and other individuals using our services is
collected, used and disclosed by Framer B.V., Framer Inc. and its
respective affiliates ("us", "we", "our" or "Framer"). This Privacy
Statement describes our privacy practices in relation to the use of our
websites (including any customer portal or interactive customer
website) (https:/www.framer.com and https://framer.cloud), our
software (Framer), services, solutions, tools, and related applications,
services, and programs, including research and marketing activities,
offered by us (the "Services"), as well as your choices regarding use,
access, storage and correction of Personal Information. It also
describes how we collect, use, disclose and otherwise process Personal
Information collected in relation to our Services and otherwise in the
P o PR R S T


Team

pagePatterns:
Header Section
Misc

pagePatterns:
Blog Section
Misc (Marketing)

screenElements:
Card
Grid List

screenElements:
Stacked List
Top Navigation Bar
Carousel
Card
Grid List

pagePatterns:
Misc
Header Section
Misc
Blog Section
Misc (Marketing)
Misc
Misc
Misc

pageType: Marketing Marketing Marketing Marketing Marketing Marketing

screenKeywords:
Join the band
® MIAMI ® NEW YORK
Design Manager - Editorial, LatAm Senior Product Designer - Talk
® NEW YORK ® STOCKHOLM
Product Design Manager - Home Personalization Director, Product Design - Core Experience
® NEW YORK ® NEW YORK
Design Manager - Growth Opportunities Senior Manager, Product Design - Personalized Listening
Experiences
® NEW YORK ® NEW YORK
Product Designer - Talk Senior Product Designer - Music Promotion
GO TO SPOTIFY JOBS A
|e Spotify.Design Stories Listen Team Tools
We're a cross-disciplinary team that loves to
create great experiences and make meaningful
connections between listeners and creators.
Learn more about our design community below
and browse the latest opportunities on our team.
JOINTHEBAND (1)
Who we are
4
— _
|N

Whowe are
Q 7
Finding your T-Shape as a How to Stand Out as a Spotify Beyond "Good Job": How to
Generalist Designer Internship Applicant Give Impactful Feedback
In the first instalment of an interview series, two Applying for a design internship at Spotify? We Do you know how to make your praise meaningful?
Designers reflect on life as a generalist at Spotify and rounded up a band of previous interns and asked Check out these five principles.
the career path that led them here. them how they made a strong first impression.

Ask Spotify Design 06

The do’s, the don’ts and everything in between: four

designers answer your portfolio-related questions in a

special edition of Ask Spotify Design.

VIEW MORE STORIES @

Our Disciplines
|Our Disciplines
Product Design Editorial Design
Product Designers at Spotify focus on delivering the Editorial Design at Spotify focuses on art direction
best experience possible for listeners, creators and and collaborates with our product, brand, marketing,
external partners across all of our products and and content practices. The team builds audience-
markets. We bring fulfilment and value to listeners specific, culture-defining brands and product
and creators, and make it easy for people to enjoy experiences for Spotify listeners worldwide.
Spotify every day, exactly how they want.
VIEW OPPORTUNITIES e VIEW OPPORTUNITIES @
Internal Tools Design Ops
|eSpotifyg Design Stories Listen Team Tools
Backstage Tickets j 0ot

. tothe World of / -

\ Service Design at Bl ,

= ° T ;
Spotify ' 0 A
o1 —— 09 SCROLLDOWN |,
|Our Disciplines
Product Design Editorial Design
Product Designers at Spotify focus on delivering the Editorial Design at Spotify focuses on art direction
best experience possible for listeners, creators and and collaborates with our product, brand, marketing,
external partners across all of our products and and content practices. The team builds audience-
markets. We bring fulfilment and value to listeners specific, culture-defining brands and product
and creators, and make it easy for people to enjoy experiences for Spotify listeners worldwide.
Spotify every day, exactly how they want.
VIEW OPPORTUNITIES @ VIEW OPPORTUNITIES @
Internal Tools Design Ops