MENU

Fun & Interesting

Figmaオートレイアウトの使い方を15分で学ぼう(2023年版)

Mayuko Soga 18,650 lượt xem 1 year ago
Video Not Working? Fix It Now

時間と場所にとらわれない「クリエイティブで自分らしい働き方」を手に入れませんか?

クオリティの高いWebデザインスキルを軸に、フリーランスとして安定的に稼ぐためのスキルを学ぶ、6ヶ月間のオールインワンプログラムはこちらから。プロのデザイナーから直接フィードバックやを受けたりコーチングを受けながら、最短で実力派フリーランスWebデザイナーになることを目指します。

◽️◽️◽️◽️◽️◽️
Figmaオートレイアウトの使い方を15分で学ぼう(2023年版)

みなさんはFigmaのオートレイアウトを使っていますでしょうか?
プロのデザインを簡単に早く仕上げるには今、オートレイアウトが必須の機能になります。
今回の動画ではオートレイアウトとは?なぜオートレイアウトが必要なのか?どうやってオートレイアウトを使うのかの基礎を学べます。
この動画の中で、ボタンの作り方やレスポンシブに対応させたカードを作ります。
最短でオートレイアウトの基本を身につけたければ、ぜひ手を動かしながらこの動画を見てみてください。

◽️もくじ

00:00 - イントロダクション
00:26 - Figmaオートレイアウトとは何か?
01:20 - なぜFigmaのオートレイアウトが必要なのか?
03:05 - Figmaオートレイアウトのショートカット
04:22 - Figmaオートレイアウトの解除
04:51 - ボタンをオートレイアウトで作る:揃え(中央寄せ・右寄せ・左寄せ・上寄せ・下寄せ)
05:30 - ボタン:アイテムの方向(縦・横)
05:45 - ボタン:アイテム間の間隔
06:12 - パディング(上下・左右・個別)
07:03 - レスポンシブなカードをオートレイアウトで作る
08:05 - 詳細なレイアウト/キャンバススタッキング
09:03 - 詳細なレイアウト/間隔設定モード/間隔を空けて配置
09:41 - 詳細なレイアウト/テキストのベースライン揃え
10:19 - オートレイアウトをレスポンシブに対応させる
14:11 - 絶対位置にアイテムを配置
14:48 - 終わりに


◽️Figma素材
https://www.figma.com/community/file/1208893106652767526

◽️Webflowを無料で使ってみましょう
https://webflow.grsm.io/mayukosoga7488

◽️◽️◽️◽️◽️◽️


💻 フリーランスWebデザイナーになるためのロードマップを無料ダウンロード。
https://designup-academy.com/roadmap/

💻 Figmaのショートカット表を限定公開中。今すぐ無料ダウンロード↓
https://designup-academy.com/figma-shortcut/


◽️◽️◽️◽️◽️◽️

使用ツール一覧:
https://designup-academy.com/tools/

ニュースレター登録:
https://designup-academy.com/newsletter/

Instagram:
https://www.instagram.com/mayuko_design/

👉 About Mayuko | フリーランスデザイナー(Branding/Web/UI/UX)
時間と場所にとらわれない「クリエイティブで自分らしい働き方」を手に入れたい人たちをサポートしています✨
🇺🇸 NYで7年+のデザイナー歴
🌎 世界中のクライアントとフルリモートでお仕事中
🎓 Udemy受講生330名+


*いくつかのURLにはアフィリエイトリンクが入っています。有益な無料コンテンツを作成し続けるためにサポートをよろしくお願いします。


#Figma
#Figmaとは
#Figma日本語
#Figmawebデザイン
#Figma使い方
#AutoLayout
#オートレイアウト
#Figma初心者
#レスポンシブ
#ボタン

Comment