Figmaの使い方 ｢完全攻略｣ 基本編を分かりやすく解説！【2023年最新版】
Summary
TLDRこの動画は、日本語版Figmaの使い方について解説しています。基本操作から便利な機能まで、初心者から上級者まで対象とした完全攻略です。Figmaのアカウント作成、画面構成、ツールバーの使い方、レイアウト機能、コンポーネント、マスク、スタイル、画像の書き出し、プロトタイプ機能などを紹介しています。特に、オートレイアウト機能を利用したレスポンシブデザインの作り方や、コンポーネント機能を使った効率的なデザイン管理方法が解説されています。
Takeaways
- 🌟 Figmaはブラウザ上でデザイン制作やプロトタイプ作成ができるWebデザインに特化したツールです。
- 🆓 無料プランでも十分に使いこなせる内容があり、チームでデザインファイルを共有するチームモードもあります。
- 📐 Figmaの画面構成は、ツールバー、キャンバスエリア、レイヤーパネル、プロパティパネルで成り立っています。
- 🖼️ 画像のトリミングや補正機能を使って、露出やコントラスト、彩度を調整することができます。
- 🔲 フレームツールを使って、デザイン作業エリアを設定し、様々なデバイスサイズのフレームを利用できます。
- 🎨 形状を自由に作成できるシェイプツールや、ベクターデータで曲線の線を引くペンツールが提供されています。
- 📝 テキストツールを使って、テキストエリアを作り、文字を入力することでデザインにテキストを追加できます。
- 🔗 コンポーネント機能を使って、デザインパーツをテンプレート化し、修正が反映される便利機能を利用できます。
- 🎭 マスク機能を使って、別のオブジェクトの形で画像などを一時的に切り抜くことができます。
- 🎨 スタイル機能を使って、色やテキストエフェクトを統一し、デザインの整合性を保つことができます。
- 🔄 プロトタイプ機能を使って、複数ページのデザインを用意し、実際のウェブサイトのように閲覧できる画面を作成できます。
Q & A
Figmaの大きな特徴は何ですか？
-Figmaの大きな特徴は、ブラウザ上でデザイン制作やプロトタイプ作成、デザインファイルの共有ができることです。また、無料で使える範囲が広く、Adobe XDと同等かそれ以上の使いやすさがあるとされています。
Figmaでデザインファイルを作成するにはどうすればいいですか？
-Figmaでデザインファイルを作成するには、まずFigmaの公式サイトからアカウントを作成し、ログイン後、画面の左上の「+」ボタンを押して新しいファイルを作成します。
Figmaの画面構成はどのようになっていますか？
-Figmaの画面構成は、左側にツールバー、真ん中にデザイン作業を行うキャンバスエリア、左側にレイヤーパネル、右側にプロパティパネルが配置されています。
Figmaのフレームツールはどのような機能を提供しますか？
-フレームツールは、デザイン作業エリアを定義するフレームを作成することができます。また、複数のアイディアをグループ化して、レイアウト機能を活用することもできます。
Figmaのオートレイアウト機能とは何ですか？
-オートレイアウト機能は、グループ化されたオブジェクトのサイズや位置を自動的に調整する機能です。これにより、レスポンシブデザインに便利なパーツを作成することができます。
Figmaのコンポーネント機能は何のために使われますか？
-コンポーネント機能は、デザインパーツをテンプレート化し、そのパーツをコピーして使うことで、元のパーツを修正すると、コピーしたパーツにもその修正が反映される機能です。これにより、同じデザインパーツを繰り返し使う際に効率的です。
Figmaでスタイルを定義することの利点は何ですか？
-スタイルを定義することで、サイト内の色やテキストエフェクトを統一することができます。これにより、デザインの見た目を一貫性を持って管理することができ、効率的にデザインを更新や変更することができます。
Figmaで画像を書き出す方法はどのようなものですか？
-画像を書き出すには、エクスポートパネルを使用します。選択したオブジェクトをエクスポートパネルにドラッグして、フォーマットや設定を選んでエクスポートボタンを押すと、画像が書き出されます。
Figmaのプロトタイプ機能はどのように使う的呢？
-プロトタイプ機能を使うと、複数ページのデザインを用意して、実際のウェブサイトのように閲覧できる画面を作成できます。ページ間の遷移やアニメーションを設定し、プレゼンテーションを実行することで、ユーザーがサイトをどのように使うかをシミュレーションできます。
Figmaでマスク機能を使うと何ができますか？
-マスク機能を使うと、別のオブジェクトの形で画像やテキストを一時的に切り抜くことができます。これにより、特定の形状に合わせてデザインを調整することができ、クリエイティブな表現が可能になります。
Outlines
🎨 Figmaの基本操作と機能紹介
Figmaの使い方を解説し、基本操作から便利な機能まで紹介します。日本語版Figmaの使い方、アカウント作成、画面遷移設定、レイアウト機能、オブジェクトの操作、プロパティパネルの使い方などについて説明します。
🛠️ デザインツールの使い方と機能
Figmaの様々なデザインツールの使い方と機能を解説します。移動ツール、拡大縮小ツール、フレームツール、スライスツール、シェイプツール、ペンツール、鉛筆ツール、テキストツールなど、それぞれのツールの特徴と使い方を詳しく説明します。
🖼️ オブジェクトのプロパティとエフェクト
オブジェクトのプロパティパネルの使い方とエフェクトの設定方法について説明します。塗り、線、ドロップシャドウ、インナーシャドウ、レイヤーの裏、マスクなどの機能を利用して、デザインの完成度を高める方法を解説します。
📐 グループとフレームの使い方
グループとフレームの違いと使い方について説明します。グループは複数のオブジェクトをまとめる機能、フレームは背景を持ち、オートレイアウト機能を利用できる特殊なグループです。また、レスポンシブデザインに便利なオートレイアウト機能の使い方も解説します。
📦 コンポーネント機能とマスク
コンポーネント機能の使い方とマスクの機能について解説します。コンポーネントはデザインパーツをテンプレート化し、修正が反映される便利な機能です。マスクはオブジェクトの形で画像を切り抜く機能で、デザインの表現力を高めるために活用できます。
🎨 スタイルの使い方と画像の書き出し
Figmaでスタイルを定義する方法と、画像を書き出す方法について説明します。色、テキスト、エフェクトを統一するためにスタイルを利用し、効率的にデザインを管理します。また、完成したデザインをHTMLコーディングなどに使用するために、画像を書き出す方法も解説します。
🔗 プロトタイプ機能と共有
Figmaのプロトタイプ機能を使って、複数ページのデザインを用意し、実際のウェブサイトのように閲覧できる画面を簡単に作成する方法を解説します。また、作成したプロトタイプを共有する方法も説明します。
📚 Figma使い方完全攻略のまとめ
Figmaの使い方完全攻略の基本編のまとめを行います。基本操作から便利な機能まで、デザイン初心者からプロのデザイナーまで向けた内容です。次回の動画では実際のデザイン作りの流れを解説します。
Mindmap
Keywords
💡Figma
💡デザインファイル
💡プロトタイプ
💡レイアウト機能
💡コンポーネント
💡マスク
💡スタイル
💡エクスポート
💡チームモード
💡下書きモード
Highlights
Figmaの大きな特徴は画像の設定やトリミング、補正ができること。
Figmaはブラウザ上でデザイン制作やプロトタイプ作成、デザインファイルの共有ができるツール。
Figmaは日本語版が公開されており、言語の変更が容易。
Figmaは無料プランと有料プランがあり、基本的には無料プランで十分に使える。
Figmaの画面構成にはツールバー、キャンバスエリア、レイヤーパネル、プロパティパネルが含まれる。
フレームツールでデザイン作業エリアを設定し、複数のアイディアをグループ化してレイアウト機能を活用できる。
コンポーネント機能でデザインパーツをテンプレート化し、修正が反映される。
マスク機能でオブジェクトの形で画像を一時的に切り抜くことができる。
スタイル機能で色やテキストエフェクトを統一することができる。
エクスポート機能を使って画像を書き出し、HTMLコーディングなどに活用できる。
プロトタイプ機能で複数ページのデザインを用意し、実際のウェブサイトのように閲覧できる。
Figmaの基本操作から便利な機能までを完全に攻略するための解説がある。
FigmaはAdobe XDと同等かそれ以上の使いやすさで、人気のあるツール。
Figmaのアカウント作成から使い始めの方法が紹介されている。
Figmaのチームモードではいくつかの制限があるが、下書きモードは無制限にファイルを作成できる。
FigmaにはブラウザでのWeb版とデスクトップアプリ版があり、どちらも使い方が同じ。
Figmaの画面遷移設定は簡単で、アニメーションの設定も可能。
Transcripts
00:00figma が大きな特徴としてよりに
00:02対して画像を設定することができ露出や
00:05コントラスト彩度など補正もできたり画像
00:09のトリミングも行うことができます縦にし
00:12たり横にしたりできたりこちらをコピーし
00:15てこのように三段組のようなものを表現し
00:18たりすることもできますこのように王と
00:21レイアウト機能はベストん支部デザインを
00:23作るのにかなり便利な機能なので覚えて
00:26おきましょう
00:27画面遷移の設定はたったのこれだけです
00:30[音楽]
00:32どうもこんにちわゆーチャンネルないう
00:34です今回は日本語版 figma の使い
00:37方完全攻略基本編ということで
00:39ままで photoshop や xe を
00:41使ってきて figma も使えるように
00:43なりたいという方からデザイン初心者の方
00:46まで figma の基本操作から以後は
00:48ならではの便利な機能まで figma の
00:51使い方を完全攻略したいかとに向けて解説
00:53しようこの動画一本で figma で
00:56web デザインをスタートできるので
00:58チャンネル登録したらさっそく見ていこう
01:04figma とはどういうツールかを簡単
01:06に説明すると俺をアカウントを作るだけで
01:08ブラウザ上でデザイン制作やプロトタイプ
01:11作成デザインファイルの共有などができる
01:14web デザインに特化したツールでこれ
01:16が無料の範囲で adobe xd と
01:18同等かそれ以上に使いやすいということで
01:21現在第人気のツールなのだ
01:24こりょうプランと有料プランがあり無料
01:26プラな場合チームでデザインファイルを
01:28共有するチームモードではいくつかの制限
01:30がありますが一人でデザインファイルを
01:33作成する下書きモードの場合は無制限に
01:35ファイルを作成でき無料プランで十分使い
01:38こなせる内容となっているのでまずは無料
01:40プランで使い込んでいきましょう
01:45聖書に figma の始め方について見
01:48ていきましょう figma
01:52公式サイトから
01:53ああああ
01:55こちらのサインアップをクリックして
01:57メールアドレスとパスワードでアカウント
02:00を作成してから始めますアカウントを作成
02:03するとこちらのログインから先ほど作成し
02:06たアカウント情報でログインすることで
02:09figma を使い始めることができます
02:11figma では現在日本語版が公開され
02:14ていますがもし日本語版が表示されない
02:17場合は画面の右下にあるはてなマークを
02:19クリックして change
02:21language 図をクリックすると
02:22言語が選択できるのでこちらで日本語版を
02:26選択して西武オースト
02:29日本語版が表示されます逆に英語に買い
02:32たい場合はハセガワから
02:35言語の変更で english に帰ると
02:37自由に選択できます
02:42figma にはこちらのようにブラウザ
02:44で使う web 版とこちらから
02:47デスクトップアプリを入手
02:50でダウンロードして使うデスクトップ
02:52アプリ版があるので好みに応じて使い分け
02:54ましょう
02:55今回はこちらから入手したで副トップ
02:58アプリ版
03:00こちらで解説していきたいとおもいますが
03:03ウェブ版もで副トップアプリ版も使い方は
03:06全く同じなのでどちらを使う方にも参考に
03:09していただけるようになっています
03:144早速始めていきましょう
03:16まず最初に figma の仕組みとして
03:181人で作業する下書きモードそれから
03:21チームでデータを共有しながら作成する
03:24チームモードがあり基本的にはどちらも
03:27操作内容同じなので今回は1人で作業する
03:31下書きモードから新規ファイルを作成して
03:33いきましょう新きファイルの作成は
03:36した崖の横にある+ボタンを押して
03:38デザインファイルを作成
03:40もしくはデザインファイルを新規作成の
03:43こちらのボタンをクリックすもしくは上部
03:46のタブの+ボタンを押してデザイン
03:48ファイルのボタンを押すことで新規
03:50ファイルが作成できます
03:53新規ファイルが出来たらまず最初に
03:55デザインする画面サイズのフレームを作っ
03:57てからデザイン車業がスタートします
04:01まず画面構成について簡単に説明するので
04:04あらかじめ用意したファイルから見ていき
04:06ましょう左へはよく使うツールがまとめて
04:09あるツールバー真ん中がデザイン作業を
04:13するキャンバスエリア左がキャンバスに
04:16あるオブジェクトをレイヤー形式で表示し
04:18てくれるレイヤーパネル右側が
04:21オブジェクトを選択するとその情報が表示
04:24され変更することができるプロパティ
04:26パネルこれらで画面構成が成り立ってい
04:29ます
04:29ではツールバーから順番に見ていき
04:31ましょう
04:32まず最初は矢印まあこの移動ツール移動
04:35ツールはオブジェクトを選択したり選択し
04:38たオブジェクトを移動したり拡大縮小し
04:42たり変形したり角丸のサイズを変えたりと
04:45オブジェクトを触るためのあらゆる基本
04:47動作となるのでショートカットキーの部位
04:50を含めてしっかりと覚えておこう
04:54次は用ツールの下にある拡大縮小2
04:57ショートカットキーは型移動ツールの拡大
05:00縮小と違い縦横比を保ったまま拡大縮小
05:04することができるツールとなっている移動
05:06ツールでテキストボックスを拡大縮小する
05:09とこのように
05:11テキストの外側が拡大縮小されるのだが
05:16拡大縮小ツールを使うとテキストの見た目
05:19を保ったまま拡大縮小できるのでしっかり
05:22と覚えておこう
05:24拡大縮小ツールは見た目をそのまま拡大
05:27できるので複数のオブジェクトを一斉に
05:30確定する時などにもよを使うのでレイニー
05:32なツールとなっている
05:34次はフレームツールです
05:36フレームツールは
05:38デザイン作業エリアを撮影する2で相撲や
05:41タブレットデスクトップといった秘蔵の
05:44デバイスサイズから選んで作成することが
05:46できますまたフリーハンドで自由な形で
05:50フレームを撮影することもできます
05:52フレーム機能は photoshop や
05:54xd なアートボードのような単なる作業
05:57エリアという機能だけではなくこのように
06:01複数のアイディアをグループ化して
06:04フレームという形で要素を聖霊させる
06:07レイアウト機能もあるのでこちらを後ほど
06:08詳しく解説しよう次はスライスツールです
06:13スライスツールは画面の一部を画像として
06:16書き出すことができるツールで普段は
06:18あまり使いませんがこのように部分的な
06:21画像を書き出したいときに使えるツール
06:23です
06:25次はシェイプツールですシェイプツールは
06:28photoshop や xd にもある
06:30色や形を自由に作れるツールでこのように
06:33長方形や直線矢印楕円形多角形星形などを
06:39撮影することができたり画像を配置する
06:41こともできます例えば多角形の場合
06:45デフォルトではこのような三角形ができ
06:48ますが頂点を上にドラッグすることで調停
06:51の数を増やすことができます
06:53またこちらをスライドすることで
06:57金丸を調整することもできます星型も同じ
07:00ように
07:02に掘るとでは5つの頂点の星ですがこちら
07:06の頂点を上にスライドすることで頂点の数
07:09を増やしたり
07:10こちらを調整することでくぼみの大きさを
07:13変えたり
07:14星型の角丸を変更することができます
07:20次はペンツール photoshop や
07:22illustrator でおなじみの
07:23ペンツールはショートカットキーの p で
07:25利用できるツールでベクターデータで
07:28きれいな曲線の線を引いたり
07:31自由な形のシェイプを作成するときに使え
07:34ます
07:37形を修正するときはダブルクリックで表示
07:40されるポイントを動かしたりハンドルを
07:43動かしたりすることで自由に変形すること
07:45は可能で基本はシェイクと同じで
07:49こちらのようにパスが開いているものでは
07:51なくパスが閉じている状態にものであれば
07:54こちらのように色を入れることも可能で
07:58逆に線をなくすことも可能です
08:02またシェイプ画編集状態の時にだけ表示さ
08:06れるこちらの曲線ツールとペイントバケツ
08:09ツールがあり曲線ツールは直線を
08:12曲線に変えることができペイントバケツ
08:15ツールはシェイプに色を入れたり
08:19色を取ったりすることができるツールです
08:23次は鉛筆ツール鉛筆ツールはマウスや
08:27タブレットなどで自由に線を書くことが
08:30できるツールでシフトをしながら書くと
08:32直線を書くこともできますて崖のような
08:35表現をしたい時や直感的にず野選などを
08:39書きたいときに使えるツールです基本的な
08:42仕様はペンツールやシェイプツールどうよ
08:45線の色を変えたりこのように線が閉じられ
08:49ている状態であれば
08:51塗りを入れることもできます
08:55次はテキスト2テキストツールはショート
08:58カットキーの t で入力することができ
09:01ドラッグしてテキストエリアをつくって
09:03から文字を入力すると固定サイズの
09:06テキストエリア内に文字が収まる形で表示
09:08されますドラッグではなく enter で
09:11テキストを入力すると
09:14開業しない限りテキストボックスが自動で
09:17広がら仕様でテキストを入力することが
09:19できますちなみにこのテキスト編集状態
09:22から抜けるにはコマンドを押しながら
09:24enter で編集状態から抜けて移動
09:27ツールに変えることができるので作業効率
09:29を上げるために覚えておきましょうこの
09:32固定幅のテキストボックスへが自動で
09:35広がるテキストボックスなどの使用は
09:37プロパティパネルで後からいつでも変更
09:39できます
09:41こちらの幅の自動調整
09:44こちらの高さの自動調整
09:47こちらの布袋サイズの3つの中からいつで
09:51も変更可能です
09:53次は理想スツール椅子オフツールは後ほど
09:57詳しく説明するコンポーネントやプラグ
10:00インいジェットを管理するツールです
10:03コンポーネントを追加したり
10:06右クリックでメインコンポーネントに移動
10:09したり
10:10その他プラグインやウィジェットを検索し
10:13て追加することもできます
10:16次は手のひら2
10:18こちらは photoshop や xd
10:20にもあるのでご存知の方も多いと思うが
10:23画面を掴んで動かすことができるツール
10:26頻繁に利用するツールなのでショート
10:28カットキーのスペースでいつでも使える
10:31ように慣れておきましょう
10:34最後はコメントツール2
10:37コメントツールは主にチーム内での
10:39コミュニケーションに使うことが多いが
10:41個人のメモとしても使いずつ使い方を簡単
10:45でコメントツールに切り替えて任意の位置
10:48でクリックしてコメントを残すだけ
10:54またコメントに返信することもでき
10:57例えば
11:01このように指示があったものに対して
11:06返信を投稿することもできますまたイイ
11:10クリックで解決とすることで
11:14コメントを削除することもできます
11:19次はプロパティパネルについて見ていき
11:22ましょうプロパティパネルはオブジェクト
11:24を選択することで詳細な情報が表示され
11:27選択するろじぇくとによって表示内容が
11:30変わり編集できる内容も変わりますまずは
11:34こちらのシェイプツールでプロパティ
11:36パネルの基本操作を見ていきましょう
11:39こちらのプロパティパネルでは現在選択し
11:42ているものの情報が表示され例えば洗濯
11:45せいろオブジェクトの位置情報である x
11:48座標8 y 座標例えば x 座標の位置
11:51を変えるにはこちらを犯すことで実際の
11:54表示も変わりますヨコ幅や高さもこちらで
11:57変更できこちらの縦横比を起こすのボタン
12:00を外すと横幅を変えたり
12:04高さを変えたりすることもできますまた
12:07こちらでは回転の角度を変えたりこちらで
12:10は風間らの大きさを変更することもでき
12:13ます
12:16次は探したの制圧についてですが制約とは
12:20全チャイナフレームに対するオブジェクト
12:22の位置関係を示すようなもので現在は左上
12:26となっておりますこちらは左上というのは
12:29どういう状態かというと例えばこの
12:31フレームのサイズを変更した時に左上の
12:34位置で固定されていることになりますこれ
12:37を
12:38右下に変えてみましょうして分かりやすい
12:41この位置に置いてフレームの大きさを変更
12:43するとこのように
12:46右下に固定された状態になりますちなみ
12:50これ以外でものは左上なのでこれ以外の
12:54ものは左上に固定され先ほど変えたこちら
12:58は右下に固定されている状態となります
13:02こちらは基本的には特に理由がない限りは
13:05すべて左上にした状態で作業を行ったほう
13:09がいいでしょう
13:10次はその下のレイヤーの部分選択している
13:13オブジェクトのレイヤーの状態を表示して
13:16おります例えばこの女のアイコンで表示非
13:19表示を切り替えたり
13:21こちらで透明度を変えたりパススルーと
13:25いうのは photoshop で言う
13:26プレんどボードを変更する箇所で
13:30わかりやすく画像の上に持ってくると
13:32チョウサンスクリーンソフトライトなど
13:35こちらの部分でブレンドモードを変更する
13:38ことができます次は塗り線について見て
13:41いきましょう
13:43塗りな部分の色を変更することができたり
13:47シェイプに対して線の幅を変えたり線の色
13:50を変更したり線の位置を外側や内側
13:55中央といった位置を変えたりそれぞれの線
14:00の場所を変更したりカスタムにすることで
14:04縦横で違う線の太さにすることもできます
14:09また
14:10こちらから線画スタイルを破線したり破線
14:14の長さや
14:16感覚なども変更できます
14:20また figma の大きな特徴として
14:22オブジェクトの塗りの部分で
14:25いろいろなグラデーションを設定できたり
14:29こちらの部分で画像を指定することで塗り
14:33に対して画像を設定することはできここで
14:37露出やコントラスト彩度など
14:40画像の補正もできたり
14:42こちらで
14:45画像のトリミングも自由に行うことができ
14:48ます effect の部分ではドロップ
14:51シャドウ
14:52が設定できたり
14:54ベイヤーに対して裏をかけたりすることも
14:58できます
15:00このようにオブジェクトの塗りに対して
15:02画像が設定できるということはたとえば
15:05この文字の場合でも
15:09ように画像を設定することはできるという
15:13ことです
15:15また effect の部分ではこちらの
15:18プラスでドロップシャドウができたり
15:20インナー車道を設定したりレイヤーに裏を
15:23かけたりすることもできます
15:25こちらのエクスポートパネルは画像の
15:28書き出しを担う場所でオブジェクトを選択
15:30した状態でエクスポートとすることで選択
15:34した画像を書き出すこともできます
15:37てはシェイプ意外なプロパティも見てみ
15:40ましょう
15:41例えばこの線なオブジェクトの場合
15:45線の幅を指定できるだけでなく線の左側の
15:50処理
15:51右カー処理を設定できたりテキスト
15:54オブジェクトだと
15:57テキストの大きさや共感も時間などが設定
16:02できたり
16:04enter で文字を入力することで段落
16:08を設定することができ
16:10こちらで
16:12段落の余白も設定することができます
16:15ちなみに先ほど
16:17エンター
16:18の改良で段落を設定できましたはシフト
16:22enter
16:23の開業の場合は段落ではなく単なる開業と
16:27なるのでこちらも覚えておきましょう
16:32ではグループとフレームについて確認して
16:35いきましょう
16:36figma には複数のオブジェクトを
16:38グループ化する方法が大きく分けて二つ
16:40あり一つは通常のグループ化
16:43オブジェクトを選んでコマンド g
16:45もしくは右クリックで選択範囲なぶれーぷ
16:48かを選んでもできます
16:50もう一つはフレームカーオブジェクトを
16:53選んでコマンドオプション g もしくは
16:55右クリックで選択範囲なフレームカーでも
16:58可能ですこの2つはエイヤーで見てみると
17:01グループ化の方は点線のアイコンが表示さ
17:04れておりフレームの方は車のような
17:06アイコンができておりますではこの2つは
17:09違いを見ていきましょう
17:12まずフレームには一つ特徴がありフレーム
17:15の背景に色を入れることができるという
17:18特徴があります
17:19一方グループの方の背景には
17:23このように色を入れることができません
17:25また2つにはもう一つ違いがあり
17:28外枠を広げると
17:31フレームの方は外枠だけが広がるのに対し
17:35グループの方は
17:37中目が外枠に対して追従して広がっていく
17:41という特徴があります
17:43さらにフレームには
17:45こちらの auto layout と
17:47いうオプションがありこちら押すことで
17:49元々のフレームがシャープのアイコンだっ
17:52たに対し auto layout を
17:54かけたフレームはこちらのようにアイコン
17:57が変わりますフレームのオートレイアウト
17:59機能について詳しく見ていきましょう
18:03auto layout 適応すると
18:04こちらの auto layout 専用
18:06のプロパティ鳥をできるようになります
18:09例えば
18:10左右のパディングを設定したり上下の
18:13パディングを設定したり左右上下それぞれ
18:15違うパディングを設定したりも可能です
18:19また外枠を広げてこちらのボタンを押すと
18:23を中身の位置を自由に指定することもでき
18:26ます
18:28またダブルクリックすることで中身の要素
18:31を選択することができた髪の要素に対して
18:34水平方向のサイズ調整や垂直方向のサイズ
18:38調整を設定できるようになりますこちらは
18:41現在
18:42水平方向のサイズ調整が固定となっており
18:45ますがどういうことかというと
18:48こちらが水平方向を広げても中身の要素は
18:52固定となっているということですこちらを
18:56コンテナーに合わせて各ない大須と外側を
18:59広げた時に
19:01このように横幅が拡大するような仕様に
19:04なります
19:07これはテキストだけでなく付加増の桜にも
19:09同じように適用することができます
19:12まずを選択していっ
19:14こちらのコンテナに合わせて拡大を
19:17クリックするとこのように水平方向に過労
19:20博大され
19:22外側を広げると
19:25このように画像も適しても両方広がるよう
19:28になります
19:29また画像の垂直方向も
19:33コンテナに合わせて拡大とすると画像が
19:36水平方向にも垂直方向にも広がるように
19:40なりますこれは先ほどのグループの時と
19:43同じような挙動と言えるでしょう
19:46また auto layout ではこの
19:49ように横並びな要素を
19:52縦にしたり横にしたりできたり
19:55こちらをコピーして
20:00このように三段組のようなものを表現し
20:02たりすることもできますこのようにまるで
20:05html と css で調整しているか
20:08のようなデザインが入間上でできるように
20:11なります
20:12ちなみにこのグループとフレームはいつで
20:15もそれぞれ変更することが可能でこちらの
20:18グループをフレームにすることでフレーム
20:21に変わりエイヤーもフレームマークに
20:23変わりますそしてこちらもまたグループに
20:26変えることができますフレームも同じで
20:29こちらから
20:30グループに帰るとこちらはグループに変更
20:33になっておりますただしフレームから
20:36グループに帰るとフレームの愛系の色は
20:38消えてしまうのでその点は注意しておこう
20:41さらにフレームウェアーグループはいつで
20:43も解除は可能コマンドシフト g もしくは
20:46いいクリックからこちらのグループを解除
20:50を選択するとグループ改善されそれぞれの
20:54バラバラのパーツに戻ります
20:56また auto layout の利用は
20:58グループ化やフレームかをしなくても
21:01こちらを両方選択した状態でこの auto
21:04layout +を押すことでいつでも
21:06このように auto layout 化
21:09することができ auto layout
21:11かするとこちらははフレームと罰で認識さ
21:15れるようになるのでその点も覚えておき
21:17ましょう
21:18フレームの音レイアウト機能を利用する
21:20ことでレスポンシブデザインに使える
21:22パーツを作ることができるのでその作り方
21:25を見ていこう
21:29絵は auto layout 機能を
21:30使ったレスポンシブパーツの作り方につい
21:33て見ていこうレスポンシブパーツとは通常
21:35をこちらのように複数のオブジェクトを
21:38拡大したり
21:40縮小したりすると画像がいびつになったり
21:42タイトルと本文がくっついてしまったり
21:45する
21:45こちらをオートレイアウト機能学を利用
21:48することでこちらのように
21:52画像は唯一にならず固定のサイズで
21:55タイトルと本文の感覚が千葉マラずに経営
21:59な状態を保っていますこちらのようなぺ
22:01すぽん支部パーツを今から作っていき
22:03ましょう
22:05まずはこちらの見出しと本文を選択して
22:09ここからオートレイアウトを適用します
22:13auto layout を適用すると
22:15こちらはフレーム化されますがこちらで
22:17それぞれのパーツにアクセスしてコンテナ
22:21に合わせて拡大
22:23こちらも
22:24コンテナに合わせて拡大を適用します
22:28そしてさらにこちらのフレームと
22:31こちらの画像を選択してこちらもさらに
22:34オートレイアウトを適用させますすると
22:38このようにフレームの中にうちらの
22:41フレームが入ったような状態になります
22:44この状態でこの右のパーツの横幅を
22:48コンテナに合わせて拡大を適用します
22:52そしてさらにこちらのフレームとこちらの
22:55画像を選択した状態でさらに auto
22:59layout 適用します
23:01するとこちらのフレームロックのように
23:04大きなフレームの中に先ほど作った
23:06フレームが入りその中にさらに
23:11こちらの見出しと本文のフレームが入った
23:14ような日エコの状態ができますこの状態で
23:17今度は下のフレーム後の部分を
23:21今丁寧に合わせて拡大を適応させます
23:25さらにこちらも
23:27コンテナに合わせて拡大を敵をしますする
23:30と先ほど見たように
23:33こちらを拡大
23:36縮小しても
23:38こちらの画像はいびつにならず見出しと
23:41本文の間も開いたままのような
23:44レスポンシブで使えるパーツを作ることが
23:47できます
23:48このように王とレイアウト機能は
23:50レスポンシブデザインを作るのにかなり
23:53便利な機能なのでうまく使えるようにその
23:56機能を理解しておきましょう
24:01ではコンポーネント機能について見ていき
24:03ましょうコンポーネントとはデザイン
24:05パーツをテンプレート化してそれをコピー
24:08して使うことで元のパーツを修正すると
24:11コピーしたパーツにもその修正が反映さ
24:13れるという仕組みです例えばこちらのよう
24:16にコンポーネント機能を利用しないで普通
24:19にデザインしたとしましょうその中で
24:22こちらの文字サイズを大きくするという
24:25習性が入った場合
24:27このように一つ一つデザインを修正して
24:31いくという面倒な作業が発生してしまい
24:33ますしかしコンポーネント機能を利用する
24:36とこちらが元のパーツを修正するだけで
24:39全てのパーツが入っ厚手修正できるという
24:42機能になっているのでコンポーネント記号
24:44の使い方について見ていきましょう
24:47コンポーネントの使い方は簡単でこちらの
24:50デザインパーツを選択した状態でこちらの
24:53コンポーネントの作成というボタンを押す
24:56だけですこちらのボタンを押すとこのよう
24:58にレイヤーも選択したデザインもまずは
25:01紫色に変わるのが確認できますさらに
25:04こちらの4月4つのアイコンに変わるとを
25:07コンポーネントができたという形になり
25:10ます
25:11そしてこのコンポーネントをコピーすると
25:14コピーした2つのフレームはこのように4
25:17型の4つのアイコンではなく1000形の
25:19アイゴンになりますこれを figma で
25:22はインスタンスというんでこちらをメイン
25:25コンポーネントと呼びます
25:26こちらで先ほどなれな修正を一度やってみ
25:29ましょう
25:30テキストを選んでこちらを18に帰ると
25:34その他なインスタンスも同じように18
25:37ピクセルに一発で修正することができまし
25:40たこれがコンポーネントの機能ということ
25:42になります
25:45ではインスタンスを修正した場合なく道に
25:47ついて見ていきましょう
25:49例えばこちらの画像を差し替えてみます
25:58するとメインコンポーネントや他の
26:00インスタンスには影響を与えませんこの
26:03状態でメインコンポーネント画像を
26:05差し替えてみます
26:10するとこちらのインスタンスにはメイン
26:12コンポーネントの修正が反映されましたが
26:14こちらの先ほど画像を差し替えた方な
26:17インスタンスはメインコンポーネントの
26:19影響を受けなくなりましたでは次にこちら
26:22の見出しの色を変えてみましょう
26:27すると右足の色はすべてのインスタンスに
26:30反映されましたではこちらの画像の角丸に
26:34ついて変更してみましょう
26:36こちらもすべてなインスタンスに固まるが
26:39反映されましたつまりこのコンポーネント
26:41機能というのはインスタンスを修正すると
26:44メインコンポーネントからその部分だけが
26:47メインコンポーネント昨日から切り離さ
26:49れるということになるということですこの
26:52ような同じパーツを繰り返して使う場合の
26:55デザインにこのメインコンポーネントと
26:58いう機能がとても便利だということがお
27:01分かりになるのではないでしょうかちなみ
27:03にメインコンポーネントから切り離すと
27:06いうこともできますそれはこちらの
27:08インスタンスを選択した状態で
27:11インスタンスの切り離しというボタンを
27:13クリックするとこちらのメイン梱包粘投を
27:17修正しても文字の色が反映されません
27:21ふうにメインコンポーネントから完全に
27:23切り離すということも可能ですさらに数が
27:27増えてきてこちらのインスタンスに対する
27:29メインコンポーネントがどれだかわから
27:32なくなった場合こちらの
27:34インスタンスを選択した状態でメイン
27:36コンポーネントに移動というボタンを
27:38クリックするとインスタンスに対する
27:41メインコンポーネントを一発で表示して
27:43くれるのでどちらも園リーダーボタンなの
27:46で覚えておきましょうこのように
27:48コンポーネントという機能は web
27:50デザインに欠かせない機能の一つなので
27:52しっかりと使えるようにしておきましょう
27:58ではマスクの機能について見ていき
28:00ましょうマスクとはトリミング機能の一部
28:03で別のオブジェクトの形で画像など一時的
28:07に切り抜く機能を指します
28:09例えばこちらの画像の場合別の
28:11オブジェクトこのように切り抜きたい形の
28:15オブジェクトを用意してこちらを画像の
28:18ああああああi 面に型抜きたい
28:20オブジェクトを配置した状態で両方を選択
28:24してこちらのマスクとして使用という
28:27ボタンをクリックすると先ほど用意した
28:30オブジェクトの形で画像を切り抜くことが
28:33できましたこちらのマスクはこのように
28:35グループ化しない限りは
28:39明日区のトリミング位置が移動できるので
28:41このままリオする場合はこれをグループ化
28:45して使うようにしておくといいでしょう
28:48またマスクを解除する場合はこちらの
28:50アスクしているオブジェクトを選択した
28:53状態でもう一度このマスクボタンを押すと
28:56マスクが解除されますまたマスク機能は
29:00シェイプだけでなくこのようなテキストで
29:04もマスクすることが可能です先ほどと同じ
29:07ように画像のレイヤーの杯目に画像の背面
29:12に移動して
29:14アスクボタンを押すと
29:18テキストでも画像をマスクすることができ
29:21ました
29:22こちらも解除するにはこちらのマスク
29:25ボタンを押すだけです
29:27またマスクではなくただのトリミングをし
29:30たい場合は画像を選択した状態で画像の
29:34トリミングのボタンを押すとこのように
29:38情報系の形で画像をトリミングすることも
29:42可能です
29:43こちらのオブジェクト編集というボタンを
29:47押して
29:48こちらの
29:51オブジェクトの形を変えることでも画像の
29:55トリミングを変更することも可能です状況
29:58や用途に応じて画像の切り抜き方法を色々
30:02試してみましょう
30:07スタイルの使い方について確認していき
30:09ましょう figma ではサイト内で色
30:11やテキストエフェクトを統一するために
30:14スタイルを定義することができます例えば
30:17色の定義の場合登録した色を選択した状態
30:20でこちらのスタイルボタンをクリック
30:23いろんなスタイルな右にあるスタイルを
30:26作成を送るチェックすると名前を登録
30:28できるウィンドウが表示されるのでここで
30:31例えば
30:33年からなどと名前を付けてスタイルを作成
30:36をクリックするとこちらにメインカラーと
30:39いう色のスタイルが作成されましたこちら
30:42のスタイルを利用するには利用したい場所
30:46選択した状態ねー
30:48こちらのスタイルボタンをクリックして
30:50メインからを選ぶとこのように定義した
30:54スタイルの色が適用されましたこの
30:57スタイルは一度適応するとこちらの色
31:01スタイルの部分をスタイルは編集を
31:03クリックして
31:05このように色を変えると
31:07色のスタイルが変更されてそのスタイルを
31:11適用していた色も同じように変更されると
31:15いうメリットがあります
31:16次にテキストなスタイルも登録することが
31:19できるのでやってみましょう登録したい
31:22テキストを選択した状態でこちらの
31:24スタイルボタンをクリックしてテキスト
31:26スタイルの右にある+ボタンでスタイルを
31:30作成こちらも名前を入力ができるので
31:36うんテキストなどと名前を付けてスタイル
31:40を作成を押すとこちらに本文のスタイルを
31:43作成することができましたこちらも同様に
31:45テキストスタイルを反映するには安永し
31:48たい部分を選択してテキストのスタイル
31:52ボタンをクリックして定義した本文
31:54テキストを選択すると先ほど定義した
31:58スタイルが適用されましたこちらも同様に
32:01テキストスタイルのこちらを編集すること
32:05で
32:07適応したスタ得るすべてにこちらの
32:10テキストスタイルの修正が反映されました
32:13さらに色やテキストだけでなくこちらの
32:16ようなドロップシャドウのエフェクトも
32:18捨てるとして定義することができますので
32:20どういうふうにやってみましょうこちらの
32:22エフェクトを選んだ状態でスタイルボタン
32:25をクリックしてエフェクトスタイルを
32:27遅らす
32:28えっして
32:310ップ斜度01などとスタイル名を入力し
32:35て作成を押すとちらにエフェクトスタイル
32:39としてドロップシャドウ01が登録され
32:41ましたこちらを適用するには同様に適用し
32:44たいオブジェクトを選択してエフェクト
32:47な横にあるスタイルをして作成済みの
32:50ドロップシャドウを0家を押すとっ
32:52ドロップシャドウ01の巣態度が適用され
32:55ましたこのようにピグマのスタイル機能を
32:57使うと効率的に web サイトの
32:59デザインを統一することができるので
33:01こちらも覚えておきましょう
33:06画像の書き出しについて確認していき
33:08ましょう html コーディングなどに
33:10使う画像を作成する場合はエクスポート
33:13機能を使うことで画像をか気がすることが
33:15できますカギ足方は簡単で基本的には
33:18レイヤーごとに書き出すことは可能
33:20吐き出したい画像を選択してこちらの
33:23エキスポートパネルの部分で書き出したい
33:26分i 列を選択して吹き出したり画像形式
33:29を選択してこちらのエクスポートボタンを
33:32クリックすると画像を書き出すことができ
33:35ます
33:36複数の画像を同時に格安ことも可能で影や
33:39したい画像を選択して同様に倍率を選択し
33:43て画像形式を作成して3つなレイヤーを
33:46エクスポートを押すと3つ同時にかけやす
33:48ことができますまた画面全体を書き出し
33:51たい場合はこちらのフレームを選択した
33:54状態で同様にエクスポートだ麺をクリック
33:57して同じようにマイリスト画像形式を選択
34:00してエクスポートを押すと画像を書き出す
34:02ことができます
34:07プロトタイプ機能について確認していき
34:09ましょうプロトタイプ機能とは複数ページ
34:11のデザインを用意して後にそのページ専用
34:14わかりやすく実際のウェブサイトで閲覧し
34:16ているかのように見せる画面を簡単に作成
34:19することができる機能ですそれでは実際に
34:21使い方を見ていきましょう
34:23画面右上のこちらのプロトタイプボタン
34:26うちら送りチェックしてプロトタイプの
34:28作成画面に移りますこちらでは営利線を
34:31作成するために例えばこちらのボタンを
34:34押して時にこちらのページに遷移すると
34:37いう画面を作っていきましょうクリック
34:38するボタンのこちらの白丸をドラッグして
34:42戦する画面につけますさらにこちらから
34:47トップページに戻るリンクを設定します
34:50この時にそれぞれ
34:52こちらのリンクの場合アニメーションを
34:54設定することもできます例えばこちらには
34:57move in こちらには
34:59move out を設定してみます画面
35:02遷移の設定はたったのこれだけですこれを
35:05閲覧するにはこちらの右上の
35:07プレゼンテーションを実行というボタンを
35:10押してみましょう
35:12数と実際スマホで見たような画面が表示さ
35:15れ先ほど設定したこちらボタンをクリック
35:18すると次のページが表示されうちらのロゴ
35:20をクリックするとトップページに戻っこの
35:23ような画面線を簡単に作成することができ
35:26ますまた作成した画面を共有する場合は
35:29こちらのプロトタイプを共有ボタンを
35:32クリックして贈りたい下にリンクをコピー
35:35スをしてこちらのコピーした url を
35:39送信してもいいですしこちらからメール
35:42アドレスを入力して招待したい人へリンク
35:45を送信することも可能です
35:50いかがでしたでしょうか今回は日本語版
35:53figma の使い方完全攻略基本円と
35:56いうことで言う間の基本操作から便利な
35:59機能を使い方がわかったかと思います
36:01次回以降の動画で実際のデザインを作る
36:04流れを見せながら解説する動画をアップし
36:06ますのでぜひチャンネル登録をお願いし
36:08ます
36:10参考になった方はいいねボタンやコメント
36:12などいただけると励みになりますでは次回
36:15の動画で会いましょう
Browse More Related Video
【2024年版】30分マスター講座 Figmaの基本と便利な使い方！ | WEBデザインツール
【パワポ作成 5つのポイント ♯1】これさえできれば誰でも「一流パワポマスター」／東大工学部卒「パワポ芸人」／国山ハセンのパワポの点数は？ リアル企画書にダメ出し【パワポ芸人 トヨマネ】
【YouTube基本操作】YouTubeの使い方をYouTube上で解説していく動画！あなたの好きな動画で画面をいっぱいにしてください！
2024年から始めるMicrosoft Copilotの使い方超入門
【初心者向け】gmailの基本の使い方（PC）| Gmailとは？という解説からメールの作成・送信方法などを丁寧に解説 2023年版
【超初心者向け🔰】Notionの基本的な使い方を"10分"で説明！【2022年最新版】
5.0 / 5 (0 votes)
