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