【Figma】何で必要？オートレイアウトの使い方、完全解説してみた。【チュートリアル付】

Figmaを愛用する人中では馴染みのある”オートレイアウト（Auto Layout）"。ただ、初心者の方にとっては「なんだ...この機能は...（意味ワカメ）」なのかなと思います。

というわけで！めちゃくちゃ尺を使って解説してみました！
Figmaを操作しながらオートレイアウトを理解できる動画です。多分これみてやれば、一般的に必要な項目は網羅できると思います！


❐ チュートリアル素材
-------------------------------------------
こちらをお使いください〜
※コピペして、手元のFigmaでお試し下さい

○ 題材1
https://www.figma.com/file/DJPtHGWBDiv7bUGlij8Rnl/Figma%3A%E8%B6%85%E8%A7%A3%E8%AA%AC%E3%80%8E%E3%82%AA%E3%83%BC%E3%83%88%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%80%8FAutoLayout?node-id=17%3A923

○ 題材2
https://www.figma.com/file/DJPtHGWBDiv7bUGlij8Rnl/Figma%3A%E8%B6%85%E8%A7%A3%E8%AA%AC%E3%80%8E%E3%82%AA%E3%83%BC%E3%83%88%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%80%8FAutoLayout?node-id=18%3A1540



❐ 目次
-------------------------------------------
00:00 目次と動画の説明
02:18 なぜオートレイアウト？いつ使うの？
07:02 コードでレイアウト組むってどんな感じ？
10:06 実装を意識したデータ、スピードも速い
11:39 使い方を解説します
13:33 オートレイアウト使ってみよう！
19:38 オートレイアウト使ってみよう②
26:06 さらに詳細を習得しよう！
26:56 Hug/Fill/Fixの違い
28:04 Fillを使ってデザインをしよう
32:17 お疲れ様でした！



❐ UIとUXのコミュニティ『BONO』
-------------------------------------------
デザイナーになりたい、デザインをもっと伸ばしたい。
成長速度は現場のプロに聞いて、仕事を見て学べば倍以上になります。し、同じ気持ちのメンバーと一緒に成長すればさらに上がります。

詳しくはこちら！参加お待ちしてます。
https://www.bo-no.design/


❐ カイクンについて?
-------------------------------------------
Webデザイン、UIデザインを経て、今ではスタートアップの立ち上げしたりしてます。
経営学部→独学でmixiデザイン部→NewsPicksでPdM×デザイナとしてAppリニューアル等→MOSH共同創業→Cocoda!,SHE,canal,Spir etc立ち上げなどなどやっておりました

#figma #オートレイアウト #autolayout