10 tips to work 10x faster in Figma
406,459
Published 2020-10-19
==LINKS==
- Figma's video tutorial on autolayout: • Figma Tutorial: Auto Layout (older ve...
- My own figma template: www.figma.com/community/file/855188719022244530/De…
==FOLLOW ME==
Twitter: www.twitter.com/aloracpc
Instagram: www.instagram.com/designwithcarola
Tiktok: @designwithcarola
==TIMESTAMPS==
0:00 - Intro
1:40 - Tip #1 Duplicate
3:21 - Tip #2 Resize
5:14 - Tip #3 Resize Frames
6:20 - Tip #4 Copy Style
7:56 - Tip #5 Big nudge
9:59 - Tip #6 Hold layer position
12:38 - Tip #7 Layer up/down
13:37 - Tip #8 Rename/Bulk Rename
14:15 - Tip #9 Autolayout
16:22 - Tip #10 Templates
18:19 - What's your favorite?
==MY VIDEO GEAR==
Camera (Canon M50): amzn.to/359yW93
Lens (Sigma 18-35 f/1.8): amzn.to/34aNl5O
Mic (Blue Yeti USB): amzn.to/3m3G9P1
Key light: amzn.to/37lzkUW
Ring light: amzn.to/2T4CFiv
LED strip light: amzn.to/2Hb7dgk
Elgato Stream deck: amzn.to/2T63RO1
USB-C hub: amzn.to/37he6r6
Dummy battery adapter: amzn.to/37jWYB6
All Comments (21)
-
Figma Tips Move: V ctrl = command alt = option 1. Duplicate - alt + drag - ctrl + D - if you keep pressing ctrl + D it will duplicate at the same distance as your first duplicate 2. Resize - alt + drag at the side for it(the selected item) to grow from the center - alt + shift to maintain proportion - press k (don't hold) to scale - if "k" is already active, hold alt to maintain proportion 3. Resize Frames - hold ctrl so the frame will not use the constraints 4. Copy Text Style - ctrl + alt + c (on the text with the text style you want to copy) then ctrl + alt + v (on the text that you want to be the same style as the copied text) 5. Big Nudge (nudge - move an element a little) - shift + arrow key(the desired direction) - change nudge number: - hamburger menu - preferences - nudge amount - 8 pixel nudge (you'll always be within the grid) [if you work on an 8 pixel grid] 6. Hold Position - Click element and hold spacebar - this makes the element be placed on top instead of being put to a group (if the element is initially outside) - if the element is initially inside - it will be placed in a group but will be sent to back (sort of) 7. Layer Up/Down (how to move things up and down) - ctrl + [ (move down one layer) - ctrl + ] (move up one layer) 8. Rename (layer) - ctrl + R - can rename multiple layers if multiple layers are selected 9. Auto Layout - you can think of it as grouping elements that are related - to add auto layout to an element: shift + A - the selected element will be placed inside a new frame [changing child element order in an auto layout frame] - select child element + press an arrow key to move its position to the desired direction - we can also drag the child element to reposition it - aligning elements - select frame (with auto layout) - use arrow keys to align the elements to the left, center, or right [text resizing / word wrap] - go to text panel - type details (in the meatball menu) - change "Resizing" to grow vertically - then specify a fixed width for the text element [adding an external element in the auto layout frame] - drag the element - if element is bigger than the frame: - hold ctrl key while dragging the element (a blue line will indicate where the object will be placed in the frame) - to prevent the frame from growing wider - go to auto layout panel - change the resizing behavior to "fixed width" [Auto layout frames can also be turned to components(components are frames)] (so we can copy/duplicate it) - select auto layout (final) frame then do alt + ctrl + K to make that frame as a component [Placing an auto layout frame in a new regular frame] (for scrolling purposes) - select the auto layout frame - ctrl + alt + G 10. Templates - create/use templates if you're designing something similar most of the time
-
The "K" thing just changed my life. I just realized if I was spending 20 times longer resizing each component.
-
you look like a Pixar character. In a really good way. Like warm and good energy
-
Another tip: If you want to select the deepest element of a group, just hover the element and press cmd + click, and voilà! (This prevents you from perma double click group+group+group+...)
-
The space bar trick! Daaaaamnn, I've spent hours rearranging layers into the frames after moving them to create cool animations, and I didn't know this powerful trick. Awesome, you have a new follower from now on 😍
-
Love watching you @Carola! This is one of the most entertaining, fun and useful videos I've seen in a while. Sharing with our design students and they are loving it! Hope to see more. 💜
-
thank you for the tuts. the 'K' and the 'space bar' just saved my life.
-
that hold layer position tip! thank you soo much!
-
I've been looking for this k command all my life. Thanks Carola, you've earned a follower
-
Copy style actually kind of blows my mind. I've gone years without that and I'm just so pleased to have it in my toolbox now.
-
The "K" scale tool blew my mind. That would have saved me so much time on one of my assignments. Also, the holding "Command" while resizing a frame to disregard constraints was also super helpful. I would always have to add constraints to everything before moving which was a pain. Thanks so much for this!
-
Your excitement is contagious :D
-
scale and spacebar tips are game changers. thank you for the tips!
-
The keyboard shortcuts are the best part of Figma! Thanks for the awesome tips!
-
That hold layer position and Zoom options are life savers 🔥🙏🏻 Thanks for those awesome tips 🎉🤩
-
I already know these shortcuts but i enjoyed your excitement, keep exploring, love the way you explain.
-
Girl, I've been looking for that resize advice for weeks!!!
-
The space bar thing 🥺🥺 I hate it so much when moving layers and they get grouped when I don't want them to, definitely going to change my life! Big ones to me are Shift + 0 (to see everything on the current page), Shift + 1 (to set the zoom at 100%) and Shift + 2 (to center the screen on the currently selected layer), never use them when I have a trackpad but always do when I'm with a mouse
-
I recently (2 weeks ago) switched over to Figma from Sketch. I have found that autolayout is pretty powerful and something I want 95+% of the time I'm doing anything. The resizing sections of this video were helpful, thanks! Much of the other stuff is similar/identical to other tools, but still good to know. It's also good to know where the arrow sensitivity adjustment is. Again thanks!
-
favorite tip: the one with the spacebar, that will change my life