【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
こんにちはひろです今回はFMAを使い
始めたいという方に向けてfigmaの
基本的な機能や使い方について詳しく説明
していきたいと思います以前にも同じ
タイトルで動画をあげているんですがこの
動画はその内容を最新の情報に
アップデートしたものとなっていますこれ
からフィグマを使ってみたいという方や
使ってみたけど少し難しかったというよう
な方はこの動画を参考にフィグマを使い
始めていただけたら幸いですそれでは撮が
始めていきたいと思い
ますfigmaはウェブサイトや
アプリケーションのデザインや
プロトタイプ制作ができるデザインツール
ですできることとしてはWebデザイン
プロトタイプの作成デザインの共同編集
制作物のシェアなどがあげられますFMA
はアカウントを作るだけで誰でも無料で
使い始めることができますアカウントの
作成にはGoogleアカウントもしくは
メールアドレスがあればすぐに作ることが
できます他のデザインツールと異なり
FMAはブラウザ上で使うことができるの
も魅力の1つですFMには無料プランと
有料プランがあり使える機能の範囲が
異なります有料プランでのみ使用可能な
機能としてはチームプロジェクトページ数
無制限
バリアブルソード動画の埋め込みなどが
あげられますただ無料プランの範囲内で
あっても基本的なWebデザインにおいて
は十分な機能が揃っているので個人や小
規模なチームであれば無料プランでも全く
問題ありませんFMAにログインすると
このような画面が表示されますこの画面は
FMAのデザインファイルやプロジェクト
を管理する画面ですここで作成できる
ファイルは2種類あってデザインファイル
とfigJAMファイルを作成できます
ただfigJAMファイルというのは共同
編集可能なホワイトボードのような
ファイルなのでデザインには使用しません
そのため基本的にはデザインファイルを
作成して使っていき
ますファイルを作成できる場所は大きく
分けると2つあって下書きとチームがあり
ますまず先にチームを説明するとチームは
その名の通りにチームに適したファイル
管理を行える場所
ですチームの構成としてはチーム
プロジェクトファイルという回送構造に
なっていてチームやプロジェクトに編集者
を招待して作業を進めていくっていった
流れになっていますただし無料プランで
このチームを使うにはファイル数やページ
数に制限がありますそのため無料プランの
場合は基本的には使用しません無料プラン
ではもう一方の下書きを使用します名前
だけ聞くと下書きなので気になるかもしれ
ませんがデザインにおける機能的な制限は
全くなくて僕自身本業のデザイン業務も
下書き内で問題なく完結できているものも
たくさんあるのでその点安心して使ってみ
て
くださいなのでこの画面の内容をまとめる
と下書き内にデザインファイルを作成する
といった形で使用します
まずサイドバーで下書きを選択した上で
右上にあるデザインファイルのボタンを
クリックし
ますすると新しくデザインファイルが作成
されて開かれた状態になります画面上部
中央に表示されているように下書きの中に
無題というデザインファイルが作成されて
いる状態
ですちなみにファイル名はここをクリック
すれば変更することができます画面左上に
はツールバーがあってここでいろんな
ツールを切り替えてデザイン作業を行って
いきます画面中央はキャンバスと呼ばれる
エリアになっていてここでデザイン制作を
行います画面左側にはレイヤーパネルが
ありますここではページの管理とレイヤー
の管理をすることができ
ます画面右側にはプロパティーパネルが
ありますファイルの情報や選択している
要素の詳細情報を確認変更することができ
ますここで基本的ななツールをざっくり
説明していきますツールは頻繁に切り替え
ながら作業していくのでショートカット
キーを覚えておくと便利なのでおすすめ
です移動ツールはオブジェクトを選択し
たり移動する際に使用するツールです常に
使用する基本のツールでショートカット
キーはV
です拡大縮小ツールはその名の通り要素の
拡大縮小を行うツールです例えば選択
ツールでテキストの拡大縮小を行うと文字
のは変わらずにエリアのサイズが変わって
しまいますそのためテキストの拡大表示
なんかを行う際には拡大縮小ツールを使用
しますショートカットキーはK
ですフレームツールはいわゆる骨組みを
作成するツールですフレームツールを選択
した状態でプロパティパネルを見てみると
フレームのテンプレートが表示されるので
各種デバイスサイズのフレームを簡単に
作ることができますフレームについては他
にも用途があるので後ほど詳しく解説し
ますセクションツールはフレームを資格的
にグループ化することができるツールです
さらにプロトタイプモードでは最後に
アクセスしたフレームを記憶しておく
なんて機能もあります現段階ではその辺
難しいと思うので資格的にグループが
できる点だけ覚えておけば大丈夫
ですスライスツールは特定の範囲を
書き出したい時に使用しますただ画像素材
の書き出しにはスライスツールはあまり
使用しないので使用頻度は低いです
シェープツールは長方形や楕円直線など
シェープを作成する際に使用するツール
ですこれも主要なツールの1つなので
ショートカットキーを覚えておくと便利
ですペンツールはシェイプのパス調整に
使用するツール
ですシェープを変形させる際やアイコンの
調整などに使用しますテキストツールは
テキストを入力するツールですクリックし
て挿入した場合テキスト量に応じて幅が
広がりますがドラッグして挿入することに
よって固定幅で折り返すテキストエリアを
作ることができ
ます深いレイヤー内のテキストにも直接
アクセスができるのでテキスト編集の際に
も便利なツール
です通常スペースキーを押すだけで一時的
に手のひらツールに切り替わるのでツール
バーからの使用頻度は低いツールですまた
トラックパッドや左右のスクロールがある
マウスを使用している方は手のひらツール
の使用頻度はか低くなるかと思います
コメントツールはキャンバス上にコメント
を残せるツールですチャット形式で
やり取りができるのでチームでの利用にも
向いています個人的なメモとして使用する
のもありかと思いますショートカットキー
はCですフィグマを使う上では隠せない
フレームについて説明しますフレームとは
その名の通り枠組の役割として使用します
フレームは主に2つの役割があって11
アートボード2要素の列レイアウトこの2
つの役割で使用しますフレームツールを
選択した上でキャンバス上でクリックして
ドラッグしてみますすると四角い枠を作る
ことができますまた右のプロパティパネル
を見てみると様々なスクリーンサイズの
テンプレートが用意されているのでこれを
クリックすることでもフレームを作成する
ことができますこのように作成した
フレームはアートボードとして使用する
ことができます
アートボードとして作成されたフレームの
中に四角や丸といったシェープやテキスト
を用いてデザインをした上でこれを画像と
して書き出すといった使い方ができます次
にレイアウトとしての役割ですフレームを
作成して中にアイコンとテキストを配置し
ますこれに加えてフレームに使えるオート
レイアウトという機能を適用するとこの
ようにフレーム内の要素を列することが
できできますまたフレーム自体に線や背景
色パディングなどを設定することができる
のでフレームを用いてボタンのパーツを
作成するなんてことも可能
ですもちろんシェイプとテキストを
組み合わせてパーツを作るっていうことも
可能ですがフレームのオートレイアと機能
を用いてパーツを作成しておくと長身の
変更に応じて可変するパーツを作ることが
でき
ますフレームと似た機能としてグループが
あります
グループはフレームのように線や色をつけ
たり小要素を成立させるような機能はなく
て単純に要素をまとめるだけに使用します
この2つの使い分けとしては単に要素を
まとめる際にはグループまとめた要素に
対して何かしらの制約をかけたい場合は
フレームを使いますまたグループと
フレームはプロパティーパネルからいつで
も切り替えることができ
ますフレーム配下の要素にはコンスツと
いう項目が表示されますこれはフレームの
変化に対して何を基準に従うかということ
を決める項目になり
ます例えばフレームの配下に四角い
シェープを配置しますこの時シェープの
コンストレイントを見てみると左上という
指定になっていますこの状態でフレームの
サイズを変化するとシェープはフレームの
左上を基準として配置されているのが
分かるかと思いますこのコンストレイント
を右下のような形にした場合はフレーム
サイズを変更した際にフレームの右下を
基準としてシェープが配置される形になり
ますまたスケールを選択している場合は
フレームのサイズに応じて自身のサイズも
変化するといった挙動になりますこの
コンストレイントは初めのうちはうまく
使うのが難しいと思うので基本的には左を
基準にしておくのがおすめですでこれ
たまにあるんですがフレームのサイズを
変更する際に要素が動いたり崩れてしま
うってことが出てくるかと思いますその時
はこのコンストレイントの指定が影響して
いるケースが多いのでこういった場合は
崩れる要素のコンストレイントを左上に
設定しておけば崩れなくなるかと思い
ますキャンバス上のオブジェクト構成に
ついては画面左のレイヤーパネルで確認
することができますオブジェクトの表示が
うまくいかないなって時はこのレイヤー
パネルを確認すると解決することが多い
です例えばデザインファイル上で見えて
いるオブジェクトがプロトタイプでは表示
されないなんてことがありますこれは表示
されないオブジェクトがフレーム内に配置
されていない場合に起きる現象でフレーム
内にオブジェクトを配置してあげれば
正しく表示され
ますまこんな感じでフィグマでは画面上の
見た目だけではなくてオブジェクトの配置
や構成が結構重要になってくるので普段
からレイヤー構成を意識したデザイン制作
が必要になってきますまたレイヤーパネル
のアイコンがそれぞれ何を意味するのかも
知っておくと便利かと思いますのでこれも
チェックしてみて
くださいFMAでは要素を簡単に列
並び替えを行うことができます複数の要素
を選択すると右下に要素を整頓させる
ボタンが表示されるのでこれをクリック
すると要素同感覚で綺麗に成立してくれ
ますまたこの状態で要素同士の感覚を調整
することや要素同士の場所を入れ替える
こともできるようになって
ます先ほど少し出てきたんですがフレーム
にはオートレイアウトという機能があり
ますフレームのプロパティパネルにある
オートレイアウトという項目をクリックし
て使用することができますオート
レイアウト機能は要素を成立させる機能で
直下の要素を成立させることが可能です
オートレイアウトの設定としては要素を
並べる方向や配置の指定パディングの設定
なども行うことができます
またフレーム地体のサイズも固定にするか
中の要素に合わせるかの指定ができます
直下の要素に関しても同様に固定にするか
フレームサイズに合わせて変化させるかの
指定ができ
ますまこの機能は慣れるまで使いこなすの
が難しい機能ではあるんですが例えば
アイコンとテキストを並べてアイコンを
固定テキストを可変にするなんて指定も
でき
ますこれが使えるようになると
レスポンシブのデザインが楽になるので
是非積極的に使って欲しい機能ですFMA
で画像を使用する際にはキャンバス上に
画像ファイルをドラッグアドロップすると
画像ファイルが挿入されます画像ファイル
はプロパティパネルから表示形式の指定が
可能ですCSSのバックグラウンド
プロパティーのようにシェープを埋める形
だったりシェイプ内に収める形繰り返しで
の表示が可能ですまた画像ファイルは旅行
量やコントラストなどの色補正をすること
ができます
でフィグマでは画像の扱い方が少しだけ
特徴があります例えばXCの場合だと
埋め込んだ画像は画像ファイルとして
ファイル内に存在しますがフィグマでは
オブジェクトの塗りとして画像が存在し
ます塗りとして存在しているっていうのは
どういうことかと言うと例えばシェープの
塗りに青や黒などのカラー指定をしている
のと同じようにシェイプの塗りに画像が
指定されている形になりますこれは
とっても便利な点になっていて画像が塗り
で存在していることによって画像を他の
シェープにコピペすることが可能になって
い
ますFMAではカラーやフォントの
スタイルなどをあらかじめ定義しておく
ことが可能です規模が大きめの
プロジェクトではスタイルガイドという
デザインのルールを定義したガイドライン
を作成した上でデザイン制作を行うことが
あり
ますスタイルガイドではデザインで使用
するカラーやテキストの種類ドロップ
シャドウの値などを定義しますがこの
スタイルの定義をフィグマ上でも行うこと
が可能
ですまずサイトで使用するカラーをいくつ
か用意します1つのカラーを選択して
プロパティパネルの塗りの欄にある黒丸が
4つのアイコンこれをクリックしますここ
で定義されているスタイルの一覧を確認
することができますまた右側のプラス
ボタンをクリックするとスタイル名を入力
するフォームが表示されるので名を入力し
てクリエイトスタイルボタンをクリック
すると新しいスタイルとして登録されます
このスタイルはいつでも使用することが
できて使用する際にはテキストやシェープ
を選択した状態で塗りのスタイル一覧を
開きますここで登録されている塗りを
クリックすれば選択しているオブジェクト
に塗りが反映される形になりますこの定義
されているスタイルはもちろん変更や調整
をすることが可能
ですスタイル一覧の右側の調整アイコンを
クリックすると色や名前を変更することが
できますただしこの定義を使用している
全ての要素に対して変更が反映されて
しまうので変更する際には注意して
くださいこの定義は色だけではなくて
フォントや線ドロップシャドウにも対応し
ています使い方としてはカラーの定義と
同様
です特にフォントとカラーはあらかじめ
定義しておくことがおすすめですスタイル
の上位互換の機能として
バリアブルライフ
ブルはスタイル同様に値を定義することが
できますがその他にもダークモード用の値
を定義しておくことやエイリアスいわゆる
値を参照する機能が備わっていますその
ため
バリアブルライフ
にはコンポーネントという機能があります
コンポーネント機能はいわゆる要素を部品
化する機能ですコンポーネントは特典の
要素をサイト上で使い回したい際に使用
する機能です先ほど出てきたスタイル定義
のパーツ版みたいなイメージが近いかも
しれませんこの機能は言葉だと分かり
づらいと思うので図で説明したいと思い
ますまずフマで作成した要素があります
これをコンポーネント化してみます
コンポーネント化した要素はメイン
コンポーネントという要素として扱われ
ますこのメインコンポーネントは複製して
使用することができます複製した要素は見
た目や構成はメインコンポーネントと全く
同じですがインスタンスという要素として
扱われますオリジナルがメイン
コンポーネント複製したものが
インスタンスということになり
ますまたインスタンスを複製した場合も
インスタンスが出来上がります
で次にそれぞれの要素に変更を加えた際の
挙動を見ていきたいと思いますまずメイン
コンポーネントに変更を加えた場合メイン
コンポーネントの色やフォントテキスト
サイズなどを変更した場合これらの変更が
全てインスタンスにも反映されますでは逆
にインスタンスに変更を加えた場合はどう
なるでしょうかインスタンスに変更を加え
た場合変更はそれ自体にしか反映されませ
んメインコンポーネントはもちろん他の
インスタンスに対しても影響を与えません
ここはメインコンポーネントと異なる挙動
になり
ますまたインスタンスに変更を加えた状態
でメインコンポーネントに変更を加えると
どうなるでしょうかこの場合は変更を加え
た要素を除いてメインコンポーネントの
変更が反映されます例えばインスタンスで
画像を変更していた場合メイン
コンポーネントの画像を変更したとしても
そのインスタンスには画像の変更が反映さ
れなくなりますただ変更を加えていない他
の要素例えばテキスト内容やテキストの
カラーなどを変更した際にはそれは反映さ
れるといった挙動になりますここで実際の
表示を確認してみたいと思いますまずは
要素を用意してこれをコンポーネント化し
たいと思います要素をコンポーネント化
するには画面上部のコンポーネントを作成
のアイコンをクリックしますそうすること
での要素がメインコンポーネントに変更さ
れ
ますちなみにメインコンポーネントは必型
が4つ集まったアイコンになりますでここ
からインスタンスを作ってみますメイン
コンポーネントを複製すると複製された
要素がインスタンスですインスタンスは
メインコンポーネントと異なり皮型が1つ
のアイコンになってい
ますこれで先ほど説明したように変更を
加えてみたいと思い
ますまずはメインコンポーネントに変更を
加えた際は全てのインスタンスに変更が
反映され
ますインスタンスに変更を加えた場合その
インスタンスのみ変更される形になります
またこの状態でメインコンポーネントに
変更を加えるとインスタンスの変更を加え
てない要素にはメインコンポーネントの
変更が反映されてインスタンスの変更を
加えた要素にはメインコンポーネントの
変更は反映されないっていう形になります
ちなみにインスタンスの変更はいつでも
取り消すことができますインスタンスを右
クリックしてリセットAllチェンジズを
クリックもしくはプロパティパネルの
コンポーネント表示のドットメニューから
リセットAllチェンジズを
クリックするとインスタンスをメイン
コンポーネントと同じスタイルに戻すこと
ができますまたインスタンスはいつでも
解除することができます右クリック
インスタンスの解除をクリックするか
もしくはプロパティパネルの
コンポーネント表示のドットメニューから
リタッチインスタンスをクリックそうする
ことでインスタンスから通常の
オブジェクトに変更することができます
ちなみにメインコンポーネントがどれだか
分からなくなってしまった際はプロパティ
パネルのgotoメインコンポーネントと
いうアイコンをクリックすればいつでも
メインコンポーネントへ遷移することが
できますコンポーネント機能について少し
難しいかもしれませんが試しにいじってる
うちにどういった挙動になるのか分かって
くるかと思います次にコンポーネント機能
のバリアントについて説明したいと思い
ますバリアントとはいわゆるパターンや
種類のことで1つのコンポーネントに対し
ていくつかのパターンを設けることができ
ます例えばアイコンをレに説明したいと
思いますサイト上で同じアイコンでも
いろんな色を使う必要があるとしますこれ
をバリアントを使用してパターンを作って
いきたいと思い思ますまず黒色のアイコン
をコンポーネント化しますここからこの
コンポーネントのパターンを設けたいので
画面上部のアドバリアントのアイコンを
クリックしますするとコンポーネントに
バリアントが追加されてこのような表示に
なりましたここでパターンの表示を作って
いきます今回黒の他に青いアイコンを作っ
てみたいのでここに表示されている2つ目
のアイコンの色を青色に変更しますこれで
青いアイコンのパターンを作成することが
できましたまたバリアントには分かり
やすいようにプロパティ名とバリアント名
をつけることができ
ます今回色のパターンを作ったので
プロパティ名をカラーにしてあげます
それぞれ黒いアイコンと青いアイコンなの
でバリアント名を黒青としてあげますでは
ここから実際にバリアントを使ってみたい
と思いますまずはメインコンポーネントを
複製してインスタンスを作成しますでこの
インスタンスのプロパティパネルを見て
みるとコンポーネント情報の欄に先ほど
作成したプロパティ名とバリアント名が
表示されているのが分かるかと思います
ここのバリアント名の箇所がセレクト
ボックスになっているのでこれを青に変更
してみますするとインスタンスの表示が
切り替わりましたこんな感じであらかじめ
バリアントでパターンを設けてそれを簡単
に切り替えて使用することが
コンポーネントでは可能です今回アイコン
のカラーパターンだけを例にあげましたが
実際はオブジェクトのサイズや画像の種類
レイアウトパターンなどいろんな要素で
パターンを設けることができるので是非
この機能も積極的に活用してみて
ください次はプロトタイプ機能について
ですプロトタイプ機能ではいわゆる疑似的
なウェブサイトを作ることが可能
です画面繊維やホバーの表示など実際の
ウェブサイトに近い動きを再現することが
できますまず画面線維を作ってみたいので
いくつかのサンプルページを用意します
使い方としてはまずプロパティパネル上部
のプロトタイプという箇所をクリックして
プロトタイプモードに切り替えますここで
画面遷移を作っていきます1ページ目に
あるボタンをクリックしたら次のページに
遷移するといった挙動を作りたいので
ボタンに対してインタラクションいわゆる
操作した際の挙動を設定していきます
プロトタイプモードで要素を選択した場合
こんな感じで要素の右側に丸ポチが表示さ
れるのでこれをドラッグして遷移したい
ページ上で話しますこれでページ繊維の
挙動を作ることができましたこれを実際に
確認してみたいと思います画面右上の
プレゼンテーションボタンをクリックし
ますそうするとプレビュー画面が表示さ
れるのでプレビュー上のボタンをクリック
すると画面遷移をすることができまし
たこんな感じで動作を設定してあげること
で実際のサイトの動きに近いものをプロト
タイプとして作ることが可能になってい
ますページ繊維の他にもドラッグした際の
動きやホバーの表示など細かい動きに関し
ても設定することが可能
ですフィグマはデザインファイルや
プロトタイプを共有することが可能です
デザインファイルの共有は画面右上の共有
ボタンから行うことができます共有には
大きく分けて2つあって1つ目はファイル
に招待するもしくはURLを共有するこの
2つの共有方法があり
ますデフォルトではリンクを知っていれば
誰でも見られるURLが発行されるので
簡単にシェアしたい時はURL共有がお
すめですモーダル左下のコピーリンクを
クリックすればURLがコピーされます
そのURLにアクセスすれば誰でも
デザインファイルを閲覧することが可能に
なり
ますまた編集者としてファイルを共有する
際にはファイルに招待する必要があります
ファイルに招待するにはメールアドレスを
入力して招待メールを送り
ますただし最初に話した通りドラフト上で
は共同編集ができないため編集者として
共有する場合にはプロジェクト配下に
ファイルを移動させる必要があります次に
プロトタイプの共有ですサイトイメージの
共有やデザインの確認をしてもらいたい
場合にはこのプロトタイプの共有がお
すすめですプロトタイプの共有はまず画面
右上のプレビューボタンからプロトタイプ
のプレビュー画面を開きますプレビュー
画面の右上にシアプロトタイプという
ボタンがあるのでそれをクリックすると
デザインファイル同様のモーダルが開かれ
ますさっきと同じでここのコピーリンク
ボタンのURLを共有すればプロトタイプ
が見られるようになりますコーディング
などに使用する画像の書き出しについて
説明したいと思い
ます書き出し方法としてはまず書き出した
要素を選択し
ます複数の要素を一括で書き出すことも
可能
です書き出したい要素を選択した状態で
プロパティパネルの1番下を見ると
エクスポートの項目がありますこれを
クリックすると画像形式や倍率が選択
できるのでこれを設定した上でその下の
エクスポートボタンを押すと画像の
書き出しが行われますページのデザインを
画像として書き出したい場合も同じなので
その場合はページのフレームを選択した
状態で同様の操作を行うだけで画像として
書き出され
ますこの動画が少しでも参考になったと
いう方はいいねとチャンネル登録して
いただけたら嬉しいです最後までご視聴
いただきありがとうございました
[音楽]
浏览更多相关视频
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)