"In June 2024, we introduced a redesigned Figma-called UI3. With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content. - Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI - Learn more about constraints in Figma: help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize"
Constraints don't show up as an option for me. I followed this tutorial a few times and I never got the option to constrain things. It simply never appeared.
I have the same question! I played around with switching the Tab Bar constraint back and forth from "Scale" to "Left & Right" and they both looked the same as far as I could tell.
It's unclear and doesn't work. This tutorial is very confusing because it doesn't explain how the objects are grouped together.I followed it step by step and my components stretch and deform if I click and pull the rectangle. How do you even click and simply select individual shapes inside a component? Is there a key you are holding? Are the components made in a different way than the classic method? The left panel needs to be in the picture.
I love this tutorial from the content perspective, but the fact that it's not a real in-app footage is a little sad-I miss seeing how things snap to other things like in your previous tutorials. Feels less human this way.
Keen eye! We were testing a couple of different production workflows to make the videos easier to update, so this one was animated by hand. We did use real in-app footage for this video: bit.ly/2YoncxN and will be using that method for some future videos, so be sure to subscribe to keep up to date!
Figma , I’m using the RU-vid app on mobile and the bit.ly URL opens in my browser instead of the app itself despite being another RU-vid video, which is a bit inconvenient.
In regards to Constraints, specifically: Constraints -> Vertical: Left & Right Constraints -> Vertical: Scale I seem to get the same results. Is there a difference in this case, I can't seem to spot one?
Hi, for some reason the files for the tutorial are "view only" on my desktop - can you help me what might be the issue? Would greatly appreciate it as I would dig deep into figma thanks to your awesome videos :)
Click on the mame of the file "Constraints Tutorial File" just above the workspace (below the tabs, if you're using the app). It has a chevron next to it. If you click "Duplicate" it'll let you make a copy you can edit :)
I am a bit confused with how text constraints work. Let's say I have a text button component, should I apply constraints to the text? So that it responds to any changes in the button size? Isn't there some other function that allows the textbox to adjust according to the size of its parent element?
to the right of the x, y coordinates there is a little icon that appears when constraint options are available. I wonder why people are still using constraints though. I think this functionality is better covered by auto layout. but I could be missing something
How to group all the elements properly so that they don't stretch? Please explain the stretch constraint a bit more, I didn't quite understand what it means...
I've watched so many tutorials and I'm finding figma incredibly frustrating to learn. I just need a simple design system. I dont understand why the top down shit cant be explained. I get the tools are helpful bunt I dont understand where people are learning how to align text to a box. how does this text stay centered. It feels like there are fifty different ways to center text. Both with the text align tools, the top align features. I dont understand how large the text barriers should be. Should it hug the text? should it not? Do I need to select the outer box with the inner text in order for these top contraints to work? what happens when I resize the text. why cant i just easily create a color style without having to try to color a shape. Why isnt there a simple add main color style and just choose your style. but instead you need to enter a menu and decide on the fly what color style you want and then once you have sort of decided that, easily finding these styles in one of four different locations and knowing which place you need to go to edit it seems frustratingly difficult just to figure out. Im sure the designers at figma watch begginers learn this products with no explanation or help given, but omfg I just need to easily learn the basics and get a project done. it feels like this product wants more noteriety for being a solid solution than actually stepping to the side and let the software be self explanatory and just do what it needs to. are colors at the bottom of the right hand bar and layers are above that. Dont people often choose to modifiy colors as one of the most frequently used things. I feel like auto layout is just right where I'd like colors to be and god knows what layout grid is doing rightttt in the middle of the most useful location. and fill isnt clear in terms of how it is different than selections colors. at this point im just ranting, but i keep trying to learn this thing and i keep getting frustrated and then never want to look at this software again. how long does it take for it to become instinctual just to align text inside a freaking box in this thing. Im going to take a break and come back but hopefully not another 2 week break. good god.
Lol, Figma is the current market leader because is the easiest tool for designers. If you can't take the time to learn it, then it's time to switch careers.
I would like to pat you on the back, bro. You'll get there. Im having hiccups here and there too but experience will be your best teacher. Make mistakes and you'll find the best solution when in dire times
It's all the same person! Because we went into lockdown from the state government while in mid-production, I lost access to our recording space and equipment and had to record in a bedroom with a blanket over my head
Hello, I believe you want to edit an instance, which is a copy of a component. Check out our video tutorial on component: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-EoJolbaEQi8.html You can override an instance text, fill, stroke, and effect properties (Learn more here: help.figma.com/hc/en-us/articles/360039150733-Apply-overrides-to-instances). If you would like to make changes to the properties that aren't supported by overrides, you can detach the instance from the component (Learn more here: help.figma.com/hc/en-us/articles/360038665754-Detach-an-instance-from-the-component). Hope this is helpful!
I think there would be 2 solutions: 1. Selecting a frame inside which all the interesting you nested constrained objects are. Then press enter (this will make you select inner objects inside selected frame) and change constraints. Then press enter again and release again, etc. 2. There actually may be a plugin for that if you google well, since most of what I tried to find was solved using plugins already.
Hello Laura, that's by design (the view only mode). It's technically a master copy, so what you need to do is copy it, and paste it over to your own blank document, then you're good to go. select all (ctrl +a), copy. Then create a new blank file, then paste.
They do make some fantastic work and set the bar really high! We're currently testing a bunch of different production methods, so hopefully one of them gets close to what they're doing.
16 px/pt seems to be a standard / minimum choice for margin distance (i.e. padding). The gutter has to be bigger than the size of the margin because a gutter distance of 16px/pt will make the icons closer to each other when you resize the width of the bar to a shorter distance. It's just about the spacing between the objects, and I guess they chose 32 to make icons more evenly spaced from each other. It also just makes more sense mathematically because it's 16 | object | 16 + 16 | object | 16 + 16 | object | 16
Hi Lisa, you can click on the chevron next to the file name and select "Duplicate" from the dropdown menu to make a new copy in your Figma account. Hope that helps!
I think it's a screen recorded with something like Cleanshot, then you put it in After Effects and add animated custom mouse + all other motion elements.
