【Figma】何で必要？オートレイアウトの使い方、完全解説してみた。【チュートリアル付】
Figmaを愛用する人中では馴染みのある”オートレイアウト（Auto Layout）"。ただ、初心者の方にとっては「なんだ...この機能は...（意味ワカメ）」なのかなと思います。
というわけで！めちゃくちゃ尺を使って解説してみました！
Figmaを操作しながらオートレイアウトを理解できる動画です。多分これみてやれば、一般的に必要な項目は網羅できると思います！
❐ チュートリアル素材
-------------------------------------------
こちらをお使いください〜
※コピペして、手元のFigmaでお試し下さい
○ 題材1
www.figma.com/file/DJPtHGWBDi...
○ 題材2
www.figma.com/file/DJPtHGWBDi...
❐ 目次
-------------------------------------------
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』
-------------------------------------------
デザイナーになりたい、デザインをもっと伸ばしたい。
成長速度は現場のプロに聞いて、仕事を見て学べば倍以上になります。し、同じ気持ちのメンバーと一緒に成長すればさらに上がります。
詳しくはこちら！参加お待ちしてます。
www.bo-no.design/
❐ カイクンについて👋
-------------------------------------------
Webデザイン、UIデザインを経て、今ではスタートアップの立ち上げしたりしてます。
経営学部→独学でmixiデザイン部→NewsPicksでPdM×デザイナとしてAppリニューアル等→MOSH共同創業→Cocoda!,SHE,canal,Spir etc立ち上げなどなどやっておりました
#figma #オートレイアウト #autolayout
Пікірлер: 22
他のサイトをみながらオートレイアウト機能使ってみたんですが、細かい部分をわからないまま使うと思ったように機能しなくて苦手意識がありました。提供していただいた素材を使って画面と同じように操作することで、使い方がようやく理解できました！ 解説とてもわかりやすかったです◎Figmaまだ使い始めたばっかりですが、チャンネル登録したので引き続き楽しみにしています！
めちゃくちゃめちゃくちゃ分かりやすくて大変勉強になりました。 動画を見ながら再現してみましたが、チュートリアル通りに機能すると嬉しいし楽しいですね。これからも動画待ってます！
@-bono2271
Жыл бұрын
あざす！
Figmaのオートレイアウト機能、とってもわかりやすく解説してくださりありがとうございます！実際に再現もしやすく助かりました。現在Figmaを使用し仕事しているので、とてもありがたいです。また拝見させていただきますね。
@-bono2271
Жыл бұрын
ありがとうございます〜！
新しい職場でfigmaを使用することになり、まさしくワケワカメ状態で滅入っていたので解説ありがとうございます！！ 全部オートレイアウトガチガチで作成されている方が多く、ついていけるか不安でした… 最低限やったほうが良いこと、理解していたほうが良いことなど把握できて何とかやっていけそうな気がしてきました🎉 ありがとうございます！
@-bono2271
Жыл бұрын
この動画出す時は「初心者でもまあオートレイアウトとかコンポーネントとか知らんでもなんとかなるやろ〜」と思ってたんですが、23年現在だとガチガチに組まれてたりしますよね... ちょっとまとまったFigma講座の動画でも出そうかとふんわり思っていたりしてます..
udemyで購入した講座よりも断然分かりやすかったです> < !スーパー初心者からしたら本当にありがたい動画、、、ありがとうございます！
@-bono2271
Жыл бұрын
そうでしょ！← というのは冗談ですが、Figmaの動画いっぱい出したいのでもし気になることあればコメントで教えてくださいね〜！
操作に不慣れで間違えてFigma のリクエスト押してしまいました🙇💦 動画丁寧で助かりました！！
@-bono2271
11 ай бұрын
ありがとうございます〜👍
カイくん、すっっっごいわかりやすい説明で感動しました！！ ちょうどトレースしたHPデザインを "Figma to STUDIO"で無知識でトライして、ひどい画面崩れを目の当たりにし、絶望していたところでした。 このオートレイアウトを味方につけることで、実装までできるように頑張ります！
@-bono2271
2 ай бұрын
たしかにSTUDIOがFigma対応したのでAutoLayoutで組めると楽だと思います！ 最初はマジでめんどくさいなと思うんですが、やってると普通になるのでファイトです！
ハグって何？？ってところからAutoLayoutからまなばさせていただきました。動画もお話しもとてもわかりやすく理解しやすかったです！チャンネル登録させていただきましたのでまた見させていただきます。前任者からのFigmaデータと格闘していたのですがおかげでちゃんと”作り直す💦”モチベーション湧きました。笑
@-bono2271
Жыл бұрын
前任者から！それは大変です！ファイトです！
わかりやすい❗️ありがとうございました❗️ なぜ必要かから学べてめちゃくちゃ参考になりました🎉 質問です✋ フレームの中に一回り小さいフレームを作ってオートレイアウトをかけたら、中の小さいオートレイアウトの制約パネルが出でこなくなりました。 オートレイアウトをかける時に制約が表示されたり、されなかったりするのはなぜですか？
@-bono2271
Жыл бұрын
ちょ〜とFigmaファイル見ないと原因がわからんです！ 基本的にはAutoLayoutが掛かってるFrameに制約はない気がします...! よかったりリンク貼ってください〜（Figmaの便利なとこ
こんにちは。初めてコメントします。オートレイアウトはとても便利な機能ですね。いろいろと詳しく教えて頂きありがとうございました😊 さて、質問ですが、オートレイアウトの中の要素を増やすやり方を教えてください。ショートカットキーがあれば合わせてお願いします。
@-bono2271
3 ай бұрын
>オートレイアウトの中の要素を増やすやり方 動画に押してるキーが出てると思うのでそれ見てみてください！ 何を指しているかあんまりわからないのですが、おそらく単純にコピペしてるだけな気もします
@user-vx4md3lm2u
3 ай бұрын
@@-bono2271ありがとうございました♪コピペで出来ました！
Fix Hug Fillの３つですが日本語版のせいかハグと固定幅しかないです。Fillにあたるものがみあたらないです。
@-bono2271
Жыл бұрын
それはFill（満たす）する”箱”の中にAutolayoutで構造化されてないのが原因だと思います〜！ Fillを理解すると”満たす箱”がないと機能しないので、Fillは表示されません〜。 日本語の問題ではないと思います。