Switching to dark mode

screenElements:
Dropdown Menu
Avatar
Icon

screenPatterns:
Dark Mode
Dark Mode
Home
Dark Mode
Dark Mode

screenKeywords:
John a
$ jsmith.mobbin@gmail.com M O\ @ Explore Communlty @ . M
@® Recents
> o a Acme (i) () (=)
Starter team
Ready to go beyond this free Projects Members  Settings About
plan? Upgrade for premium
features.
Last modified v oo | =
Team project
der 1
Favorite files o I
Hover over any file and click the star to - '
i o John (You
add it here e Build your own (You)
‘ - team library ‘ e
Teams - design. Team libraries let you share styles
% 1 file, updated 1 hour ago e e
[ Acme Free
Starter team overview
Team project
W 1 of 3 Figma files used
-+  Create new team
Ry 0 of 3 FigJam files used
F3 1 of 1 project used
Upgrade your team for unlimited files,
projects, and customizable team libraries.
?
. Download desktop app X
|8~ gy Oy » T & & O Drafts / Contacts App v ‘ - @ > 70% v
Layers Assets Page 1 Design Prototype Inspect
++ Contactitem
Background
Contact Detail
o B FsFsFs 100% ®
1+ Home
Local styles +
Text styles
Ag Headline - 17/Auto
Contacts
Export +
W
Name Name
@ 42 John
Lorem ipsum dolor sit amet consectetur. Urna
Name non suspendisse aliquam pharetra ligula
Name by adipiscing bibendum.
?
|John "
8 jsmith.mobbin@gmail.com i Q @) Explore Community Jal @ .
© Recents Drafts Deleted @ jsmith.mobbin@gmail.com
[ Drafts
@ Internal profile
New design file + New FigJam file + [ Import file (& Plugins
@ Design and prototype Whiteboard and diagram Bring in files from o J;“f —
ettings
Ready to go beyond this free
plan? Upgrade for premium @ UIES >
features.
Explore FigJam templates . Getdesktop app
= ‘1_% == <+ Add account
5 oS¢ Team PR . ...
Favorite files |a§_|ram — sync meeting . |
) i basicsin agenda =TT B —
Hover over any file and click the star to Fi J m B == = '
add it here g a E—— o . -
B b
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last modified v oo |=
—|— Create new team
. ) . i i
e A/ - o
Contacts Q . e - S
00 amd O -
ko9 B N
B \ ‘@
o . - i .
Contacts App o o FigJam Basics Wireframing in Figma
Edited 5 minutes ago Edited 20 hours ago Edited 20 hours ago
. Download desktop app X 0
|John P
$ jsmith.mobbin@gmail.com M O\ @ Explore Communlty @ @ M
@® Recents Drafts Deleted
[ Drafts
> New design file » New FigJam file Import file
B 9 4 kN 9 + 4 p
@ Design and prototype Whiteboard and diagram Bring in files from other tools
Ready to go beyond this free
plan? Upgrade for premium
features.
Explore FigJam templates See all X
View plans
S N : | — T
D - Daily () _—] )/ 4\7 : ﬁg m o
Favorite files D|agrar.“ — sync 1 o // !C’* / . wT -
} i basics in /ey B ==
Hover over any file and click the star to FigJam S / . ,*_ L )
add it here ‘ R \‘\j . = |
L v
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
Acme Free
Team project
All files v Last modified v oo | =
-+  Create new team
P o 4
Contacts
|4
) e ® - o .
: -4 B Figdam o d
— ' <§><> ams
basics bl |
ko9 B
- : ]
E‘ jose-alejandro-cuffia-kILNP6dnyAE-unsplash Ek Contacts App %u FigJam Basics
Edited 10 minutes ago Edited 11 minutes ago Edited 30 minutes ago
?
. Download desktop app X
|John "
8 jsmith.mobbin@gmail.com i Q @) Explore Community Jal @ .
© Recents Recently viewed @ jsmith.mobbin@gmail.com
[ Drafts
@ Community profile
New design file + New FigJam file + [ Import file ® Internal profile
@ Design and prototype Whiteboard and diagram Bring in files from o
ﬁ Plugins
Ready to go beyond this free
plan? Upgrade for premium 49 Settings
features. i
Explore FigJam templates Light @ Theme S
., Get desktop app
[ v System theme
. b= DETY Team — 5
Favorite files Dlagram — sync meeting - +  Add account
) i basicsin agenda =TT
Hover over any file and click the star to F. J B == = ' E_) Log out
add it here Ig am e !
B [V
s
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last viewed v oo |=
—|— Create new team
/ A e ® it
, Contacts Q
= - »-
_ ® - ® - S
&l 60w o
Untitled Contacts App jose-alejandro-cuffia-k1ILNP6dnyAE-unsplash
In Drafts - Edited 16 minutes ago In Drafts - Edited 12 minutes ago In Drafts - Edited 12 minutes ago
Y. G
. Download desktop app X e AL eader1 “
|o - Community Q. Search Community - Jal ’ v
Add a little magic to your files
Discover inspiring portfolios, presentations, mockups, and more.
Inspiration Jam sessions Design systems
\ 0 A
) J N\ m AR <D
Curated by Figma seeall
2; = 2Umpey ‘L,
L= % ‘E;ﬂ;’:y P ; " '. “‘I‘;“‘L:'::Z
O F Gl 55 :
?
Bv the community. for the community


Cursor chat

appName: Figma

appCategory: Graphics & Design

appTagline: The collaborative interface design tool

companyHqRegion: US & Canada

companyStage: Public & Mature

platform: web

pageType: Application

hotspotType: Click

hotspotType: Keyboard Input

screenElements:
Popover
Text Field

screenElements:
Context Menu
Popover
Text Field
Text Field

screenPatterns:
Action Option
Other Action
Other Action

pageType: Application Application Application

allAppCategories:
Collaboration
Graphics & Design

screenKeywords:
B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate Paste here
FSFSF5 100% ®
Default
Show/Hide Ul 8\
H Contact Detail Show/Hide comments  ©*C Local styles +
Lorem ipsum dolor sit amet co... Cursor chat / Text styles
Name Quick actions... 8/ Ag Headline - 18/Auto
Plugins >
Avatar
Contacts :
Widgets 4 Export +
Top bar « Contact item s
[ | \
H Home : I ,v’-"‘"'
i ] Name
Contact list : Q Same I @ Name
| |
Contact item | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
! Name ! 5 adipiscing bibendum.
Contact item : I ”
| |
Contacts ‘- Y
Top bar
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate »
FSFSF5 100% ®
Default Say something
# Contact Detail Local styles +
Lorem ipsum dolor sit amet co... Text styles
Name Ag Headline - 18/Auto
Avatar
Contacts
5 - Export +
Top bar « Contact item )’
[ttt | 48
H# Home : I f,:’.{;,
| | N
ame
Contact list : @ Same } @ Name
| |
Contact item | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
| Name ! adipiscing bibendum.
Contact item : I
| |
Contacts e
Top bar
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate »
FSFSF5 100% ®
Default Hello
# Contact Detail Local styles +
Lorem ipsum dolor sit amet co... Text styles
Name Ag Headline - 18/Auto
Avatar
Contacts
5 - Export +
Top bar « Contact item )’
T T T T T T T T T T T T T T T T T T T T T T \
H# Home : I fifzv
| | N
ame
Contact list : @ Same } @ Name
| |
Contact item | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
| Name ! adipiscing bibendum.
Contact item : } ”
| |
Contacts e
Top bar


pageType: Marketing

hotspotType: Drag

pagePatterns:
404 Page
404 Page

pageType: Marketing Marketing

screenKeywords:
¥ Products v Enterprise v Pricing Community v Company v F English v Login Get started
The page you are looking for can’t be found.
Flgmd Use Cases Explore Resources Compare
W Twitter Ul design Design features Blog Sketch
|¥ Products v Enterprise v Pricing Community v Company v F English v Login Get started
The page you are looking for can’t be found.
Flgmd Use Cases Explore Resources Compare
W Twitter Ul design Design features Blog Sketch


Templates

pagePatterns:
Landing Page
Footer Section

hotspotType: Scroll Vertically

pagePatterns:
Templates Page
Header Section

pagePatterns:
Landing Page
Footer Section
Templates Page
Templates Page
Header Section
Templates Page
Templates Page

pageType: Marketing Marketing Marketing Marketing Marketing

screenKeywords:
Fi g ma Use Cases Explore Resources Compare
¥ Twitter Ul design Design features Blog Sketch
O YouTube UX design Prototyping features Best practices Adobe XD
Instagram Graphic design Design systems features Support Invision Studio
Kl Focebook Wireframing Collaboration features Developers Framer
Diagramming Design process Learn design Design on Windows
Brainstorming Figdam Downloads Miro
Templates Pricing What's new
Remote design Enterprise Releases
Agencies Organization Careers
Figma for education Professional About us
Customers Agency partners
Security Privacy
Integrations Modern Slavery Statement
Contact Status
|Explore templates ¥ Get started
Add a little structure to your files
Exp I o re 1 ’000+ te m p I ates o n th e Get started faster with Ul kits, wireframe templates, and more.
Figma community ' f
. . - D)
Explore even more templates, widgets, and plugins—all — : :
built by the Figma community. “ “ [
Curated by Figma
Collaborate and listen Q = A’ New plugins and widgets
|’ Products v Enterprise v Pricing Community v Company v F English v Login Get started
@
Explore templates ¥
Fi t lat ]
Discover 300+ templates made by our team to help you get an idea off the ground
or shape it into something new. Use the menu above to get started, or keep
scrolling to find inspiration from some of our favorite categories.
Figma favorites
Search through some of our curated and most popular templates.
|Explore templates ¥
Figma favorites
Search through some of our curated and most popular templates.
0 ]
g EEEEEEEEESEEEEEEEEEEEEEE
I
:~
Let’s do this!!!
I [ — =
I B @@ g .
Wireframe Kits Product development roadmap Quarterly planning templates
Speed up your design workflow with our template Make planning more inclusive, productive
component based wireframe kit. Go from project proposal to purchase and fun
ready in no time.
O
|Explore templates ¥ Get started
Wireframe Kits Product development roadmap Quarterly planning templates
t
Speed up your design workflow with our templa e Make planning more inclusive, productive
component based wireframe kit. Go from project proposal to purchase and fun
ready in no time.
Brainstorming templates
Whether you think linearly or tend to jot things down as they come, use these free
brainstorming templates to keep all of your notes in one place.
- aiha
oeeeeeeenl . ~  BE T 7Y 1


Marking notifications as read

screenElements:
Stacked List
Avatar
Thumbnail
Link
Badge
Status Dot

pageType: Application Application

screenKeywords:
John P 0
§3 jsmith.mobbin@gmail.com M Q @ Explore Community Q (i) e
@®© Recents Drafts Deleted Notificati
otifications
[ Drafts
a Jane replied to a comment in Contacts App
New design file + New FigJam file + Looking good! “
@ Design and prototype Whiteboard and diagram
Ready to go beyond this free
plan? Upgrade for premium
features. Jane reacted # to your comment in
Explore FigJam templates Contacts App £ it
- JEE— —
Name S
= kd I B =
A b= Daily Team '  m .f
Favorite files Dlagram — sync meetlng . = - .
i} _ basics in agenda = = S e T
Hover over any file and click the star to Fi J m = = '
add it here g a E—— o
B b
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last modified v oo |=
~+  Create new team
\» w . “‘ =) o il E
e oA = .
Contacts . . S— . ~ -
. - . - = - ' . ‘ m . = - |
® - ®- R o - -
gv em @
ko9 B W
. ; ey ﬁ
o . - L] ]
Contacts App o o FigJam Basics Wireframing in Figma
Edited 5 minutes ago Edited 20 hours ago Edited 20 hours ago
. Download desktop app X G
|John P 0
§3 jsmith.mobbin@gmail.com M Q @ Explore Community Q (i) e
Recents Drafts Deleted
© Notifications Mark all as read
[ Drafts
[J
a Jane replied to a comment in Contacts App
NeYV design file + Neyv FigJam fllé + Looking good .
@ Design and prototype Whiteboard and diagram
Ready to go beyond this free
plan? Upgrade for premium [ ]
features. Jane reacted # to your comment in
Explore FigJam templates Contacts App £ it
- JEE— —
- - ‘ | e
A b= Daily Team '  m .f
Favorite files Dlagram — sync meetlng . = - .
i} _ basics in agenda = = S e T
J = =
Hover over any file and click the star to Fi J m = = = '
add it here g a E—— o
B b
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last modified v oo |=
~+  Create new team
KL “‘ =) - il -
e oA = .
Contacts . . S— . ~ -
. - . - = - ' . ‘ m . = - |
® - ®- R o - -
gv em @
ko9 B W
. ; ey ﬁ
o . - L] ]
Contacts App o FigJam Basics Wireframing in Figma
Edited 5 minutes ago Edited 20 hours ago Edited 20 hours ago
. Download desktop app X G


Integrations

pagePatterns:
Integrations Page
CTA Section

screenElements: Button Illustration

pagePatterns:
Integrations Page
CTA Section
Landing Page
Footer Section
Integrations Page
Integrations Page
Integrations Page

