【20分マスター講座】Figmaオートレイアウト機能！

[@user-ye6dy4zw8b]

webスクールのfigma動画の説明より分かりやすい... 今ちょうどオートレイアウト勉強してるので助かります！

[@hirocode]

そう言っていただけて嬉しいです😆❗️ありがとうございます🙇

[@teddymouse1217]

今まで見た動画の中で、一番実践向きで勉強になります！

[@hirocode]

そう言っていただけて嬉しすぎます😭❗️ありがとうございます🙇

[@user-tx9re5mg2x]

以前、僕のコメントの返信から推測するに、この使い方を聞いた者です。こういう応用編はタメになります、僕は初心者なので、まだ固定と可変、コンテナに応じた拡大を、場面場面で判断するのはできません。しかし、こういう例を挙げて頂いたおかげで、理解が進んだと思います。まだまだXDから乗り換えて間もなく、実践力に乏しいのですが、ひろさんの動画で春までにはFigmaマスターに慣れるよう精進します！

[@hirocode]

嬉しいコメントいただきありがとうございます😭❗️ Figma使いこなせるよう応援してます😆❗️

[@坂口悠太]

わかりやすくて助かっております！コンポーネント動画も楽しみにしております！

[@motachino]

急遽サイトデザインをすることになり、慌ててやり方を調べたところこの動画に辿り着きました。 figma様々で、素人でもそこそこの完成度でやり切ることができました。 作業を効率的に行えたのはHIROさんの紹介している複数のfigmaの使い方動画のおかげです。ありがとうございます！ コンポーネントについての動画もお待ちしてます！ （既にある程度自分で調べて使ってしまってはいますが！）

[@motachino]

ひとつ質問なのですが、グループ化するとき「cmd+G」と「cmd+opt+G」を使い分けられてた気がするのですが、どういった違いがあるのでしょう？

[@motachino]

「フレーム化」と「グループ化」の違いですね！ 自己解決しましたm(__)m

[@hirocode]

すごいですね🤯❗️参考にしていただけて僕としても嬉しいです😆❗️

[@ゆずのたね]

ありがとうございます。

[@hirocode]

こちらこそありがとうございます🙇❗️

[@アカウント-p5f]

オートレイアウトとは関係がないのですが、ヒロさんの動画をみていてこれいいな！って思ったフォントがあって調べたら、２つ同じようなものが出てきました。 MOBOとA1ゴシックです。どちらを使われていますか？もし、どちらとも使われているのであれば、どっちの方がよく使いますか？

[@hirocode]

コメントありがとうございます😆❗️ おっしゃる通りその2つのフォントは似ているで有名で、A1ゴシックは有料フォントMOBOは無料フォントです！ 僕は無料のMOBOを使ってます😊❗️

[@アカウント-p5f]

@@hirocode わかりました！ありがとうございます。

[@user___6907]

figmaを勉強し始めたばかりでして、いつもわかりやすい動画に助けられております！ ひとつお聞きしたいことがありまして、figmaで「吊り下げインデント」的なのってできるのでしょうか…？ 注釈などで文頭の※以降の行を段下げしたいのですがやり方がわからず… もしご存知でしたら教えていただけますと幸いです…！

[@hirocode]

ありがとうございます☺️♪ デフォルトの機能だとありません😢 それを作る場合は、※ と テキスト、2つのテキストレイヤーを用意して、この2つをオートレイアウトを適用したフレームで囲めば組めます❗️

[@user___6907]

@@hirocode 今度試してみます、ありがとうございます！😭

[@mimi-uy7bv]

いつもためになる動画をありがとうございます…！私はweb制作を学んでる者で、お聞きしたいのですが(この動画に関係なくてすみません💦)作るスキルを身につけたあと、ポートフォリオがあっても実績がないとなかなかお仕事もらいにくいのかなっておもうので、もし可能でしたら仕事の取り方のコツとかありましたら解説動画をリクエスト致します🙇 私はまず副業で仕事を請けたいと思っています。

[@hirocode]

コメントありがとうございます☺️❗️ その辺動画にできそうか検討してみます😆❗️

[@mimi-uy7bv]

@@hirocode ご検討ありがとうございます。これらも楽しみに拝見します！

[@To-ne6qe]

お聞きしたいです。ratiosを開き同じように設定しても比率が保たれないのですがなぜでしょうか？自分なりに調べても分からず教えて欲しいです

[@hirocode]

コメントありがとうございます☺️♪ ratiosで横幅と比率を入力した後、「Create ratio」ボタンをクリックするとフレームが作成されると思います。このフレームが比率固定になっているので確認してみてください！で、フレームに背景画像などを設定して使用する形です😆❗️

[@ペイ-v2y]

質問なのですが、コンストレインツという項目がないのですがどうすれば出てきますか？

[@hirocode]

今は、「制約」という言葉になっていて、フレーム内のオブジェクト選択すれば右サイドバーに表示されます❗️

[@ペイ-v2y]

制約もないんです。デザインの方にもプロトタイプの方にもありません。無料版だからでしょうか？

[@hirocode]

もしかして新しいUIにアップデートされてたら、よりわかりにくいかもです🤔 まずフレーム内に四角を配置して、左サイドバーのレイヤーパネルが下記のようにネストしている状態か確認します。 ＃frame 　▫️rectangle rectangleレイヤーを選択して、右サイドバーの「位置」項目の右側に + マークのようなアイコンがあるのでそれが制約です！

[@ペイ-v2y]

見つかりました! ありがとうございます!

[@まさちのかすみ]

すみません、Reactでのcssの当て方について質問させていただきたいです！ cssモジュールが素のcssぽくて好きなのですが将来廃止予定らしいのです 今学習中の教材でchakraUIを学びましたがソースコードがごちゃごちゃするし謎のキーワードばかりで最新cssを駆使したヒロさん風cssが当てられる気配がしません、、tailwindは自由度の点ではまだましですが似た理由で嫌いです 今の所styled-componentsが一番ましなのかなと思ってますがヒロコードさんはReactでcssをどのようにあてていますか？

[@hirocode]

すみません、Reactやってたの2年前くらいなので今のReactについていけてません😭💦 ただ、僕的にも概念や保守性考えるとstyled-componentsが理想的っぽいように思ってます！