4 Figma Hacks You Didn't Know Existed

[@Mizko]

Thank you to everyone that’s suggested I can link in prototype. I know I can but the whole point was to link on the canvas 🙏

[@captteemo9133]

Thanks for your input! An easier way is using an icon font. I do not know if it gets rid of the underlining but you could paste your link directly on the icon. :)

[@AbhimanyuSirothia]

For that 2nd tip, you can actually just set the constraint to "Left + Bottom," and the triangle will stick to where it should be even if the text increases.

[@Mizko]

Wow, thanks for pointing that out. I so should have seen that! I’ve been flat out last few weeks and had a brain fart 😂

[@madhoundes]

Yes totally agree i know that constraint trick and i was wonder mizko why you dosnt use this method instead of zero height pixel auto layout beacause this method is outdated since figma before latest autolayout update

[@XenNightz]

Who votes for Mizko to ninja edit the video so I can save the video and not worry about having to read this the next time I need it 😅

[@remusb]

Yes, the trick worked beautifully before we had Position Absolute + Constraints.

[@joaotraini]

Came to say this, but nevertheless, awesome hacks Mizko! 🥰 best product design yt channel

[@Thefrenchsearch]

Thank you for the vidéo Mizko. For the Hack 2 you don't need a hack. You can use absolute position + bottom constraints to automatically make it sticks to the bottom. Then no matter how long your text is, your triangle will always be on the bottom. - step 1: create your text - step 2: autolayout (cmd + A) - step 3: create your triangle - step 4: make your triangle on absolute position - step 5: select "Bottom" constraints And voilà! I hope it may help some of you guys. Cheers

[@captteemo9133]

Thank you very much! :) Did not know that the constraints still affect absolute positioned elements. Nice tip!

[@KaloyanGeorgiev92]

I've used some of these in the past, but the last one with the avatars I haven't thought about. Pretty sneaky and creative, thanks for pointing it out ;)

[@kennethlucas]

For external linking, Figma has now included a "Go to Link" option under interactions. So no more need for hack 1.

[@cp3onmtv963]

Appreciate the update. Looks like Adobe is dropping XD and I’m brushing up on figma!

[@kennethlucas]

@@cp3onmtv963 You have some time. Right now Adobe is not offerring XD as a stand alone but it is still part of Creative Cloud. As of June 2, 2023 they say they have no plans to discontinue it. "XD will continue to be available as part of our Adobe Creative Cloud All Apps subscription. We will continue to support existing Adobe XD customers." -per Rishabh Tiwari, Social & Community Product Specialist at Adobe. Personally I don't see it lasting long though. My gut is that I give XD another 18 months before they roll it into Figma and start messing with Figma Adobe-style (that is a good thing by the way).

[@dsgn_crispin]

Awesome…….the first and second, I had no idea about it😂😂😂

[@madhoundes]

For the last trick method i was wondering if you can use text label inside circle avatar to clip it and show only the first letter it also work for other RTL language or any input

[@Mizko]

You can definitely use a text label. I was just using a component to show that you can systemise it. This way if you had the avatar in multiple places, it would update them all in one go.

[@chidorirasenganz]

I think a clipped instance could work as long as you know the width of the widest character and set the clipped instance to centered in the auto layout frame

[@ihyafathurr6411]

The last one is actually so smart! 🔥

[@IsmaVisionn]

I didn't knew about three of them, I was familiar with 2nd one. Thanks man!

[@adilbek.ermekov]

Ooh, new video!

[@Mizko]

It's finally here! I've been very busy with my new course launch :)

[@drixares3569]