screenKeywords:
Add live Figma files as resources to your -
Get started

profile, teams, and projects on Qatalog.
Learn more

Extend what’s possible in Figma

Build on top of Figma’s open platform to help teams

connect the tools in their design workflow.
Try Figma for free
|Fi g ma Use Cases Explore Resources Compare
¥ Twitter Ul design Design features Blog Sketch
O YouTube UX design Prototyping features Best practices Adobe XD
Instagram Graphic design Design systems features Support Invision Studio
Kl Focebook Wireframing Collaboration features Developers Framer
Diagramming Design process Learn design Design on Windows
Brainstorming Figdam Downloads Miro
Templates Pricing What's new
Remote design Enterprise Releases
Agencies Organization Careers
Figma for education Professional About us
Customers Agency partners
Security Privacy
Integrations Modern Slavery Statement
Contact Status
|FEATURED INTEGRATION

Microsoft Teams

Collaborate on Figma design files or jam together in

Figdam in real time—all without ever leaving Microsoft L.

feams m Microsoft
|¥ Products v Enterprise v Pricing Community v Company v @ English v Log in
Create a seamless design
Figma makes it possible to design, prototype, and
collaborate in a centralized space. And our open platform
lets you connect your favorite tools for a customized
workflow that works for your team.
FEATURED INTEGCRATION BE T T e T
|Prototyping & User Testing
Design and prototype in tandem in Figma. Add specialized interactions or conduct
user testing with our integrations.
(]
Spl'(.lg W ProtoPie
Sprig ProtoPie Flinto
Conduct high-impact research with your Turn your Figma designs into prototypes. Add animated transitions, micro-
users throughout the entire product Add basic animations or try your hand at interactions, scroll-based effects and
lifecycle. conditional interactions. more to your Figma designs.
Learn more Learn more Learn more


Group detail

screenElements: Avatar Button

screenPatterns:
User / Group Profile
User / Group Profile

pagePatterns:
Community Page
Community Page
Community Page

pageType: Marketing Marketing Marketing

screenKeywords:
Join a Friends of Figma group. Join one, two, or even all three!
¢ Join a city-specific group to meet other Figma users (in person and virtually) in your city.
e Get involved in an on campus group to connect with students at your school.
e Bond over common interests with users across the world by joining an interest-specific group.
Join a group
Interests Africa Asia-Pacific Europe India Latin America Middle East and North Africa
North America Languages On Campus
ART & ILLUSTRATION CIVIC DESIGN AND DESIGN SYSTEMS DESIGNOPS
TECHNOLOGY
EDUCATORS ETHICS & DIVERSITY FOF DISCORD HACKERS
ICONOGRAPHY PLUGINS
NN TN
|There are currently no upcoming events. Please check again soon.
Organizers
SN
( @ | |
c
¥ ¥
Raven Evans Jey Cozby
Rythm Figma Community Advocate
Figma Community Advocate
|'@ Groups Upcoming Events Become a Community Advocate Become a Student Leader Q  Login
Design Systems

About Upcoming events  Organizers
The Friends of Figma Design Systems chapter is a community of professionals, hobbyists, and students who are
design system beginners, builders, and mentors. We're a Friends of Figma chapter aimed at not just designers and
creatives, but also at developers, product managers, and anyone who has an interest in developing a skillset in
design
Design Systems can be daunting to get started with, especially as a beginner in design. Even as a pro, systems can
be hard to maintain. We want our events, content, and community to help people grow at any point in their career


Editing property attributes

pageType: Application Application Application Application Application

screenKeywords:
By B o [y Wy T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate
FSFSF5 100% ®
Default
+ Home Local styles +
Contacts
Contact item N i Ag Headline - 18/Auto
+» Contact item
Contact item |{— jl
| | Export +
Contacts | |
| Name | Name
Rectangle 1 | 4 | 4
| |
| |
| |
| I Name
: Name : 4
8
| |
| |
.- - - ____J
|By B o [y Wy T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate
FSFSF5 100% ®
Default
+ Home Local styles +
Contacts
Contact item N i Ag Headline - 18/Auto
+» Contact item
Contact item |{— jl
| | Export +
Contacts | |
| Name | Name
Rectangle 1 | 4 | 4
| |
| |
| |
| I Name
: Name : d
g
| |
| |
.- - - ____J
|- o O- % T & & D ® © W el 2 b e
Layers Assets Page 1 Design Prototype Inspect
% Contact item [t~
Alternate
Frame
Default
X Y o+
H# Home
W 390 H 80 S
Contacts
+— Fixed T Fixed
Contact item . i
‘ {':'S"l‘aﬁ‘ieﬂ______________________j Lo o >
| | [ Clip content
Contacts | |
| Name | Name
Rectangle 1 | 4 | 4 < Contactitem - g eee
| |
: : Type v Default
| | Name Alternate
: Name : 4 Layout grid
| 4 | ; |
| | 390 x 80
L | Layer
O Pass through 100% ®©
Fill +
Stroke +
Selection colors
Il ooo000 100%
D9DOD9 100%
EEEEEE 100%
Effects +
Export e
|- o O- % T & & D ® © W el 2 b e
Layers Assets Page 1 Design Prototype Inspect
% Contact item [t~
Alternate
Frame
Default
X Y o+
H# Home
W 390 H 80 S
Contacts
+— Fixed T Fixed
Contact item . i
‘ {':’S"l‘aﬁ‘ieﬂ______________________j Lo o >
| | [ Clip content
Contacts | |
| Name | Name
Rectangle 1 | 4 | 4 < Contactitem - g ees
| |
: : Type Default
| I Name
: Name : 4 Layout grid +
| 4 | ; |
| | 390 x 80
L | Layer
O Pass through 100% ®©
Fill +
Stroke +
Selection colors
Il ooo000 100%
D9DOD9 100%
EEEEEE 100%
Effects +
Export e
|- o O- % T & & D ® © W el 2 b e
Layers Assets Page 1 Design Prototype Inspect
«» Contact item 1]~
Alternate
Frame
Default
X Y *
H# Home
W 390 H 80 S
Contacts
+— Fixed T Fixed
Contact item . i
{':'S"l‘aﬁ‘ieﬂ______________________j Lo o >
| | (J Clip content
Contacts | |
| Name | Name
Rectangle 1 | 4 | 4 < Contactitem - g ees
| |
: : Type Alternate
| I Name
: Name : 4 Layout grid +
| 4 | [ |
| | 390 x 80
L | Layer
O Pass through 100% ®©
Fill o +
F2F2F2 100% (O
Stroke +
Selection colors
Il ooo000 100%
D9DOD9 100%
EEEEEE 100%
F2F2F2 100%
Effects i —+


Inserting a sticky note

hotspotType: Hover

screenElements:
Toolbar
Editable Text

screenKeywords:
8 O A& O Drafts / Untitled v 0 m P O — %~ +
( ’
ok °‘C1"J<.lll‘
<A 759!
SOy
SRS
[}
- /
- o
User goal or problem /
What i the user trying to
accomplish? What is the
problem to be solved?
User action
What actions are they currently
taking? How are they doing it? O v B % & = Small v ~
What information are they -
seeking?
[J
Quotes and sentiment £ Add text
- How do they feel in this moment?
OO ’ :
Drag one of these stickers or
write a quote... John
°
@::ponunily
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
i A - = =
: i T2~ &
A A A . A L] [] A
= !
— | ( 2w B
|8 O A& O Drafts / Untitled v ° m P O — %~ +
]
s
<Al ICs 7L00!
Lg%
SRS
[}
- V4
- o
User goal or problem /
What i the user trying to
accomplish? What is the
problem to be solved?
/4
User action
What actions are they currently
taking? How are they doing it?
e — P o =
(g~ I B 5 @2 = = v Large v
wo
e Quotes and sentiment £
- How do they feel in this moment?
[ [J ‘ @ .0 '
Drag one of these stickers or
write a quote...
°
@::ponunily
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
A | - 2 - =1
A~ A A t O A . . ﬁ T A 8
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
g o
ve L
e I’ °.b,'l;°"!
cAlTISs 47%
Lg%
SRS
[}
< V4
- o
User goal or problem /
What i the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
- How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::ponunily
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
A | - 2 = =1
A < .
A A t . A L] [] ) J) A 8
O \ & ™ B G
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
( ’
':’°‘C1~K.lll‘
<A 759!
SOy
SRS
[}
- /
- o
User goal or problem /
What i the user trying to
accomplish? What is the
problem to be solved?
/4
User action
What actions are they currently
taking? How are they doing it? O v B 5 % = Medium v ~
What information are they -
seeking?
[J
Quotes and sentiment £ Jamming <3
- How do they feel in this moment?
OO ’ :
Drag one of these stickers or
write a quote... John
°
@::ponunily
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
i A - = T =
< .
A A A ﬁ . A L] [] A
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
g o
ve AL
e I’ °.b,‘l;o"!
cAlTISs 47%
Lg%
SRS
[}
< V4
- o
User goal or problem /
What i the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
- How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::ponunily
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
g - | = T =)
A~ A A ﬁ O A . . ﬁ T A 8


Following a user

screenElements: Button Badge

screenElements: Button Badge Button

screenPatterns:
User / Group Profile
Follow & Subscribe

screenKeywords:
@ - Community Q - Jal ’ v
0 Resources Likes
Jane
@jane55  Follows you
0 followers 1 following
Nothing published yet
See what's being created in Figma
|@ - Community Q - Jal ’ v

0 Resources Likes

Jane

@jane55  Follows you

Following
1 follower 1 following
Nothing published yet
See what's being created in Figma
Followed Jane 0


Become a Community Advocate

pagePatterns:
Community Page
Hero Section

pagePatterns:
Community Page
Header Section

pagePatterns:
Community Page
CTA Section

screenElements:
Grid List
Avatar

screenElements:
Button
Grid List
Avatar
Photo
Top Navigation Bar
Button

pagePatterns:
Community Page
Community Page
Community Page
Header Section
Community Page
Community Page
Hero Section
Community Page
CTA Section

pageType: Marketing Marketing Marketing Marketing Marketing Marketing Marketing

screenKeywords:
Lucy Tan Luis Ouriach Luis Teran Maciej Kukulka Marcell Cruz Marcelo Henrique
Taiwan London Caracas Poznan Rio de Janeiro Portugal
¥ N
AN - o .
= )\\: F. 1 n.-_“ QL \‘ ’:é v
, = I\um I‘THF v 2'#
L Y v Y %
i A 3
QU 1)
)
Maria Paulina Mary Tannian Matt Herndon Michelle Lock Miguel Cardona Mihael
Medellin Rochester Birmingham Hong Kong Educators Osijek
Institute of
Technology
ol 7AVAY
& /> ] lI.'; ’I}-. N .
e A iR 3 497 M
[ “7 - f | I’.-:II Vi i . ‘; \
- L VRl . \ Y&
2y & : ey
v 4 ) S
Mirko Santangelo Mitchell Eva Mohamed Mohit Savaliya Momen Hesham Monisha Dhanesh
Rome Dublin BIKARRANE Surat Cairo Chennai
Agadir
ET 0 e ™ )
\ A 3 \ ”,"r""&
| g e | “—". -
/ ] \ /,“J N
. i RN\
|Figma Community Advocates are the heart and soul of our global community.
They go above and beyond to give back to the Figma community by taking the lead
and passionately running our Friends of Figma groups, helping people to connect and
learn from one another.
If you’re interested in becoming a Community Advocate and starting a group in your
city or around an area of interest, we want to hear from you!
Be a group leader =1 "7
As a group leader, you’ll help connect people in smaller user | == — =
groups — based on geographic location or a shared interest. | ' | e ,”
|Meet Our Community Advocates
4 ‘l .-"5. ( V e N
e 1 “,‘\\ 4o
~. ' l_ ‘_\i’a‘ A ‘ 4, . =
aaqi Y N7 ¢ < \ |,
; ';.. \; ¢ “ } '%
Aaqib Ahmad Abdulmalik Ango Abdulwahab Abdussamad Abid Aboobaker Adalberto
Bangalore Bauchi Adebowale lbrahim Kochi Sampaio
Ashimi Kano Brasilia
Abuja
A N Pugy A
/i . THEL
1 _-' A (s .IEI’II"IIII
b B S
II%%IIW!*I*II )
- &g i ‘
Agshin Rajabov Alan Wang Albert Orellano Aldo Mora Alejandro Alex Dee
Baku University of Cucuta Loja Calderdn Lopez Toronto
Pennsylvania Bogota
|'@ Groups Upcoming Events Become a Community Advocate Become a Student Leader Q  Login
munity Advocate
-
Figma Community Advocates are the heart and soul of our global community.
They go above and beyond to give back to the Figma community by taking the lead
and passionately running our Friends of Figma groups, helping people to connect and
learn from one another.
If you’re interested in becoming a Community Advocate and starting a group in your
city or around an area of interest, we want to hear from you!
|Ways to be a Community Advocate
Be a group leader = T
As a group leader, you’ll help connect people in smaller user T =
groups — based on geographic location or a shared interest. 3 ' ' == _II
You’ll coordinate in-person and virtual meetup events once I \ \) II
per quarter for your group, and be the point person for the S - .
Figma HQ team. ] oy .2:.“;‘"'
; 7 pry.
T R s »
Be a moderator = a . 4- |
o E N = -4 Hre
As a moderator, you’ll help run and moderate our growing :___ -_;: % "l‘{ ;'
Friends of Figma Discord. You’ll actively post and share Y , L‘.,': " ;!:.I* 7
content to engage the community, host creative activities, o =] s — :”a‘L |
and make sure questions get answered. [ J ‘—EWL //
I NOR 2 /
- N s
|'@ Groups Upcoming Events Become a Community Advocate Become a Student Leader Q  Login
We are so glad you’re here. Whether you're a professional or student, Friends of Figma
exists so our users can come together to help each other; lifting everyone up. It’s run
by the community and everyone is welcome.
So come on in and make some new friends.
. s ]
|- - A__ s e e ey
* Figma Pro account for active groups
/AN * Closer engagement with the Figma team and product
through sneak peeks and beta programs
* Opportunities to represent Figma at events
® Cool swag!
Want to get involved?
Apply to become a Community Advocate here
and we’ll be in touch shortly!
Meet Our Community Advocates


Inserting a section

hotspotType: Double Click

pageType: Application Application Application Application Application Application

screenKeywords:
B “+FEN O % T 3% M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item
Background
Alternate
FSFSF5 100% ®
Default
1 Contact Detail Local styles +
Lorem ipsum dolor sit amet co... Text styles
Name Ag Headline - 18/Auto
Avater Contacts
Export +
Top bar + Contact item
5 | 'y
| | g
H# Home | | —
| |
| Name | Name
Contact list | @ | 4 Name
| |
. | | Lorem ipsum dolor sit amet consectetur. Urna
Contact item | | Name non suspendisse aliquam pharetra ligula
} Name } y adipiscing bibendum.
Contact item | |
| |
Contacts e
Top bar
|g BB B Oy © T 33 @ [®) J Share & > 70% v
Layers Assets Page 1 Design Prototype Inspect
E] Section1 = F = ™ # L v
Contact Detail
Section 1 Section 0o 3
Lorem ipsum dolor sit am... ] H oDl -
ome ontact Detail X 212 v -456
Name
W 853 H 892 o
Avatar
[ 2 o
Top bar
[ 40
Home
Contacts
Contact list & Contact item ) Layer
2
: . i v
Contact item i i L O Pass through 100% @®
i ] Name
Contact item : @ Same } @ Name
| | . , Fill n+
Contacts | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
| Name | i adipiscing bibendum. ESESES 100% © —
Top bar : } ”
| | . .
+» Contact item Y Stroke o+
Alternate | ooo000 10% ® -
Defautt Inside =1 .ee
Selection colors
Il ooo000 100%
EEEEEE 100%
D9DOD9 100%
See all 7 colors
m; | Export +
853 x892
|g BB B Oy © T 33 @ [®) J Share & > 70% v
Layers Assets Page 1 Design Prototype Inspect
E] version1 = F = ™ # L v
Contact Detail
Version 1 Section |:| O ye
Lorem ipsum dolor sit am... ] H oDl -
ome ontact Detail X 212 v -456
Name
W 853 H 892 o
Avatar
[ 2 o
Top bar
[ 40
Home
Contacts
Contact list & Contact item ) Layer
2
: . i v
Contact item i i L O Pass through 100% @®
| i N
ame
Contact item : @ Same } @ Name
| | . , Fill n+
Contacts | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
| Name | i adipiscing bibendum. ESESES 100% © —
Top bar : } 4
| | . .
+» Contact item Y Stroke o+
Alternate | ooo000 10% ® -
Defautt Inside =1 .ee
Selection colors
Il ooo000 100%
EEEEEE 100%
D9DOD9 100%
See all 7 colors
m; | Export +
853 x892
|g BB B Oy © T 33 @ [®) J Share & > 70% v
Layers Assets Page 1 Design Prototype Inspect
E] Section1 = F = ™ # L v
Contact Detail -
Section 0= =
Lorem ipsum dolor sit am... ] H oDl -
ome ontact Detail X 212 v -456
Name
W 853 H 892 o
Avatar
[ 2 o
Top bar
[ 40
Home
Contacts
Contact list & Contact item ) Layer
2
: . i v
Contact item i i L O Pass through 100% @®
i ] Name
Contact item : @ Same } @ Name
| | . , Fill n+
Contacts | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
| Name | i adipiscing bibendum. ESESES 100% © —
Top bar : } 4
| | . .
+» Contact item Y Stroke o+
Alternate | ooo000 10% ® -
Defautt Inside =1 .ee
Selection colors
Il ooo000 100%
EEEEEE 100%
D9DOD9 100%
See all 7 colors
m; | Export +
853 x892
|8- B 0. Oy - T 3% M O Drafts / Contacts App v J Share P > 70% v
j:t Frame F Design Prototype Inspect
o El Section @S
. Back d
/ Slice s ackgroun
FSFSF5 100% ®
Default
H Contact Detail Local styles +
Lorem ipsum dolor sit amet co... Text styles
Name Ag Headline - 18/Auto
Avatar Contacts
Export +
Top bar + Contact item
5 | %
| | i
H# Home | | %
| |
| Name | Name
Contact list | @ | 4 Name
| |
. | | Lorem ipsum dolor sit amet consectetur. Urna
Contact item | | Name non suspendisse aliquam pharetra ligula
} Name } y adipiscing bibendum.
Contact item | |
| |
Contacts b
Top bar
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate
FSFSF5 100% ®
Default
1 Contact Detail Local styles +
Description Text styles
Name Ag Headline - 18/Auto
Avater Contacts
Export +
Top bar + Contact item
5 | 'y
| | g
H# Home | | —
| |
| Name | Name
Contact list | @ | 4 Name
| |
. | | Description
Contact item | |
| | Name
| Name ‘ ;)
Contact item | |
| |
Contacts e
Top bar


