You are on page 1of 29

!"#$%&'()*%+ !,-.-.

/0,

1%2-+*34%,'",&. 3-$$-5

67.*89:*8;88 < =*2%+*,(4) < >%&.(+

14?(

!"#$%&'(#)*+&%,-#./+#-0/+*1#2,/3#(4/+5#6/7
./+7#,895#:7/;8<5=
Plugins for Figma help you work more efficiently so you can concentrate on more
crucial tasks like user experience and creativity.

Here are a few that I’ve discovered over the years and frequently use in all of my
projects (in alphabetical order).

">?#@-:8<5-
What: Quickly resize images/shapes into specific aspect ratios.
Why: Consistency to make it easier to manage content-wise when built.
Where: figma.com/community/plugin/739222456238688882
3%@24*!$"@%+A*B&0(7.&*#/*C-&2%+*D(@-%.4

"A?#@+5/$*/3
What: Quickly draw custom flows.
Why: Building sitemaps, user flows, diagrams and more.
Where: figma.com/community/plugin/733902567457592893
3%@24*!$"@%+A*B".-*3$-5*#/*E4?%)*F'4-*4+)*G%.-+@*F'4+@

"B?#C(5<0#D5.*87
What: Change multiple text and colour styles at once.
Why: Quickly amend your designs.
Where: figma.com/community/plugin/818203235789864127

3%@24*!$"@%+A*H4.7'*1./$(,*#/*I4+*1%J

"!?#C8(+5%6+*#D0(1/3-
What: Quickly generate shadows.
Why: Visual example without having to play with X, Y & Blur values.
Where: figma.com/community/plugin/1068595505353552645
3%@24*!$"@%+A*H(4".%K"$*1'4)-5&*#/*B$(J*L%)"4

"E?#C78(2:/%,5-
What: Responsive layouts in Figma
Why: Take care of your designs for multiple break points
Where: figma.com/community/plugin/824289601590456356
3%@24*!$"@%+A*H,(4M0-%+.&*#/*3$-5(4,(

"F?#C+55/,#C+11.
What: Quickly generate button states and styles
Why: Spend less time manually creating the same states for every project
Where: figma.com/community/plugin/891833918736503296

3%@24*0$"@%+A*H"..-+*#"))/*#/*BN*4+)*H"@,4*N-74M

"G?#H%7<+*(7#I895
What: Type on a circular path
Why: Be creative with your typography
Where: figma.com/community/plugin/884226330548474110
3%@24*0$"@%+A*C%,7"$4,*O(J.*#/*3(#9P

"J?#H*8(,#K/<+'8,5
What: Quickly clean up your figma file
Why: Keep your file organised for collaboration or handover
Where: figma.com/community/plugin/767379019764649932
3%@24*0$"@%+&A*C$(4+*)-7"2(+.*#/*G"4+*Q%+@*>%2

"L?#H/,58,5#M88*
What: Import realistic content in your designs
Why: Show what your designs will look like in real life when built
Where: figma.com/community/plugin/731627216655469013

3%@24*0$"@%+A*C-+.(+.*R(($*#/*S%7,-&-K.*4+)*T"@(+(*U4?,%$-KK

>"?#K8NO-%'(58-
What: Provide estimates straight from Figma.
Why: Keep estimates and designs all in one place.
Where: figma.com/community/plugin/855655237472027323
3%@24*!$"@%+A*E(?(&.%24.(&*#/*3,4+7-*V4$)(&

>>?#K/3,-%P8
What: Compress image sizes in Fima
Why: Reduce file size and load time
Where: figma.com/community/plugin/869495400795251845
3%@24*0$"@%+A*E-5+&%W(*#/*B$(J*T%+4,&&-+

>A?#K7(3#H/,,8<5/7
What: Draw custom lines between frames.
Why: Design sitemaps, user flows, diagrams, experience maps. and more.
Where: figma.com/community/plugin/988836825341227586

3%@24*!$"@%+A*E,45*C-++(7.-,*#/*G"4+*Q%+@*>%2

>B?#$8(5087#Q</,-
What: Icon library
Why: Quickly place SVG icons on your designs
Where: figma.com/community/plugin/744047966581015514
3%@24*!$"@%+A*3(4.'(,*X7-+&*#/*C-$(*H(2%&

>!?#$%&BK
What: Turn vector shapes into 3D objects
Why: Be creative with your assets in your design
Where: figma.com/community/plugin/946020080871644950
3%@24*!$"@%+A*3%@YE*#/*!4$4&'*H4+&4$*4)*O5%&'%*14@54$

>E?#$%&'/;%
What: Emoji library
Why: Make Figma more fun!
Where: figma.com/community/plugin/736612173445813953

3%@24*0$"@%+A*3%@2-Z%*#/*D%.%+*U"0.4

>F?#$%,1#Q,#)(&8
What: Find layers
Why: Find and select specific items in your file automatically
Where: figma.com/community/plugin/949983833489656822
3%@24*0$"@%+A*3%+)*%+*!4@(*#/*O&",%.*H(+[O&",

>G?#$/+,1(5%/,?#H/*/+7#R8,87(5/7
What: Generate colour palettes
Why: Palettes/shades based on Material, Atlassian, Orbit and Ant Design.
Where: figma.com/community/plugin/1024452006068794933
3%@24*!$"@%+A*3-"+)4.%-+*C-$-",*U(+(,4.-,*#/*I-,@(*3(,+4+)(&

>J?#$/+,1(5%/,?#Q</,#D<(*87
What: Scale icons
Why: Set sizes and rules for icons in your design system for consistency
Where: figma.com/community/plugin/1080268938349341224

3%@24*!$"@%+A*3-"+)4.%-+*X7-+*174$(,*#/*I-,@(*3(,+4+)(&

>L?#$7('8#I(&-
What: Add tags to your frames
Why: Keep frames organised or leave a status report on each page
Where: figma.com/community/plugin/768262762486932527
3%@24*!$"@%+&A*3,42(*O4@&*#/*S%7'4($*S(/(,

A"?#R7%1-#R8,87(5/7
What: Generate layout grids
Why: Calculate your grids with a visual reference
Where: figma.com/community/plugin/841313026689642442
3%@24*0$"@%+A*U,%)&*@(+(,4.-,*#/*I47M/*>((

A>?#S(,1.#H/':/,8,5-
What: Library of editable handy components
Why: Drop useful pre-set components and states in your design system
Where: figma.com/community/plugin/944200797696370948

3%@24*0$"@%+A*\4+)/*C-20-+(+.&*#/*O'(!(+O--$*4+)*B,&(+*N-$/#4

AA?#SITU#5/#K8-%&,
What: Convert any website into an editable figma file
Why: Research, inspiration, learning, reference
Where: figma.com/community/plugin/1159123024924461424
3%@24*0$"@%+A*\OS>*.-*E(&%@+*#/*)%?RX6O1

AB?#Q'(&8#)(*8558
What: Generate colours from images.
Why: Introduce new colours, or create new palettes for a brand.
Where: figma.com/community/plugin/731841207668879837
3%@24*0$"@%+A*X24@(*04$(..(*#/*S4..*E(&>4",%(,&

A!?#Q'(&8#I7(<87
What: Create flat vector shapes from images
Why: Convert logos/icons to vector format within Figma
Where: figma.com/community/plugin/735707089415755407

3%@24*0$"@%+A*X24@(*O,47(,*#/*E4?(*L%$$%42(&

AE?#U(./+5#R7%1#V%-+(*%-87
What: Draw layout grids
Why: Referencing layout grids for documentation
Where: figma.com/community/plugin/831003768229656707
3%@24*0$"@%+A*>4/-".*U,%)*V%&"4$%W(,*#/*O-2

AF?#U/78'#Q:-+'
What: Import Lorem Ipsum into your design
Why: Get a feel for placeholder content within your design or wireframes
Where: figma.com/community/plugin/736000994034548392
3%@24*0$"@%+A*>-,(2*X0&"2*#/*E4?(*L%$$%42(&

AG?#T(:#T(287
What: Custom maps
Why: Generate a custom map right from within Figma
Where: figma.com/community/plugin/731312569747199418

3%@24*0$"@%+A*S40*S4M(,*#/*N4W"&'%*N4542",4

AJ?#T(587%(*#K8-%&,#Q</,-
What: Google Icon Library (Free)
Why: Quickly import icons to your designs or wireframes
Where: figma.com/community/plugin/740272380439725040
3%@24*0$"@%+A*S4.(,%4$*E(&%@+*X7-+&*#/*X7-+&]

AL?#T8(-+78
What: Show measurements
Why: Display sizes for documentation such as design systems/guides.
Where: figma.com/community/plugin/739918456607459153
3%@24*0$"@%+A*S(4&",(*#/*!'%$*4+)*C4,$'4"&(,

B"?#W('8-:(<8-
What: Format layer names
Why: Prepare for handoff to development. Good practice.
Where: figma.com/community/plugin/739106292828562948

3%@24*0$"@%+A*D42(&047(&*#/*D(W+4+-?

B>?#W/%-8
What: Generate noise texture.
Why: Add depth to your design with a patterned texture.
Where: figma.com/community/plugin/752558325552095625
3%@24*0$"@%+A*D-%&(*#/*E"&.%+*S%(,4"

BA?#)%9H+5#C(<2&7/+,1#M8'/N87
What: Remove image backgrounds with AI
Why: Stay in Figma without having to use Photoshop
Where: figma.com/community/plugin/990188175789012011
3%@24*0$"@%+A*!%JC".*H47M@,-"+)*R(2-?(,*#/*L-+)(,&'4,(*!%JC".

BB?#D/75#Q5
What: Sort your layers by name
Why: Organise your file
Where: figma.com/community/plugin/731324768889901500

3%@24*0$"@%+A*1-,.*X.*#/*N4W"&'%*N4542",4

B!?#D:8**<08<287
What: Check spelling of selected text layers
Why: Make sure your designs are of high standard.
Where: figma.com/community/plugin/738839069237725273
3%@24*0$"@%+A*10($$7'(7M(,*#/*V$4)%2%,

BE?#D5(72
60(+*%+*400 1%@+*"0 1%@+*X+
What: Check accessibility colour contrast
O-*24M(*S()%"2*5-,M:*5(*$-@*"&(,*)4.4^
Why: Good practice. Design Systems. Branding. Colour Palettes.
H/*"&%+@*S()%"2:*/-"*4@,((*.-*-",
!,%?47/*!-$%7/:*%+7$")%+@*7--M%(*0-$%7/^
Where: figma.com/community/plugin/732603254453395948
3%@24*0$"@%+A*1.4,M*#/*1.4,M

BF?#D5%<2.#W/58-
What: Sticky notes inside of Figma
Why: Make notes in workshops and work collaboratively. Remote working.
Where: figma.com/community/plugin/901482830211374036

3%@24*0$"@%+A*1.%7M/*+-.(&*#/*B$(J*L%)"4

BG?#I(4*8#H78(5/7
What: Create auto-layout responsive tablets in one click
Why: Save time from creating manually.
Where: figma.com/community/plugin/885838970710285271
3%@24*0$"@%+A*O4#$(*C,(4.-,*#/*U4?%+*S4734,$4+)

BJ?#I.:8-<(*8-
What: Create header styles.
Why: Quickly scale your typography in one.
Where: figma.com/community/plugin/739825414752646970
3%@24*!$"@%+A*O/0(&74$(&*#/*S4,?%+*H,"+&

BL?#XQ#$(<8-
What: Import faces to your UI Design
Why: Get a feel of your design with realistic content.
Where: figma.com/community/plugin/769664006254845172

3%@24*0$"@%+A*_X*347(&*#/*B$(M&4+)4,*O4&(?&M%

!"?#X,-:*(-0
What: Image library
Why: Free stock images for your design from the Unsplash platform
Where: figma.com/community/plugin/738454987945972471
3%@24*0$"@%+A*_+10$4&'*#/*N%,%$$*F4M'4,-?:*>%42*S4,.(+&*4+)*_+10$4&'

I hope this helps!

If you have any more to recommend, please drop me a comment, or reach out to me
on the below profiles…

LinkedIn: https://www.linkedin.com/in/simonfairhurst/
Twitter: https://twitter.com/siimonfairhurst

3%@24 3%@24*!$"@%+ E(&%@+ E(&%@+*O'%+M%+@ _X*E(&%@+


!"#$%&'%()*%+,-%!)&*.-
H/*!,-.-./0,

O'(*1-",7(*.47M$(&*.4#--*.-0%7&:*(J0-&(&*"+&((+*.,".'&:*4+)*@(.&*.'(*&7--0*-+*.'(*$4.(&.*%+*.'(*.(7'*4+)*)(&%@+
&0'(,(^*O4M(*4*$--M^

H/*&%@+%+@*"0:*/-"*5%$$*7,(4.(*4*S()%"2*477-"+.*%K*/-"*)-+`.*4$,(4)/*'4?(*-+(^*R(?%(5
-",*!,%?47/*!-$%7/*K-,*2-,(*%+K-,24.%-+*4#-".*-",*0,%?47/*0,47.%7(&^

U(.*.'%&*+(5&$(..(,

B#-". \($0 O(,2& !,%?47/

/-0%0,-%1-2"&3%4''

You might also like