Hey ! For the first hack you can create an icon from text : Step 1 : write the name of the icon you want as the text (from font awesome, here => "right-to-bracket" Step 2 : select "Font Awesome 6 Free" in font settings" Step 3 : Then select "Solid" for text's style Your icon will appear and it's also a text :) ps : sorry for my vocabulary i'm not a native english speaker...

[@kaushals_vlog]

Mizko I'm wondering how creative you are man hats of you this figma tricks lifts designers into next level ... ✌️👏

[@kalicromatico]

Thanks for the tps. For the first one, also you can use the Free Awesome Font to make an icon and adding a link.

[@chidorirasenganz]

Lol I commented before I saw someone else suggested using an icon font

[@aqeela.fathima12]

how? is that a plugin ? cause i couldn't find it.

[@kalicromatico]

No plugin, just use the included font "awesome free", and type the word envelope, for example, Figma will replace that work for the icon inside the text field. I will record an short for you in my small channel explaining it .

[@aqeela.fathima12]

@@kalicromatico okay thanks !

[@kalicromatico]

@@aqeela.fathima12 Ready! in spanish but you will understand it very well becouse is so visual. Something important about this: You have more than one version of that font inside Figma, even the solid or regular style. To know what word you need to use, browse in the awesome font website and use exactly the Title of each icon. Have a nice day!

[@vidhunnan]

Definitely 2nd one is absolutely brillant. 💯 Can't wait for update some components 😄

[@MazalsCool]

But… for tip 1 you can just switch to the Prototype tab and use the URL link option? Why go to all that effort?

[@Mizko]

This widget was built entirely for my course, and it was taken out from a much bigger template. I wanted my students to be able to do everything without having to keep flicking to prototype mode and back. So hopefully it's easier for them :)

[@rarara4111]

When is the new User Research course coming ?

[@Mizko]

Very, very soon. Finalising a few last things ✌️

[@zxcvb7653]

The number 2 tip is good, but I prefer my way. because it's always disorentating to create these "invisible" frames of 1 px height. If someone stumble across your file it would take a while to figure out. My method would be to: Instead of having the text box layer be the "parent" of the tool tip. 1. I would create another layer of Parent - Autolayout frame called "Tooltip container" 2. Inside it wll live "Text bubble" AL frame with the text and box styling and below it i'll add the "Tip" shape. 3. So that the "Tooltip container" contains "Text bubble" > "Tip" and the Autolayout will automatically stack them. No matter what content lives inside "Text bubble" , it will expand it accordingly Bonus point- if you want some padding around the "Tip" just wrap a frame around it, and add some padding

[@iditkeren282828]

Amazing! all 4 are new to me! thanks

[@jansleyreal]

These are very creative Mizko, the only one i knew about was #3, the rest were new to me!

[@harsheyfitness]

Hi Mizko, I want to purchase the Figma Masterclass today. Is there any discount code that I can use? Just trying my luck lol

[@sadkindahappy7912]

Hack #1 you can also just use the prototyping interaction to open an external link.

[@GoddessofWarr]

Wow, this is blowing my mind ! Great job et very useful, thx !

[@Mizko]

✌️ Glad you found it useful!

[@allencabo]

Awesome video!! I only knew 2 of those. When does the new course come out?

[@njengathegeek]

Those tips were so good to go without gently smashing the like button ✌👏

[@golfettoelia]

Hi, beautiful video as always! What do you think about sections? Do you use them to organize your board better or do you still prefer frames with auto layout?

[@uxtshili]

Very useful video! Thanks. Also that pencil 😂😂

[@farshadamirshoghi9323]

Thank you Mizko, It was very useful video

[@prizigner]

Liking the big pen tool

[@yuliiayeromina795]

Hi, i have a question. If I've created a poster a4 format, but i need it a3 format now. Do I have to resize everything one by one, or there is a way to quickly turn it everything a bigger format?

[@tara730]

hack 4: if we using it on dashboard and we have so many names with avatar cirlce then is there any way, if we change every name and avatar will change accordingly. For that we have create only one component.

[@everythingerindoes]

Great tips! I use the 3rd one regularly! That last one is so creative - wondering what to do about the rest of the letters in the name that come out of the profile circle though?

[@shamnadshah1622]

Create a square frame and put the text inside it, just clip content the frame, thanks

[@iamrajatsinghpatel]

I knew the Tip 2,3,4 :)

[@spectre3492]

figma really needs to get some of these basic features in here, having to put an invisible T in a frame to make a link is nuts. i saw you did something similar with adding invisible space inside of autolayout. why can't we select one of the spaces between auto-layout elements and override it to have a different value than the other ones?

[@spectre3492]

