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

‍

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

‍

‍