10 tips to work 10x faster in Figma

Поделиться
HTML-код
  • Опубликовано: 24 ноя 2024

Комментарии • 797

  • @zerosandones7547
    @zerosandones7547 3 года назад +88

    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

    • @sivanya09
      @sivanya09 2 года назад +3

      Awesome bro thank you so much

    • @pookiepats
      @pookiepats 2 года назад +4

      my man

    • @ob5804
      @ob5804 Год назад

      Thank You!)

  • @adamgerber7824
    @adamgerber7824 3 года назад +587

    you look like a Pixar character. In a really good way. Like warm and good energy

    • @sasquelle
      @sasquelle 3 года назад +23

      i thought i was the only one who realised

    • @25maxman
      @25maxman 3 года назад +10

      I have never seen this channel and this was the first thing I noticed. Wild.

    • @PixieSpright
      @PixieSpright 3 года назад +2

      Totally.

    • @michaeloni8546
      @michaeloni8546 3 года назад +4

      Thank God I'm not alone 😹

    • @rodolforanchez8957
      @rodolforanchez8957 3 года назад +5

      She looks like Yennefer from the Witcher

  • @ricksegalCanada
    @ricksegalCanada 3 года назад +1

    Dropbox should immediately lock Carola into a ten-year contract. This is precisely the energy and passion every company needs. Outstanding.

  • @toddwu4449
    @toddwu4449 2 года назад +1

    Love your vid! It's helpful ! Thank you!

  • @roberttumaini5348
    @roberttumaini5348 3 года назад +207

    The "K" thing just changed my life.
    I just realized if I was spending 20 times longer resizing each component.

    • @JoaoPaulo-vt8kz
      @JoaoPaulo-vt8kz 3 года назад +5

      I used to export in png and bring it beck so I could do it. But it was a really dirty way.
      The "K" thing definitively change my live as well.

    • @dhritimansen3111
      @dhritimansen3111 3 года назад +1

      hahahaha i swear

    • @kiranpatel4742
      @kiranpatel4742 3 года назад +2

      Yeah this actually saved me so much time that i waste resizing things

    • @TonyAdigwe
      @TonyAdigwe 3 года назад +1

      It literally just changed my life

    • @rdznm88
      @rdznm88 2 года назад

      does it work on windows ?

  • @itsbeatrizpinto
    @itsbeatrizpinto 2 года назад +3

    Hey, I just wanted to thank you because I've recently started working with Figma and your video really helped me🥺 I wish you all the best!

  • @tokunboomonubi4329
    @tokunboomonubi4329 3 года назад +51

    Your excitement is contagious :D

  • @chaowang2019
    @chaowang2019 3 года назад +13

    thank you for the tuts. the 'K' and the 'space bar' just saved my life.

  • @lucas.campora
    @lucas.campora 3 года назад +208

    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+...)

    • @shabbirabdulhussein8748
      @shabbirabdulhussein8748 3 года назад +1

      This is what I was looking for! Was surprisingly hard to find, thank you Lucas!

    • @astro_roman
      @astro_roman 3 года назад +3

      My life has split to before and after... You just saved me days of double clicking. THANK YOU!

    • @YeneSpace
      @YeneSpace 3 года назад

      thank you !

    • @motiv8world273
      @motiv8world273 3 года назад +3

      I would have subscribed to your channel for this

    • @klesus
      @klesus 3 года назад +6

      Expanding on this: cmd/ctrl + click selects the most deeply nested detail that you're hovering on. Cmd/ctrl + RIGHT click brings up a context menu with all layers that the mouse hovers over. It also allows you to select locked items from the canvas rather than the layers panel.

  • @jebwatson
    @jebwatson 3 года назад +2

    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.

  • @tonyeneh8194
    @tonyeneh8194 3 месяца назад

    I find the spacebar+dragging tip super useful. It'll definitely make my life a lot better. Thanks

  • @Ahmad-dy8cp
    @Ahmad-dy8cp 3 года назад

    I have been always confused seeing some dudes disliking such video.. are you kidding me ??? SUPER HELPFUL..

  • @abdulbasitsadiq3413
    @abdulbasitsadiq3413 3 года назад

    Your smile is contagious. Can't help smiling myself.

  • @KrystalElizabeth
    @KrystalElizabeth 2 года назад +38

    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!

    • @polarbear8188
      @polarbear8188 2 года назад +1

      but dont forget about decimal size if you are resizing multiple layer

  • @richiebrisk7063
    @richiebrisk7063 2 года назад +1

    The way she explains totally fabulous 😍

  • @danddieporras9323
    @danddieporras9323 3 года назад

    ur personality is amazing. i'm so jealous with your colleagues since they get to work with someone as jolly as you. keep up the good work, bruh!

  • @keagandingshoff1633
    @keagandingshoff1633 Год назад

    The holding space bar to prevent objects from popping into frames / auto layouts was great to know. Thank you.

  • @025adityakumarsharma4
    @025adityakumarsharma4 Год назад

    Watched your video once in 2021, and now again searched for a long time to finally find this one again. You're awesome! Thank you for all the tips💙

  • @callmeburty
    @callmeburty 3 года назад

    That command + option c/v will be a game changer!!

  • @yasser.dev7
    @yasser.dev7 2 года назад

    The Tips of holding CTRL+ resizing elements from the side and holding space when dragging are so great Thank you so mush for sharing that .

  • @HamdaniOvais
    @HamdaniOvais 2 года назад

    I already know these shortcuts but i enjoyed your excitement, keep exploring, love the way you explain.

  • @bailey6759
    @bailey6759 2 года назад

    Where have you been all my life? Great tips! THANK YOU!

  • @SoulaORyvall
    @SoulaORyvall 3 года назад

    I figured out pretty soon what you were saying wouldn't be news to me but I was so in love with the way you were saying it that I couldn't stop myself and watched it all the way through the end

  • @akshaykumarnalatawad8185
    @akshaykumarnalatawad8185 3 года назад

    The auto layout thing blew my mind. Wow, super freaking awesome!!!

  • @jazilzaim
    @jazilzaim 3 года назад +1

    The keyboard shortcuts are the best part of Figma! Thanks for the awesome tips!

  • @chibuezeokoye3727
    @chibuezeokoye3727 3 года назад +2

    I've been looking for this k command all my life. Thanks Carola, you've earned a follower

  • @loiselw
    @loiselw 2 года назад

    Faves: copy/paste style and autolayout will always blow my mind.

  • @Golden_Kelsi
    @Golden_Kelsi 2 года назад +1

    This is mind-blowing!!!! As a beginner, this is super helpful!!!
    Shout out to Carola 🙌👏💛

  • @ibs37i
    @ibs37i 2 года назад

    U made my life easier. A super fan, love the way you express things and make them look easy. Thanks a million

  • @nattapongkonglumtan5605
    @nattapongkonglumtan5605 3 года назад +1

    As an UX design beginner, all of your tips you shared is useful for me. THANKS.

  • @kensenberg7003
    @kensenberg7003 3 года назад

    Omg! You helped me know multiple things already. I just got started with Figma and I'm knowing more. You are a blessing love from Nigeria 🇳🇬 👐🏽 and guys the thing about her explanation is most of what is explaining might not be what you want be on the cause of explaining you'll definitely learn few key functions! My God. Figma is great!! And Miss Carola is awesome 😘😘

  • @celineonwubiko3843
    @celineonwubiko3843 2 года назад

    I am an absolute novice in this field. Writing out the commands and keys as you clicked was really helpful. Thank you ❤️ ❤️

  • @jennajacobs3700
    @jennajacobs3700 3 года назад

    the copy style blew my mind. I have been looking for this. In other softwares you can do it with an eyedropper.

  • @thamindawonde
    @thamindawonde 2 года назад

    that scale tip for resizing was amazing, thank you so much!

  • @beanyfn3661
    @beanyfn3661 2 года назад

    Wow big nudges was really useful I've been a UI designer for 3 months now and I never knew how to do it thanks!

  • @frankvasquez4827
    @frankvasquez4827 4 года назад +10

    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 😍

  • @AndiGalpern
    @AndiGalpern 4 месяца назад

    Miss you , Carola! Thank you for these tips!

  • @luma.cabral
    @luma.cabral 3 года назад

    The space tip to put something above the frame changes my life! Your video was helpful, thanks a lot :)

  • @wzywgwzywg
    @wzywgwzywg 2 года назад

    number 6 was driving me crazy, thanks for the tip!

  • @katherinegaspare1569
    @katherinegaspare1569 3 года назад +53

    favorite tip: the one with the spacebar, that will change my life

    • @odanabunaga2505
      @odanabunaga2505 3 года назад +1

      doesn't work on iMac :(

    • @kohila9723
      @kohila9723 3 года назад

      Figma
      ruclips.net/video/-gAW7H1q2n8/видео.html

  • @rickmoranis420
    @rickmoranis420 4 года назад +1

    scale and spacebar tips are game changers. thank you for the tips!

  • @preshitrastogii
    @preshitrastogii 4 года назад +8

    that hold layer position tip! thank you soo much!

  • @RTerrcool2
    @RTerrcool2 2 года назад

    i am actually applying and practicing right now the commands / shortcut keys you are sharing in this vid, and you are the first person I have heard of those stuff. Salamat !
    - Apple, from the Philippines

  • @souvikdutta6219
    @souvikdutta6219 4 года назад +3

    The spacebar trick changed my life

  • @imvisual95
    @imvisual95 3 года назад

    Number 1. I love you.
    This is what i looking for a long time.. much loveee♥️

  • @AmayuruLokugamage
    @AmayuruLokugamage 3 года назад

    I spent my whole day figuring out how to get rid of that constraints.
    You are like a lifesaver

  • @tilianus
    @tilianus 4 месяца назад

    These combinations with the ALT key I shall most likely be using most frequently by far from all your tips. But I am grateful for all of them.

  • @emilyworkman
    @emilyworkman 3 года назад +2

    Girl, I've been looking for that resize advice for weeks!!!

  • @heechung6377
    @heechung6377 3 года назад

    I didn't know Resize Frames and Hold Layer Position... I love you right now...

  • @Ray_XII
    @Ray_XII 3 года назад

    Same tips I saw in other video just now (except there are fewer) BUT... clear explanation, not rushed, and with good sound/voice quality, the transition for example, the fade in-out of the sound was very good to keep the attention IMO. Take this like I did not give to the other person.

  • @bhavykhatri2669
    @bhavykhatri2669 3 года назад

    style copying was so awesome, this video is so so great

  • @mehrasaph7151
    @mehrasaph7151 3 года назад +1

    I'm a junior Figma learner and it's brilliant thanks ! my fvorite tip is #7 Layer up/down

  • @cynthiachiofolo7922
    @cynthiachiofolo7922 2 года назад

    I was thrilled, personally, throughout this video

  • @babyshmay
    @babyshmay 3 года назад

    ur humor is so adorable

  • @cyrilcyril5853
    @cyrilcyril5853 3 года назад

    The nudge amount set at 8px is a life changer! Thanks!

  • @Rinacks
    @Rinacks 2 года назад

    Never knew about the nudging by 10px until now. Thanks!

  • @Saadkhan87
    @Saadkhan87 3 года назад

    That Scale tool switch (K) was crazy good! Thanks

  • @bananachips5748
    @bananachips5748 3 года назад

    tbh i thought you were going to tell pretty basic stuff like other people do but oh dear gawd this was life-changing

  • @valen2663
    @valen2663 3 года назад +3

    Another very useful thing I would add is the swapping of elements by selecting two items and dragging one of the pink dots that show up in order to swap their positions between them. Great video, learned some eye opening stuff that I already started using today at work. Thank you!!

  • @simon4512
    @simon4512 4 года назад +44

    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

    • @jms3942
      @jms3942 2 года назад

      Shift 0 is 100%, shift 1 is to see everything. But very helpful! thanks

  • @PauloRicardo-bw5pi
    @PauloRicardo-bw5pi 3 года назад

    Congrants, Carola ! I loved the tips. Super useful.

  • @noraeboesomi1527
    @noraeboesomi1527 2 года назад +1

    The frame increment without moving all the contents was my favorite tip. I always drag out all the contents, resize the frame then drag the contents back into the frame. Thank you so much for the tip.

    • @busayoak_
      @busayoak_ 2 года назад

      Same here! Number 2 was definitely life changing

  • @brandonkoopa
    @brandonkoopa 3 года назад

    Copy style! Brilliant! Thank you for making our lives easier!

  • @vijay6877
    @vijay6877 3 года назад +2

    This video has something more than Figma tips. vibes 🍂

  • @JohnCarter-qz5yy
    @JohnCarter-qz5yy 3 года назад

    Recently started learning Figma and haven't even finished the video yet, but I had to say that first tip about copying/duplicating was ALL I WAS LOOKING FOR!!! OMG!! THANK YOU! I LOVE YOU!!! :P

  • @joshuaomoniyi3233
    @joshuaomoniyi3233 3 года назад

    The K part, really cool. been wasting so much time. thank you for the video

  • @ofek5365
    @ofek5365 2 года назад

    Tip num. 3 is just what I needed now, thank you!

  • @WillSlaton
    @WillSlaton 3 года назад

    Funny story, started using Figma at the beginning, then left for Axure, the Sketch, no I'm back and this is the type of video I'm looking for... Love your energy!

  • @maianhnguyen1661
    @maianhnguyen1661 3 года назад

    These tips totally made my life easier! Thankssss

  • @tuikahchickz
    @tuikahchickz 3 года назад

    Starting to learn Figma in my Late 30's :-) Your videos help me a lot.

  • @티열
    @티열 3 года назад

    The 10th tip i like it so much easier to use our own template every time we need it

  • @luisfernandomontoya181
    @luisfernandomontoya181 3 года назад +8

    Hey, what a great tips and I love your energy. Regards from Colombia!

  • @sitarabeatriz388
    @sitarabeatriz388 3 года назад

    That copy style tip blew my mind haha Like its something I needed coz its so time consuming to duplicate the style I want then align it again and retype and blah blah blah haha thank you so much!

  • @brandondithberry
    @brandondithberry 3 года назад

    Design with one of the most purchased sedans. Sorry I couldn’t resist. LOVE the tips by the way!

  • @arjaymarquez6365
    @arjaymarquez6365 3 года назад

    Can't stop watching your video.

  • @lookintomyeyes2681
    @lookintomyeyes2681 4 года назад +8

    I love the energy in ur videos, :)

  • @JohnDoe-mc4wo
    @JohnDoe-mc4wo 3 года назад

    spacebar solved so many issues :) it's so precious in prototyping process

  • @macfixer
    @macfixer 2 года назад

    Great Tips. As a starter in FIGMA I appreciate your Video. Thanks a lot.

  • @mayank_upadhyay_19
    @mayank_upadhyay_19 3 года назад +2

    My mind is blown 🤯🤯🤯🤯, thank you, you made be 50X faster 🙏

  • @cxrlitosway
    @cxrlitosway 2 года назад +1

    Today is the 2nd day of teaching myself UX design. I have a graphic design background but want to transition to UX. Your video is SOO helpful, there are so many similarities with the shortcuts but you definitely taught me a lot. THANK YOU !!!!

  • @llanero6
    @llanero6 2 года назад

    This is a great list of things every Figma user must learn!!

  • @Momos-happy-walkers
    @Momos-happy-walkers 3 года назад

    The hold space and move one is a simple game changer

  • @haejinsuh
    @haejinsuh 4 года назад

    Holy moly the command while you drag the frameeeee. This actually saves so much timeLOL

  • @woodartsintarsia4167
    @woodartsintarsia4167 2 года назад

    You are GREAT, NICE and you seem to love what you do! Don't stop this...

  • @thisislaraa
    @thisislaraa 2 года назад

    Thank you so much for that! I am starting with design and as a beginner and not 100% english speaker, i didn´t even know how to search for the words to learn that!!

  • @Kronos876
    @Kronos876 3 года назад

    Didn't know about #4 and #6.
    Thanks for the information, you gorgeous human being!

  • @CoreyStewart91
    @CoreyStewart91 3 года назад

    OMG the one about matching text styles

  • @russellbortzfield8898
    @russellbortzfield8898 3 года назад

    Finding out about the big nudge for the first time was pretty mind-blowing.

  • @elleryfamilia8291
    @elleryfamilia8291 3 года назад

    I'm brand new to figma and this video just changed my (figma) world. Thanks @Carola for putting this together. Now I need to go learn autolayout :)

  • @Shakeel714
    @Shakeel714 3 года назад

    Teaching with nice smiles throughout the tutorial. By the way almost all the tips you shared in this video were super useful. Thanks Carola.

  • @blurryfacep1
    @blurryfacep1 3 года назад

    I'm keeping this video in my basement locked up so I never lose you. Thank you for the energy and being you.

  • @anastasiiaboichun1094
    @anastasiiaboichun1094 3 года назад

    Thanks a lot for your video. My favorite tip was about resizing (number 2). Please keep doing because you explain the thinks in the easiest way.

  • @windmaomao
    @windmaomao 2 года назад

    Thanks for these sick tips, highly highly useful. Also love your nail color.

  • @amit_perez
    @amit_perez 2 года назад

    Thanks Carola!
    Great tips!🤩
    My fav one was the Cntrl + Shift + V / C !!!
    It's a game-changer!

  • @clottenbach6869
    @clottenbach6869 3 года назад

    Nr. 4 blew my mind!
    Thanks for sharing. Very helpful. 😍

  • @pilipdasamattanawin1058
    @pilipdasamattanawin1058 3 года назад +1

    That arrow tip was big! (and i didn't even know you can add arrow tip to a line 🙈)

  • @I_Mackenzie
    @I_Mackenzie 3 года назад

    Copy and paste styles was cool. Thanks for the vid.

  • @emmanour2173
    @emmanour2173 2 года назад

    I’m just so glad I found this video. Thanks!

  • @maftunaberkimbaeva7428
    @maftunaberkimbaeva7428 2 года назад

    Hey, the tips are awesome:)). I really liked the Ctrl+Alt+C and Ctrl+Alt+V for copying the styles. I have been struggling with copying the styles.

  • @Luudybug
    @Luudybug 3 года назад

    thank you so much for sharing these helpful tips to the community!! super appreciate you