Name: 初心者のためのFigmaオートレイアウト・チュートリアル(2025) (Figma Auto Layout Tutorial for Beginners (2025))
Uploaded: 2025-09-23T06:37:40.000Z
Duration: 8 min 51 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

様態の副詞

Here's how to use Auto Layout in Figma Figma Auto Layout helps you automatically organize your designs It's a dream-come-true feature for all perfectionists Basically, every UI, UX, product, and growth designer I'm Aliana, and I help designers get into tech at FastTrackUX You're about to master Figma Auto Layout I'll use five circles to show you its magic Right now, their alignment is so messy, it's just like your closet Let's select all the elements you want to align You'll find the Auto Layout button on the right, next to Layout The shortcut is Shift-A Click it, and Figma will create a smart frame that adjusts automatically based on your settings For example, you can easily change the gap between all elements by dragging between any two elements This is awesome, and let's go over all the details The button you just clicked to add an Auto Layout can also be clicked again to remove it Once you remove the Auto Layout, you can move or adjust the elements individually And the smart alignment will no longer apply When you're on this Freeform setup, if the size of your frame doesn't perfectly fit the elements inside Click the button to the left of the Auto Layout button This will resize the frame to hug your content Now let's learn different ways to arrange these Auto Layout elements The first one is Freeform Freeform allows you to move each element freely, so it's almost like not using Auto Layout When you add an Auto Layout and click the same button again to remove it It automatically sets it to Freeform 2 The second one is Vertical Ta-da!

Figmaの自動レイアウトの使い方をご紹介します。Figmaの自動レイアウトは、デザインを自動的に整理してくれる、完璧主義者にとって夢のような機能です、ショートカットは Shift-A クリックすると、Figma は、設定に基づいて自動的に調整するスマートフレームを作成します、オートレイアウトを追加するためにクリックしたボタンは、削除するためにもう一度クリックすることもできます。 オートレイアウトを削除すると、要素を個別に移動または調整することができます、枠のサイズが中の要素にぴったり合わない場合は、オー

程度の副詞

This arranges your elements vertically The third one is Horizontal It arranges your elements horizontally The fourth one is Grid This is a new update still in beta It allows you to edit the layout in a grid format We'll go over each of these in detail Don't worry, by the end of this video, you'll understand how to use every single button here Let us start with the Freeform setting You'll see W and H right below this button W stands for Width and H stands for Height You can use these fields to adjust the size of your element You can type in a number, hover over the letter and drag to change it Or do it the most organic way Hover over the edge of the element and drag until you see a number you like I like multiples of 4 To the right, you'll see a square icon If you click it, it locks the aspect ratio of the element So the width and height stay proportional Let's say you are redesigning a YouTube thumbnail A YouTube thumbnail has a specific aspect ratio So locking it can prevent your cat, your kid, and mostly you from messing it up One very, very important thing Make sure you select the right layer In a real design project, you'll have so many layers So if you want to lock the aspect ratio of this circle, let's say Make sure to select the circle, not the frame That way, your circle will stay perfectly as a circle Not too fat, not too short Below Width, you'll find a field to adjust the gap between elements This only appears in freeform mode when your elements share the same gap At the bottom, you'll see the clip content checkbox This is super helpful when your frame is smaller than the elements inside For example, in a carousel design Checking clip content will hide the parts of the elements that extend outside the frame Alright, next let's move on to vertical and horizontal layouts These two are really similar So let's take a look at the horizontal one When you select a horizontal layout A wrap icon will appear on the right If you click it, the elements inside the frame will automatically wrap into multiple rows Perfect for when there's not enough space in a single line Below that, you'll see width and height settings Each with a drop-down If you click the drop-down, you can set the size to hug This makes the frame automatically adjust to fit its contents For example, if you add a new circle to the frame The width will automatically expand to hug the new element You can also set minimum or maximum values for width and height Let's say you don't want the frame to be wider than 750 pixels Just set the max width to 750 And even if you add more elements, the frame won't go beyond that limit Right below width, you'll see nine alignment options for your elements inside the frame These let you align your content to the top, center, bottom, left, right Basically any corner or edge you want You might not notice much difference right now if your frame is hugging the elements But once the frame is bigger, this alignment will become very obvious Next is the gap setting Click the drop-down and you'll see an option to set it to auto This automatically adjusts the space between elements to fill the frame evenly So satisfying to see everything snap into place Below that are your padding settings Padding is the space between the edge of the frame and the element inside it By default, padding is applied equally on parallel sides But if you click the little toggle next to it, you can customize the padding for each side Just like this Next, let's move to grid A brand new and still in beta feature in Figma Alright, I have a love-hate relationship with this, okay?

