Patrick Morgan Profile picture
Aug 15 18 tweets 34 min read
I asked designers for their favorite @figma keyboard shortcuts.

220+ responses and hours of synthesis later...

Here are the top 10 keyboard shortcuts to supercharge your workflow:
@figma #10: Copy properties → ⌥ ⌘ C

Easily transfer styles from one shape to the next. Amazing!

via @ImAndrewPons copy properties
@figma @ImAndrewPons #9. Pick color → ⌃ C or I

Just tap `⌃ C` or `I` and be amazed as a color picker appears out of thin air.

And here I was using the Apple digital color meter like a chump…

via @TeeAnn__ pick color
@figma @ImAndrewPons @TeeAnn__ #8. Scale tool → K

Put your proportional scaling troubles to bed.

Tap 'K' to switch from the move tool (V) to the scale tool and resize away!

via @SuperAmar Scale
@figma @ImAndrewPons @TeeAnn__ @SuperAmar #7. Copy as PNG → ⇧ ⌘ C

Endless exports be gone!

Copy a PNG to the clipboard with this shortcut and be on your way!

via @joeyjungle Copy as PNG
@figma @ImAndrewPons @TeeAnn__ @SuperAmar @joeyjungle #6. Duplicate selection → ⌥ (while moving) or ⌘ D

It's only right that there are two ways to duplicate:

Hold ⌥ while moving a Frame to summon a copy from the great beyond.

Or just whack ⌘ D.

The choice is yours!

via @liz_shinn Duplicate selection
@figma @ImAndrewPons @TeeAnn__ @SuperAmar @joeyjungle @liz_shinn #5. Quick actions → ⌘ P or ⌘ /

Command palettes are so hot right now 🔥

Figma's is already strong and I imagine it will only grow stronger with time.

via @pherkan quick actions
@figma @ImAndrewPons @TeeAnn__ @SuperAmar @joeyjungle @liz_shinn @pherkan #4. Paste to replace → ⇧ ⌘ R

Might this be the lowest profile, highest utility feature ever created?!?!

It's not sexy, but it's a workflow beast.

via @TheObiLeonard Paste to replace
@figma @ImAndrewPons @TeeAnn__ @SuperAmar @joeyjungle @liz_shinn @pherkan @TheObiLeonard #3. Show/Hide UI → ⌘ . or ⌘ \

Are you presenting and want to clear away the clutter?

Or maybe you're on a laptop and need more space?

The show/hide shortcut has your back.

Show the UI you need, just when you need it.

via @ProductDisrupt show-hide
@figma @ImAndrewPons @TeeAnn__ @SuperAmar @joeyjungle @liz_shinn @pherkan @TheObiLeonard @ProductDisrupt #2. Undo → ⌘ Z

We all know designers never make mistakes 😉.

But in those rare instances when we do, it brings us a deep comfort to fall back on old faithful: ⌘ Z to undo.

via @abbybright14 Undo
@figma @ImAndrewPons @TeeAnn__ @SuperAmar @joeyjungle @liz_shinn @pherkan @TheObiLeonard @ProductDisrupt @abbybright14 #1. Add auto layout → ⇧ A

The tutelage of @zander_supafast is spreading far and wide:

“Whack shift A! Lovely Jubbly! Supafast!”

via @oamclean add auto layout
@figma @ImAndrewPons @TeeAnn__ @SuperAmar @joeyjungle @liz_shinn @pherkan @TheObiLeonard @ProductDisrupt @abbybright14 @zander_supafast @oamclean Honorable mention: Mental health shortcut → ⌘ Q

Don’t forget this critical part of the design process and go touch grass! 🍀

via @RicoSmith_ quit
@figma @ImAndrewPons @TeeAnn__ @SuperAmar @joeyjungle @liz_shinn @pherkan @TheObiLeonard @ProductDisrupt @abbybright14 @zander_supafast @oamclean @RicoSmith_ And if you want a powerful tool for referencing or studying Figma keyboard shortcuts, you're in luck!

I built a @NotionHQ database containing all 155+ @figma keyboard shortcuts with flash card visuals, favoriting and more...

Available now on @gumroad!

itspatmorgan.gumroad.com/l/figma-shortc…
@figma @ImAndrewPons @TeeAnn__ @SuperAmar @joeyjungle @liz_shinn @pherkan @TheObiLeonard @ProductDisrupt @abbybright14 @zander_supafast @oamclean @RicoSmith_ @NotionHQ @gumroad That does it!

If you enjoyed this thread:

1. Follow me @itspatmorgan for more systems and tools for design
2. RT the tweet below to share this thread with your audience
@figma Also, for anyone who's wondering, these are ordered by the total number of submissions from the community.

Not super scientific, but also not just my preference!
@figma If you dig this thread, come join my growing positive design community 'Better By Design', where we dig into nerdy design stuff like this every week. 🤓 🎨

itspatmorgan.substack.com

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Patrick Morgan

Patrick Morgan Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @itspatmorgan

Aug 17
I bet you recognize this emoji: 🎸

But have you ever wondered why the @Fender #Stratocaster became so iconic?

Here are three reasons it's a timeless design:

itspatmorgan.substack.com/p/design-grati…
@Fender Rams Principle #1: It’s innovative

The #Strat has many little innovations, but a big one is the tremolo.

#Fender’s unique design opened up a new level of expression for the instrument.

That expressiveness became an iconic, sonic building block for Clapton, Hendrix and more!
@Fender Rams Principle #2: It makes a product useful

Its form is lovely, but its function is superb. As Eric Clapton once said:

“...With the #Strat its functionality really steers it. That’s what makes the design so beautiful. It’s superbly thought out.”
Read 4 tweets
Aug 8
Once you craft a presentation in @figma, traditional slide tools just feel... insufficient.

But to unlock that power, I needed to set guardrails to give structure to the blank canvas.

7 small enhancements made all the difference:
@figma 1. Keep it to one presentation per file

I set that limit because I found it became hard to find old presentations if I tucked them away in multiple pages of one file.

File level separation resolves that issue. One presentation per file
@figma 2. Use a basic, but clear page structure

Main: The presentation itself, so that it loads by default when the file opens.
Extra: Fully fledged ideas that just didn’t make the final cut.
Archive: Ideas you probably won’t come back to, but... just in case... 😎 File page structure
Read 10 tweets
Apr 26
For those interested in my @figma project cover organization and workflow, here’s a quick intro to the library I maintain for my team to make designing in Figma even easier.🧵
The Project Thumbnail - I use it across my files for organization. I have a primary light variant for most projects and a secondary dark variant for libraries. I nest a Status component in each alongside the @jupiterone logo which comes from our logo library.
The Doc Page - I use this as a backdrop behind individual components in our UI libraries. I prefer a page separated component library, so this helps me avoid unwanted nesting in the Assets panel when looking for components.
Read 10 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(