Running a plugin

hotspotType: Right Click

screenElements:
Context Menu
Context Menu

pageType: Application Application Application Application Application Application Application

screenKeywords:
§3 M V > H" D M E M T gg @ D m 020 D & J Share & > 70% v
Layers Assets Page 1 Design Prototype Inspect
% Contact item = F = 7 H# I
Alternate
X 155 Y 329
Default
l w H o
1 Contact Detail H
b 0°
T Description i
Name Constraints
I o PRGOS QU :
Avatar 1
Lorem Ipsum X = Left
Top bar # Contact item -t
i | I Top
| | g
H# Home | | —_——
} Name } 2 Sentences Na:me (O Fix position when scrolling
Contact list | y | !
! I :
Contact item | | M Layer
I Q Name I [ 81x18]
Contact item | I O Pass through 100% ®©
| |
Contacts b
Generate the perfect amount Text .e
Top bar of text to fit the layer’s frame .
Inter
/- Auto-generate
Regular 15
A Auto |A| 0%
Settings ) o =0
- = — -
= B = T -+ 4 b
Fill o +
Il ooo000 100% ® -
Stroke +
Effects 0
|8- BB oY [0 W T 55 M O 0 % © @ J) [share » > 70% v
Layers Assets Page 1 Design Prototype Inspect
% Contact item = F = 7 H# I
Alternate
X 155 Y 329
Default
l w H S
1 Contact Detail H
b 0°
T Description . ® !
Name Constraints
Avater Contacts ]
. = Left
Top bar + Contact item Co ¥C I_
R it T e PN ) Py I Top
! ! v Paste here
H# Home | | -
. } Name } ~ Name Na:m Paste to replace Eo 32l position when scrolling
Contact list | | P h @ /P
| : | H opy/Paste as >
Contact item | | N L
ame
. } Q Name } v Sllant Select layer 4
Contact item | | ) ss through 100% ®©
| | Bring to front ]
S |
Contacts Send to back [
Top bar h
Group selection $G6
Frame selection X #G
r 15
Flatten #E
Outline stroke ©%0 9 |A| 0%
Use as mask #M o =0
Add auto layout A = T+
Create component N #8K
Plugins 4 .
¢ oo+
Lorem Ipsum Widgets >
pO000 100% (O
Run last plugin X#8P Show/Hide o4 ¥H
Lock/Unlock 0 38L +
Find more plugins...
Flip horizontal H 0
Flip vertical oV
|g o O 2 T & & O 0 ¢ © @ ) [shae| » > 0%~
Layers Assets Page 1 Design Prototype Inspect
% Contact item = F = 7 H# I
Alternate
X 155 Y 329
Default
l w H S
1 Contact Detail H
b 0°
T Description . ® !
Name Constraints
Avater Contacts ]
. — Left
Top bar + Contact item Co ¥C I_
R it T e PN ) Py I Top
! ! v Paste here
H# Home | | -
. } Name } ~ Name Na:m Paste to replace Eo 32l position when scrolling
Contact list | | P h @ /P
| : | H opy/Paste as >
Contact item | | N L
ame
. } Q Name } v Sllant Select layer 4
Contact item | | ) ss through 100% ®©
| | Bring to front ]
S |
Contacts Send to back [
Top bar h
Group selection $G6
Frame selection X #G
r 15
Flatten #E
Outline stroke ©%0 9 |A| 0%
Use as mask #M o =0
Add auto layout A = T+
Create component N #8K
Plugins »> .e
¢ oo+
Widgets >
pO000 100% (O
Show/Hide @ 8H
Lock/Unlock 0 38L +
Flip horizontal H 0
Flip vertical oV
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item
Background
Alternate
FSFSF5 100% ®
Default
1 Contact Detail Local styles +
Lorem ipsum dolor sit amet co... Text styles
Name Ag Headline - 18/Auto
Avater Contacts
Export +
Top bar + Contact item
5 | 'y
| | g
H# Home | | —
| |
| Name | Name
Contact list | @ | 4 Name
| |
. | | Lorem ipsum dolor sit amet consectetur. Urna
Contact item | | Name non suspendisse aliquam pharetra ligula
} Name } y adipiscing bibendum.
Contact item | |
| |
Contacts e
Top bar
|- o O- % T & & D B % © & » R 2 b ooxe
Layers Assets Page 1 Design Prototype Inspect
% Contact item = F = 7 H# I
Alternate
X 20 Y 329
Default
: W 350 H S
1 Contact Detail H
b 0°
T Lorem ipsum dolor sit amet co... i
Name Constraints
Avater Contacts L
Top bar + Contact item -_
(=TT TTTTTT T T T TToTToTToTToA y | I Top
| I ’
H# Home | | ———
I I ; . . .
| Name | Name [ (O Fix position when scrolling
Contact list | @ | 4 Na:me
! ! m; - _t 0
| | Lorem ipsum dolor sit amet consectetur. Urna.
Contact item -~ non suspendisse aliquam pharetra ligula.
} } Name raver
‘ | Name | y 4 adipiscing bibendum. =
Contact item | | 35054 O Pass through 100% @
I I
Contacts e
Text o
Top bar
Inter
Regular 15
A Auto |A| 0%
T o o =0
- = — -
= B = T -+ 4 b
Fill o +
Il ooo000 100% ® -
Stroke +
Effects 0
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate
FSFSF5 100% ®
Default
1 Contact Detail Local styles +
Description Text styles
Name Ag Headline - 18/Auto
Avater Contacts
Export +
Top bar + Contact item
5 | 'y
| | g
H# Home | | —
| |
| Name | Name
Contact list | @ | 4 Name
| |
. | | Description
Contact item | |
| | Name
| Name ‘ ;)
Contact item | |
| |
Contacts e
Top bar
|§3 M V > H" D M E M T gg @ D m 020 D & J Share & > 70% v
Layers Assets Page 1 Design Prototype Inspect
% Contact item = F = 7 H# I
Alternate
X 155 Y 329
Default
l w H o
1 Contact Detail H
b 0°
T Description i
Name Constraints
I o PRGOS QU :
Avatar 1
Lorem Ipsum X = Left
Top bar # Contact item -t
i | I Top
| | g
H# Home | | —_——
} Name } 5 Sentences Na:me (O Fix position when scrolling
Contact list | y | !
! I :
Contact item | | M Layer
} Q Name } [ 81x18]
Contact item | I O Pass through 100% ®©
| |
Contacts b
Generate the perfect amount Text .e
Top bar of text to fit the layer’s frame .
Inter
/- Auto-generate
Regular 15
A Auto |A| 0%
Settings ) o =0
- = — -
= B = T -+ 4 b
Fill o +
Il ooo000 100% ® -
Stroke +
Effects 0


Inserting a shape

screenElements: Drawer Toolbar

screenElements: Select Icon

screenElements:
Toolbar
Editable Text
Select
Icon
Select
Drawer
Toolbar
Editable Text
Color Picker

screenPatterns:
Add & Create
Add & Create
Edit
Edit

pageType: Application Application Application Application Application Application Application Application Application Application

