INDEX
目次
前の章に戻る4章 便利な機能を覚えよう
この教材の学習時間:280分
【4-1】ショートカット
目安の学習時間:20分
今までの解説にも表記しましたが、Figmaには多くのショートカットが用意されています。
このショートカットを使いこなす事が出来れば、効率的に作業出来るようになります。
※Figmaの操作を覚えると同時に、ショートカットも覚えれば一石二鳥になると思います。
■ Figmaでよく使うショートカット
※Macの場合、Ctrlキー > Cmdキー、 Altキー > Optionキー として置き換えてください。
基本操作のショートカット
|
キー
|
効果
|
|---|---|
|
V
|
選択ツール
|
|
T
|
テキストツール
|
|
R
|
レクタングル（四角形）ツール
|
|
F
|
フレームツール
|
|
I
|
色選択
|
|
H or Spaceキー
|
手のひらツール
|
|
Ctrl + マウスホイール もしくは
Ctrl + プラス/マイナスキー
|
画面の拡大縮小
|
|
Ctrl + A
|
全選択
|
|
Esc
|
選択解除
|
|
Ctrl + C
|
コピー
|
|
Ctrl + V
|
ペースト
|
|
Ctrl + D もしくは
Alt + マウスドラッグ
|
複製
|
|
Ctrl + Z
|
元に戻す
|
|
Ctrl + Shift + Z
|
やり直す
|
|
Ctrl + 0
|
100%ズーム
|
|
Ctrl + Alt + Enter
|
プレビュー
|
便利なショートカット
|
キー
|
効果
|
|---|---|
|
Ctrl + G
|
グループ化
|
|
Ctrl + Shift + G
|
グループ化を解除
|
|
Ctrl + [
|
レイヤーを後方に移動
|
|
Ctrl + ]
|
レイヤーを前方に移動
|
|
Shift + R
|
定規を表示
|
|
Shift + G
|
グリッドを表示
|
|
Ctrl + Shift + K
|
画像を取り込む
|
テキスト系のショートカット
|
キー
|
効果
|
|---|---|
|
Ctrl + B
|
太字
|
|
Ctrl + Shift + < もしくは
Ctrl + Shift + >
|
フォントサイズ変更
|
|
Alt + < もしくは
Alt + >
|
文字詰め
|
|
Shift + Alt + < もしくは
Shift + Alt + >
|
行の調整
|
整列系のショートカット ※複数オブジェクトを選択時
|
キー
|
効果
|
|---|---|
|
Alt + H
|
水平方向に合わせる
|
|
Alt + V
|
垂直方向に合わせる
|
|
Alt + Shift + H
|
水平方向のオブジェクトを均等配置
（オブジェクトを3つ以上選択時）
|
|
Alt + Shift + V
|
垂直方向のオブジェクトを均等配置
（オブジェクトを3つ以上選択時）
|
|
Ctrl + Alt + K
|
コンポーネント
|
|
Ctrl + Alt + B
|
インスタンスの切り離し（コンポーネント・親からの切り離し）
|
|
Shift + A
|
オートレイアウト
|
|
Shift + Alt + A
|
オートレイアウトを解除
|
■ Figma上でもショートカットの確認ができる
Figmaを操作していると右脇にキーボードのヒントが確認出来ます。
※例えば、「長方形 : R」「矢印 : Shift + L」など。
これがショートカットのヒントになっています。
※例えば、「長方形 : R」「矢印 : Shift + L」など。
これがショートカットのヒントになっています。
Figma使用時でも、ショートカット一覧を確認する事も出来ます。
下記のショートカットを入力すると、画面下に一覧が表示されます。
下記のショートカットを入力すると、画面下に一覧が表示されます。
Control + Shift + ?
【4-2】ガイド（定規・グリッド）
目安の学習時間:20分
レイアウトを組む際、ガイドを使用すれば規則性のあるレイアウトを構築する事が簡単にできます。
Figmaには「定規」「グリッド」の２種類のガイドを使う事ができます。
使いやすい方を使用しましょう。
Figmaには「定規」「グリッド」の２種類のガイドを使う事ができます。
使いやすい方を使用しましょう。
☑️ サンプルデータはこちら
ガイド.fig (66.3 KB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
■ 定規の使い方
定規は ”線” を配置するガイドです。レイアウトの縦軸・横軸を合わせるのに便利です。
定規は以下の2種類の出し方があります。
- 右上の倍率をクリックし、メニュー内にある「定規」を選択（消す時も同じ項目を選択）
- ショートカット
Shift + R（消す時も同じショートカット）
定規を出すと、キャンバスの左側・上側に定規が表示されます。ここからドラッグ＆ドロップする事で、定規のラインを引く事ができます。
使用例
直感で定規を置くよりも、規則性に沿った定規の配置をする事をおすすめします。
※例えば...
①目安となる図形を作成し、横脇に配置します。
② その図形を複製し、反対側の横脇に置きます。
③ 後はその図形に沿った定規を引けば、両脇に同じ幅の定規を引く事ができます。
Alt(Option)ボタンを押しながら、オブジェクトを選択
上記の方法で、選択しているオブジェクトの位置を知る事ができます。
この方法を上手く使う事で定規を適切に配置したレイアウトを整える方法もあります。
この方法を上手く使う事で定規を適切に配置したレイアウトを整える方法もあります。
■ グリッドの使い方
グリッドはフレームを等倍してガイドを配置する方法です。
グリッドは以下の方法で使用出来ます。
"フレーム"を選択した状態で、画面右側の「レイアウトガイド」の "+" アイコンをクリックすると、グリッド線を敷く事が出来ます。
"フレーム"を選択した状態で、画面右側の「レイアウトガイド」の "+" アイコンをクリックすると、グリッド線を敷く事が出来ます。
ただ、この状態（グリッド8px）の状態だと解りづらいので、”グリッド8pxの左のアイコン" をクリックし、「列」を選択。適切な数値を選択する事で解りやすくなると思います。
ショートカット Shift + G でグリッドの表示・非表示が出来ます。
✅ UIデザインにおいてレイアウト作成をする際、余白をバランスよく配置する事がUIデザインの重要な基礎の１つでもあります。
ガイドを上手く利用し、バランスの取れた余白を作る事を意識してみましょう。
※詳しくは第５章以降で説明します。
ガイドを上手く利用し、バランスの取れた余白を作る事を意識してみましょう。
※詳しくは第５章以降で説明します。
【4-3】コンポーネントとは
目安の学習時間:20分
コンポーネントとは
FigmaはUIを作成する為の多くの機能を搭載していますが、最も習得しやすく、且つ使用頻度も高いと思われるのがこのコンポーネントになります。
同じようなパーツを使いまわしたい場合、コンポーネントを使うと便利です。
☑️ サンプルデータはこちら
コンポーネント.fig (59.4 KB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
■ 作成手順
✔ コンポーネント作成手順
1 . まず複製させたいオブジェクトを用意し、選択します。
2 . 次に右クリックから「コンポーネントを作成」を選択
※ショートカット Ctrl + Alt + K でもOK。
3 . レイヤーが紫色になり、アイコンも菱形（4つ）になっているのが確認出来ます。
これで「親」レイヤー完成です。
4 . この親レイヤーを”複製”してみましょう。すると、同じく紫色のレイヤーになっていますが、アイコンは菱形（１つ）になっています。これで「子」レイヤーの完成です。
※子レイヤーはいくらでも作成できます。
5 . 親レイヤーの中のオブジェクトを動かしてみましょう。
すると、子レイヤーのオブジェクトも同じ動きをします。
6 . 色やサイズ、テキスト、レイヤー追加など色々対応出来ます。
コンポーネントを上手く利用すれば、コンテンツ作りも容易に進める事が出来ます。
[複製について]
前章でも記載しましたが、Figmaで "複製"する方法を改めて記載します。(いずれかの方法でOK)
⭕️ Windowsの場合
- 複製したいオブジェクトを選択、
Ctrl + Cでコピー >Ctrl + Vでペースト - 複製したいオブジェクトを選択、
Ctrl + D。 Altキーを押しながら、複製したいオブジェクトを動かす。
⭕️ Macの場合
- 複製したいオブジェクトを選択、
Cmd + Cでコピー >Cmd + Vでペースト。 - 複製したいオブジェクトを選択、
Cmd + D。 Optionキーを押しながら、複製したいオブジェクトを動かす。
■ コンポーネントのもう１つのメリット - アセットパネル格納
コンポーネント化したレイヤーは、レイヤー隣のアセット（アセットパネル）に格納されます。
ドラッグ&ドロップで、アセットパネルから直ぐにキャンバスに配置する事も出来ます。
ドラッグ&ドロップで、アセットパネルから直ぐにキャンバスに配置する事も出来ます。
※他のフレームやページなど、広範囲に使い回せる為、規模のあるサイト制作時には重宝します。
【4-4】バリアント
目安の学習時間:30分
■ バリアントとは
バリアントとは、複数のコンポーネントをひとまとめにして管理する機能です。
Figmaでは、ボタンや入力フォーム、アイコンなど、繰り返し使用する要素を「コンポーネント」として作成します。しかし、同じボタンでも「通常の状態」「ホバー時」「クリック時」「無効な状態（disabled）」など、複数の状態が存在します。
これらをすべて個別のコンポーネントとして作成すると、デザインファイルがコンポーネントだらけになり、管理が非常に大変になります。
そこで登場するのが「バリアント」です。
バリアントを使うと、これらの異なる状態を一つの「コンポーネントセット」としてグループ化し、管理することができます。
WEBに設置するボタンやアイコン等、同じパーツでも若干異なる状態を手軽に切り替えたい場合などに良く使われます。
Figmaでは、ボタンや入力フォーム、アイコンなど、繰り返し使用する要素を「コンポーネント」として作成します。しかし、同じボタンでも「通常の状態」「ホバー時」「クリック時」「無効な状態（disabled）」など、複数の状態が存在します。
これらをすべて個別のコンポーネントとして作成すると、デザインファイルがコンポーネントだらけになり、管理が非常に大変になります。
そこで登場するのが「バリアント」です。
バリアントを使うと、これらの異なる状態を一つの「コンポーネントセット」としてグループ化し、管理することができます。
WEBに設置するボタンやアイコン等、同じパーツでも若干異なる状態を手軽に切り替えたい場合などに良く使われます。
☑️ サンプルデータはこちら
バリアント.fig (79.1 KB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
■ 作成手順
今回はバリアントを利用したボタンを作成してみましょう。
まずボタンの「お問い合わせ」のコンポーネントを作ります。
✔ バリアント作成手順
1 . コンポーネントを作成します。
2 . 右側パネル「プロパティを追加」より、バリアントを選択。
2 . 右側パネル「プロパティを追加」より、バリアントを選択。
3 . プロパティ名の決めましょう。今回は「ボタン」とします。
4 . コンポーネント下の + ボタンで複製します。
5 . 各々別のボタンを作成します。今回は「資料請求 」「入力内容を確認」 のボタンを作成します。
これで準備完了です。
5 . 各々別のボタンを作成します。今回は「資料請求 」「入力内容を確認」 のボタンを作成します。
これで準備完了です。
■ バリアント使用方法
バリアントで設定したパーツを設置した際、右側パネルで設定した「ボタン」の項目で、素早くパーツを切り替え出来ます。
【4-5】スタイル
目安の学習時間:20分
■ スタイルとは
フォントの色やサイズ、書体をそれぞれ登録することのできる機能です。
この機能を利用する事で、統一したスタイルの構成がしやすくなります。
この機能を利用する事で、統一したスタイルの構成がしやすくなります。
■ 作成手順
✔️ スタイル作成手順
1 . 色やサイズ、書体を登録したいテキストを選択し、右側パネル「タイポグラフィー」内の右上のアイコンを選択します。
2 . “+”のアイコンを選択し、スタイルを確認・編集します。
「スタイルの作成」ボタンで登録します。※ここでは ” 背景水色用のテキスト ”とします。
「スタイルの作成」ボタンで登録します。※ここでは ” 背景水色用のテキスト ”とします。
3 . 「テキストスタイル」に追加されました。
次に利用する際は、スタイルを適用したいテキストを選択し、この欄より選択するだけでサイズや書体が反映されます。
次に利用する際は、スタイルを適用したいテキストを選択し、この欄より選択するだけでサイズや書体が反映されます。
【4-6】オートレイアウト
目安の学習時間:80分
■ オートレイアウトとは
オートレイアウトとは、指定した複数のオブジェクトを、様々な設定により素早く規則的な整列ができる機能です。
※初めての方が使いこなすには少々難しい所もありますが、使いこなせるようになると便利です。
☑️ サンプルデータはこちら
オートレイアウト.fig (388 KB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
■ 作成手順
✔️ オートレイアウト作成方法
1 . オートレイアウトにしたい複数のオブジェクトや、グループやフレームを同時に選択。 (レイヤーの複数選択は、Shift キーを押しながら選択を行いましょう！)
2 . 右クリックで「オートレイアウトを追加」を選択。
※もしくはショートカット Shift + A
3 . オートレイアウト化したレイヤーが確認できます。（アイコンが変わります）
4 . オートレイアウト化したレイヤーを選択すると、右パネルに「オートレイアウト」の欄が確認出来ます。ここでオートレイアウトをコントロールします。
以下、オートレイアウトのテクニックをいくつか説明します。
■ 縦横並べ/折り返し
画像に記載の、右パネル「オートレイアウト」方向アイコンで選択できます。
横並べ
縦並べ
折り返し
■ 間隔の調整
画像に記載の、右パネル「オートレイアウト」間隔アイコン（縦横）で選択できます。
■ 揃えの調整
画像に記載の、右パネル「オートレイアウト」揃えアイコン（9方向）で選択できます。
■ 余白の調整
画像に記載の、右パネル「オートレイアウト」パディング（縦横、及び４方向）で選択できます。
■ フレームの調整（固定 / コンテンツの内包 / コンテナに合わせて拡大）
右パネル「オートレイアウト」の 幅(W) 及び 高さ(H) を選択すると、
- 幅を固定
各固定サイズを設定できます。 - コンテンツを内包
「オートレイアウト状態のレイヤー」を選択した場合に発動できる。 → 「オートレイアウト内のオブジェクト」のサイズに応じて、「オートレイアウト状態のレイヤー」の大きさを可変することができる。 - コンテナに合わせて拡大
「オートレイアウと状態のレイヤー」を選択した場合に発動できる。
→ 「オートレイアウト状態のオブジェクト」のサイズに応じて、100%のサイズとなる。
■ フレームの最小幅（及び高さ）・最大幅（及び高さ）設定
オブジェクトの大きさに制限を決める事が出来ます。
上記と同じく、右パネル「オートレイアウト」の 幅(W) 及び 高さ(H) より選択できます。
上記と同じく、右パネル「オートレイアウト」の 幅(W) 及び 高さ(H) より選択できます。
- 最小幅（および高さ）を追加：
これ以上小さくしたくないサイズがある場合、設定できます。 - 最大幅（および高さ）を追加：
これ以上大きくしたくないサイズがある場合、設定できます。
【4-7】マスク
目安の学習時間:20分
■ マスクとは
オブジェクトの表示領域を限定させる方法です。画像や図形の一部だけを表示させたい場合に良く使われます。
☑️ サンプルデータはこちら
マスク.fig (1.33 MB)
※サンプルデータを開くには、ホーム画面右上の「インポート」より、入手した.figデータを選択。
■ 作成手順
１.サンプルデータをFigmaで開いてから、レイヤーの「4-7 マスク」→「parts」を選択して、 「表示するオブジェクト」と「表示するオブジェクトの表示範囲のオブジェクト」を用意します。
※今回は前者が写真、後者が星形レイヤーを指しており、写真を星形に切り抜くことを目標とします。
2 . 添付写真のように「表示するオブジェクトの表示範囲のオブジェクト（星形レイヤー）」を「表示するオブジェクト（写真レイヤー）」のレイヤーの下に配置します。（デフォルトでこのように配置されている）
※今回は前者が写真、後者が星形レイヤーを指しており、写真を星形に切り抜くことを目標とします。
2 . 添付写真のように「表示するオブジェクトの表示範囲のオブジェクト（星形レイヤー）」を「表示するオブジェクト（写真レイヤー）」のレイヤーの下に配置します。（デフォルトでこのように配置されている）
3 . 両レイヤーを選択し、右クリックして「マスクとして使用」を選択する。（レイヤーの複数選択はshiftを押しながらクリック）
※ショートカットはCtrl + Alt + M。MacはCmd + Control + M
4 . 星形レイヤーを写真レイヤーの上にドラッグ＆ドロップさせることで、写真レイヤーが、星形の表示領域のみに選択されました。（レイヤーの表示もマスク用に変化）
このマスクを応用すれば、色々な表現が出来ます。
このマスクを応用すれば、色々な表現が出来ます。
■ マスクパネル
マスクの種類（アルファ/ルミナンス）を変更するには、マスクグループを選択した状態で、ツールバーにあるマスクアイコンをクリックします。
- アルファ：透明度を使用してマスクの明確度を設定できます。
- ルミナンス：明るさを使用してマスクの明確度を設定できます。
【4-8】エフェクト
目安の学習時間:15分
■ エフェクトとは
オブジェクトに影を作ったり、ぼかしたり等の効果を付ける事ができます。
手軽に付けられる便利な機能ですが、このエフェクトを多用、強調するとデザインによっては素人感が出てしまう事も多々あるので、さりげなく使う程度が良いと思います。
手軽に付けられる便利な機能ですが、このエフェクトを多用、強調するとデザインによっては素人感が出てしまう事も多々あるので、さりげなく使う程度が良いと思います。
☑️ サンプルデータはこちら
エフェクト.fig (1.81 MB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
■ エフェクトの設定方法
右パネル下の「エフェクト」より、選択できます。（デフォルト時はドロップシャドウ）
■ エフェクトの種類
それぞれ ”位置” や ”ぼかし範囲” 等で、細かい設定が出来ます。
ドロップシャドウ：オブジェクトの外側に影を付けます。
インナーシャドウ：オブジェクトの内側に影を付けます。
レイヤーブラー：オブジェクトをぼかします。
背景のぼかし：画像の一部分をぼかします。
※このエフェクトは、多少の手順を要します。
※このエフェクトは、多少の手順を要します。
[ 手順 ]
1 . オブジェクトを2つ用意します。
下のレイヤーに「ぼかす対象となる画像」を配置、その上のレイヤーに「画像をぼかす範囲のオブジェクト」を設置。
※ぼかす範囲のオブジェクトは、簡単な図形でOKです。
2 . 「画像をぼかす範囲のオブジェクト」の透明度を変更。
→（”塗り”項目内）透明度を1%～99%のいずれかに設定。
1 . オブジェクトを2つ用意します。
下のレイヤーに「ぼかす対象となる画像」を配置、その上のレイヤーに「画像をぼかす範囲のオブジェクト」を設置。
※ぼかす範囲のオブジェクトは、簡単な図形でOKです。
2 . 「画像をぼかす範囲のオブジェクト」の透明度を変更。
→（”塗り”項目内）透明度を1%～99%のいずれかに設定。
3 . 「画像をぼかす範囲のオブジェクト」を選択し、エフェクト「背景のぼかし」を選択。
4 . 後は、”ぼかし範囲”を設定すればOKです。
4 . 後は、”ぼかし範囲”を設定すればOKです。
【4-9】プラグイン
目安の学習時間:30分
■ プラグインとは
Figmaの拡張機能です。フリー画像やSNSアイコンの設置やモックアップ（デザイン見本）を手早く作成したりなど、多くの便利な機能を使う事ができます。
■ プラグインの起動方法
以下3つの、いずれかの方法で起動できます。
クイックアクション（Ctrl/command + /）を開いて、「プラグインとウィジェット」タブでプラグイン名を直接入力します。
キャンバス上で、右クリック → プラグイン → プラグインを管理を選択。
選択後は、フォーム内にプラグイン名を入力。
選択後は、フォーム内にプラグイン名を入力。
ショートカット Ctrl + p でフォームを起動 → プラグイン名を入力。
■ 便利なプラグインを紹介
Unsplash
高品質な写真を手軽に入手できます。
フォームにテーマを入力すればテーマに近いイメージが表示され、使う事が出来ます。
高品質な写真を手軽に入手できます。
フォームにテーマを入力すればテーマに近いイメージが表示され、使う事が出来ます。
Iconify
アイコン（SNSロゴなど）を入手できます。
フォームにテーマを入力すれば、テーマに近いイメージが表示され、使う事が出来ます。
※サンプルでは、Instagramを入力しています。
アイコン（SNSロゴなど）を入手できます。
フォームにテーマを入力すれば、テーマに近いイメージが表示され、使う事が出来ます。
※サンプルでは、Instagramを入力しています。
Brush
イラストを入手できます。
このプラグインもフォームにテーマを入力すれば、テーマに近いイメージが表示され使う事が出来ます。
※一部有料の素材もあります。
イラストを入手できます。
このプラグインもフォームにテーマを入力すれば、テーマに近いイメージが表示され使う事が出来ます。
※一部有料の素材もあります。
Mockup Plugin
PCやスマートフォン等のモックアップ（見本）を簡単に作成できます。
PCやスマートフォン等のモックアップ（見本）を簡単に作成できます。
Japanese Font Picker
日本語フォントプレビューが出来ます。フォント選びに便利です。
日本語フォントプレビューが出来ます。フォント選びに便利です。
UIGradient
グラデーションを見本から付ける事が出来ます。
グラデーションを見本から付ける事が出来ます。
【4-10】第4章 章末演習
目安学習時間:20分
問題
以下の「完成イメージ」と同じ挙動・見た目を持つ、SNSのポストカードを作成してください。
今回は練習として、文字色に用いる二個の色(グレー #666666、赤色 #FF0000)のスタイル登録とレイアウトグリッドもあわせて使用してみましょう。
下のヒントに進め方の記載がありますが、実装内容が満たされていれば必ずしも同じである必要はありません！
今回は練習として、文字色に用いる二個の色(グレー #666666、赤色 #FF0000)のスタイル登録とレイアウトグリッドもあわせて使用してみましょう。
下のヒントに進め方の記載がありますが、実装内容が満たされていれば必ずしも同じである必要はありません！
完成イメージ
使用素材
zipファイルの解凍方法
zipファイルは「解凍」という作業をしないと利用することができません。
1. ダウンロードしたzipファイルを選択して、右上の「すべて展開」をクリックする
2. 右下の展開をクリックする
すると新たなタブが開き、選択したzipファイルが使えるようになります。
実装内容
1. いいね+いいね数
・「通常時（グレー #666666）」と「いいね後（赤色 #FF0000＋ドロップシャドウ）」を、右パネルのプロパティから一瞬で切り替えられる。
・ 「いいね」の数が「9」から「100」に増えても、アイコンとの間隔が崩れず、背景の幅が自動で伸びる。
・ハートのアイコンはプラグイン(Iconifyがおすすめです)から用いる。
・「通常時（グレー #666666）」と「いいね後（赤色 #FF0000＋ドロップシャドウ）」を、右パネルのプロパティから一瞬で切り替えられる。
・ 「いいね」の数が「9」から「100」に増えても、アイコンとの間隔が崩れず、背景の幅が自動で伸びる。
・ハートのアイコンはプラグイン(Iconifyがおすすめです)から用いる。
2. Post_Cardフレーム
・フレームの大きさを変更しても、中の画像がそれに合わせて拡大され、見た目が崩れない
・ドロップシャドウがフレームにもついていて、立体感のあるカードになっている
・辺に沿って適切な余白が用意されている(完成イメージは50ピクセルの余白です)
・フレームの大きさを変更しても、中の画像がそれに合わせて拡大され、見た目が崩れない
・ドロップシャドウがフレームにもついていて、立体感のあるカードになっている
・辺に沿って適切な余白が用意されている(完成イメージは50ピクセルの余白です)
3. ユーザーアイコン
・使用素材の画像が丸く切り抜かれている状態
・使用素材の画像が丸く切り抜かれている状態
4. この演習で使ってほしい機能
- レイアウトグリッド
- プラグイン（Iconify）
- オートレイアウト
- スタイル
- コンポーネント ＆ バリアント
- エフェクト（ドロップシャドウ）
ヒント
自力で進めるのが難しい場合や途中で詰まってしまった場合は、以下の手順を参考にしてみましょう！
テキストの該当箇所も記載してあるので不安な場合はもう一度戻って学習してみましょう！
テキストの該当箇所も記載してあるので不安な場合はもう一度戻って学習してみましょう！
1. プロフィールアイコンを作成する
・プロフィールアイコンの作成
「マスク機能」を使用します。
円の図形(完成イメージは150×150です)と使用素材(200×200)を用意して、レイヤーパネル内で図形を写真の下に置きマスクを使用しましょう。
(詳細は【4-7】マスクを参照)
「マスク機能」を使用します。
円の図形(完成イメージは150×150です)と使用素材(200×200)を用意して、レイヤーパネル内で図形を写真の下に置きマスクを使用しましょう。
(詳細は【4-7】マスクを参照)
・プロフィール名の入力
テキストツールを使用しプロフィール名を入力します。
プロフィールアイコンとプロフィール名を選択し、オートレイアウトを使って水平に並べます。
(詳細は【4-6】オートレイアウトを参照)
テキストツールを使用しプロフィール名を入力します。
プロフィールアイコンとプロフィール名を選択し、オートレイアウトを使って水平に並べます。
(詳細は【4-6】オートレイアウトを参照)
2. 画像エリアとテキストエリア、いいね欄
・メイン画像エリアの用意
1080×1080pxの正方形を作成します。これが「写真が入る場所」の予約席になります
ここでは後で画像を入れる方法を選択します。
(詳細は【3-9】画像をFigmaにおいてみようを参照)
・テキストエリアの用意
完成イメージでは「猫のイラスト」と書いてあるエリアです。
テキストツールで作成します。
・いいね欄
1. アイコンの取得
プラグイン「Iconify」を起動し、「heart」と検索してハートのアイコンを配置します
(完成イメ―ジは画像の左上のハートを使用)
(詳細は【4-9】プラグインを参照)
1080×1080pxの正方形を作成します。これが「写真が入る場所」の予約席になります
ここでは後で画像を入れる方法を選択します。
(詳細は【3-9】画像をFigmaにおいてみようを参照)
・テキストエリアの用意
完成イメージでは「猫のイラスト」と書いてあるエリアです。
テキストツールで作成します。
・いいね欄
1. アイコンの取得
プラグイン「Iconify」を起動し、「heart」と検索してハートのアイコンを配置します
(完成イメ―ジは画像の左上のハートを使用)
(詳細は【4-9】プラグインを参照)
2. スタイルの登録
「#666666（グレー）」と「#ED4956（赤）」をスタイルとして登録します
(詳細は【4-5】スタイルを参照)
3. いいね数の入力
いいね数を入力します(好きな数字で構いません)
いいね数が増えてもテキストBOXが自動で広がるように「幅の自動調整」を選択します
(詳細は【3-4】テキストを編集してみようを参照)
「#666666（グレー）」と「#ED4956（赤）」をスタイルとして登録します
(詳細は【4-5】スタイルを参照)
3. いいね数の入力
いいね数を入力します(好きな数字で構いません)
いいね数が増えてもテキストBOXが自動で広がるように「幅の自動調整」を選択します
(詳細は【3-4】テキストを編集してみようを参照)
・いいねボタンの作成
1. アイコンとテキスト（数値）を選択してオートレイアウト化(水平に整える)
(詳細は【4-6】オートレイアウトを参照)
2. アイコンとテキストをコンポーネント化する
(詳細は【4-3】コンポーネントとはを参照)
3. バリアントをボタンとして作成、アイコンとテキスト（数値）を複製する
(詳細は【4-4】バリアントを参照)
4. 複製したアイコンとテキストを、スタイルに登録した赤に変更
ドロップシャドウ（ぼかし30）を追加し、発光しているような演出を加える
(詳細は【4-8】エフェクトを参照)
5. 作成したバリアントをフレームの外に置いておき、コピーしたパーツをフレーム内に入れる
1. アイコンとテキスト（数値）を選択してオートレイアウト化(水平に整える)
(詳細は【4-6】オートレイアウトを参照)
2. アイコンとテキストをコンポーネント化する
(詳細は【4-3】コンポーネントとはを参照)
3. バリアントをボタンとして作成、アイコンとテキスト（数値）を複製する
(詳細は【4-4】バリアントを参照)
4. 複製したアイコンとテキストを、スタイルに登録した赤に変更
ドロップシャドウ（ぼかし30）を追加し、発光しているような演出を加える
(詳細は【4-8】エフェクトを参照)
5. 作成したバリアントをフレームの外に置いておき、コピーしたパーツをフレーム内に入れる
3. 配置と合体
・パーツの合体
「ヘッダー」「メイン画像(今は図形)」「いいねボタン」「本文」を順番に選択し、オートレイアウト化(縦)する(完成イメージはオブジェクト間隔は30)
完成イメージではこれをPost_Cardというフレームに名前変更しています。
(詳細は【4-6】オートレイアウトを参照)
「ヘッダー」「メイン画像(今は図形)」「いいねボタン」「本文」を順番に選択し、オートレイアウト化(縦)する(完成イメージはオブジェクト間隔は30)
完成イメージではこれをPost_Cardというフレームに名前変更しています。
(詳細は【4-6】オートレイアウトを参照)
・全体の見た目の整え
・外枠（Post_Card）
幅を「固定（1080px）」、高さを 「コンテンツを内包」 に設定します。これでカードが縦に自動伸縮します。
(詳細は【4-6】オートレイアウトを参照)
・メイン画像
1. 配置していた図形内に画像を挿入する
(詳細は【3-9】画像をFigmaにおいてみようを参照)
2. 幅を 「コンテナに合わせて拡大」、高さを「コンテナに合わせて拡大」に設定します。これで画像がフレームサイズに合わせて伸縮します。
(詳細は【4-6】オートレイアウトを参照)
・テキスト
幅を「コンテナに合わせて拡大」に設定します。
(詳細は【4-6】オートレイアウトを参照)
・外枠（Post_Card）
幅を「固定（1080px）」、高さを 「コンテンツを内包」 に設定します。これでカードが縦に自動伸縮します。
(詳細は【4-6】オートレイアウトを参照)
・メイン画像
1. 配置していた図形内に画像を挿入する
(詳細は【3-9】画像をFigmaにおいてみようを参照)
2. 幅を 「コンテナに合わせて拡大」、高さを「コンテナに合わせて拡大」に設定します。これで画像がフレームサイズに合わせて伸縮します。
(詳細は【4-6】オートレイアウトを参照)
・テキスト
幅を「コンテナに合わせて拡大」に設定します。
(詳細は【4-6】オートレイアウトを参照)