【2024年版】30分マスター講座 Figmaの基本と便利な使い方！ | WEBデザインツール
Summary
TLDRこの動画は、Figmaというデザインツールの使い方を初心者向けに詳しく説明しています。ウェブサイトやアプリケーションのデザイン、プロトタイプ制作ができるFigmaは、誰でも無料で始められる魅力的なツールです。動画では、アカウント作成からデザインファイルの作成、レイアウトの組立て方、スタイルの定義、そしてプロトタイプの作成まで、基本的な操作を丁寧に説明しています。また、フレームとグループの使い分けや、オートレイアウト機能の活用方法も紹介されています。さらに、スタイルガイドの作成やコンポーネント機能、バリアントの活用、そしてプロトタイプの共有方法についても学ぶことができます。最後に、デザインファイルの共有や画像の書き出し方法も解説されており、デザイン制作に携わる方に非常に役立つ内容となっています。
Takeaways
- 🌐 Figmaはウェブサイトやアプリケーションのデザイン、プロトタイプ制作ができるデザインツールです。
- 🆓 Figmaはアカウントを作成するだけで誰でも無料で使い始めることができます。
- 💻 Figmaはブラウザ上で使用できるため、他のデザインツールとは異なります。
- 📋 Figmaには無料プランと有料プランがあり、プランによって使用できる機能が変わります。
- 🔑 チームでファイル管理を行い、共同編集が可能な機能がFigmaの魅力の一つです。
- 📄 Figmaで作成できるファイルはデザインファイルとfigJAMファイルの2種類ありますが、基本的にはデザインファイルを使用します。
- 🎨 Figmaの画面上部にツールバーがあり、様々なツールを使いデザイン作業を行うことができます。
- 🔍 拡大縮小ツールは、要素の拡大縮小を行う際に重要な役割を果たします。
- 🖼️ フレームツールはデザインの骨組みを作り、アートボードとして利用することができます。
- 🔗 オートレイアウト機能を使って、要素を整然と並べるための便利な機能です。
- 📘 コンポーネント機能は、繰り返し使われる要素を一元管理し、変更が容易にできるためデザインの効率を向上させます。
- 🌈 バリアント機能を使って、コンポーネントの異なるバリエーションを簡単に切り替えることができます。
- 📝 プロトタイプ機能で、ウェブサイトの動作を疑似的に再現し、実際のサイトに近い動作を確認できます。
- 🔗 Figmaのデザインファイルやプロトタイプは簡単に共有でき、他の人と共同作業を行えるため、コラボレーションが促進されます。
- 🖼️ デザインを画像として書き出すことができます。これにより、コーディングや他の用途で使用することが容易になります。
Q & A
Figmaはどのようなデザインツールですか？
-Figmaはウェブサイトやアプリケーションのデザインやプロトタイプ制作ができるデザインツールです。Webデザイン、プロトタイプの作成、デザインの共同編集、制作物のシェアなどができます。
Figmaのアカウントを作成するにはどうすればよいですか？
-Figmaのアカウントを作成するにはGoogleアカウントもしくはメールアドレスが必要です。アカウントを作成すれば誰でも無料で使い始めることができます。
Figmaの有料プランと無料プランで使える機能の範囲はどのように異なりますか？
-有料プランでのみ使用可能な機能にはチームプロジェクトページ数無制限、バリアブルソード動画の埋め込みなどがあります。無料プランでも基本的なWebデザインには十分な機能が揃っているので、個人や小規模なチームであれば無料プランでも問題ありません。
Figmaでデザインファイルを作成するにはどうすればよいですか？
-Figmaにログインするとデザインファイルやプロジェクトを管理する画面が表示されます。サイドバーで下書きを選択した上で、右上にあるデザインファイルのボタンをクリックすると新しくデザインファイルが作成されて開かれます。
Figmaのレイヤーパネルとは何ですか？
-レイヤーパネルはFigmaの画面左側にあるもので、ページの管理とレイヤーの管理をすることができます。オブジェクトの表示がうまくいかなかったり、プロトタイプで表示されないオブジェクトがある場合はレイヤーパネルを確認すると解決することが多いです。
Figmaのフレームとは何ですか？
-フレームとは枠組の役割として使用され、アートボードとして使用したり、レイアウトとしてアイコンとテキストを配置したりすることができます。また、フレームにはオートレイアウトという機能があり、要素を成立させることが可能です。
Figmaでスタイルを定義するにはどうすればよいですか？
-カラーやフォントのスタイルをあらかじめ定義するには、プロパティパネルの塗りの欄にあるアイコンをクリックしてスタイルを確認、作成することができます。作成したスタイルはテキストやシェープに適用することができ、変更や調整も可能で、その変更は全ての要素に対して反映されます。
Figmaのコンポーネント機能とは何ですか？
-コンポーネント機能は要素を部品化する機能で、同じ要素をサイト上で使い回す際に便利です。メインコンポーネントを作成し、それを複製してインスタンスを作成することができます。メインコンポーネントに変更を加えると、全てのインスタンスにも変更が反映されます。
Figmaのバリアントとは何ですか？
-バリアントとはパターンや種類のことであり、1つのコンポーネントに対していくつかのパターンを設けることができます。例えばアイコンの色を変えるパターンを作成し、インスタンスで簡単に切り替えることができます。
Figmaでプロトタイプを作成するにはどうすればよいですか？
-プロトタイプ機能では疑似的なウェブサイトを作成することができ、実際のウェブサイトに近い動きを再現できます。プロトタイプモードに切り替えて、ページ遷移やホバーの表示などの動作を設定することができます。
Figmaでデザインファイルやプロトタイプを共有するにはどうすればよいですか？
-デザインファイルやプロトタイプを共有するには、画面右上の共有ボタンから行うことができます。ファイルに招待する方法やURLを共有する方法があります。また、プロトタイプの共有はプレビュー画面から行い、URLを共有することで誰でも見ることができます。
Figmaで画像を書き出するにはどうすればよいですか？
-画像を書き出すには、書き出したい要素を選択してプロパティパネルのエクスポート項目をクリックします。画像形式や倍率を選択してエクスポートボタンを押すと、画像の書き出しが行われます。ページのデザインを画像として書き出す場合は、ページのフレームを選択して同じ操作を行います。
Outlines
🔍 Figmaの基本操作と機能紹介
このパラグラフでは、Figmaの基本的な機能と使い方を紹介しています。Figmaはウェブサイトやアプリケーションのデザインツールで、Webデザイン、プロトタイピング、共同編集、共有などが可能です。無料プランでも十分な機能を提供し、ブラウザ上で使用できる点が魅力です。デザインファイルとfigJAMファイルの作成方法、チームプロジェクトや下書きの使い分けについても説明しています。
🛠️ Figmaの便利なツールとその使い方
このセクションでは、Figmaの便利なツールの使い方を詳しく説明しています。移動ツール、拡大縮小ツール、フレームツール、セクションツールなどの基本ツールから、シェイプツールやテキストツールまで多様な機能が紹介されています。特に、フレームの使い方に焦点を当て、フレーム内のオートレイアウトやコンストレイントの設定方法が解説されています。
🖼️ Figmaでの画像管理とレイアウト設計
このパラグラフでは、Figmaでの画像管理とレイアウト設計の技術に焦点を当てています。画像の扱い方、スタイルの定義、バリアブルライフブルの利用方法などが説明されており、デザイン作業を効率化するための多くのテクニックが提供されています。また、レスポンシブデザインを容易にするためのオートレイアウト機能の使い方も紹介されています。
🔧 コンポーネント機能とバリアントの活用
このパラグラフでは、Figmaのコンポーネント機能とバリアントの活用方法を詳しく解説しています。コンポーネントを使用してデザイン要素を効率的に管理する方法、インスタンスとメインコンポーネントの違い、バリアントを使用して異なるデザインパターンを作成する方法などが説明されています。これらの機能を使うことで、デザインプロセスがより柔軟かつ効率的になります。
🔄 Figmaのプロトタイプと共有機能
この最終パラグラフでは、Figmaのプロトタイプ機能と共有機能について詳しく説明しています。プロトタイプを作成し、動きや画面遷移を設定する方法、デザインファイルやプロトタイプを他の人と共有する方法などが解説されています。これにより、チームメンバーやクライアントとのコミュニケーションがスムーズに行えるようになります。
Mindmap
Keywords
💡Figma
💡デザインファイル
💡プロトタイプ
💡フレーム
💡グループとコンポーネント
💡スタイルガイド
💡オートレイアウト
💡共有
💡エクスポート
💡コメントツール
💡ブラウザベース
Highlights
Figmaはウェブサイトやアプリケーションのデザインやプロトタイプ制作ができるデザインツールです。
Figmaはブラウザ上で使えることが、他のデザインツールと異なり魅力の1つです。
Figmaには無料プランと有料プランがあり、プランによって使える機能の範囲が異なります。
Figmaの画面はデザインファイルやプロジェクトを管理する場所で、デザインファイルとfigJAMファイルを作成できます。
チームはチームに適したファイル管理を行える場所で、編集者を招待して作業を進めます。
下書きはデザインにおける機能的な制限がなく、個人や小規模なチームで十分な機能が揃っています。
Figmaの画面上部中央にツールバーがあり、デザイン作業を進める際に様々なツールを切り替えます。
レイヤーパネルでページの管理とレイヤーの管理ができ、プロパティーパネルでファイル情報や要素の詳細情報を確認できます。
フレームツールはアートボードとして使用し、デザインを画像として書き出すことができます。
オートレイアウト機能は要素を成立させるための機能で、レスポンシブデザインが楽になります。
Figmaで画像を使用する際は、プロパティパネルから表示形式を指定できます。
カラーやフォントのスタイルをあらかじめ定義し、スタイルガイドとしてプロジェクトで一貫性を保ちます。
コンポーネント機能は要素を部品化し、同じ要素をサイト上で使い回すことができます。
バリアントを使用して、コンポーネントにパターンを設け、簡単に切り替えて使用することができます。
プロトタイプ機能で疑似的なウェブサイトを作成し、実際のサイトに近い動きを再現できます。
デザインファイルやプロトタイプを共有することができ、プロジェクト配下に移動させることで共同編集が可能です。
画像の書き出しは選択した要素をエクスポートし、画像形式や倍率を設定して行います。
プロトタイプの共有でサイトイメージの共有やデザインの確認をしてもらうことができます。
Transcripts
00:00こんにちはひろです今回はFMAを使い
00:02始めたいという方に向けてfigmaの
00:04基本的な機能や使い方について詳しく説明
00:07していきたいと思います以前にも同じ
00:09タイトルで動画をあげているんですがこの
00:12動画はその内容を最新の情報に
00:14アップデートしたものとなっていますこれ
00:16からフィグマを使ってみたいという方や
00:18使ってみたけど少し難しかったというよう
00:21な方はこの動画を参考にフィグマを使い
00:23始めていただけたら幸いですそれでは撮が
00:26始めていきたいと思い
00:28ますfigmaはウェブサイトや
00:30アプリケーションのデザインや
00:32プロトタイプ制作ができるデザインツール
00:34ですできることとしてはWebデザイン
00:38プロトタイプの作成デザインの共同編集
00:41制作物のシェアなどがあげられますFMA
00:45はアカウントを作るだけで誰でも無料で
00:47使い始めることができますアカウントの
00:50作成にはGoogleアカウントもしくは
00:52メールアドレスがあればすぐに作ることが
00:54できます他のデザインツールと異なり
00:57FMAはブラウザ上で使うことができるの
01:00も魅力の1つですFMには無料プランと
01:03有料プランがあり使える機能の範囲が
01:06異なります有料プランでのみ使用可能な
01:09機能としてはチームプロジェクトページ数
01:11無制限
01:13バリアブルソード動画の埋め込みなどが
01:16あげられますただ無料プランの範囲内で
01:19あっても基本的なWebデザインにおいて
01:21は十分な機能が揃っているので個人や小
01:24規模なチームであれば無料プランでも全く
01:26問題ありませんFMAにログインすると
01:29このような画面が表示されますこの画面は
01:32FMAのデザインファイルやプロジェクト
01:34を管理する画面ですここで作成できる
01:37ファイルは2種類あってデザインファイル
01:39とfigJAMファイルを作成できます
01:42ただfigJAMファイルというのは共同
01:45編集可能なホワイトボードのような
01:46ファイルなのでデザインには使用しません
01:50そのため基本的にはデザインファイルを
01:52作成して使っていき
01:54ますファイルを作成できる場所は大きく
01:57分けると2つあって下書きとチームがあり
02:00ますまず先にチームを説明するとチームは
02:04その名の通りにチームに適したファイル
02:06管理を行える場所
02:08ですチームの構成としてはチーム
02:11プロジェクトファイルという回送構造に
02:14なっていてチームやプロジェクトに編集者
02:16を招待して作業を進めていくっていった
02:19流れになっていますただし無料プランで
02:22このチームを使うにはファイル数やページ
02:24数に制限がありますそのため無料プランの
02:28場合は基本的には使用しません無料プラン
02:32ではもう一方の下書きを使用します名前
02:36だけ聞くと下書きなので気になるかもしれ
02:38ませんがデザインにおける機能的な制限は
02:41全くなくて僕自身本業のデザイン業務も
02:45下書き内で問題なく完結できているものも
02:48たくさんあるのでその点安心して使ってみ
02:51て
02:51くださいなのでこの画面の内容をまとめる
02:54と下書き内にデザインファイルを作成する
02:57といった形で使用します
03:02まずサイドバーで下書きを選択した上で
03:05右上にあるデザインファイルのボタンを
03:07クリックし
03:08ますすると新しくデザインファイルが作成
03:11されて開かれた状態になります画面上部
03:15中央に表示されているように下書きの中に
03:18無題というデザインファイルが作成されて
03:20いる状態
03:21ですちなみにファイル名はここをクリック
03:24すれば変更することができます画面左上に
03:28はツールバーがあってここでいろんな
03:30ツールを切り替えてデザイン作業を行って
03:32いきます画面中央はキャンバスと呼ばれる
03:36エリアになっていてここでデザイン制作を
03:38行います画面左側にはレイヤーパネルが
03:42ありますここではページの管理とレイヤー
03:46の管理をすることができ
03:47ます画面右側にはプロパティーパネルが
03:51ありますファイルの情報や選択している
03:54要素の詳細情報を確認変更することができ
03:57ますここで基本的ななツールをざっくり
04:00説明していきますツールは頻繁に切り替え
04:03ながら作業していくのでショートカット
04:05キーを覚えておくと便利なのでおすすめ
04:08です移動ツールはオブジェクトを選択し
04:11たり移動する際に使用するツールです常に
04:15使用する基本のツールでショートカット
04:17キーはV
04:18です拡大縮小ツールはその名の通り要素の
04:23拡大縮小を行うツールです例えば選択
04:26ツールでテキストの拡大縮小を行うと文字
04:29のは変わらずにエリアのサイズが変わって
04:31しまいますそのためテキストの拡大表示
04:34なんかを行う際には拡大縮小ツールを使用
04:37しますショートカットキーはK
04:40ですフレームツールはいわゆる骨組みを
04:43作成するツールですフレームツールを選択
04:46した状態でプロパティパネルを見てみると
04:49フレームのテンプレートが表示されるので
04:52各種デバイスサイズのフレームを簡単に
04:54作ることができますフレームについては他
04:57にも用途があるので後ほど詳しく解説し
05:00ますセクションツールはフレームを資格的
05:03にグループ化することができるツールです
05:06さらにプロトタイプモードでは最後に
05:08アクセスしたフレームを記憶しておく
05:10なんて機能もあります現段階ではその辺
05:13難しいと思うので資格的にグループが
05:16できる点だけ覚えておけば大丈夫
05:18ですスライスツールは特定の範囲を
05:21書き出したい時に使用しますただ画像素材
05:25の書き出しにはスライスツールはあまり
05:27使用しないので使用頻度は低いです
05:30シェープツールは長方形や楕円直線など
05:34シェープを作成する際に使用するツール
05:36ですこれも主要なツールの1つなので
05:40ショートカットキーを覚えておくと便利
05:42ですペンツールはシェイプのパス調整に
05:45使用するツール
05:47ですシェープを変形させる際やアイコンの
05:50調整などに使用しますテキストツールは
05:54テキストを入力するツールですクリックし
05:57て挿入した場合テキスト量に応じて幅が
05:59広がりますがドラッグして挿入することに
06:02よって固定幅で折り返すテキストエリアを
06:05作ることができ
06:07ます深いレイヤー内のテキストにも直接
06:10アクセスができるのでテキスト編集の際に
06:13も便利なツール
06:14です通常スペースキーを押すだけで一時的
06:18に手のひらツールに切り替わるのでツール
06:20バーからの使用頻度は低いツールですまた
06:23トラックパッドや左右のスクロールがある
06:26マウスを使用している方は手のひらツール
06:28の使用頻度はか低くなるかと思います
06:31コメントツールはキャンバス上にコメント
06:34を残せるツールですチャット形式で
06:36やり取りができるのでチームでの利用にも
06:39向いています個人的なメモとして使用する
06:42のもありかと思いますショートカットキー
06:45はCですフィグマを使う上では隠せない
06:48フレームについて説明しますフレームとは
06:52その名の通り枠組の役割として使用します
06:56フレームは主に2つの役割があって11
06:59アートボード2要素の列レイアウトこの2
07:03つの役割で使用しますフレームツールを
07:06選択した上でキャンバス上でクリックして
07:09ドラッグしてみますすると四角い枠を作る
07:12ことができますまた右のプロパティパネル
07:16を見てみると様々なスクリーンサイズの
07:18テンプレートが用意されているのでこれを
07:21クリックすることでもフレームを作成する
07:23ことができますこのように作成した
07:26フレームはアートボードとして使用する
07:28ことができます
07:30アートボードとして作成されたフレームの
07:32中に四角や丸といったシェープやテキスト
07:35を用いてデザインをした上でこれを画像と
07:38して書き出すといった使い方ができます次
07:42にレイアウトとしての役割ですフレームを
07:45作成して中にアイコンとテキストを配置し
07:50ますこれに加えてフレームに使えるオート
07:53レイアウトという機能を適用するとこの
07:56ようにフレーム内の要素を列することが
07:59できできますまたフレーム自体に線や背景
08:03色パディングなどを設定することができる
08:05のでフレームを用いてボタンのパーツを
08:08作成するなんてことも可能
08:11ですもちろんシェイプとテキストを
08:14組み合わせてパーツを作るっていうことも
08:15可能ですがフレームのオートレイアと機能
08:19を用いてパーツを作成しておくと長身の
08:22変更に応じて可変するパーツを作ることが
08:24でき
08:25ますフレームと似た機能としてグループが
08:28あります
08:30グループはフレームのように線や色をつけ
08:33たり小要素を成立させるような機能はなく
08:36て単純に要素をまとめるだけに使用します
08:40この2つの使い分けとしては単に要素を
08:43まとめる際にはグループまとめた要素に
08:46対して何かしらの制約をかけたい場合は
08:49フレームを使いますまたグループと
08:51フレームはプロパティーパネルからいつで
08:54も切り替えることができ
08:55ますフレーム配下の要素にはコンスツと
08:59いう項目が表示されますこれはフレームの
09:02変化に対して何を基準に従うかということ
09:05を決める項目になり
09:07ます例えばフレームの配下に四角い
09:10シェープを配置しますこの時シェープの
09:13コンストレイントを見てみると左上という
09:16指定になっていますこの状態でフレームの
09:19サイズを変化するとシェープはフレームの
09:22左上を基準として配置されているのが
09:24分かるかと思いますこのコンストレイント
09:27を右下のような形にした場合はフレーム
09:31サイズを変更した際にフレームの右下を
09:34基準としてシェープが配置される形になり
09:37ますまたスケールを選択している場合は
09:40フレームのサイズに応じて自身のサイズも
09:43変化するといった挙動になりますこの
09:46コンストレイントは初めのうちはうまく
09:48使うのが難しいと思うので基本的には左を
09:52基準にしておくのがおすめですでこれ
09:55たまにあるんですがフレームのサイズを
09:57変更する際に要素が動いたり崩れてしま
10:00うってことが出てくるかと思いますその時
10:03はこのコンストレイントの指定が影響して
10:05いるケースが多いのでこういった場合は
10:08崩れる要素のコンストレイントを左上に
10:11設定しておけば崩れなくなるかと思い
10:13ますキャンバス上のオブジェクト構成に
10:16ついては画面左のレイヤーパネルで確認
10:19することができますオブジェクトの表示が
10:22うまくいかないなって時はこのレイヤー
10:25パネルを確認すると解決することが多い
10:27です例えばデザインファイル上で見えて
10:30いるオブジェクトがプロトタイプでは表示
10:32されないなんてことがありますこれは表示
10:35されないオブジェクトがフレーム内に配置
10:38されていない場合に起きる現象でフレーム
10:40内にオブジェクトを配置してあげれば
10:42正しく表示され
10:44ますまこんな感じでフィグマでは画面上の
10:48見た目だけではなくてオブジェクトの配置
10:50や構成が結構重要になってくるので普段
10:53からレイヤー構成を意識したデザイン制作
10:55が必要になってきますまたレイヤーパネル
10:59のアイコンがそれぞれ何を意味するのかも
11:01知っておくと便利かと思いますのでこれも
11:03チェックしてみて
11:04くださいFMAでは要素を簡単に列
11:08並び替えを行うことができます複数の要素
11:11を選択すると右下に要素を整頓させる
11:15ボタンが表示されるのでこれをクリック
11:17すると要素同感覚で綺麗に成立してくれ
11:21ますまたこの状態で要素同士の感覚を調整
11:25することや要素同士の場所を入れ替える
11:27こともできるようになって
11:30ます先ほど少し出てきたんですがフレーム
11:34にはオートレイアウトという機能があり
11:36ますフレームのプロパティパネルにある
11:39オートレイアウトという項目をクリックし
11:41て使用することができますオート
11:44レイアウト機能は要素を成立させる機能で
11:47直下の要素を成立させることが可能です
11:50オートレイアウトの設定としては要素を
11:53並べる方向や配置の指定パディングの設定
11:56なども行うことができます
11:59またフレーム地体のサイズも固定にするか
12:02中の要素に合わせるかの指定ができます
12:05直下の要素に関しても同様に固定にするか
12:09フレームサイズに合わせて変化させるかの
12:11指定ができ
12:12ますまこの機能は慣れるまで使いこなすの
12:15が難しい機能ではあるんですが例えば
12:18アイコンとテキストを並べてアイコンを
12:21固定テキストを可変にするなんて指定も
12:23でき
12:24ますこれが使えるようになると
12:26レスポンシブのデザインが楽になるので
12:28是非積極的に使って欲しい機能ですFMA
12:32で画像を使用する際にはキャンバス上に
12:34画像ファイルをドラッグアドロップすると
12:37画像ファイルが挿入されます画像ファイル
12:39はプロパティパネルから表示形式の指定が
12:42可能ですCSSのバックグラウンド
12:45プロパティーのようにシェープを埋める形
12:48だったりシェイプ内に収める形繰り返しで
12:51の表示が可能ですまた画像ファイルは旅行
12:55量やコントラストなどの色補正をすること
12:58ができます
12:59でフィグマでは画像の扱い方が少しだけ
13:02特徴があります例えばXCの場合だと
13:06埋め込んだ画像は画像ファイルとして
13:08ファイル内に存在しますがフィグマでは
13:11オブジェクトの塗りとして画像が存在し
13:13ます塗りとして存在しているっていうのは
13:16どういうことかと言うと例えばシェープの
13:19塗りに青や黒などのカラー指定をしている
13:22のと同じようにシェイプの塗りに画像が
13:26指定されている形になりますこれは
13:29とっても便利な点になっていて画像が塗り
13:32で存在していることによって画像を他の
13:35シェープにコピペすることが可能になって
13:37い
13:37ますFMAではカラーやフォントの
13:40スタイルなどをあらかじめ定義しておく
13:43ことが可能です規模が大きめの
13:45プロジェクトではスタイルガイドという
13:48デザインのルールを定義したガイドライン
13:50を作成した上でデザイン制作を行うことが
13:52あり
13:53ますスタイルガイドではデザインで使用
13:56するカラーやテキストの種類ドロップ
13:58シャドウの値などを定義しますがこの
14:01スタイルの定義をフィグマ上でも行うこと
14:03が可能
14:04ですまずサイトで使用するカラーをいくつ
14:07か用意します1つのカラーを選択して
14:11プロパティパネルの塗りの欄にある黒丸が
14:144つのアイコンこれをクリックしますここ
14:17で定義されているスタイルの一覧を確認
14:20することができますまた右側のプラス
14:23ボタンをクリックするとスタイル名を入力
14:26するフォームが表示されるので名を入力し
14:29てクリエイトスタイルボタンをクリック
14:31すると新しいスタイルとして登録されます
14:36このスタイルはいつでも使用することが
14:38できて使用する際にはテキストやシェープ
14:41を選択した状態で塗りのスタイル一覧を
14:44開きますここで登録されている塗りを
14:47クリックすれば選択しているオブジェクト
14:50に塗りが反映される形になりますこの定義
14:53されているスタイルはもちろん変更や調整
14:56をすることが可能
14:57ですスタイル一覧の右側の調整アイコンを
15:00クリックすると色や名前を変更することが
15:03できますただしこの定義を使用している
15:06全ての要素に対して変更が反映されて
15:09しまうので変更する際には注意して
15:12くださいこの定義は色だけではなくて
15:16フォントや線ドロップシャドウにも対応し
15:18ています使い方としてはカラーの定義と
15:22同様
15:22です特にフォントとカラーはあらかじめ
15:25定義しておくことがおすすめですスタイル
15:29の上位互換の機能として
15:34バリアブルライフ
15:37ブルはスタイル同様に値を定義することが
15:41できますがその他にもダークモード用の値
15:44を定義しておくことやエイリアスいわゆる
15:47値を参照する機能が備わっていますその
15:51ため
15:53バリアブルライフ
15:57にはコンポーネントという機能があります
16:01コンポーネント機能はいわゆる要素を部品
16:03化する機能ですコンポーネントは特典の
16:07要素をサイト上で使い回したい際に使用
16:09する機能です先ほど出てきたスタイル定義
16:13のパーツ版みたいなイメージが近いかも
16:16しれませんこの機能は言葉だと分かり
16:19づらいと思うので図で説明したいと思い
16:22ますまずフマで作成した要素があります
16:25これをコンポーネント化してみます
16:28コンポーネント化した要素はメイン
16:31コンポーネントという要素として扱われ
16:33ますこのメインコンポーネントは複製して
16:37使用することができます複製した要素は見
16:40た目や構成はメインコンポーネントと全く
16:43同じですがインスタンスという要素として
16:46扱われますオリジナルがメイン
16:49コンポーネント複製したものが
16:51インスタンスということになり
16:53ますまたインスタンスを複製した場合も
16:57インスタンスが出来上がります
16:59で次にそれぞれの要素に変更を加えた際の
17:02挙動を見ていきたいと思いますまずメイン
17:06コンポーネントに変更を加えた場合メイン
17:09コンポーネントの色やフォントテキスト
17:12サイズなどを変更した場合これらの変更が
17:15全てインスタンスにも反映されますでは逆
17:18にインスタンスに変更を加えた場合はどう
17:21なるでしょうかインスタンスに変更を加え
17:24た場合変更はそれ自体にしか反映されませ
17:27んメインコンポーネントはもちろん他の
17:30インスタンスに対しても影響を与えません
17:33ここはメインコンポーネントと異なる挙動
17:36になり
17:36ますまたインスタンスに変更を加えた状態
17:40でメインコンポーネントに変更を加えると
17:42どうなるでしょうかこの場合は変更を加え
17:46た要素を除いてメインコンポーネントの
17:48変更が反映されます例えばインスタンスで
17:52画像を変更していた場合メイン
17:54コンポーネントの画像を変更したとしても
17:57そのインスタンスには画像の変更が反映さ
18:00れなくなりますただ変更を加えていない他
18:03の要素例えばテキスト内容やテキストの
18:06カラーなどを変更した際にはそれは反映さ
18:09れるといった挙動になりますここで実際の
18:13表示を確認してみたいと思いますまずは
18:16要素を用意してこれをコンポーネント化し
18:18たいと思います要素をコンポーネント化
18:21するには画面上部のコンポーネントを作成
18:24のアイコンをクリックしますそうすること
18:27での要素がメインコンポーネントに変更さ
18:30れ
18:31ますちなみにメインコンポーネントは必型
18:34が4つ集まったアイコンになりますでここ
18:38からインスタンスを作ってみますメイン
18:41コンポーネントを複製すると複製された
18:44要素がインスタンスですインスタンスは
18:47メインコンポーネントと異なり皮型が1つ
18:51のアイコンになってい
18:52ますこれで先ほど説明したように変更を
18:55加えてみたいと思い
18:57ますまずはメインコンポーネントに変更を
19:00加えた際は全てのインスタンスに変更が
19:02反映され
19:05ますインスタンスに変更を加えた場合その
19:08インスタンスのみ変更される形になります
19:12またこの状態でメインコンポーネントに
19:15変更を加えるとインスタンスの変更を加え
19:18てない要素にはメインコンポーネントの
19:20変更が反映されてインスタンスの変更を
19:23加えた要素にはメインコンポーネントの
19:26変更は反映されないっていう形になります
19:29ちなみにインスタンスの変更はいつでも
19:32取り消すことができますインスタンスを右
19:35クリックしてリセットAllチェンジズを
19:37クリックもしくはプロパティパネルの
19:40コンポーネント表示のドットメニューから
19:43リセットAllチェンジズを
19:45クリックするとインスタンスをメイン
19:47コンポーネントと同じスタイルに戻すこと
19:49ができますまたインスタンスはいつでも
19:53解除することができます右クリック
19:56インスタンスの解除をクリックするか
19:59もしくはプロパティパネルの
20:01コンポーネント表示のドットメニューから
20:03リタッチインスタンスをクリックそうする
20:07ことでインスタンスから通常の
20:09オブジェクトに変更することができます
20:12ちなみにメインコンポーネントがどれだか
20:14分からなくなってしまった際はプロパティ
20:17パネルのgotoメインコンポーネントと
20:19いうアイコンをクリックすればいつでも
20:22メインコンポーネントへ遷移することが
20:24できますコンポーネント機能について少し
20:27難しいかもしれませんが試しにいじってる
20:30うちにどういった挙動になるのか分かって
20:32くるかと思います次にコンポーネント機能
20:35のバリアントについて説明したいと思い
20:37ますバリアントとはいわゆるパターンや
20:40種類のことで1つのコンポーネントに対し
20:43ていくつかのパターンを設けることができ
20:46ます例えばアイコンをレに説明したいと
20:49思いますサイト上で同じアイコンでも
20:52いろんな色を使う必要があるとしますこれ
20:55をバリアントを使用してパターンを作って
20:57いきたいと思い思ますまず黒色のアイコン
21:00をコンポーネント化しますここからこの
21:03コンポーネントのパターンを設けたいので
21:06画面上部のアドバリアントのアイコンを
21:08クリックしますするとコンポーネントに
21:11バリアントが追加されてこのような表示に
21:14なりましたここでパターンの表示を作って
21:17いきます今回黒の他に青いアイコンを作っ
21:21てみたいのでここに表示されている2つ目
21:24のアイコンの色を青色に変更しますこれで
21:28青いアイコンのパターンを作成することが
21:30できましたまたバリアントには分かり
21:33やすいようにプロパティ名とバリアント名
21:36をつけることができ
21:38ます今回色のパターンを作ったので
21:41プロパティ名をカラーにしてあげます
21:44それぞれ黒いアイコンと青いアイコンなの
21:46でバリアント名を黒青としてあげますでは
21:51ここから実際にバリアントを使ってみたい
21:53と思いますまずはメインコンポーネントを
21:56複製してインスタンスを作成しますでこの
22:00インスタンスのプロパティパネルを見て
22:02みるとコンポーネント情報の欄に先ほど
22:05作成したプロパティ名とバリアント名が
22:08表示されているのが分かるかと思います
22:11ここのバリアント名の箇所がセレクト
22:13ボックスになっているのでこれを青に変更
22:16してみますするとインスタンスの表示が
22:19切り替わりましたこんな感じであらかじめ
22:22バリアントでパターンを設けてそれを簡単
22:25に切り替えて使用することが
22:27コンポーネントでは可能です今回アイコン
22:31のカラーパターンだけを例にあげましたが
22:33実際はオブジェクトのサイズや画像の種類
22:37レイアウトパターンなどいろんな要素で
22:39パターンを設けることができるので是非
22:41この機能も積極的に活用してみて
22:44ください次はプロトタイプ機能について
22:47ですプロトタイプ機能ではいわゆる疑似的
22:51なウェブサイトを作ることが可能
22:53です画面繊維やホバーの表示など実際の
22:58ウェブサイトに近い動きを再現することが
23:00できますまず画面線維を作ってみたいので
23:04いくつかのサンプルページを用意します
23:07使い方としてはまずプロパティパネル上部
23:10のプロトタイプという箇所をクリックして
23:13プロトタイプモードに切り替えますここで
23:16画面遷移を作っていきます1ページ目に
23:20あるボタンをクリックしたら次のページに
23:22遷移するといった挙動を作りたいので
23:24ボタンに対してインタラクションいわゆる
23:28操作した際の挙動を設定していきます
23:31プロトタイプモードで要素を選択した場合
23:34こんな感じで要素の右側に丸ポチが表示さ
23:37れるのでこれをドラッグして遷移したい
23:40ページ上で話しますこれでページ繊維の
23:44挙動を作ることができましたこれを実際に
23:47確認してみたいと思います画面右上の
23:51プレゼンテーションボタンをクリックし
23:52ますそうするとプレビュー画面が表示さ
23:55れるのでプレビュー上のボタンをクリック
23:58すると画面遷移をすることができまし
24:01たこんな感じで動作を設定してあげること
24:04で実際のサイトの動きに近いものをプロト
24:07タイプとして作ることが可能になってい
24:09ますページ繊維の他にもドラッグした際の
24:13動きやホバーの表示など細かい動きに関し
24:16ても設定することが可能
24:18ですフィグマはデザインファイルや
24:20プロトタイプを共有することが可能です
24:24デザインファイルの共有は画面右上の共有
24:27ボタンから行うことができます共有には
24:31大きく分けて2つあって1つ目はファイル
24:33に招待するもしくはURLを共有するこの
24:382つの共有方法があり
24:40ますデフォルトではリンクを知っていれば
24:43誰でも見られるURLが発行されるので
24:46簡単にシェアしたい時はURL共有がお
24:49すめですモーダル左下のコピーリンクを
24:53クリックすればURLがコピーされます
24:57そのURLにアクセスすれば誰でも
24:59デザインファイルを閲覧することが可能に
25:01なり
25:02ますまた編集者としてファイルを共有する
25:05際にはファイルに招待する必要があります
25:09ファイルに招待するにはメールアドレスを
25:12入力して招待メールを送り
25:14ますただし最初に話した通りドラフト上で
25:18は共同編集ができないため編集者として
25:22共有する場合にはプロジェクト配下に
25:24ファイルを移動させる必要があります次に
25:28プロトタイプの共有ですサイトイメージの
25:31共有やデザインの確認をしてもらいたい
25:34場合にはこのプロトタイプの共有がお
25:36すすめですプロトタイプの共有はまず画面
25:40右上のプレビューボタンからプロトタイプ
25:43のプレビュー画面を開きますプレビュー
25:46画面の右上にシアプロトタイプという
25:49ボタンがあるのでそれをクリックすると
25:52デザインファイル同様のモーダルが開かれ
25:54ますさっきと同じでここのコピーリンク
25:57ボタンのURLを共有すればプロトタイプ
26:00が見られるようになりますコーディング
26:03などに使用する画像の書き出しについて
26:06説明したいと思い
26:07ます書き出し方法としてはまず書き出した
26:11要素を選択し
26:12ます複数の要素を一括で書き出すことも
26:16可能
26:17です書き出したい要素を選択した状態で
26:21プロパティパネルの1番下を見ると
26:23エクスポートの項目がありますこれを
26:26クリックすると画像形式や倍率が選択
26:29できるのでこれを設定した上でその下の
26:33エクスポートボタンを押すと画像の
26:35書き出しが行われますページのデザインを
26:38画像として書き出したい場合も同じなので
26:42その場合はページのフレームを選択した
26:44状態で同様の操作を行うだけで画像として
26:47書き出され
26:48ますこの動画が少しでも参考になったと
26:51いう方はいいねとチャンネル登録して
26:53いただけたら嬉しいです最後までご視聴
26:55いただきありがとうございました
27:03[音楽]
関連動画をさらに表示
Figmaの使い方 ｢完全攻略｣ 基本編を分かりやすく解説！【2023年最新版】
【パワポ作成 5つのポイント ♯1】これさえできれば誰でも「一流パワポマスター」／東大工学部卒「パワポ芸人」／国山ハセンのパワポの点数は？ リアル企画書にダメ出し【パワポ芸人 トヨマネ】
【最新AI】センス不要でWebサイトや図解を一瞬で作成！生産性10倍の話題AI「v0」を徹底解説！
【東大の天才vsReHacQ】ChatGPTの裏技！AI使うコツは「洗脳」【最新論文】
便利技を紹介します｜ここまで使える！Copilot初心者講座2024年7月
Complete Beginners Guide to Midjourney V6!
5.0 / 5 (0 votes)