これは要素を縦に並べます。3つ目はHorizontal（横）です。これは要素を横に並べます。4つ目はGrid（グリッド）です。これはまだベータ版の新しいアップデートで、グリッド形式でレイアウトを編集できます、このボタンのすぐ下に、WとHがあります。 Wは幅、Hは高さを表します、YouTubeのサムネイルをデザインし直すとしましょう。YouTubeのサムネイルは特定の縦横比を持っています、フレームではなく、円を選択してください。そうすれば、円は円として完璧に保たれます。太すぎず、短すぎず。 幅の下には、要素

転換語

Because it was released literally one day after I finished editing my last auto layout tutorial So now here I am redoing everything all over again and throwing my last edit to trash But hey, it's a powerful feature With grid, you can snap your elements into a clean grid layout You can also set your elements to span multiple rows or columns Think about designing bento boxes on a website But I still don't like bento box, bleh You can also manually adjust the width and height of each row or column Like this On the right panel, you'll find controls to set up as many rows and columns as you want Just click this big grid thingy And with the grid layout, you can also select the element's unit And set their width and height to fill container I love this setting Now, whenever you change the gap size or resize the frame All the elements will adjust automatically to fill in those grids So satisfying There is one more button The auto layout settings button on the right Click this opens more controls Let's try an example by adding a thick stroke to these circles By default, the stroke will go outside the frame If you change the dropdown to include the stroke in the layout The strokes will stay inside the frame So this is what it does I actually haven't had a chance to use this Now, let us set the gap between elements to a negative number Think about Instagram like where the profile pictures overlap You can use the dropdown here to switch between Whether you want the first or last element to show on top Just one more setting left For this one, let's add an icon and some text If you use auto layout, they'll align automatically And if you make the text bigger, the layout will adjust like this But if you turn on align text baseline The icon will align with the baseline of the text No matter how big or small the text gets However, this doesn't work well with icons that have padding inside Which is like all of the icons I use So I don't know how to use this Now let's talk about using auto layout in a real-world scenario This is really really important So pay attention Take this YouTube card element as an example How would you fix this layout using auto layout?

前回の自動レイアウトのチュートリアルを編集し終えた文字通り1日後にリリースされたので、今ここでもう一度すべてをやり直し、前回の編集をゴミ箱に捨てているところです、グリッドレイアウトでは、要素の単位を選択して、コンテナを埋める幅と高さを設定することもできる、デフォルトでは、ストロークは枠外に出ますが、ドロップダウンを変更してレイアウトにストロークを含めると、ストロークは枠内に収まります、テキストを大きくすると、このようにレイアウトが調整されます。しかし、テキストのベースラインを揃えるをオンにすると、テキスト

The answer is that you will need multiple layers of auto layout If you just select everything and click the auto layout button And hope that Figma will make it right for you It probably will mess things up So instead, you need to add an auto layout At least one auto layout between the title and subtext This keeps the gap consistent Even if the title spans into three lines or becomes one line You'll also need auto layout for the timestamp Because the timestamp can get longer or shorter And while this next part isn't part of this tutorial You will also want to add a bottom right constraint to the timestamp Because you want it to align to the right bottom And for the larger section that stacked multiple cards You also need another layer of auto layout to keep the spacing between each card So basically you need many many layers of auto layouts And trust me, it is worth it Now you've learned so much about auto layout I am so proud of you But before you go, let's talk about best practices Auto layout is amazing when you are confident about your final design It works great for high-fidelity designs like detailed mockups However, if you are still at the early stage of your project It might not be the best tool Because it can make small adjustments harder You may end up ungrouping things over and over again Just to make one small change One last thing Auto layout works really well with components Especially for repetitive elements But that's a lesson for another day You've learned a lot already If you learned something today Hit subscribe and turn on all notifications If you want to transition your career this year And become a designer in tech Check out my program FastTrackUX I'm Aliana This is part of my Figma tutorial playlist Thank you for watching And I will see you in this video That's a jam This is a jam And that's also a jam Alright, bye

すべてを選択してオートレイアウトボタンをクリックし、Figmaが正しくレイアウトしてくれることを望むだけでは、おそらく台無しになってしまうでしょう、タイトルとサブテキストの間に、少なくとも1つの自動レイアウトを追加する必要があります。これにより、タイトルが3行にまたがったり、1行になったりしても、ギャップが一定に保たれます。タイムスタンプにも自動レイアウトが必要です。タイムスタンプを右下に揃えたいので、タイムスタンプに右下制約を追加します、しかし、その前に、オートレイアウトは、最終的なデザインに自信がある