seriously, 20 billion for this company and you have to hack together a hyperlink

[@suniljadhav1889]

Great Thanx

[@0x6po]

aye, new vid

[@Mizko]

👌

[@Waqas4hmed]

hahaha I only knew the 3rd hack! Thank you M.

[@breu.design]

I'd doubt the last "hack". As you can see in the video, every name you type in places the first letter in another position since the letter width varies. This leaves you with Initials not centered at all in the profile picture. You'd then have to manually correct it, which makes it equally time consuming.

[@chidorirasenganz]

Yeah it’s probably better done with component props

[@mubindidit230]

Alright, I am a dump designer. I didn't knew any of the single tips before this video xD

[@juliusmarc7316]

Powerful tricks! 🙏

[@RLNDcaST]

Hi Mizko, Last one was like- wow, this is nice, and then I started to think, how did you made it😅 in 3rd I usi grouping or italso vorks with frames and auto layout. Just select two of them and then you can switch their positions😊

[@G00dhead]

That's one big fucken pencil.

[@Mizko]

LOL

[@jumpyee]

Hi Mizko, greetings from Ukraine 🇺🇦 🇦🇺 Thank you for your work, been a huge fan for a long time! Regarding your third tip - it brings awesome pros of auto-layout, but there are cons too: 1. If you don't use top level of your screen as a frame you won't be able to prototype it 2. You can't make some content fixed and some scrollable as well (e.g. you need a header to float over the body of your screen during scrolling in prototype) I'm a big lover of auto-layouts but unfortunately I can't see any workarounds to those I've specified above. The only way I use auto-layout at its max is having the screen as a frame with 2 types of child: - Fixed content, like a header - body auto-layout that contains everything else Hate to manually move my footer when my body auto-layout grows.. But can't see any other ways, maybe you know more? 😄

[@zxcvb7653]

for 1 - You could add another frame ontop of the Autolayout and make that new frame into whatever size you desire. OR alternativly you could set a custom device size in the Prototype setting on the 2nd tab on the right. 2 - you could easily just have the navbar/header be fixed outside of the Autolayout frame, and just add it into the new frame created in my comment above

[@jumpyee]

@@zxcvb7653 You didn't understand my comnent, but anyways thanks for the reply. The way you've described it is exactly how it is at the moment The problem here is that our top level container is no longer an auto layout container, as Mizko suggests And because of that our top level container will not auto-grow, you'll need to stretch your frame manually every time there is more content in the body itself

[@zxcvb7653]

You don't need it to auto grow let's say the Parent frame is 1980 x 1020- it act as a border for the prototype to run in The child frame is the Autolayout frame, as long as you add more frames into the child frame it'll expand automatically. The parent frame doesn't need to be expanded to be the same as the child frame, because it's purpose is solely to create a screen size frame for the prototype .

[@jumpyee]

@@zxcvb7653 no, look at the tip of Mizko, his top level frame is auto-growing He adds sketches easily to his screens For example it grows if your project is landing website and it constantly gets longer to the bottom If you use the approach you've described, you will need to manually stretch parent frame to have the content inside covered In case of Mizko he won't need to do it, but he will face issues that I've described in my parent comment

[@zxcvb7653]

@@jumpyee He didn't do it in his example, in his example if he sets the autolayout frame to hug content it will also expand. What I was saying is the concern could easily be solved by adding an other frame as a parent of the Autolayout frame in his example. And it could solve the screen sizing problem...when you are using it in prototype forexample

[@w1alentin610]

damn, you're f***g God. I didn't know no one of your tips =)

[@hacorn96]

7:38 interesting you used "amber heard" as username. i always use "johnny depp" coz i got bored with john doe.

[@Mizko]

I thought I'd be controversial 😂

[@hacorn96]

@@Mizko

[@DrewPalko]

I thumbed this down because there's a lot of bad practices in here... Usually the quality of Mizko's recommendations are better than these.

[@etdesign7712]

December 13th 2022, and you still dont know how to use auto layout for the tooltip. Learn bit more on auto layout mate And for your hack 2, you don't need to hold shift key when moving content with arrow keys. Good luck