screenKeywords:
8 O A& O Drafts / Untitled v o m P O — %~ +
g o
A8l
et ﬂ.‘-ﬂ.‘; ou!
cAlTISs 47%
Lg%
SRS
[}
~ 4
- o
User goal or problem /
What i the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
>k [ f 2 o . T =]
~ A | A~ t A A~ " " ﬁ A~ 8
. —
B \Ir s ™ G
|8 O A& O Drafts / Untitled v o m P O — %~ +
]
K
e I':’°.‘-7L‘;‘IS’!‘
cAlTISs 47%
Lg%
SRS
[}
- /
- A
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this hegkipped or solved
elsewhl1 |
A | Py Y T 4
A | O8O0 @
L\ | |
P> f <) T . I:II |
A ~ | ~ t 4 ~ . . ﬁ ~ 8
. —
© \Ir s ™ Q)
|0 i 2 —
g O A O Drafts / Untitled o m e D 8% v+
( ’
17’0‘61‘41'1,:‘
<A 700!
’-‘-750"! (2GS
SRS
[}
-~ /
- o
User goal or problem /
What i the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
e — P o =
I‘D M yoo=Y B % 1% = — v Small v
wo
e Quotes and sentiment £
- How do they feel in this moment?
. . OO
Drag one of these stickers or
write a quote...
°
@::ponunily
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
| | . -
A~ A A t O A . | . ﬁ T A 8
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
o
17’0‘61“-'{'11‘
ASUSS .'_’7,"0'
.L,'l70"! Vil
SRS
[}
-~ /
- o
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@:,mmy vV OO O
What are some things
could improve this mol 8
Could this be skipped CO E EI
elsewhere?
0o o AN 00000000
A 2 - =1
A~ 2 A t O A . . ﬁ T A 8
|8 O A& O Drafts / Untitled v ° m P O — %~ +
]
s
<Al ICs 7L00!
Lg%
SRS
[}
- V4
- o
User goal or problem /
What i the user trying to
accomplish? What is the
problem to be solved?
/4
User action
What actions are they currently
taking? How are they doing it?
e — P o =
(g~ I B 5 @2 = = v Large v
wo
e Quotes and sentiment £
- How do they feel in this moment?
[ [J ‘ @ .0 '
Drag one of these stickers or
write a quote...
°
@::ponunily
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
A | - 2 - =1
A~ A A t O A . . ﬁ T A 8
|8 O A& O Drafts / Untitled v o m P O — %~ +
i
,;/.‘c"~f\',’,‘
A
Cilouio%
SR%
]
< ’
_ N
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
Y/
User action
What actions are they currently
taking? How are they doing it?
OD v v o= v B 5 & = v Small
Medium vo
o v O
° u ° Extra large
Huge
[ J
16
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
A — e . =
A A A t U. A L] T L] ﬁ A 8
O \ & ™ . - (2
|8 O A& O Drafts / Untitled v o m P O — %~ +
]
K
e ':’°.‘-7L‘;5’!"
cAlISs 47%
S
SRTEE
[}
~ 4
- A

User goal or problem /

What i the user trying to

accomplish? What is the

problem to be solved?

74

User action

What actions are they currently

taking? How are they doing it?

What information are they

seeking?

Quotes and sentiment £

How do they feel in this moment?

Drag one of these stickers or
write a quote...
@::portunity

What are some things that

could improve this moment?

Could this be skipped or solved

elsewhere?

O H<> A 900000000
‘ f 5> (5 . (=]
~ A | ~ ‘ 4 ~ . | . ﬁ ~ 8 l |
. —
9 \Ir s ™ G
|0 i 2 —
g O A O Drafts / Untitled o m e D 8% v+
( ’
17’0‘61‘41'1,:‘
<A 700!
’-‘-750"! (2GS
SRS
[}
-~ /
- o
User goal or problem /
What i the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
e — P o =
k‘D M yoo=Y B % 1% = — v Small v
wo
e Quotes and sentiment £
- How do they feel in this moment?
. . OO
Drag one of these stickers or
write a quote...
°
@::ponunily
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
| | . -
A~ A A t O A . | . ﬁ T A 8
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
o
S
<A 7L00!
S0
SRS
[}
< V4
- o
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
; ) 7
@Fil Q Transparent (O Nofil
User action
. . ‘ . . . . What actions are they currently
taking? How are they doing it?
Sl 4 = B S P2 = = v Small v
e Quotes and sentiment £
- How do they feel in this moment?
. . OO
Drag one of these stickers or
write a quote...
°
@::ponunily
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
i A X T
> < . o
A A A il A L] [] A
|8 O A& O Drafts / Untitled v ° m P O — %~ +
]
R
<Al ICs 7L00!
Lg%
SRS
[}
- V4
- o
User goal or problem /
What i the user trying to
accomplish? What is the
problem to be solved?
/4
User action
What actions are they currently
taking? How are they doing it?
e — P o =
(g~ I B 5 @2 = = v Small v
wo
e Quotes and sentiment £
- How do they feel in this moment?
. . OO
Drag one of these stickers or
write a quote...
°
@::ponunily
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
A | - 2 - =1
A~ A A t O A . . ﬁ T A 8


Applying effects

screenElements:
Popover
Editable Text

screenPatterns:
Add & Create
Add & Create

pageType: Application Application Application Application

screenKeywords:
By B o [y Wy T 34 @ O 0 °§° O o J Share & > 96% v
Layers Assets Page 1 ; Design Prototype Inspect
Home
# i Background
Ellipse 1 !
= i : FSFSF5 100% ®
Rectangle 1
Local styles +
Export +
60 x 60
|g o O 2 T & & O g ¢ © " J) [shared 2 > 96% v
Layers Assets Page 1 ; Design Prototype Inspect
H Home = + = T + L
R Ellipse 1
i X 20 Y 244
Rectangle 1
: w60 H 60 3
I Lo
Constraints
1
— Left
I I Top
60 x 60 (O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o +
[ Image 100% ® -
Stroke +
Effects 2+
Drop shadow o X H Drop shadow @ =
X 0 B 2 Export +
Y O S 2
| oooooo  12%
(O show behind transparent areas
|g o O 2 T & & O g ¢ © " J) [shared 2 > 96% v
Layers Assets Page 1 ; Design Prototype Inspect
H Home = + = T + L
R Ellipse 1
i X 20 Y 244
Rectangle 1
: w60 H 60 3
i Lo
Constraints
: 1
— Left
I I Top
60 x 60 (O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o +
[ Image 100% ® -
Stroke +
Effects 2+
Drop shadow o X H Drop shadow @ =
X 0 B 4 Export +
Y 4 S 0
| ooo000 25%
(O show behind transparent areas
|g o O 2 T & & O 0 ¢ © " J) [shael > > 9e% v
Layers Assets Page 1 ; Design Prototype Inspect
H Home = + = T + L
O Ellipse 1 :
i X 20 Y 244
Rectangle 1

‘ w60 H 60 9

H v

I bo0°

Constraints

i 1
— Left

I I Top
60 x 60 (O Fix position when scrolling

Layer
O Pass through 100% ®©
Fill o +
[ Image 100% ® -
Stroke +
Effects 2+
-:&:1:- Drop shadow ® —
Export +


Browse a template category

screenElements:
Grid List
Thumbnail

screenElements:
Select
Grid List
Thumbnail
Button

pagePatterns:
Templates Page
Header Section
Templates Page
Templates Page
Templates Page

screenKeywords:
’ Products v Enterprise v Pricing Community v Company v F English v Login Get started
@
Explore templates 4
Use Cases Roles
- Figma favorites Design
Figmatemplq ..... >
Brainstorming Engineering
Discover 300+ templates made by our team to Diagramming Marketing
or shape it into something new. Use the me
. . . L. Team meetings Product management
scrolling to find inspiration from some
Research and design Strategy
Strategic planning Operations
Figma favorites
Search through some of our curated and most popular templates.
|’ Products v Enterprise v Pricing Community v Company v F English v Login Get started
@
Explore templates ¥
Fi t lat ]
Discover 300+ templates made by our team to help you get an idea off the ground
or shape it into something new. Use the menu above to get started, or keep
scrolling to find inspiration from some of our favorite categories.
Figma favorites
Search through some of our curated and most popular templates.
|W R
< Templates home Explore templates ¥
Fi f it
Search through some of our curated and most popular
templates.
|< Templates home Explore templates ¥
[ |
(I DooP88 gog
OOO|E== 1000
[ [
Wireframe Kits Brainstorming Product requirements Flow chart template
templat ment templat
Speed up your design emplate docume emplate Organize details in a way that
workflow with our component Discover your greatest ideas Log data, deliverables, and makes sense with this flow
based wireframe kit. yet in a collaborative dependencies in a project chart diagram.
brainstorming session. requirements doc.
%2: — — — '\
Type = — — ¢
S| ) I | —
Customer journey map Instagram template Product development Meeting notes
template Impress your followers with roadmap template template
Sketch out your UX and beautifully designed Go from project proposal to Get the most value out of any
discover new channels for Instagram posts ourchase readv in no time. meeting with this shareable
|< Templates home Explore templates ¥ Get started
WOrK breakaown.
Explore other categories
Strategic planning templates Brainstorming templates Diagramming templates
Research and design templates Meeting templates


Subscribing to the report

pagePatterns:
Features Page
CTA Section

screenElements:
Text Field
Select
Checkbox
Button

screenElements: Select Checkbox

screenElements:
Text Field
Select
Checkbox
Button
Button
Select
Checkbox
Text Field
Link

screenPatterns:
Follow & Subscribe
Follow & Subscribe
Acknowledgement & Success

pagePatterns:
Misc
Misc
Features Page
CTA Section

pageType: Marketing Marketing Marketing Marketing Marketing Marketing

screenKeywords:
Get the full report
Complete this form to download the report
O I would like to sign-up to receive promotional emails
about Figma events, product updates, and news.
By clicking “Submit” you agree to our TOS and Privacy Policy.
|Get the full report
Complete this form to download the report
Work email address
Job title
Company size v
O I would like to sign-up to receive promotional emails
about Figma events, product updates, and news.
Get the report
By clicking “Submit” you agree to our TOS and Privacy Policy.
|Design Design process Prototyping
Learn more Learn more Learn more
Try Figma for free
|Get the full report
Complete this form to download the report
jsmith.mobbin@gmail.com
11-50 \'4
I would like to sign-up to receive promotional emails
about Figma events, product updates, and news.
Get the report
By clicking “Submit” you agree to our TOS and Privacy Policy.
|Get the full report
Complete this form to download the report
jsmith.mobbin@gmail.com
O I would like to sign-up to receive promotional emails
about Figma events, product updates, and news.
Get the report
By clicking “Submit” you agree to our TOS and Privacy Policy.
|Thank you! Please click here to download
the report.


Favoriting a file

screenElements:
Side Navigation
Tab

screenElements:
Icon
Icon
Side Navigation
Tab

screenPatterns:
Favorite & Pin
Favorite & Pin
Home

screenKeywords:
John P 2N

8 jsmith.mobbin@gmail.com e Q @) Explore Community jal (\il) v
(® Recents Drafts Deleted
[ Drafts

New design file + New FigJam file + [ Import file

@ Design and prototype Whiteboard and diagram Bring in files from other tools
Ready to go beyond this free
plan? Upgrade for premium
features.
Explore FigJam templates See all X
. b= DETY Team ' B .f —
Favorite files Dlagram — sync meeting - - ] !
, _ basics in agenda E oo L o S
Hover over any file and click the star to Fi J m = = '
add it here g a E—— o -
B b
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last modified v oo |=
~+  Create new team
L 2 ‘.‘ B2 o i -
e oA = i} .
Contacts ‘ " S : = i =1 B
<§<> amd O -
ko9 B W
. ; ey ﬁ
o . - i ]
Contacts App o o e FigJam Basics Wireframing in Figma
Edited 3 minutes ago Edited 20 hours ago Edited 20 hours ago

. Download desktop app X G
|John P 2N
8 jsmith.mobbin@gmail.com e Q @) Explore Community jal (\il) v
(® Recents Drafts Deleted
[ Drafts
New design file + New FigJam file + [ Import file
@ Design and prototype Whiteboard and diagram Bring in files from other tools
Ready to go beyond this free
plan? Upgrade for premium
features.
Explore FigJam templates See all X
- ) (— -
: —— Daily Team ' BT 1 .& —
Favorite files Dlagram — sync meeting - - ] !
basics in agenda = = = oz e T
Contacts App FigJam = g [
B 0
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last modified v g =
~+  Create new team fes ast moditie 28 =
e t“‘ =) - il -
e oA -= : ==
Contacts ‘ " S : = i =1 B
.- e = - oy OO - . =
® - » - e o 0 . y -
gy em &
ko9 W W
- ‘7 o . ﬁ
fa . i ]
Contacts App o o * FigJam Basics Wireframing in Figma
Edited 3 minutes ago Edited 20 hours ago Edited 20 hours ago
. Download desktop app X G
|John P 2N

8 jsmith.mobbin@gmail.com e Q @) Explore Community jal (\il) v
(® Recents Drafts Deleted
[ Drafts

New design file + New FigJam file + [ Import file

@ Design and prototype Whiteboard and diagram Bring in files from other tools
Ready to go beyond this free
plan? Upgrade for premium
features.
Explore FigJam templates See all X
. b= DETY Team ' B .f —
Favorite files Dlagram — sync meeting - - ] !
, _ basics in agenda E oo L o S
Hover over any file and click the star to Fi J m = = '
add it here g a E—— o -
B b
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last modified v oo |=
~+  Create new team
L 2 ‘.‘ =) - il -
e oA = i} .
Contacts ‘ " S : = i =1 B
<§<> amd O -
ko9 B W
. ; ey ﬁ
o . - i ]
Contacts App o o FigJam Basics Wireframing in Figma
Edited 5 minutes ago Edited 20 hours ago Edited 20 hours ago

. Download desktop app X G


Copying share link

actions:
Sharing
Copying & Duplicating

screenPatterns:
Acknowledgement & Success
Acknowledgement & Success

screenKeywords:
Congratulations!
Your file will soon be available for everyone in the Community
to duplicate, remix, and share. Thanks for your contribution.
You rock.
Help people discover your file:
¢ ¥ R
Review our
|Congratulations!
Your file will soon be available for everyone in the Community
to duplicate, remix, and share. Thanks for your contribution.
You rock.
Ie discover your file:
¢ ¥ R
Review our


Zooming on canvas

screenKeywords:
By B v [y W~ T 34 @ D) Drafts / Contacts App v J Share & > 100% v
Layers Assets Page 1 Design Prototype Inspect
+» Contact item
Background
Alternate
FSFSF5 100% ®
Default
1 Contact Detail Local styles +
Lorem ipsum dolor sit amet co... Contacts Text styles
Name f Ag Headline - 18/Auto
K
e v
Avatar | 3 il 4
Top bar : ‘ Export *
Name
# Home : : Name
I |
Contact list | Lorem ipsum dolor sit amet «
| non suspendisse aliqguam
Contact item NS .
: ; Name adipiscing biber
Contact item | '
|
Contacts e |
Top bar
|B B gy [y WY T 388 @ I®) Drafts / Contacts App v J Share & > 70% «
Layers Assets Page 1 » o
«» Contact item |
Zoom in B+
Alternate
Zoom out 8-
Default Zoom to fit 1
1 Contact Detail Zoom to 50%
Zoom to 100% ¥0
Lorem ipsum dolor sit amet co...
Zoom to 200%
Name A
Pixel preview >
Avatar
Contacts  + Pixel grid o
Top bar & Contact item v Snap to pixel grid 38’
[ |
+ Home ! ! i v Layout grids °6
! ! Rulers @R
Contact list ! @ Same ! @ Name Name
: } Outlines >
Contact it | | Lorem ipsum dolor sit amet consectetur. Urna . -
ontactitem | | Nee non suspendisse aliquam pharetra ligula v Multiplayer cursors s\
! ! dipiscing bibendum.
Contact item : Wi I s adipiscing bibendum v Comments @cC
| |
Contacts ‘- Y
Top bar
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item
Background
Alternate
FSFSF5 100% ®
Default
1 Contact Detail Local styles +
Lorem ipsum dolor sit amet co... Text styles
Name Ag Headline - 18/Auto
Avater Contacts
Export +
Top bar + Contact item
5 | N
| | G
+ Home | | .
| |
| Name | Name
Contact list | @ | 4 Name
| |
. | | Lorem ipsum dolor sit amet consectetur. Urna
Contact item | | Name non suspendisse aliquam pharetra ligula
} Name } y adipiscing bibendum.
Contact item | |
| |
Contacts e
Top bar
Zoom to fit 0
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate
FSFSF5 100% ®
Default
1 Contact Detail Local styles +
Description Text styles
Name Ag Headline - 18/Auto
Avater Contacts
Export +
Top bar + Contact item
5 | 'y
| | g
H# Home | | —
| |
| Name | Name
Contact list | @ | 4 Name
| |
. | | Description
Contact item | |
| | Name
| Name ‘ ;)
Contact item | |
| |
Contacts e
Top bar
|B B gy [y WY T 388 @ I®) Drafts / Contacts App v J Share & > 100% «
Layers Assets Page 1 » 100%
+» Contact item ,
Zoom in B+
Alternate
Zoom out 8-
Default Zoom to fit 1
1 Contact Detail Zoom to 50%
v Zoom to 100% ¥0
Lorem ipsum dolor sit amet co... Contacts
Zoom to 200%
Name £ A
A ] .
Avatar =" """ """ """ "N ‘ ‘!ﬁ Pixel preview >
| s i v Pixel grid i
| Z
Top bar | N v Snap to pixel grid 38’
ame
H# Home : v Name v Layout grids ©G
. | Rulers @R
Contact list | Lorem ipsum dolor sit amet « SuilliEs ,
. | non suspendisse aliqguam
Contact item | Name adipiscing biber v Multiplayer cursors 088\
i
Contact item : p v Comments @ C
|
Contacts e |
Top bar


Marking comments as unread

screenElements:
Badge
Status Dot

screenElements:
Badge
Status Dot
Popover
Pagination
Icon
Avatar
Text Field
Dropdown Menu

screenPatterns:
Comments
Action Option

screenKeywords:
B Vv HY Oy W T 34 @ |9 Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Q_ Search @ H
Home

d Comments are now in our app X
= Frame1 Try the Figma mobile app to stay on

top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
2 V-S7N VN PN —
- O 8 X SR
ol - | [
© B |-
o John &
Check out this home screen! ' Qe
e
John Get the app
. 0 = @
@ Name #1-Page 1
John 3 minutes ago
Check out this home screen! '~ John
|B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 hiome Q_ Search @ H
Home o ®

Comments are now in our app X
= Frame1 Try the Figma mobile app to stay on
top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
2 V-S7N VN PN —
- O 8 X SR
eal - | . =
© B |-
o John &
Check out this home screen! ' Qe
e
John Get the app
@ Name #1-Page 1
John Just now
Check out this home screen! '~ John
|B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Q_ Search @ H
Home

d Comments are now in our app X
= Frame1 Try the Figma mobile app to stay on

top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
2 V-S7N VN PN —
- O 8 X SR
ol - | [
© B |-
o John )
Check out this home screen! ' Qe
e
John Get the app
: Name #1-Page 1
4 Mark as unread
John 3 mi
Check out ECRAIE
Delete thread


Choosing default skin tone

screenElements:
Popover
Icon
Search Bar
Tab

screenElements:
Popover
Icon
Search Bar
Tab
Select
Icon

screenKeywords:
gy By Oy Oy W T & @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 hiome Q_ Search @ H
= Frame1 Try the Figma mobile app to stay on

top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
Contacts
Check out this home screen! e | =
(# =
© @ o
® -
LB P OF
D Give feedback, ask a question, or
Q Search just leave a note of appreciation.
@ Name Click anywhere in the file to leave
y Frequently used a comment.
06000 EGEREMW
Smileys & People
OOV LOLRGO
OO0 VBLVWOG
WOOOLOERO
OOoVoOoLVLVLEOEES®
©ROGOeH
R Y Lo e L AED LD LA LA
C) ©)
|B Vv HY Oy W T 34 @ I®) Drafts / Contacts App v~ J Share & > 96% v
Layers Assets Page 1 hiome Q_ Search @ H
= Frame1 Try the Figma mobile app to stay on

top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
Contacts =
Check out this home screen! e | =
(# =
© @ o
® -
LB P OF
D Give feedback, ask a question, or
Q Search just leave a note of appreciation.
Name Click anywhere in the file to leave
4 Frequently used a comment.
Smileys & People
QLYY R O
06T e
( Light
® o 6 e 6 © Medium-Light
6 6 6 6 6 éMedium
O ge @ Medium-Dark
N
o M @ @ e Dk
) )
|gy By Oy Oy W T & @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 hiome Q_ Search @ H
= Frame1 Try the Figma mobile app to stay on

top of activity like comments, replies,
Contacts and @mentions when you're on the go.
Rectangle 1
Contacts
Check out this home screen! e | =
(# =
© @ o
® -
LB P OF
D Give feedback, ask a question, or
Q Search just leave a note of appreciation.
@ Name Click anywhere in the file to leave
y Frequently used a comment.
t0o00o0OEM
Smileys & People
OOV LOLRGO
OO0 VBLVWOG
WOOOLOERO
OOoVoOoLVLVLEOEES®
©ROGOeH
R Y Lo e L AED LD LA LA
& ()


Contact

screenElements: Card Thumbnail Button

pagePatterns:
Landing Page
Footer Section
Contact Page
Contact Page

screenKeywords:
Fi g ma Use Cases Explore Resources Compare
¥ Twitter Ul design Design features Blog Sketch
O YouTube UX design Prototyping features Best practices Adobe XD
Instagram Graphic design Design systems features Support Invision Studio
Kl Focebook Wireframing Collaboration features Developers Framer
Diagramming Design process Learn design Design on Windows
Brainstorming Figdam Downloads Miro
Templates Pricing What's new
Remote design Enterprise Releases
Agencies Organization Careers
Figma for education Professional About us
Customers Agency partners
Security Privacy
Integrations Modern Slavery Statement
Contact Status
|’ Products v Enterprise v Pricing Community v Company v F English v Log in
l
— |

Talk to a member of our Get product or
account support

sales team

We can give you a demo, help you choose the We are here to help you

right plan for your team, or share best with any of your needs.

practices for getting the most out of Figma.
|Talk to a member of our Get product or
account support

sales team PP

We can give you a demo, help you choose the We are here to help you

right plan for your team, or share best with any of your needs.

practices for getting the most out of Figma.


Show hotspot

screenElements:
Top Navigation Bar
Avatar
Button
Pagination
Keyboard Key

screenKeywords:
¢ 100 O Contacts App ‘ - & optons v 7
il Contacts
' ' Name
[ ' Name
<G
> < Restart
|il Contacts
| ' Name |
|¢ 100 O Contacts App ‘ - & optons v 7
Name
Lorem ipsum dolor sit amet consectetur. Urna |
non suspendisse aliquam pharetra ligula
! adipiscing bibendum.
< < Restart


Searching plugins

screenElements: Thumbnail Button Icon Link

screenElements:
Context Menu
Thumbnail
Button
Icon
Link
Search Bar
Popover
Search Bar
Stacked List
Thumbnail
Toolbar

screenPatterns:
Action Option
Search
Search

screenKeywords:
8- BB oY [0 W T 55 M O 0 % © @ J) [share » > 70% v
Layers Assets Page 1 Design Prototype Inspect
% Contact item = F = 7 H# I
Alternate
X 155 Y 329
Default
l w H S
1 Contact Detail H
b 0°
T Description . ® !
Name Constraints
Avater Contacts ]
. = Left
Top bar + Contact item Co ¥C I_
R it T e PN ) Py I Top
! ! v Paste here
H# Home | | -
. } Name } ~ Name Na:m Paste to replace Eo 32l position when scrolling
Contact list | | P h @ /P
| : | H opy/Paste as >
Contact item | | N L
ame
. } Q Name } v Sllant Select layer 4
Contact item | | ) ss through 100% ®©
| | Bring to front ]
S |
Contacts Send to back [
Top bar h
Group selection $G6
Frame selection X #G
r 15
Flatten #E
Outline stroke ©%0 9 |A| 0%
Use as mask #M o =0
Add auto layout A = T+
Create component N #8K
Plugins 4 .
¢ oo+
Lorem Ipsum Widgets >
pO000 100% (O
Run last plugin X#8P Show/Hide o4 ¥H
Lock/Unlock 0 38L +
Find more plugins...
Flip horizontal H 0
Flip vertical oV
|O+ X
B v g O % T B8O O n ¢ 0 @ » Sl » > e
Layers Assets Page 1 < Plugin E\] Design Prototype Inspect
+» Contact item P — = F = 7 H# I
Alternate o . .
Lorem i dolor sit amet,
= consectetur adipiscing e, X 155 Y 329
Default sed do eiusmod tempor
s incididunt ut labore et dolore - N
magna aliqua. Turpis risus. ! w H U
# Contact Detail Pius more... ]
| L 0°
T Description i
Name Constraints
Lorem Ipsum :
Avatar 8 By Dave Williames - Used by 496k people ContaCtS 1 i Left
Top bar @ ( __
- | P e I I Top
|
H# Home | =
I Name N m (O Fix position when scrolling
Contact list | Generate ‘Lorem ipsum’ to fill you text layers with a: e
! dummy text. L
Contact item | M Layer
I Name 81x18
i | Select all the text layers you want to generate ‘Lorem
Contactitem I ipsum’ for then click ‘Generate’ — it will generate for O Pass through 100% @
4 hl I ly.
Contacts L each layer uniquely.
" . . Text o
Top bar If you find this plugin helpful, why not support me by
buying me a coffee at buymeacoffee.com/davew & Inter
Auto-generate Regular 15
‘Auto-generate’ will automatically fill the selected layers
with the perfectly amount of ‘Lorem ipsum’ to fit their A Auto [A] 0%
existing frame. i
2o < =00
Quick actions — ___ T Ly .
There's support for Figma’s Quick Actions — quickly ___ =
@ See more details in Community
Fill o +
Il ooo000 100% ® -
Stroke +
Effects 0
|g v o O % T BH O O n ¢ 0 @ D > > e
Layers Assets Page 1 Components  Plugins Widgets E\] Design Prototype Inspect
% Contact item = F = 7 H# I
Q_ Lorem Ipsum X
Alternate
X 155 Y 329
Default From Community _
l w H S
H Contact Detail Q LORE (for Lorem Ipsum)
. . . | b 0°
T Description Save time adding Lorem Ipsum to text blocks i... :
By Robert Coyle - Used by 62.3k people
Name Constraints
Lorem Ipsum ;
Avatar Generate ‘Lorem ipsum’ to fill you text layers w... ContaCtS 1 — Left
Top bar o By Dave Williames - Used by 496k people ——
| | | I Top
H Home I Lérem Ipsum S
} Lérem Ipsum - generated faux Swedish for the... Name Na:me (O Fix position when scrolling
Contact list } By smisvnssn - Used by 36.9k people
Contact item | - L . h-t M Layer
| Ig‘ orem ipsum zh-tw Name 81x18
. I S ; ot B Hskas -
Contact item ‘ Lorem ipsum zh-tw FEMSEREP X EL RS A Lore... O Pass through 100% @
L By Louis Su - Used by 3.2k people
Contacts b
Lorem ipsum crypto Text I
Top bar e
P Generate sample cryptocurrency addresses. S...
Inter
By Chance Hudson - Used by 2.9k people
Regular 15
|i Lorem Ipsum Generator
Lorem Ipsum Generator, with two clicks gener... z Auto |A| 0%
By Adam Siekierski - Used by 23.4k people S
2o < =00
Q Lorem JPsum =B = T Ly
N — Bl — [
RIVIAT7EHTCERBAREI I —TFAELE..
By #ASE1&EE - Used by 2.3k people
Fill o +
Il ooo000 100% ® -
Stroke +
Effects 0
|B v Iy Oy W T Fea @ I®) Drafts / Contacts App v J Share & > 70% v
Layers Assets Page 1 Components  Plugins Widgets E\] Design Prototype Inspect
«» Contact item Back a
Q ackgroun
Alternate
FSFSF5 100% ®
Default Recents
. Local styles +
Contact Detail -
" (/) Material Theme Builder
Description Text styles
Name From Community et Ag Headline - 18/Auto
Avater Contacts
& Akar Icons by Iconduck
Top bar @ ( e Y Fxport *
P (_'_ 235 open source (MIT licensed) beautiful, han...
| . o
H Home | By Iconduck - Used by 3.4k people "
|
Name
| N
Contact list | (™ Quick Commands y Name
| . . .
Comtact it | Powerful extension for Quick Actions Bar. Kee... Description
ontact item
} By Tank - Used by 711 people @ Name
Contact item :
: u Add name and date
Contacts - | Add your name and date to make a more cont...
By Chien - Used by 136 people
Top bar
E WebP Generator
Export WebP files from Figma for Web or Andr...
By Felix and 1 others - Used by 706 people
E Coolicons Icon Library by Iconduck
412 CC BY 4.0 user interface icons, perfect for...
By Iconduck - Used by 1.2k people
2 Android /i0S Converter
Fast and easy convert layouts, texts and comp...


Inserting a frame

screenElements:
Accordion
Stacked List

screenElements:
Accordion
Stacked List
Icon

screenPatterns:
Canvas
Add & Create

screenKeywords:
g B o Oy W T &4 @ [®) ® © J Share & > 96% v
iPh 14 -1
Layers Assets Page 1 e Design Prototype Inspect

H iPhone14-1
Frame 0= e
X -195 Y -422
W 390 H 844 S
Lo0° o O
Clip content
Auto layout +
Layout grid +
Layer
O Pass through 100% ®©
Fill o+

FFFFFF 100% ® -

Stroke +
Effects +
Export +
|g BYREE 0y © T 33 @ O Drafts / Contacts App v~ J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect

Frame

v Phone
iPhone 14
iPhone 14 Pro
iPhone 14 Plus
iPhone 14 Pro Max
iPhone 13 Pro Max
iPhone 13 /13 Pro
iPhone 13 mini
iPhone SE
iPhone 8 Plus
iPhone 8
Android Small
Android Large
Tablet
Desktop
Presentation
Watch
Paper
Social media
Figma Community
Archive

o
|g B o Oy W T &4 @ [®) ® © J Share & > 96% v
Layers Assets Page 1 ome Design Prototype Inspect

1 Home
Frame 0= e
X -195 Y -422
W 390 H 844 o
Lo0° o O
Clip content
Auto layout +
Layout grid +
Layer
O Pass through 100% ®©
Fill o+

FFFFFF 100% ® —

Stroke +
Effects +
Export +
|g B o Oy W T &4 @ [®) ® © J Share & > 96% v
iPh 14 -1
Layers Assets Page 1 one Design Prototype Inspect
| iPhone 14 -1
Frame 0= e
X -195 Y -422
n
W 390 H 844 v
bo0° o o
Clip content
Auto layout +
Layout grid +
Layer
O Pass through 100% ®©
Fill o+
FFFFFF 100% ® —
Stroke +
Effects +
Export +
|By B o [y Wy T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
Background
FSFSF5 100% ®
Local styles +
Export +


Adding a widget

screenElements:
Stacked List
Thumbnail

screenElements:
Context Menu
Context Menu
Stacked List
Thumbnail

screenPatterns:
Action Option
Browse & Discover

pageType: Application Application Application Application Application Application Application Application

screenKeywords:
B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate
FSFSF5 100% ®
Default
1 Contact Detail Local styles +
Lorem ipsum dolor sit amet co... Text styles
Name Ag Headline - 18/Auto
Avatar
Contacts
5 - Export +
Top bar +» Contact item .
oottt T Tt T T T T T T T TN | ,
lit notes ! ! -f'ifz"
| |
| | N
ame
H Home : @ Same } @ Name
| |
Contact list | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
! Name ! adipiscing bibendum.
Contact item : } ”
| |
Contact item ‘- Y
Contacts
Top bar
Notes
Add a back button to go back to All
contacts
Edit
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate Paste here
FSFSF5 100% ®
Default
Show/Hide Ul 8\
H Contact Detail Show/Hide comments  ©*C Local styles +
Lorem ipsum dolor sit amet co... Cursor chat / Text styles
Name Quick actions... 8/ Ag Headline - 18/Auto
Plugins >
Avatar
Contacts :
Widgets 4 Export +
Top bar « Contact item s
[ | \
H Home : I ,v’-"‘"'
i ] Name
Contact list : Q Same I @ Name
| |
Contact item | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
! Name ! 5 adipiscing bibendum.
Contact item : I ”
| |
Contacts ‘- Y
Top bar
|B B o4 Oy - T 3 M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item Back a
ackgroun
Alternate Paste here
FSFSF5 100% ®
Default
Show/Hide Ul 8\
H Contact Detail Show/Hide comments  ©*C Local styles +
Lorem ipsum dolor sit amet co... Cursor chat / Text styles
Name Quick actions... 8/ Ag Headline - 18/Auto
Plugins >
Avatar
Contacts : , .
Widgets > Find more widgets... +
Top bar « Contact item s
5 | 4 .
H# Home : } ; ,; Select all widgets
i ] Name
Contact list : Q Same } @ Name
| |
Contact item | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
! Name ! 5 adipiscing bibendum.
Contact item : } ”
| |
Contacts ‘- Y
Top bar
|- o O- % T & & D » R 2 b ooxe
Layers Assets Page 1 Design Prototype Inspect
«» Contact item
Alternate
Default
X -654 Y 124
1 Contact Detail
w H C
Lorem ipsum dolor sit amet co...
b 0°
Name
Avatar
Contacts
Top bar <« Contact item il X £
P 7 lilnotes ‘ j
& lilnotes : I g
| |
H Home | @ Name | Add a back button to go back to All Name
: I contacts
Contact list | | Lorem ipsum dolor sit amet consectetur. Urna
| | non suspendisse aliquam pharetra ligula
| ! adipiscing bibendum.
Contact item : Wi I
| |
Contact item “-—— Y
Contacts
Top bar # il notes - Details
Notes
Add a back button to go back to All
contacts
Edit
|g PPy v Oy © T 33 @ [®) J Share & > 70% v
Layers Assets Page 1 Design Prototype Inspect
«» Contact item
Alternate
Default
X -654 Y 124
1 Contact Detail
w H C
Lorem ipsum dolor sit amet co...
b 0°
Name
Avatar
Contacts
Top bar +» Contact item .
oottt T Tt T T T T T T T TN | ,
& lilnotes : I fifzv
| | N
ame
H Home : @ Same I @ Name
| |
Contact list | | Lorem ipsum dolor sit amet consectetur. Urna
| | Name non suspendisse aliquam pharetra ligula
! Name ! 5 adipiscing bibendum.
Contact item : } ”
| |
Contact item ‘- Y
Contacts
Top bar # il notes - Details
Notes
Edit
|B v Ov O © TEE M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Components  Plugins ~ Widgets E\] Design Prototype Inspect
«» Contact item Back a
Q ackgroun
Alternate
FSFSF5 100% ®
Default Recents
1 Contact Detail Local styles +
No recently used widgets
Lorem ipsum dolor sit amet co... Text styles
Name Ag Headline - 18/Auto
Avatar From Community [ Contacts
5 - Export +
Top bar & A
I | ] '
H Home : -"J'i;'
| [rR—
Contact list : S— . @ Name Name
| il
Contact item | i Lorem ipsum dolor sit amet consectetur. Urna
| - = non suspendisse aliquam pharetra ligula
| e Q Name adipiscing bibendum.
Contact item :
|
Contacts “~  Specify - Sync Tokens and Assets
Top bar See your design tokens and assets connected to Spe...
By Specify and 4 others - Used by 132 people
j :
Device Frames
|B v Ov O © TEE M O Drafts / Contacts App v J Share P > 70% v
Layers Assets Page 1 Components  Plugins ~ Widgets E\] Design Prototype Inspect
«» Contact item Back a
Q ackgroun
Alternate
FSFSF5 100% ®
Default Recents
t Contact Detail \;H - Local styles +
Lorem ipsum dolor sit amet co... Text styles
Device Frames
Name Ag Headline - 18/Auto
A FigJam Widget to scribble quick interfaces on real ...
Avatar By Felix Tesche - Used by 17.3k people Contacts
5 - Export +
Top bar & A
I | ] '
| — N
ame
Contact list : T @ Name
Contact item | Lorem ipsum dolor sit amet consectetur. Urna
| non suspendisse aliquam pharetra ligula
| Q Name adipiscing bibendum.
Contact item :
| o
Contacts . litnotes
take notes
Top bar By Jordan Singer - Used by 85.7k people
—> Navigate
Navigate
|- o O- % T & & D » R 2 b ooxe
Layers Assets Page 1 Design Prototype Inspect
«» Contact item
Alternate
Default
X -654 Y 124
1 Contact Detail
w H C
Lorem ipsum dolor sit amet co...
b 0°
Name
Avatar
Contacts
Top bar « Contact item il X £
P 7 lilnotes ‘ j
& lilnotes : I g
| |
H Home : @ Name } Name
| |
Contact list | | Lorem ipsum dolor sit amet consectetur. Urna
| | non suspendisse aliquam pharetra ligula
| ! adipiscing bibendum.
Contact item : Wi }
| |
Contact item “-—— Y
Contacts
Top bar # il notes - Details
Notes
Edit


