Office hours: Auto layout
HTML-код
- Опубликовано: 7 авг 2024
- Updates to Auto Layout are here! Join the Designer Advocates to hear how the features works, learn best practices, and get your questions answered
0:00 Introduction
0:35 What is Auto Layout?
4:50 Into the File
7:48 Resizing
12:45 Distribution
16:57 Padding
22:38 Alignment
26:18 Putting it all together
43:30 Q&A
#Figma #FigmaIn5 #AutoLayout #FigmaTips
The examples used for this stream can be found in the Auto Layout Playground File. Duplicate it here: www.figma.com/community/file/... 
Наука
Unbelievable support from the Figma team. INCREDIBLE WORK!
Congrats on the work so far! Incredible what you did so far.
I've tested the new auto layout a lot on these days and it's a life-changer
That's the video I've been waiting for since the new auto layout release came out.
Cool! Love these new features! Really help on speed up the development process.
Thanks so much guys, loved AutoLayout before, now it's just ridiculously good. Many thanks
wow what a great tips and especially selecting columns in a row individually, that was what I really need
The passion you guys bring to the team and the product is contagiously inspiring lol
great work guys. really enjoy your software and your videos ;-)
37:59 you can also choose a device for prototype and you don't need to isolate scrolling content. Also you can add a constraint to bottom navigation and make the frame longer, this way it'll work in prototypes accurately and you'll be able to see the actual design in the editor.
Oh, and by the way, thank you a ton for this incredible video, it is super helpful!
Game changing feature!!! Thanks to the team!
Awesome new features!
11:45 AL Conflict/ At least define one direction
19:30 24:10 Independent Padding hack
29:40 Select AL Colum
38:40 AL Example
46:40 AL different size icon
53:50 AL Auto animation
Why show «Mixed» for padding instead of real values? Why do I need to click to see what I typed 1 second ago?
Thank you for all of these tutorials. I'm a huge fan of auto layout. One thing I'm trying to grasp is what are the rules for when constraints show up and when they are disabled. I see in the source file you provided, there is auto layout + constraints. Sometimes once I apply auto layout my constraint options disappear and I'm just trying to figure out how to design something like your Mewstagram from the ground up.
It would be amazing if you could have further control of how content takes up the space by assigning 'fr' units (css-grid). Example: I have 3 elements. I want element-1 to take 2fr and the other elements to take up 1fr. Currently, the only optiion is for all the elements to take up the remaining space evenly. Framer does this beautifully with their 'stack' layout tool.
Thanks glad to see. This is flexbox in figma replicated 100/100 🌋
So fast , it's hard to keep up with the speed of thought and execution from a student point of view. Right when I'm trying to see whats going on in the layers I'm left in the dust. Lol. Just some user feedback . I'll definitely keep watching til it clicks though, I'm really enjoying the learning content. Thanks guys!
I really hope the next feature Figma adds will help with rearranging elements when designing responsive websites.. Things like rearrange vertically instead of horizontally once certain min width constraints are reached, things like that. The current version of autolayout is nearly there though
yeah I d love to see that too. Add flex-child-wrap and we are all happy :D
New Auto Layout is great. But really miss the fact that there is no visual difference between a regular frame and an auto layout frame. That visual cue was really helpful in "approaching" the frame, knowing how it would respond when e.g. copy/pasting.stuff in it. Now I have to check the layer panel or design panel first. Overall it would be great if there were more visual cues on the canvas like with constraint where you can see if they are set correctly just by inspecting a layer. Just more efficient.
Thanks for the feedback, Buddy! The team has also seen this feedback come up at other times and like always, will take it into consideration as we continue to invest in making Auto Layout better!
@@Figma I just found out, when you're in Inspect tab, and hovered around the margins, it will show all it's side margins.
Tbh I'm not gonna be even mad if those slanted pattern margins guide will show on the Canvas too, without going first in the Inspect tab when we're
1. Resizing an Auto Layout frame by the new Margins popup
2. Resizing an Auto Layout frame by its sides, show the current Auto Layout frame being resized, and if it's inside a Parent and a stack, show those guides too.
3. When we're dragging an object inside a Parent Auto Layout frame, show the margins for a few seconds.
4. When we're pressing Alt around each Auto Layout frame below it's cursor.
Literally the function is already there on the Inspect tab. You guys just need to integrate it to the Canvas too, without going first on the Inspect tab. This measuring tool will be useful for us Designers too, not just devs.
Add a toggle to disable margin guides too on the quick settings drop-down when we click the Zoom percentage.
Such a great team
Perfect 👍
Thank u for this!
Nice 💫
Agreed that hugging cat piles is the best new feature of Figma. Can't find where to get said cat pile in the current UI though.
very helpful!
Such a lit feature ❤️🔥
This is the way!
I just did responsive calendar with this update.. haha insane
great video
This update of auto-Layout is awesome ! 😍 I have already made a tutorial video on this with what I tested 😊
Hi, I recently tested auto layout on a grid with 12 column. There are 2 frames, one of them placed on 8 columns, the other one is a sidepanel and it was placed on the rest 4 columns. I want both panel can adjust their own width when I resize the grid. I tried auto layout honrizontal with spacing between those 2 panels at 24 px. And set fill container on both panels. but both panel became same width and each of them scaled to 6 columns width. If I drag the sidepanel to 4 columns, then it became fixed width automatically. How can I make 2
I've taken one of the cards and replicated it what seems to be perfectly but nothing inside is responsive (like when I make it smaller the text doesn't change or leave the box) any reason this happens?
Hello,
How you color inside the icon do you use some plugin and can you tell me best Plugin in Figma?
hey guys, i'm just wondering if its possible to make a fully interactive graph on Figma for its users, what i'm wanting to achieve is a bar graph with 4-6 different data fields that when a user clicks a button it adds the data to the graph within the application, cheers
It's a huge lifesaver
Could you guys release a new tutorial for Auto layout, I'm still finding it really buggy.
How do you get the header row to align with the table columns, I can't seem to be able to do it.
i love this new autolayout.. this is so amazing !!! one question.. is it possible to keep the aspect ratio for an image in a card by using autolayout? thanks ..
Not in this iteration of Auto Layout, though it's a feature request the team is aware of!
@@Figma nice♥️
Is there a plan to have a grid Auto Layout? Meaning if we have elements both vertically and horizontally and we want one Auto Layout?
this video is holy
Hugs. I miss them.
From what I can tell the Ctrl Alt Column select works the same as just using Ctrl?
ye i think so.
How do I create the type of buttons shown at @8:24?
Buttons with one of the edges with a stylized outline stroke?
edit : One way I can figure out is by stacking a rectangle over a line. Is there a more graceful way?
Okay I figured it out. It is a drop shadow wih 0 blur and 100 opacity. :D
You guys are speaking so speed.
The way I understand it, Auto Layout is similar to CSS Flexbox?
Yes dear sirs.
what's the solution when your using auto layout for mobile responsive and desktop website breakpoints
Figma is awesome
I feel like the whole auto-layout nesting process is incredibly complex, I would not recommend auto-layout unless you know what you are doing. It actually adds for stress than speed.
Agree, only add more complexity and confusion.
The size of the Figma UI itself it too small to see what is being clicked on and the values they have. Can they please increase the size of the Figma UI so that we can see what is being done to achieve the result?
52:10 HOW to make with autolayout that navigation with underlining?! :(
Adding negative margin would be great
Hello figma... hope you can answer each one
1. Is there a way that allows visitors download an image?
2. Is there a print option I can use for visitors to print an image?
3. Is there a plugin that allows people to color or paint on one image after its been selected?
Thanks for your time
Just google it
@@akmalmaulana7704 Excuse me, I have searched on google before I come here to ask Figma... and I not find any answers to what I am looking for on Figma...
I want to allow my visitors to download, save or print an image when they come to my website/app
Would you know anything about that?
@Adrian Lehr actually on figma you can add a url link to the image... I had a link which is a direct download file and when I test the figma app, it worked (the link and direct download by clicking on image)
But right now I have tested it on the bravo studio app... but the when I click on image the link not open...
That is something I am trying to fix now :)
started using Figma a few months ago...haven't used anything else since...don't wanna use anything else
18:06 why not just use a space instead of a comma to separate the values for padding? much easier to reach compared with a comma?
because that's how the padding is written in CSS, using comma
Why didn't you guys name "Space Between" as just "Spaced" ?
"Space between" takes inspiration from flexbox's space-between value. Hope this clears things up!
@@Figma Yes, and thank you for the quick reply! 💖 Figma!
in the future will auto layout support CSS Grid
Figma #1
Sorry but little confusing with the new one, old one was easier I think. The naming i.e. Hug Content sound little weird. I will appreciate if there will be a simple video explaining these properties on child first and then parents seperately :)
Fascinating，wanna uninstall adobe XD now！😍
btw you just create fantastic updates, but there one small thing in the UI of figma that is very annoying and needs just a bit of you attention. Please allow vertical scrolling in layers panel!! This so simple, and so painful right now without it. Extending the layers panel all the time to see the layers structure is so nerve consuming. you can solve this in a blink
Hey Mirko, the layers panel does have vertical scrolling. If you're having an issue with this, try contacting us at support@figma.com and we can see if you've found a bug!
I just look this because want to hug the girl :D
For someone who does not speak native English it is hard to follow. The mouse cursor is constantly moving hectically through the image, the speech is too fast. And then many sentences are only half pronounced and also put forward differently. Sorry, this is too exhausting
Don’t understand this, you’re not showing us how to create these step by step, your only showing us whats already made and how it works.
Hey Beretta, Andrew from Figma's Product Education team here (we create the step-by-step tutorials for the channel). We have some plans to create a number of Auto Layout video tutorials. If you have any specific examples from this video that you found confusing and could benefit from a tutorial, let me know and I'll see if we can fit it into the videos we're planning!
It's clearly not meant to be a step-by-step tutorial but a deep dive into the new features
@@Figma Thanks Andrew. I agree with both comments here and understand it's more of for people familiar with older versions of AL. That said, I'm like Bretta, also pretty new and find a lot of this impossible to jump in on. So if you create the new tutorials or a video of this length for people new to auto layout that would be awesome. A big challenge that I have is that a lot of stuff where I can learn the basics is oriented around the older versions so bridging the gap is really confusing and seemingly impossible sometimes. So please please please do make them it would be a lifesaver. Maybe you can design some kind of training version on your end that you can edit and make minor adjustments to with the future versions of your product. But I hope I explained the problem.
Its fast talk conversation between pros and not intended for students or new bees to catch up smh
Hey Ishamel, thanks for the feedback! And you're totally right, but luckily we have an entire playlist of Auto Layout tutorials which includes several videos we made specifically for beginners, where we take you step-by-step to create a variety of components. We have more plans to continue adding to this playlist in the future. You can watch all of those videos here ruclips.net/p/PLXDU_eVOJTx55HFubfbTL3ellJjBM2QE2
i appreciate your tutorials but sometimes you're just going too fast.
Terrible audio in this video make it unwatchable.
Do you like soy?
this whole video is useless if your not showing how to make the app live in app store. Nobody cares about designing. News flash, in Prison they are teaching this.