Type settings

screenElements: Popover Tab

screenElements:
Switch
Tab
Segmented Control

hotspotType: Slide

screenElements:
Switch
Tab
Segmented Control
Popover
Tab
Slider
Slider

screenPatterns: Edit Edit

screenKeywords:
g B o Oy W T &4 @ [®) Q & J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Contacts
Vector 1 L L
n
Line 1 " i ©
Ellipse 1 Contacts -7
Rectangle 1 Constraints
- — Left
® Lh
Type settings X (O Fix position when scrolling
The lazy dog Layer
does nhot jump. O Pass through 100% ®
Text o
Basics Details Variable Inter
Bold 36
Resizing < =0Ormn! T Auto [A] -3%
Alignment =l = = = z 0 o =0
Decoration - U & = = % N n
Paragraph spacing 0
Paragraph indent 0 Fill 2+
List style - == Il 000000 100% ® —
Case - AG ag Ag Ac
Stroke +
Effects 0
|g B o O % T % M O B % © & el 2 b e
Layers Assets Page 1 ; Design Prototype Inspect
H Home ’ = + = T + L
T Contacts
i X 20 Y 142
Vector 1 H
: w H o
Line 1 i
b 0°
Elipse T .“-M
Rectangle 1 153x 44 Constraints
1
= Left
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Text o
Inter
Weight: 650 36
A Auto |A| -3%
T o - =0
- = — -
= B T -+ 4 b
Fill o +
Il ooo000 100% ® -
Stroke +
Effects 0
|By B o [y Wy T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
Home

#* Background

John
FSFSF5 100% ®

Contacts
Vector 1 Local styles +
Contacts

Export +
Ellipse 1
Rectangle 1

Q John
4
|g B o O % T % M O & & el 2 b e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Contacts
X 28 Y 142
Vector 1
w H C
Line 1
b 0°
Contacts
Rectangle 1 Constraints
1
= Left
Q ! I P
Type settings X (O Fix position when scrolling
Layer
O Pass through 100% ®©
Text o
Basics Details Variable Inter
Bold 36
Letter case
A Auto |A| -3%
Case - AG ag Ag Ac -
2o < =00
Case-sensitive forms - Vv
== = T+ L n
Capital spacing - v
Fill o +
Numbers
Il 000000 100% ® -
Style - 17 17
Position A, A2 A2 Stroke +
Fractions - Vv
Effects
Slashed zero - Vv
|$ v v v j:t v l:‘ v E v T gg @ D ogo I J Share (,/,) > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Contacts
Vector 1 L L
n
Line 1 " ! ’
Ellipse 1 Contacts -7
Rectangle 1 Constraints
- — Left
» e
Type settings X O Fix position when scrolling
Layer
O Pass through 100% <®©
Text o
Basics Details Variable Inter
Bold 36
Resizing o =07rmn A Auto |A] -3%
Alignment =l = = = z 0 o =10
Decoration - U & = = % N n
Paragraph spacing 0
Paragraph indent 0 Fill 2+
List style - == Il 000000 100% ® —
Case - AG ag Ag Ac
Stroke +
Effects 0
|By B v [y W~ T 34 @ D) ogo & J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Contacts
Vector 1 L L
n
Line 1 " ! ’
Contacts -
Rectangle 1 Constraints
— Left
® o
Type settings X O Fix position when scrolling
o The quick Layer
brown O Pass through 100% <®©
» Fox jumps over
e 17 lazy dogs. Text :
Basics Details Variable Inter
Bold 36
Resizing o =07rmn A Auto |A] -3%
Alignment =l = = = z 0 o =10
Decoration - U & = = % N n
Paragraph spacing 0
Paragraph indent 0 Fill 2+
List style - == Il 000000 100% ® —
Case - AG ag Ag Ac
Stroke +
Effects 0
|- o O- % T & & D & @ el 2 b e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Contacts
X 28 Y 142
Vector 1
w H C
Line 1
b 0°
Contacts
Rectangle 1 Constraints
1
= Left
Q ! : P
Type settings X (O Fix position when scrolling
. Layer
The quick brown
fox IumEs over17 O Pass through 100% ®©
lazy dogs.
Text o
Basics Details Variable Inter
Bold 36
Resizin o = .
9 ol A Auto |A| -3%
Ali t S = = — -
ignmen To o =0
Decoration - U s = __ —
- v = | = = T % 4 n
Paragraph spacing 0
Paragraph indent 0 Fill . +
List style - == Il 000000 100% ® —
Case - AG ag Ag Ac
Stroke +
Effects 0
|g - B 0- O-R-T % ™ D & @ D B > > e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Contacts
X 28 Y 142
Vector 1
w H C
Line 1
b 0°
Contacts
Rectangle 1 Constraints
1
= Left
Q ! : P
Type settings X (O Fix position when scrolling
Layer
O Pass through 100% ®©
Text o
Basics Details Variable Inter
Bold 36
Weight 700
A Auto |A| -3%
° A
T o o =
Slant 0 = o
— = —= —
O E = = 1 =+ i n
Fill o +
Il 000000 100% ® -
Stroke +
Effects 0
|g PPy v Oy © T 33 @ [®) Q & J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Contacts
X 28 Y 142
Vector 1
w H C
Line 1
b 0°
Contacts
Rectangle 1 Constraints
1
= Left
T
% ! I *
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Text o
Inter
Bold 36
A Auto |A| -3%
T o - =0
- = — -
= B T -+ 4 b
Fill o +
Il ooo000 100% ® -
Stroke +
Effects 0
|- o O- % T & & D & @ D EE o b e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Contacts
X 28 Y 142
Vector 1
w H C
Line 1
b 0°
Contacts
Rectangle 1 Constraints
1
= Left
Q ! : P
Type settings X (O Fix position when scrolling
Layer
O Pass through 100% ®©
Text o
Basics Details Variable Inter
Weight: 650 36
Weight 650
A Auto |A| -3%
° L8
T o o =
Slant 0 = o
- = — -
O E = = 1 =+ i n
Fill o +
Il 000000 100% ® -
Stroke +
Effects 0


Spotlighting

screenElements: Popover Button

screenElements:
Progress Indicator
Banner
Popover
Button
Avatar

screenPatterns:
Loading
Other Action

screenKeywords:
By B o [y Wy T 34 @ I®) Drafts / Contacts App v~ J o (J Share & > 96% v
Layers Assets Page 1 Waiting for followers... Cancel Design Prototype Inspect
Home

#* Background

Frame 1
FSF5F5 100% @®
Contacts
Rectangle 1 Local styles +
Contacts .
Q Name
» Name
Y
|By B o [y Wy T 34 @ I®) Drafts / Contacts App v~ J :(J Share & > 96% v
Layers Assets Page 1 1 follower Stop Design Prototype Inspect
Home

#* Background

Frame 1
FSF5F5 100% @®
Contacts
Rectangle 1 Local styles +
Contacts .
Q Name
» Name
Y
|By B o [y Wy T 34 @ I®) Drafts / Contacts App v~ J (J Share & > 96% v
Layers Assets Page 1 John (you) Pesign  Prototype  Inspect
# Home Spotlight me Background
Frame 1
FSFSF5 100% ®
Contacts
Rectangle 1 Local styles +
Contacts .
Name
4
@ Name
Y
|By B o [y Wy T 34 @ I®) Drafts / Contacts App v~ J (J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
Home

#* Background

Frame 1
FSFSF5 100% ®
Contacts
Rectangle 1 Local styles +
Contacts .
Name
4
@ Name
Y


Inserting a text layer

screenElements:
Select
Text Field
Text Field
Editable Text
Toolbar

screenPatterns:
Edit
Add & Create
Add & Create
Edit
Add & Create

screenKeywords:
By B o [y Wy T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
Home
#* Background
Vector 1
FSFSF5 100% ®
Line 1
Ellipse 1 Local styles +
Rectangle 1
Export +
|$v > v j:tv Dv Ev T gg @ D ogo I J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Contacts
X 28 Y 142
Vector 1
w H o
Line 1
_
Ellipse 1
Rectangle 1 Constraints
1
= Left
@ I P
v |
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Thin ..
Extra Light
Light
v Regular
Medium
Semi Bold
Bold
Extra Bold
Black
Thin Italic 5
Extra Light Italic b —
Light Italic
Italic +
Medium ltalic
Semi Bold Italic [0}
|- o O- % T & & D & @ el 2 b e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Contacts
X 28 Y 142
Vector 1
w H C
Line 1
Lo
Ellipse 1
Rectangle 1 Constraints
1
= Left
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Text o
Inter
Bold 12
A Auto [A] 0%
T o - =0
- = — -
= B T -+ 4 b
Fill o +
Il ooo000 100% ® -
Stroke +
Effects 0
|g B o O % T % M O & & el 2 b e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Text
X 28 Y 142
Vector 1
w H C
Line 1
| -
Ellipse 1
Rectangle 1 Constraints
1
= Left
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Text o
Inter
Regular 12
A Auto [A] 0%
T o - =0
- = — -
=l = = T + s .ee
Fill o +
Il ooo000 100% ® -
Stroke +
Effects 0
|g PPy v Oy © T 33 @ [®) Q & J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Contacts
X 28 Y 142
Vector 1
w H C
Line 1
_
Ellipse 1
Rectangle 1 Constraints
1
= Left
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Text o
Inter
Regular 12
A Auto |A| 0%
T o - =0
- = — -
= B T -+ 4 b
Fill o +
Il ooo000 100% ® -
Stroke +
Effects 0
|g PPy v Oy © T 33 @ [®) Q & J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Contacts
X 28 Y 142
Vector 1
w H C
Line 1
_
Ellipse 1
Rectangle 1 Constraints
1
= Left
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Text o
Inter
Regular 12
A Auto [A] 0%
T o - =0
- = — -
= B T -+ 4 b
Fill o +
Il ooo000 100% ® -
Stroke +
Effects 0
|By Vv oY Oy WYY 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
Home
#* Background
Vector 1
FSFSF5 100% ®
Line 1
Ellipse 1 Local styles +
Rectangle 1
Export +
|g PPy v Oy © T 33 @ [®) Q & J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
T Contacts
X 28 Y 142
Vector 1
w H C
Line 1
b 0°
Contacts
Rectangle 1 Constraints
1
= Left
T
% ! I *
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Text o
Inter
Bold 36
A Auto |A| -3%
T o - =0
- = — -
= B T -+ 4 b
Fill o +
Il ooo000 100% ® -
Stroke +
Effects 0


Commenting on a plugin

screenElements:
Text Field
Avatar
Stacked List

screenPatterns:
Post Detail
Comments

screenElements: Dialog Illustration Button Avatar

screenElements:
Dialog
Illustration
Button
Avatar
Text Field
Avatar
Stacked List
Text Field

screenPatterns:
Confirmation
Post Detail
Comments
Comments
Comments

screenKeywords:
John
Here’s how you’ll look when using
the Figma Community.
Change your photo or name in your settings.
When leaving comments we ask that you...
Stay on topic Be respectful Read our guidelines
Cancel
|@ - Community Q Publish @ v
Material Theme Builder
. . Q 2.7k Tryitout 90k
D By Material Design
- removing read-only directory in styles
See all
156 comments Al v
0 Valentin Bourcier @valentinbourcie - 12 days ago
Hi ! This seems to be a really nice tool, but the colors always reset to default, | can't use it for the
moment.
Q Damo G @damog - 13 days ago
Unusably SLOOOOOOOOWL!. Colours keep resetting to defaults. The previews keep being
duplicated when | change colours. Even the DEL key doesn't work when editing colour values:
after about 30 seconds waiting for the keystroke to register, a couple of new dots appear.
Options to export text styles do nothing. That image upload thing with "Wallpaper" or "Content":
what's the difference? And what does, "make sure to swap an object that uses Material Design
styles to the current theme" mean? If | have to "make sure", then it must be important, but | am
drawing a complete blank.
Oh, and it is SLOOOOOOOO00OW! 20 minutes to type in three hex codes does not seem
reasonable. It even took over a minute just to select and copy the text | quoted above, which also
caused yet another copy of the preview to be created.
I think I'll just write my own script to generate what | need; this MTB is not fit for purpose.
@ Kallirroi Pouliadou @kallirroipoulia + 22 days ago 0
|@ - Community Q Publish J) v
Material Theme Builder
. . Q 2.7k Tryitout 90k
D By Material Design
- removing read-only directory in styles
See all
157 comments All v
0 John @813e7ad8_e734_4 - just now
Nice tool!
0 Valentin Bourcier @valentinbourcie - 12 days ago
Hi ! This seems to be a really nice tool, but the colors always reset to default, | can't use it for the
moment.
Q Damo G @damog - 13 days ago
Unusably SLOOOOOOOOWL!. Colours keep resetting to defaults. The previews keep being
duplicated when | change colours. Even the DEL key doesn't work when editing colour values:
after about 30 seconds waiting for the keystroke to register, a couple of new dots appear.
Options to export text styles do nothing. That image upload thing with "Wallpaper" or "Content":
what's the difference? And what does, "make sure to swap an object that uses Material Design
styles to the current theme" mean? If | have to "make sure", then it must be important, but | am
drawing a complete blank.
Oh, and it is SLOOOOOOOO00OW! 20 minutes to type in three hex codes does not seem
reasonable. It even took over a minute just to select and copy the text | quoted above, which also
caused yet another copy of the preview to be created. 0
|@ - Community Q Publish J) v
Material Theme Builder
. . Q 2.7k Tryitout 90k
D By Material Design
- removing read-only directory in styles
See all
© oo =
156 comments Al v
0 Valentin Bourcier @valentinbourcie - 12 days ago
Hi ! This seems to be a really nice tool, but the colors always reset to default, | can't use it for the
moment.
Q Damo G @damog - 13 days ago
Unusably SLOOOOOOOOWL!. Colours keep resetting to defaults. The previews keep being
duplicated when | change colours. Even the DEL key doesn't work when editing colour values:
after about 30 seconds waiting for the keystroke to register, a couple of new dots appear.
Options to export text styles do nothing. That image upload thing with "Wallpaper" or "Content":
what's the difference? And what does, "make sure to swap an object that uses Material Design
styles to the current theme" mean? If | have to "make sure", then it must be important, but | am
drawing a complete blank.
Oh, and it is SLOOOOOOOO00OW! 20 minutes to type in three hex codes does not seem
reasonable. It even took over a minute just to select and copy the text | quoted above, which also
caused yet another copy of the preview to be created.
I think I'll just write my own script to generate what | need; this MTB is not fit for purpose.
B oo @
@ Kallirroi Pouliadou @kallirroipoulia + 22 days ago
|@ - Community Q Publish J) v
Material Theme Builder
. . Q 2.7k Tryitout 90k
D By Material Design
- removing read-only directory in styles
See all
156 comments Al v
0 Valentin Bourcier @valentinbourcie - 12 days ago
Hi ! This seems to be a really nice tool, but the colors always reset to default, | can't use it for the
moment.
Q Damo G @damog - 13 days ago
Unusably SLOOOOOOOOWL!. Colours keep resetting to defaults. The previews keep being
duplicated when | change colours. Even the DEL key doesn't work when editing colour values:
after about 30 seconds waiting for the keystroke to register, a couple of new dots appear.
Options to export text styles do nothing. That image upload thing with "Wallpaper" or "Content":
what's the difference? And what does, "make sure to swap an object that uses Material Design
styles to the current theme" mean? If | have to "make sure", then it must be important, but | am
drawing a complete blank.
Oh, and it is SLOOOOOOOO00OW! 20 minutes to type in three hex codes does not seem
reasonable. It even took over a minute just to select and copy the text | quoted above, which also
caused yet another copy of the preview to be created.
I think I'll just write my own script to generate what | need; this MTB is not fit for purpose.
@ Kallirroi Pouliadou @kallirroipoulia + 22 days ago 0


Setting a timer

screenElements: Toolbar Avatar Button Stepper

screenElements:
Popover
Text Field
Icon
Button

screenPatterns:
Set
Audio Player

screenElements: Select Thumbnail

screenElements:
Button
Banner
Progress Indicator

screenPatterns:
Timer & Clock
Audio Player

screenElements:
Popover
Text Field
Icon
Button
Button
Banner
Progress Indicator
Toolbar
Avatar
Button
Stepper
Select
Thumbnail
Illustration

screenPatterns:
Timer & Clock
Set
Audio Player
Timer & Clock
Audio Player
Canvas
Set
Audio Player

screenKeywords:
B A d Drafts / Untitled v 0 m P O — %~ +
. S|
. % %
b Music The user journey of....
& Lo-fi hip hop
. [}
+1 min ~ 4
- A
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
‘ 5> "5 -l— . (=] ]
A A A ‘ . A L] [] J) A 8
O | & ™ . B G
|B A d Drafts / Untitled v 0 m P O — %~ +
. X
. g
£3 Picka song The user journey of....
G
[}
~ 4
- -
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74

User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?

Drag one of these stickers or

write a quote...
@::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
A 2 - =1
A~ A A ‘ O A . . ﬁ T A 8
|B A d Drafts / Untitled v 0 m P O — %~ +
. S|
. % %
b Music The user journey of....
& Lo-fi hip hop
. [}
+1 min ~ 4
- A
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
‘ 5> "5 -l— . (=] ]
A A A ‘ . A L] [] J) A 8
O | & ™ . B G
|B A d Drafts / Untitled v 0 m P O — %~ +
. SIS
. % %
7 Music The user journey of....
y Lo-fi hip hop
. [}
+1 min ~ 4
- -
User goal or problem /
On a call? Others can hear your X
music, too. Mute your mic! Whatis the user trying to
accomplish? What is the
problem to be solved?
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
A 5> "5 . [==]
~ ~ A ‘ A A . | = ﬁ ~ 8 | I
O | & ™ B G
|8 O A& O Drafts / Untitled v 0 m P O — %~ +
} l The user journey of....
|
~ /
P o
User goal or problem /
What is the user trying to
accomplish? What is the.
problem to be solved?
4

User action
What actions are they currently
‘taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?

Drag one of these stickers or

write a quote...
S\::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
A 2 = =1
< .
A A A ‘ . A L] [] ) ﬁ A 8
9 \ & ™ B @
|B v A d Drafts / Untitled v o m &S D — 8%~ +
3 : [j) X
uJ-uy %
v None The user journey of....
Acoustic ambient
[}
- /

Lo-fi hip hop - A
User goal or problem /

Button smash What is the user trying to
accomplish? What is the
problem to be solved?

It's Friday 7
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?

Drag one of these stickers or
write a quote...
@:;porlunity
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
A 2 =
~ N Aﬁv.A.T._ﬁ-Argl|
Y \| & ™ . B 0
|B A d Drafts / Untitled v 0 m P O — %~ +
. P X
. % %
b Music The user journey of....
& Lo-fi hip hop
. [}
+1 min ~ 4
- A
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
‘ 5> "5 -l— . (=] ]
A A A ‘ . A L] [] J) A 8
O | & ™ . B G
|B A d Drafts / Untitled v o m P O — %~ +
. > X
: g
] .
H - The user journey of....
¢ Lo-fi hip hop
. [}
+1 min ~ 4
- o
User goal or problem /
What is the user trying to
accomplish? What is the
problem to be solved?
74
User action
What actions are they currently
taking? How are they doing it?
What information are they
seeking?
Quotes and sentiment £
How do they feel in this moment?
Drag one of these stickers or
write a quote...
@::portunity
What are some things that
could improve this moment?
Could this be skipped or solved
elsewhere?
‘ 5> "5 -l— . (=] ]
A A A t . A L] [] ﬁ A 8
9 i s ™ . - @


Downloads

screenElements:
Dropdown Menu
Thumbnail

pagePatterns:
Downloads Page
Header Section

screenElements:
Grid List
Link

pagePatterns:
Downloads Page
CTA Section

screenElements:
Grid List
Link
Dropdown Menu
Thumbnail

pagePatterns:
Downloads Page
Header Section
Downloads Page
Downloads Page
CTA Section
Landing Page

pageType: Marketing Marketing Marketing Marketing

screenKeywords:
’ Products v Enterprise v Pricing Community v Company v @ English v Login
Figma downloads
Verdana
Whyte

. Wingdings

- Work Sans
Desktop app Mobile app Font installers
Desktop app for macOS Figma for iOS macOS installer
Desktop app for Windows Figma for Android Windows installer
|Figma downloads
Verdana
Whyte

. Wingdings

- Work Sans
Desktop app Mobile app Font installers
Desktop app for macOS Figma for iOS macOS installer
Desktop app for Windows Figma for Android Windows installer
Beta apps available here *Desktop app does not require the

font installer
|Desktop app for macOS Figma for iOS macOS installer
Desktop app for Windows Figma for Android Windows installer
Beta apps available here *Desktop app does not require the
font installer
Sign up for Figma on the web for free today.
Try Figma for free
| & Continue with Google |
|’ Products v Enterprise v Pricing Community v Company v F English v Login Get started
Figma Figdam
An all-in-one design platform An online whiteboard for teams
8 k = N n
o o _ eatis
- [ 1 [ N
PN A 1] D/ =
DNe.
Design Online whiteboarding
Prototyping Design processes
Design systems Team meetings deSIgn process
ducts, faster.
Downloads g
t start
Get started 0
(N Y snare | =t On T D Design e a
Layers Desigt
. Headline
lay For you Albums :, ———— Color.
@O o
I
% Slider | . L
Radio I 0 -
I
2 AR Y


Project detail

screenElements:
Side Navigation
Tab

screenElements:
Dropdown Menu
Side Navigation
Tab

screenPatterns:
Bookmarks & Collections
Action Option
Home

screenKeywords:
John "
(e R R i Q @) Explore Community o @ v
(® Recents See all Acme
[ Drafts
Members of Acme can edit this project
Ready to go beyond this free
plan? Upgrade for premium Fi
iles
features. About
New design file + New FigJam file +
Design and prototype Whiteboard and diagram
Favorite files Recent contributors
Hover over any file and click the star to
add it here
All files v Last modified v oo |=
Teams Starter team overview
B Acme Free . "
eader 1 W 1 of 3 Figma files used
-
Team project )
sader . .
m Ry 0 of 3 FigJam files used
—|— Create new team - p—— .
- Build your own
team library
_ Don't reinvent the wheel with every Upgrade your team for unlimited files,
e design. Team libraries let you share styles . . . .
E e projects, and customizable team libraries.
. — everyone on your team.
John's team library
Edited 20 hours ago
. Download desktop app X 0
|John P
(e R R i Q @) Explore Community o @ v
(® Recents See all Acme
[ Drafts
Members of Acme can edit this project
@ New design file A0S
Ready to go beyond this free ey Figm e D
plan? Upgrade for premium Files About
features. Copy link
Rename
View plans
Remove from favorites
New design file + New FigJam file +
Design and prototype Whiteboard and diagram Delete
Favorite files Recent contributors
Hover over any file and click the star to
add it here
All files v Last modified v oo |=
Teams Starter team overview
B Acme Free . "
eader 1 W 1 of 3 Figma files used
-
Team project )
sader . .
m Ry 0 of 3 FigJam files used
—|— Create new team — e .
wawe Build your own
team library
_ Don't reinvent the wheel with every Upgrade your team for unlimited files,
e design. Team libraries let you share styles . . . .
m e projects, and customizable team libraries.
. p— everyone on your team.
John's team library
Edited 20 hours ago
. Download desktop app X 0
|John P 2N

8 jsmith.mobbin@gmail.com e Q @) Explore Community jal (\il) v
(® Recents Drafts Deleted
[ Drafts

New design file + New FigJam file + [ Import file

@ Design and prototype Whiteboard and diagram Bring in files from other tools
Ready to go beyond this free
plan? Upgrade for premium
features.
Explore FigJam templates See all X
. b= DETY Team ' B .f —
Favorite files Dlagram — sync meeting - - ] !
, _ basics in agenda E oo L o S
Hover over any file and click the star to Fi J m = = '
add it here g a E—— o -
B b
Teams Diagram basics in FigJam Daily Sync Template Team meeting agenda User persona Empathy map
B Acme Free
Team project
All files v Last modified v oo |=
~+  Create new team
L 2 ‘.‘ =) - il -
e oA = i} .
Contacts ‘ " S : = i =1 B
<§<> amd O -
ko9 B W
. ; ey ﬁ
o . - i ]
Contacts App o o FigJam Basics Wireframing in Figma
Edited 5 minutes ago Edited 20 hours ago Edited 20 hours ago

. Download desktop app X G


Renaming a page

screenKeywords:
By B o [y Wy T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets V1 Design Prototype Inspect
Pages + Background
v FSFSF5 100% ®
Local styles +
Export +
|By B o [y Wy T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
Pages + Background
v Pagel FSFSF5 100% ®
Local styles +
Export +
|By B o [y Wy T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
Pages + Background
Local styles +
Export +
|By B o [y Wy T 34 @ I®) Drafts / Contacts App v J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
Background
FSFSF5 100% ®
Local styles +
Export +


Creating a component

screenElements:
Side Navigation
Badge

screenKeywords:
g- W . - % T % & D ¢ © W- D B > > e
Layers Assets Page 1 : Design Prototype Inspect
+ Home = + = ™ H# L v
&> Contact item :
i Frame
Contact item H
: X 20 Y 357
John H
Contacts v 8
Vector 1 H
Lo0° o I
Line 1 H
[ Clip content
Ellipse 1 H
Contacts Q John < Contactitem - G ees
Rectangle 1 ’
Constraints
m : ] 1
r — Left
' John "
Veis
= = (O Fix position when scrolling
347x79
Layout grid +
Layer
O Pass through 100% ®©
Fill +
Stroke +
Selection colors
Il ooo000 100%
D9DOD9 100%
EEEEEE 100% 0
|By B o [y Wy T 34 @ I®) 3 @ & J Share & > 96% v
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
Contact item
Contact item e e
n
T Name " i ©
Vector 1 Contacts -
Line 1 Parent component
Ellipse 1 + Contactitem
Contacts
Q M Constraints
Rectangle 1
I —  Scale
__ T Scale
Q Name
‘ Layer ﬂ(}
O Pass through 100% ®©
Text o
Inter
Semi Bold 18
A Auto |A| -3%
T o - =0
=== T L e
Content ﬂ(}
Name
Fill a
Bl A~~~ PR o
|By B o [y Wy T 34 @ O 020 ®© & J Share & > 96% v
Layers Assets Page 1 : Design Prototype Inspect
H Home = + = T H#+ L nhlv
i1 Contact item
i Group
John |
i X 20 v 244
Vector 1 i
: w347 H 79 C
Line ontacts |
: bo0° o
Ellipse 1
Contacts - i - Auto layout +
Rectangle 1 R John
i:i Constraints
m; 0 1 i Left
347 x79 __ ¢
I I Top
(O Fix position when scrolling
Layer
O Pass through 100% ®©
Fill o +
Click + to replace mixed content.
Stroke o+
Click + to replace mixed content.
Mixed = 2
Selection colors
Il ooo000 100% 0
D9DOD9 100%
|g - B 0- O-R-T % ™ D B O @ D EE o b e
Layers Assets Page 1 Design Prototype Inspect
H Home = + = ™ H# I
Contact item
X 76 Y 19
Contact item
w H C
T John o ®
b 0°
Contacts
Line 1 Parent component
Ellipse 1 + Contactitem
Contacts E@
Q Constraints
Rectangle 1 42x22
|
—  Scale
I T Scale
John
Layer =
O Pass through 100% ®©
Text o
Inter
Semi Bold 18
A Auto |A| -3%
T o - =0
- = — -
= B T -+ 4 b
Content =
John
Fill a
Bl A~~~ PR o
|By B o [y Wy T 34 @ I®) <‘I> O N J Share & > 96% v
Layers Assets Page 1 : Design Prototype Inspect
H Home = + = T H#+ L nhlv
++ Contact item
: Frame 0o an
John |
i X 20 v 244
Vector 1 i
i n
Contacts S
: L 0° o [
Ellipse 1 i
O clip content
Contacts - i -
Rectangle 1 R John «» Contactitem 54°
= O Properties +
347x79
Auto layout +
Constraints
1
— Left
| I Top
(O Fix position when scrolling
Layout grid +
Layer
O Pass through 100% ®©
Fill +
Stroke +
Selection colors 0
BB A0000n 1009