chapter 7 各種画面・メニュー・ツールの紹介

chapter 6までは、各ツールや機能のうち主要な部分だけを紹介していました。本章では、各種オプションなど細かな部分まで含めて解説します。

基本的なツールや機能

メニュー

ツールバーにあるをクリックすると、ドロップダウンメニューが開きます。 ファイル内の操作に関わるメニューはここから使用できます。

図7.1 ツールバーのドロップダウンメニューを開いた状態

移動ツール

ツールバーのをクリックすると移動ツールが使用できます。

表7.1

ショートカットキーmacOSWindows
移動ツールVV

キャンバス上にあるオブジェクトをクリックすると選択できます。

図7.2 1つのオブジェクトを選択した状態

オブジェクトを囲うようにドラッグ、またはmacOSであればshift、WindowsであればShiftを押しながらクリックすると、複数のオブジェクトを一度に選択できます。

図7.3 複数のオブジェクトを選択した状態

グループフレームになっている要素の場合、クリックするとグルーピングされたオブジェクトを一挙に選択します。 ダブルクリックをするとグルーピングされた中のオブジェクトを選択できます。 ダブルクリックを繰り返すことで深い階層のオブジェクトを選択することができます。1

ダブルクリック以外にも、macOSであればcommand、WindowsであればCtrlを押しながらクリックするとグループフレームの中にあるオブジェクトを直接選択できます。 この選択の仕方はネスト選択といいます。

図7.4 ネスト選択をした状態

オブジェクトを選択した状態でドラッグをすると、キャンバス内の好きな位置にオブジェクトを移動できます。

選択したオブジェクトは拡大縮小や回転ができます。 オブジェクトの辺や角にカーソルを合わせると形状が変わり、その状態でドラッグすれば変形します。 表7.2では四角形を選択していますが、どのようなオブジェクトでも操作は同じです。

このとき、macOSであればshift、WindowsであればShiftを押しながらだと少し挙動が変わります。 拡大縮小のときは縦横比を保ったまま、回転のときは15度刻みにスナップされます。

また、macOSであればoption、WindowsであればAltを押しながら拡大縮小すると、オブジェクトの中心点を基準に変形します。 さらにmacOSであればshift + option、WindowsであればShift + Altを同時に押せば両方の挙動が反映されます。

表7.2

1方向の拡大縮小2方向の拡大縮小回転
図7.5 1方向の拡大縮小図7.6 2方向の拡大縮小図7.7 回転
辺にカーソルを合わせてドラッグすると、X方向かY方向、どちらか1方向だけの拡大縮小。角にカーソルを合わせてドラッグすると、X方向とY方向、両方を一度に拡大縮小。角の少し外側にカーソルを合わせてドラッグすると、オブジェクトの中心を基準にして回転。

何かのオブジェクトを選択したまま、macOSであればoption、WindowsであればAltを押しながら他のオブジェクトにマウスの矢印をかざすと、オブジェクト間の距離が表示されます。

図7.8 距離の測定

移動ツールからは少し話がそれますが、キャンバス上で右クリックをするとコンテキストメニューが表示されます。

このとき、オブジェクトを選択しているかいないかで内容が変わります。 また、選択しているオブジェクトの種類によってもちがいが出ます。

メニューの名前の右側に表示されているのはショートカットキーです。 スクリーンショットはmacOS版のため、Windowsではちがうキーが表示されています。

Figmaの機能は基本的にはGUIから操作ができるため、メニュー内のそれぞれのアクションはchapter 2やchapter 3などで紹介しています。

表7.3

オブジェクトを選択していない状態のメニューオブジェクトを選択している状態のメニュー
図7.9 オブジェクトを選択していない状態のメニュー図7.10 オブジェクトを選択している状態のメニュー

拡大縮小ツール

ツールバーのの横にあるをクリックすると、ドロップダウンメニューが展開されます。 その中にあるをクリックすると使用できます。

表7.4

ショートカットキーmacOSWindows
拡大縮小ツールKK

移動ツールでの拡大縮小は、macOSであればshift、WindowsであればShiftを押しながらでないと縦横比を保てませんでした。拡大縮小ツールを使うと、デフォルトで縦横比を保ったまま拡大縮小ができます。 また、移動ツールでの拡大縮小はの幅やエフェクトの数値が固定されていましたが、拡大縮小ツールを使うと、それらの値がオブジェクトのサイズに比例して変化します。

注意点として、拡大縮小ツールを用いてグループフレームを拡大縮小するとき、オブジェクトのサイズに小数点が発生します。 データを書き出すときにも実装するときにも、小数点があると非常にややこしくなるので注意してください。

フレームツール

ツールバーのをクリックすると、フレームツールが使用できます。

表7.5

ショートカットキーmacOSWindows
フレームツールFF
選択範囲のフレーム化option + command + GAlt + Ctrl + G

UIデザインをするにあたり、デバイスの外枠は実質的に必要不可欠です。 そのとき使用するがフレームです。

キャンバス内の任意の場所をクリック、またはドラッグするとフレームが作成されます。

図7.11 フレームを作成した状態

フレームの中にはいくらでもフレームを作成することができます。 このプロセスをネストと呼びます。 また、最上位フレームやグループの中に配置するフレームをネストしたフレームと呼びます。

こういった特性により、フレームはオブジェクトのグルーピングにも使用できます。 複数のオブジェクトを選択し、メニューからオブジェクト > 選択範囲のフレーム化を適用するか、ショートカットキーで適用することで、1つのまとまりとして扱えます。

図7.12 最上位フレームと、その中にグルーピングされたオブジェクト

フレームツールを選択した状態だと、右サイドバーにプリセットが表示されます。 プリセットの名前をクリックすると、キャンバスで現在表示している領域の中央に最上位フレームとして配置されます。

図7.13 フレームのプリセット

配置する座標やサイズ、色などはどのオブジェクトにも共通ですが、一部フレームにしか無いプロパティもあります。

表7.6

一般的なオブジェクトを選択したときの右サイドバーフレームを選択したときの右サイドバー
図7.14 一般的なオブジェクトを選択したときの右サイドバー図7.15 フレームを選択したときの右サイドバー

コンテンツを切り抜くにチェックが入っていると、フレームからはみ出たオブジェクトは描画されません。

表7.7

コンテンツを切り抜くにチェックが入っていないコンテンツを切り抜くにチェックが入っている
図7.16 コンテンツを切り抜くにチェックが入っていない状態図7.17 コンテンツを切り抜くにチェックが入っている状態

サイズ自動調整は、フレームの子オブジェクトに合わせてフレームのサイズを拡大・縮小する機能です。 右サイドバーのをクリックすると、フレーム内のオブジェクトをぴったり囲むようにしてサイズが変更されます。

表7.8

ショートカットキーmacOSWindows
サイズ自動調整option + shift + command + RAlt + Shift + Ctrl + R

フレームそのものの機能ではなく、子オブジェクトに関する機能として制約があります。 フレーム内の要素をクリックしたときのみ、右サイドバーに制約セクションが出現します。 フレームのサイズを変更したとき、何を基準にして子オブジェクトが移動・変形するかの設定です。

図7.18 右サイドバーの制約セクション

設定できる項目は次のとおりです。

左を選択すると、「親のフレームの左端からの距離」を常に維持し、子オブジェクトのサイズは変わりません。 右、上、下を選んでも同様です。

左右を選択すると、「親のフレームの左端と右端、それぞれからの距離」を常に維持し、そのために子オブジェクトのサイズが可変します。 上下を選んでも同様です。

中央を選択すると、「親のフレームの中央からの距離」を常に維持し、子オブジェクトのサイズは変わりません。 左右方向、上下方向どちらでも同様です。

拡大縮小を選択すると、「親のフレームに対する子オブジェクトの比率」を常に維持し、そのために子オブジェクトのサイズが可変します。 左右方向、上下方向どちらでも同様です。

図にまとめると次のようになります。

表7.9

基準親フレームの変形前親フレームの変形後補足
左、上図7.19 親フレームの変形前、基準が左と上図7.20 親フレームの変形後、基準が左と上左辺と上辺からの距離、50pxが不変。
右、下図7.21 親フレームの変形前、基準が右と下図7.22 親フレームの変形後、基準が右と下右辺と下辺からの距離、250pxが不変。
左右、上下図7.23 親フレームの変形前、基準が左右と上下図7.24 親フレームの変形後、基準が左右と上下4辺すべてからの距離が不変で、子オブジェクトが拡大している。
中央、中央図7.25 親フレームの変形前、基準が中央図7.26 親フレームの変形後、基準が中央フレームの中央からの距離が不変。
拡大縮小、拡大縮小図7.27 親フレームの変形前、基準が拡大縮小図7.28 親フレームの変形後、基準が拡大縮小ωフレームの拡大率と同じだけ子オブジェクトも拡大している。

レイアウトグリッドオートレイアウトフレームに固有のプロパティですが、これらは解説する内容も多いため、説明を分けます。 レイアウトグリッドは「7.1 基本的なツールや機能」の最後で、オートレイアウトは「7.3 発展的なツールや機能」で取り上げます。

スライスツール

ツールバーのの横にあるをクリックすると、ドロップダウンメニューが展開されます。 その中にあるをクリックすると、スライスツールが使用できます。

表7.10

ショートカットキーmacOSWindows
スライスツールSS

Figmaで画像を書き出すとき、基本的にはグループフレームの単位で出力します。 しかし、スライスツールを使えば、グルーピングされていないオブジェクトであっても書き出せます。

エクスポートしたい領域をスライスツールでドラッグして、エクスポート設定を追加するだけです。 点線で描画された領域が書き出されます。

図7.29 スライスする領域

長方形ツール

ツールバーのをクリックすると、長方形ツールが使用できます。

表7.11

ショートカットキーmacOSWindows
長方形ツールRR

キャンバス内の任意の場所をクリック、またはドラッグすると長方形が作成されます。

図7.30 長方形が作成された状態

角にカーソルを合わせるとRadius2の表示が現れ、ドラッグすることで角丸にできます。

図7.31 Radiusの表示

なお、右サイドバーの角の半径に数値を打ち込んでも編集可能です。

図7.32 右サイドバーの角の半径

直線ツール

ツールバーのの横にあるをクリックすると、ドロップダウンメニューが展開されます。 その中にあるをクリックすると、直線ツールが使用できます。

表7.12

ショートカットキーmacOSWindows
ラインツールLL

キャンバス内をドラッグすると、始点と終点を結ぶ直線が作成されます。 フレームや長方形とちがい、クリックしただけでは描画されません。

図7.33 作成された直線

右サイドバーより、線の太さ・線の端の形状・線のスタイルを変更できます。

図7.34 右サイドバーの線セクション

矢印の先端の形状は次の種類が選べます。

表7.13

種類形状
なし図7.35 先端の形状 なし
線矢印図7.36 先端の形状 線矢印
三角形矢印図7.37 先端の形状 三角形矢印
逆三角形図7.38 先端の形状 逆三角形
円矢印図7.39 先端の形状 円矢印
ひし形矢印図7.40 先端の形状 ひし形矢印
丸形図7.41 先端の形状 丸形
正方形図7.42 先端の形状 正方形

矢印の先端の形状は、線の開始点と終了点それぞれに設定できます。 また、あとから入れ替えることも可能です。

図7.43 開始点と終了点の入れ替え

線のスタイルは実線と破線が選べ、破線の間隔のカスタムもできます。

カスタムの場合、カンマ区切りで数値を指定します。 奇数番目に指定した数値が線の長さで、偶数番目に指定した数値が間隔の長さとして描画されます。

表7.14

種類形状ウィンドウ
実線図7.44 実線の形状図7.45 実線のウィンドウ
破線図7.46 破線の形状図7.47 破線のウィンドウ
カスタム図7.48 カスタム形状図7.49 カスタムのウィンドウ

矢印ツール

ツールバーのの横にあるをクリックすると、ドロップダウンメニューが展開されます。 その中にあるをクリックすると、矢印ツールが使用できます。

表7.15

ショートカットキーmacOSWindows
矢印ツールshift + LShift + L

ツールとして個別に存在していますが、実態は直線ツールとほぼ変わりません。 ドラッグして描画された時点で矢印がついているだけで、使用可能なオプション類は直線ツールと同じです。

楕円ツール

ツールバーのの横にあるをクリックすると、ドロップダウンメニューが展開されます。 その中にあるをクリックすると、楕円ツールが使用できます。

表7.16

ショートカットキーmacOSWindows
楕円ツールOO

キャンバス内の任意の場所をクリック、またはドラッグすると楕円が作成されます。

図7.50 作成された楕円

描画された楕円にマウスの矢印をかざすと、3円弧の表示が現れ、ドラッグすることで形状を変えられます。

表7.17

マウスオーバードラッグ
図7.51 マウスオーバーした状態図7.52 ドラッグした状態

この状態から、さらに比率開始角も変更できます。

表7.18

種類マウスオーバードラッグ
比率図7.53 マウスオーバーして比率が表示された状態図7.54 ドラッグして比率を変更した状態
開始角図7.55 マウスオーバーして開始角が表示された状態図7.56 ドラッグして開始角を変更した状態

すべてのプロパティを一度に適用することもできます。

図7.57 すべてのプロパティを適用した楕円

また、右サイドバーにそれぞれの数値を打ち込んでも編集できます。

図7.58 右サイドバーでの表示

多角形ツール

ツールバーのの横にあるをクリックすると、ドロップダウンメニューが展開されます。 その中にあるをクリックすると、多角形ツールが使用できます。

キャンバス内の任意の場所をクリック、またはドラッグすると多角形が作成されます。

図7.59 作成された多角形

描画された多角形にマウスオーバーすると、Count4Radiusの表示が現れ、ドラッグすることで形状を変更できます。 多角形のCountは最大で60です。

表7.19

種類マウスオーバードラッグ
Count図7.60 マウスオーバーしてCountが表示された状態図7.61 ドラッグしてCountを変更した状態
Radius図7.62 マウスオーバーしてRadiusが表示された状態図7.63 ドラッグしてRadiusを変更した状態

また、右サイドバーにCountの数を打ち込んでも編集できます。

図7.64 右サイドバーのCountの表示

多角形ツールでは、バウンディングボックス(オブジェクトを囲う青い線)が描画した図形にぴったりくっついていません。 Countを変えても、バウンディングボックスのサイズを変えないための仕組みです。 描画されている図形にぴったりとくっついたバウンディングボックスを求める場合は、マウスオーバーした状態で右クリックし、コンテキストメニューから統合をクリックします。 なお、統合後はCountを変化させることはできません。

図7.65 統合のメニュー

表7.20

ショートカットキーmacOSWindows
統合command + ECtrl + E

星ツール

ツールバーのの横にあるをクリックすると、ドロップダウンメニューが展開されます。 その中にあるをクリックする、ツールが使用できます。

キャンバス内の任意の場所をクリック、またはドラッグすると星が作成されます。

図7.66 作成された星

描画された多角形にマウスオーバーするとCountRatio、さらにRadiusの表示が現れ、ドラッグすることで形状を変更できます。 多角形と同様、Countは最大で60です。

表7.21

種類マウスオーバードラッグ
Count図7.67 マウスオーバーしてCountが表示された状態図7.68 ドラッグしてCountを変更した状態
Ratio図7.69 マウスオーバーしてRatioが表示された状態図7.70 ドラッグしてRatioを変更した状態
Radius図7.71 マウスオーバーしてRadiusが表示された状態図7.72 ドラッグしてRadiusを変更した状態

また、サイドバーにそれぞれの数値を打ち込んでも編集できます。

図7.73 右サイドバーでの表示

多角形ツールと同様、統合を実行することで描画された図形にバウンディングボックスがぴったりとくっつきます。

画像の配置…ツール

ツールバーのの横にあるをクリックすると、ドロップダウンメニューが展開されます。 その中にあるをクリックすると、画像の配置...ツールが使用できます。

表7.22

ショートカットキーmacOSWindows
矢印ツールshift + command + KShift + Ctrl + K

ファイルをアップロードするためのウィンドウが開くので、キャンバス内に配置したい画像を選択し、決定します。

図7.74 ファイルアップロードのウィンドウが開いた状態

画像を選択するとツールバーの表示が変化します。

図7.75 変化したツールバー

クリックまたはドラッグすると、選択した画像が1つずつ配置されます。 すべて配置をクリックすると、一度にすべての画像が配置されます。 すべて破棄のクリック、またはEscキーでキャンセルできます。

ペンツール

ツールバーのをクリックするとペンツールが使用できます。

表7.23

ショートカットキーmacOSWindows
ペンツールPP

カーソルの形状が変わり、キャンバス内をクリックするとポイントが打たれます。

図7.76 1つ目のポイントを打った状態

その状態で別な箇所をクリックすると、2点を結ぶ線が引かれます。 この線をパスといいます。

図7.77 2つのポイントを打ち、直線を引いた状態

ポイントはいくつでも打てます。 最初に設置したポイントに重ねて打つと、線だけでなく塗りも適用できるようになります。 このように、線が閉じたパスをクローズパスといいます。

図7.78 クローズパスを作成した状態

逆に、線の閉じていないパスはオープンパスといいます。 オープンパスの状態で操作を完了するためには、ツールバーにある完了をクリックするか、macOSであればreturn、WindowsであればEnterを押します。

また、ポイントを打つときにクリックではなくドラッグをすると曲線を引くことができます。

図7.79 ドラッグして曲線を引いている状態

ポイントから伸びる線をハンドルといい、この傾きを変えることで曲線の向きや大きさを変えられます。

表7.24

ハンドルの角度をきつくするハンドルを逆方向へ向ける
図7.80 ハンドルの角度をきつくした状態図7.81 ハンドルを逆方向へ向けた状態

一度直線を引いてしまっても、あとから曲線に変更できます。 対象のオブジェクトを選択し、編集モードに入ります。 編集モードに入るには、ツールバーの中央あたりにあるをクリックするか、macOSであればreturn、WindowsであればEnterを押します。 この状態でツールバーにあるをクリックすると、曲線ツールが使えます。

表7.25

ショートカットキーmacOSWindows
曲線ツール編集モードで command編集モードで Ctrl

曲線ツールを選択した状態でポイントをクリックまたはドラッグすると、曲線に変わります。

表7.26

クリック/ドラッグする前クリック/ドラッグしたあと
図7.82 クリック/ドラッグする前図7.83 クリック/ドラッグする前

編集モードでポイントを選択しているとき、デフォルトではポイントから伸びる2本のハンドルが長さも角度も揃っています。 このとき、右サイドバーにはこのように表示されており、選ぶ内容を変えることで個別に設定できます。

表7.27

ミラーリングなしミラー角度ミラー角度と長さ
図7.84 ミラーリングなし図7.85 ミラー角度図7.86 ミラー角度と長さ
2つのハンドルが完全に独立しています。ハンドルの角度は揃っていますが、それぞれの長さは個別に設定できます。ハンドルの角度、長さともに連動しています。
図7.87

曲線ツールでの編集を完了するときも、ツールバーにある完了をクリックするか、macOSであればreturn、WindowsであればEnterを押します。

Figmaのパスの特徴として、1つのポイントから複数のパスを引けることがあります。 一般的には1つのポイントからは1本のパスしか引けません。

図7.88 1つのポイントから複数のパスを引いた状態

また、1つのパスの中に複数の塗りを設定することもできます。 ツールバーのをクリックするとペイントバケツツールを使えます。

表7.28

ショートカットキーmacOSWindows
ペイントバケツツール編集モードで B編集モードで B

1つ1つの区切られた領域をクリックすることで、個別の塗りを設定できます。 すでに塗りが設定されている領域を再度クリックすると、塗りが削除されます。

図7.89 複数種類の塗りを設定した状態

鉛筆ツール

ツールバーのの横にあるをクリックすると、ドロップダウンメニューが展開されます。 その中にあるをクリックすると、鉛筆ツールが使用できます。

表7.29

ショートカットキーmacOSWindows
鉛筆ツールshift + PShift + P

キャンバス内をドラッグすることで、フリーハンドで線を描画できるツールです。 macOSであればshift、WindowsであればShiftを押しながらドラッグすると、直線を引くことができます。

テキストツール

ツールバーのをクリックすると、テキストツールが使用できます。

表7.30

ショートカットキーmacOSWindows
テキストツールTT

キャンバス内の任意の場所をクリック、またはドラッグするとテキストを入力できますが、両者の挙動は少しずつちがいます。

キャンバス内をクリックした場合、そのまま文字を入力できるようになります。 改行はmacOSであればreturn、WindowsであればEnterを押すことで可能です。 また、キャンバス内のテキスト以外の部分をクリックするか、Escキーを押せばテキスト入力を終了できます。 入力後のテキストをダブルクリックをすれば再び編集できます。

図7.90 テキストを入力した状態

クリックで入力を始めた場合、打っているテキストの長さに合わせてバウンディングボックスが自動で変化します。

図7.91 テキストの長さに合わせてバウンディングボックスが変化した状態

キャンバス内をドラッグすると、まずバウンディングボックスが作成されます。

図7.92 テキストが空のバウンディングボックスが作成された状態

そのあとテキストを入力すると、バウンディングボックスのサイズに合わせて自動で折り返されます。 macOSであればreturn、WindowsであればEnterを押すことで意図的な改行も可能です。こういった挙動の差があることを覚えておいてください。 テキスト編集の終了や再編集の仕方は、クリックで作成したときと同様です。

図7.93 自動で折り返されたテキスト、量が多いときはバウンディングボックスからあふれる

図7.93のとおり、高さ方向に文字があふれた場合は、バウンディングボックスからはみ出て描画されます。 幅を固定し、高さは可変にしたい場合は、右サイドバーから高さの自動調整を選びましょう。

図7.94 高さの自動調整オプション

これにより、図7.95のようにバウンディングボックスの高さがテキスト量に合わせてフィットします。

図7.95 テキスト量に合わせて高さが調整された状態

それ以外の細かな挙動も含め、次のように整理できます。

表7.31

幅の自動調整高さの自動調整固定サイズ
サイドバーでのアイコン
テキスト作成時の適用方法キャンバス内をクリックテキスト作成時には適用不可キャンバス内をドラッグ
挙動自分で改行しない限り横に伸び続ける。バウンディングボックスの幅で自動で折り返される。高さは自動で変化。バウンディングボックスの幅で自動で折り返される。高さは変化せず、文字量が多ければバウンディングボックスからあふれる。
設定の変更方法バウンディングボックスを変形させると設定が変化する。横方向に変形させると高さの自動調整、縦方向に変形させると固定サイズを適用。左右の辺のどれかをダブルクリックすると幅の自動調整を適用。上下左右のどれかの辺をダブルクリックすると幅の自動調整を適用。

テキストを作成するときの挙動にも関わるためサイズ調整の話を先に取り上げましたが、それ以外にもさまざまなプロパティがあります。

図7.96 右サイドバーのテキストセクション

表7.32

名称機能
1. テキストスタイルテキストスタイルを登録・適用・検索できる。
2. フォントファミリーフォントの種類を変更できる。
3. フォントウェイトフォントの太さを変更できる。
4. フォントサイズフォントの大きさを変更できる。
5. 行間行間の距離を変更できる。数値指定と%指定がある。
6. 文字間隔水平方向のテキストの距離を変更できる。
7. 段落間隔段落同士の距離を変更できる。
8. サイズ変更表7.31で解説したとおり、テキストの折り返し設定などが変更できる。
9. 水平方向揃え水平方向のテキストの揃え位置を変更できる。左揃え・中央揃え・右揃え。
10. 垂直方向揃え垂直方向のテキストの揃え位置を変更できる。上揃え・中央揃え・下揃え。
11. タイプの設定さらに詳細な設定ができるウィンドウが開く。

タイプの設定を選ぶと次のウィンドウが開きます。 基本設定詳細設定バリアブルのタブがあります。

表7.33

基本設定詳細設定バリアブル
図7.97 基本設定図7.98 詳細設定図7.99 バリアブル

表7.34

名称機能
1. プレビュー設定変更後のプレビューが表示される。
2. サイズ変更先ほどのサイズ変更と基本的には同じ。テキストを切り捨てるがこちらのウィンドウからのみ有効にできる。バウンディングボックスからはみ出たテキストを「…」で省略するオプション。
3. 配置先ほどの水平方向揃えと基本的には同じ。名前が少しちがうことと、両端揃えがこちらのウィンドウからのみ有効にできる。
4. 装飾下線と打ち消し線を設定できる。
5. 段落間隔先ほどの段落間隔と同じ。
6. 段落インデント段落ごとの最初の行に余白を設定できる。左揃えのテキストのみ設定できる。
7. リストスタイル箇条書きリストと番号付きリストを設定できる。
8. 大/小文字欧文書体のみ、打ち込んだテキストとは別に大文字・小文字・各単語の先頭を大文字・スモールキャップスを設定できる。
9. 数字数字のスタイルを設定できる。フォントファミリーにより設定可能なオプションがちがう。
10. OpenType設定OpenTypeの機能を設定できる。フォントファミリーにより設定可能なオプションがちがう。
11. バリアブルバリアブルフォントのみ利用できる。フォントファミリーにより設定可能なオプションがちがう。

表7.35

ショートカットキーmacOSWindows
太字command + BCtrl + B
斜体command + ICtrl + I
下線command + UCtrl + U
取り消し線shift + command + XShift + Ctrl + X
箇条書きリストshift + command + 8Shift + Ctrl + 8
番号付きリストshift + command + 7Shift + Ctrl + 7
テキスト左揃えoption + command + LAlt + Ctrl + L
テキスト中央揃えoption + command + TAlt + Ctrl + T
テキスト右揃えoption + command + RAlt + Ctrl + R
テキスト両端揃えoption + command + JAlt + Ctrl + J
インデントを増やすcommand + ]Ctrl + ]
インデントを減らすcommand + [Ctrl + [
フォントサイズを大きくするshift + command + >Shit Ctrl + >
フォントサイズを小さくするshift + command + <Shit Ctrl + <
フォントを太くするoption + command + >Alt + Ctrl + >
フォントを細くするoption + command + <Alt + Ctrl + <
行間を広げるoption + shift + >Alt + Shift + >
行間を詰めるoption + shift + <Alt + Shift + <
文字間隔を広げるoption + >Alt + >
文字間隔を詰めるoption + <Alt + <

リソースツール

ツールバーのをクリックすると、リソースツールが使用できます。

表7.36

ショートカットキーmacOSWindows
リソースツールshift + IShift + I

コンポーネントプラグインウィジェットの3つのタブがあり、それぞれの種類のリソースを検索・利用できます。 表示されているアイテムをクリックすると、キャンバスに配置または実行されます。

表7.37

コンポーネントプラグインウィジェット
図7.100 コンポーネント図7.101 プラグイン図7.102 ウィジェット

手のひらツール

ツールバーのをクリックすると、手のひらツールが使用できます。

表7.38

ショートカットキーmacOSWindows
手のひらツールHH

手のひらツールを選択した状態で、キャンバス内をドラッグすると移動できます。 なお、他のツールを選択している最中でもSpaceキーを押しながらドラッグすると、同じ挙動をします。 さらに、トラックパッドがある場合は、2本指でスライドしても同じです。

コメントツール

ツールバーのをクリックすると、コメントツールが使用できます。

表7.39

ショートカットキーmacOSWindows
コメントツールCC
コメントの表示/非表示shift + CShift + C

コメントツールを選択すると、カーソルの形状が変化し、キャンバス内の任意の箇所をクリックすると吹き出しが出現します。

図7.103 吹き出しが出現した状態

吹き出しの中に自由にテキストを入力できます。 また、絵文字とメンションも使用できます。 メンションされた相手には通知が届きます。

図7.104 吹き出し内にテキストを入力している状態

コメントの投稿が完了すると、投稿者のアイコンがピンとして表示されます。

図7.105 コメントがピンとして表示された状態

マウスオーバーすると投稿者の名前・コメント内容・投稿時間が表示されます。

図7.106 コメント内容と投稿時間が表示された状態

コメントをクリックすると返信ができます。

図7.107 返信のためのウィンドウ

未読のコメントはピンが青く表示され、ツールバーにあるアイコンにも赤い丸がつきます。

図7.108 未読のコメント

コメントツールを選択中は右サイドバーの表示が変わり、コメントが一覧で表示されています。

図7.109 右サイドバーに表示されるコメント一覧

また、検索やフィルター、並べ替えも可能です。

表7.40

並べ替え/フィルター設定
図7.110 並べ替え/フィルター図7.111 設定

一覧にあるコメントにマウスオーバーするとアイコンが表示され、クリックすることでさまざまなアクションが実行できます。

図7.112 コメントへのアクションを実行できるアイコン

表7.41

名称機能
未読にする一度読んだコメントを未読状態に戻せる。
リンクをコピーコメント1つ1つに発行されているURLをクリップボードにコピーできる。
スレッドを削除コメントや、それに対する一連の返信を削除できる。
解決解決済みとしてマークできる。解決したコメントは、フィルターで解決済みコメントを表示を有効にしないと表示されない。

また、これらのアクションはコメントのピンを右クリックして出てくるメニューからも実行可能です。

エフェクト

オブジェクトを選択した状態で、右サイドバーのエフェクトセクションから使用できます。

図7.113 右サイドバーのエフェクトセクション

エフェクトの一覧は次です。

表7.42

名称概要
ドロップシャドウオブジェクトの外側に影をつけ、飛び出て見える効果。
インナーシャドウオブジェクトの内側に影をつけ、凹んで見える効果。
レイヤーブラーオブジェクト全体がボケる効果。
背景のぼかし効果を適用したオブジェクトの背面にあるオブジェクトがボケる効果。塗りの不透明度が0.1%から99.99%の間でないといけない。
図7.114 エフェクトの一覧

ドロップシャドウ・インナーシャドウ

図7.115 ドロップシャドウ・インナーシャドウの項目

表7.43

項目説明
1. X座標のオフセット正の値なら右に、負の値なら左に影がずれる。
2. Y座標のオフセット正の値なら下に、負の値なら上に影がずれる。
3. ぼかし範囲の半径どれだけの範囲でぼかすかの値。
4. 広がり影の大きさの値。
5. 色影の色の指定。

レイヤーブラー・背景のぼかし

図7.116 レイヤーブラー・背景のぼかしの項目

表7.44

項目説明
ぼかし範囲の半径どれだけの範囲でぼかすかの値。

レイアウトグリッド

フレームを選択した状態で、右サイドバーのレイアウトグリッドセクションから使用できます。

図7.117 右サイドバーのレイアウトグリッドセクション

表7.45

ショートカットキー ーmacOSWindows
レイアウトグリッドの表示/非表示shift + GShift + G

レイアウトグリッドの種類には、グリッドがあります。 1つのフレームに対して重ねて適用することもできます。

表7.46

見た目名称概要
図7.118 グリッドグリッド格子状のグリッド
図7.119 列垂直方向のガイド
図7.120 行水平方向のガイド

グリッド

図7.121 グリッドの項目

表7.47

項目説明
1. サイズ格子の大きさ
2. 色グリッド線の色

図7.122 列の項目

表7.48

項目説明
1. 数列の数。
2. 色グリッド線の色
3. 種類左揃え・中央揃え・右揃え・ストレッチの4種類。
4. 幅列の幅。
5. 余白・オフセット3番で選択した内容によって変わる。
ストレッチを選ぶと余白・左揃えと右揃えではオフセット・中央揃えでは選択不可になる。
余白のときは左右両方からの余白。
オフセットのときは揃える方向からの余白。
6. ガター列と列の間の余白

図7.123 行の項目

表7.49

項目説明
1. 数行の数。
2. 色グリッド線の色
3. 種類上揃え・中央揃え・下揃え・ストレッチの4種類。
4. 高さ列の幅。
5. 余白・オフセット3番で選択した内容によって変わる。
ストレッチを選ぶと余白・上揃えと下揃えではオフセット・中央揃えでは選択不可になる。
余白のときは上下両方からの余白。
オフセットのときは揃える方向からの余白。
6. ガター行と行の間の余白

このウィンドウだけを見ても、幅とガター・余白やオフセットの関係が少しわかりづらいので、整理します。 例はを示していますが、の場合も垂直方向と水平方向が入れ替わるだけで仕組みは同じです。

表7.50

種類画像
左揃え図7.124 左揃え
右揃え図7.125 右揃え
中央揃え図7.126 中央揃え
ストレッチ図7.127 ストレッチ

コラボレーション用機能

スポットライト

Figmaの強みはリアルタイムの共同編集です。 一緒に作業をしているとき、今自分が見ているページフレームを相手に伝える場面は多くあります。 そんなときにスポットライト機能が活躍します。

まず、自分の視点を見てほしい人がツールバーから自分のアバターにマウスオーバーし、自分にスポットライトを当てるをクリックします。

図7.128 自分にスポットライトを当てる

すると、同じファイルにアクセスしている人はスポットライトを実行した人の視点に移動します。 自動で追従するため、自分の操作無しに相手の視点を追い続けられます。

図7.129 スポットライト画面に追従する

音声通話

共同編集にあたって、テキストよりも口頭で話したほうが早い場面はあると思います。 そんなときはFimgaでの音声通話が使えます。

ツールバーの右側にあるをクリックすると会話が始まります。

図7.130 音声通話を開始する

相手の画面には参加の文字が表示され、クリックするとつながります。

図7.131 音声通話に参加する

会話を終了したいときは退出をクリックします。

図7.132 音声通話から退出する

カーソルチャット

カーソルがキャンバス上にある状態で/を押すと、吹き出しが出現します。 ちょっとしたテキストを入力できて、一定時間で自動で消えます。

コメントとして残すまででもないような確認や、ちょっとした雑談などに向いている機能です。

図7.133 カーソルチャットのインターフェース

発展的なツールや機能

オートレイアウト

複数のオブジェクトを選択した状態で、右サイドバーのオートレイアウトセクションから、または単体のオブジェクトを選択した状態で、ショートカットキーから使用できます。

整列や余白の調整が自動でできる機能です。 1つ1つのオブジェクトを調整しなくてもよいため、非常に効率的なレイアウトが可能となります。

表7.51

ショートカットキーmacOSWindows
オートレイアウトshift + AShift + A

オートレイアウトを適用すると、次のようにレイヤーのアイコンが変わります。 表7.53で解説する方向整列によって微妙にちがうのですが、3本線のようなアイコンです。

表7.52

オートレイアウト適用前オートレイアウト適用後
図7.134 オートレイアウト適用前図7.135 オートレイアウト適用後

指定できるプロパティとして、オブジェクトの配置方向・アイテム間の距離・パディング・整列があります。 デフォルトでは個別パディングがオフになっています。

図7.136 個別パディングがオフの状態

表7.53

項目説明
1. 方向縦方向と横方向を選べる。
2. アイテム間の距離アイテム間の距離を指定できる。負の値も可能。
3. 水平パディング水平方向のパディングを一度に指定できる。
4. 垂直パディング垂直方向のパディングを一度に指定できる。
5. 整列別途、解説する。
6. 個別パディングクリックするとオンになる。
図7.137 個別パディングがオンの状態

表7.54

項目説明
1. 方向縦方向と横方向を選べる。
2. アイテム間の距離アイテム間の距離を指定できる。負の値も可能。
3. 左パディング左方向のパディングを指定できる。
4. 右パディング右方向のパディングを指定できる。
5. 上パディング上方向のパディングを指定できる。
6. 下パディング下方向のパディングを指定できる。
7. 整列別途、解説する。
8. 個別パディングクリックするとオフになる。

整列について、詰めて配置間隔を空けて配置があります。 詰めて配置では指定した位置から順にオブジェクトが詰めて配置され、間隔を空けて配置では親フレームの幅や高さを目一杯使って配置されます。

アイコンの示すとおりの整列の仕方なので、視覚的に理解しやすいと思います。 例は方向が横の場合を示していますが、方向が縦の場合も、垂直方向と水平方向が入れ替わるだけで仕組みは同じです。

表7.55

左揃え中央揃え右揃え間隔を空けて配置
上揃え図7.138 上、左揃え図7.139 上、中央揃え図7.140 上、右揃え図7.141 上、間隔を空けて配置
中央揃え図7.142 中央、左揃え図7.143 中央、中央揃え図7.144 中央、右揃え図7.145 中央、間隔を空けて配置
下揃え図7.146 下、左揃え図7.147 下、中央揃え図7.148 下、右揃え図7.149 下、間隔を空けて配置

をクリックすると詳細なレイアウトウィンドウが現れます。

図7.150 詳細なレイアウトのウィンドウ

表7.56

名称機能
1. プレビュー2から4の設定を適用したときのプレビューが表示される。
2. 間隔設定モード詰めて配置・間隔を空けて配置を設定できる。
3. 線レイアウトに含まれる・レイアウトに含まれないを設定できる。
レイアウトに含まれるほうがCSSの挙動には近い。
4. キャンバススタッキング最前面に最初のアイテム・最前面に最後のアイテムを設定できる。
5. テキストのベースライン揃え有効にするかどうか設定できる。

オートレイアウトを適用したオブジェクトや、その中に入っている要素のサイズが変わったときの挙動にはいくつかの種類があります。

表7.57

名称名称(省略表記)機能
コンテンツを内包ハグ中のオブジェクトのサイズに合わせて親のフレームのサイズが決まる。
固定幅固定他のオブジェクトとの兼ね合いは無視して、指定したサイズを維持する。
コンテナに合わせて拡大拡大コンテナ(親のフレーム)のサイズに合わせて中のオブジェクトのサイズが決まる。

図7.151の状態を初期値として、それぞれの組み合わせで変形させたときの代表的な挙動を示しました。 コンテナがハグアイテムが拡大のように、変形時には適用できない組み合わせもあります。

図7.151 拡大縮小させる前の状態

表7.58

コンテナがハグコンテナが固定
アイテムがハグ図7.152 アイテム、コンテナともにハグ図7.153 アイテムがハグでコンテナが固定
アイテムが固定図7.154 アイテムが固定でコンテナがハグ図7.155 アイテム、コンテナともに固定
アイテムが拡大変形したときにはこの組み合わせにはならない。図7.156 アイテムが拡大でコンテナが固定

ただし内包するオブジェクトが1つだけのときの整理なので、実際はもっと複雑です。 あくまで参考程度に見ておいてください。

コンポーネント

オブジェクトを選択した状態で、ツールバーのをクリックすると作成できます。 コンポーネントになるとバウンディングボックスの色が青から紫へ変わり、レイヤーのアイコンもに変わります。

表7.59

ショートカットキーmacOSWindows
コンポーネントの作成option + command + KAlt + Ctrl + K

表7.60

コンポーネント作成前コンポーネント作成後
図7.157 コンポーネント作成前図7.158 コンポーネント作成後

コンポーネントは、何度も使い回すようなUIの再利用性を高める機能です。

コンポーネントを使わずとも、コピー&ペーストでことたりると思われるかもしれません。 しかし、コピー&ペーストによる複製では、変更が発生したときにすべてを手作業で修正する必要があります。 100個のパーツを複製すれば100回の修正が発生するため、望ましくありません。

一方で、コンポーネントであれば100個複製しても1,000個複製しても、修正するのは1ヵ所で済みます。 メインコンポーネントと呼ばれる大元のコンポーネントを作成後、複製することでインスタンスというメインコンポーネントにリンクしたオブジェクトが生成されます。

図7.159 コンポーネントの使い方

インスタンスはレイヤーのアイコンがに変わるので見分けられます。

図7.160 メインコンポーネントとインスタンスのアイコンのちがい

インスタンスメインコンポーネントの見た目やレイヤー構造を引き継いでいます。 メインコンポーネントを変更するとすべての変更内容がインスタンスに適当され、逆にインスタンスの変更はメインコンポーネントには影響を与えません。 そのため、1つコンポーネントを作成すれば、何度でも同じパーツをすぐに再利用性高く使うことができます。

また、インスタンスは色やテキストなどを上書きできます。

次の例では、色だけを変更していますが、ちがうプロパティの変更でも同様に変化します。

表7.61

画像状態説明
図7.161 メインコンポーネントを作成し、インスタンスを3つ作成メインコンポーネントを作成し、インスタンスを3つ作成。インスタンスはメインコンポーネントとまったく同じ見た目。
図7.162 メインコンポーネントの背景色を変更メインコンポーネントの背景色を変更。メインコンポーネントへの変更はすべてインスタンスに反映される。
図7.163 1つのインスタンスの背景色を変更1つのインスタンスの背景色を変更。インスタンスへの変更は、メインコンポーネントへも、他のコンポーネントへも反映されない。

メインコンポーネントにはプレースホルダー的な内容を準備しておき、インスタンスではそれぞれの場所に適した内容で上書きするのがよいです。5 図7.164の例では、左側にメインコンポーネント、右側に3つのインスタンスを並べ、それぞれいろいろな上書きの仕方をしています。

図7.164 インスタンスをオーバーライドした状態

また、メインコンポーネントにはなくインスタンスだけに存在するオプションもあります。

図7.165 インスタンスだけのオプション

表7.62

名称機能
1. インスタンスの切り離し切り離したあとはただのオブジェクトになり、メインコンポーネントの影響を受けなくなる。
2. 変更をメインコンポーネントにプッシュインスタンスのオーバーライド内容がメインコンポーネントに反映される。通常とは逆向きの変化の反映。
3. すべての変更をリセットインスタンスに適用した変更をすべてリセットする。
4. 変更した項目をリセット例では塗りだけを変更しているので塗りだけのが表示されている。サイズや線など、変更した項目はすべてここに表示される。

コンポーネント/区切りで命名することで、グルーピングができます。

図7.166 グルーピングしたコンポーネント

このように作成した場合、右サイドバーよりインスタンスを入れ替えることができます。 ドロップダウンメニューを開き、リストに表示されているものをクリックすると入れ替わります。

図7.167 インスタンスの入れ替え

さらにコンポーネントのグルーピングは1階層だけでなく、複数の階層を作成できます。

図7.168 複数階層でグルーピングされたコンポーネント

バリアント

バリアントを用いると、1つのコンポーネント内でさまざまなバリエーションを表現できるようになります。

例えば、ボタンのコンポーネントにおいて、通常時・マウスオーバー時・クリック時などの種類を作るとします。 以前のFigmaではこれらはすべて別のコンポーネントとして作るしかなく、デザインデータの中に膨大なコンポーネントが登録され、検索が難しくなっていました。

図7.169は、種類と状態をかけ合わせて作ったボタンです。 これだけでも8種類あり、実際のUIを作るときにはもっと増えることが予想できるでしょう。

図7.169 種類と状態をかけ合わせて作ったコンポーネント

この問題は、バリアントの登場によってシンプルになりました。 メインコンポーネントを複数選択し、右サイドバーのバリアントとして結合をクリックすることで1つのまとまりになります。

図7.170 バリアントとして結合

バリアントが適用されると紫の点線で囲われます。 現在のプロパティと値が表示されており、をクリックすればパターンを追加できます。

図7.171 バリアントのプロパティ

バリアント内の1つのパターンを選択して、右サイドバーの現在のバリアントからプロパティの名前や値を変更できます。 ダブルクリックをするとテキスト入力モードに入れます。

図7.172 バリアントのプロパティの編集

右サイドバーのプロパティパネルに表示されているプロパティと値を設定することで、呼び出したインスタンスを自由に切り替えられるようになります。

表7.63

インスタンスに塗りとデフォルトを適用した状態インスタンスに線とフォーカスを適用した状態
図7.173 インスタンスに塗りとデフォルトを適用した状態図7.174 インスタンスに線とフォーカスを適用した状態

また、値にブーリアン(True/False)を指定すると、トグルボタンで切り替えることができます。

表7.64

塗りプロパティにブーリアンを指定した状態インスタンスのトグルボタンをオンにした状態インスタンスのトグルボタンをオンにした状態
図7.175 塗りプロパティにブーリアンを指定した状態図7.176 インスタンスのトグルボタンをオンにした状態図7.177 インスタンスのトグルボタンをオンにした状態

コンポーネントプロパティ

コンポーネント内のオブジェクトの表示/非表示・テキストの変更・インスタンスの置き換えにはコンポーネントプロパティが使えます。 バリアントと組み合わせることで、よりシンプルにコンポーネントを管理できるようになります。

表7.65

名称機能
ブール値プロパティTrue/Falseで表現されるプロパティ。
オブジェクトの表示/非表示を切り替えることができる。
True/Falseの切り替え時にインタラクティブコンポーネントとしての変化は設定できない。
インスタンスの入れ替えプロパティコンポーネント内でもインスタンスの入れ替えができる。
テキストプロパティ編集可能なテキストを指定できる。
リストスタイルなどの装飾には対応していない。

プロパティによって表示される位置が少しちがいますが、右サイドバーのをクリックすると設定できます。

ブール値プロパティを例にして解説しますが、他の2つの項目でも操作は同様です。

表示/非表示を切り替えたいオブジェクトを選択し、右サイドバーのブール値プロパティを作成をクリックします。

図7.178 ブール値プロパティの作成

プロパティの名前や初期値を設定するモーダルウィンドウが現れるので、確認してプロパティを作成をクリックします。

図7.179 プロパティを作成するウィンドウ

これにより、インスタンスに新たなトグルボタンが出現し、切り替えられるようになります。 表示/非表示もバリアントで作成すると組み合わせ数が膨大になってしまうので、こういった場面ではコンポーネントプロパティを用いるのがよいです。

表7.66

Trueを選択した状態Falseを選択した状態
図7.180 Trueを選択した状態図7.181 Falseを選択した状態

プロトタイプ

プロトタイプを設定すると、作ったデータを実際に近い形式で確かめることができます。 大きくはインタラクションオーバーフロースクロールフローの3つの機能があります。

インタラクションの設定には多くのバリエーションがあります。

表7.67

名称機能
1. トリガークリック・ドラッグ・マウスオーバーなど、インタラクションを起動させるためのトリガー。
2. アクションフレームの移動・オーバーレイを開くなど、トリガーを実行したときに起こるアクション。
3. デスティネーションアクションを起こす対象のフレーム。
4. プレビューどのようにアニメーションするかのプレビュー。
5. アニメーション即時・ディゾルブ・スマートアニメートなど、アニメーションの種類。
6. スクロール位置を保持するスクロールしてからインタラクションを実行したとき、デスティネーションでもスクロールを保持するかどうかのオプション。
図7.182 インタラクション詳細のウィンドウ

オーバーフロースクロールでは、画面内に収まらないコンテンツをスライドして確認することができます。 モーダルウィンドウ内でのスクロールや、地図アプリで縦横にスクロールするときなどに使えます。

設定の仕方はプロトタイプパネルのオーバーフロースクロールセクションから選択するだけで有効になります。

図7.183 オーバーフロースクロールを有効にする

複数のフローを作成することで、さまざまなバリエーションの検証ができます。 例えば、ログイン済みのユーザーと未ログインのユーザーでは遷移する画面や入力する情報などにちがいがあります。 そういったちがいを個別に設定できます。

ここで、2種類のフローを用意したいとします。

図7.184 フロー設定前の画面

図7.186で①フレームインタラクションを追加すると②自動でフローが追加されます。 フレームの左上にある青いラベルがフローの名前で、このフレームからフローが始まることを意味します。

図7.185 インタラクションを設定すると、自動でフローが追加される

1つ目のフローとつながっていないフレームインタラクションを設定すると、自動で新規のフローが追加されます。

図7.186 2つ目のフローが設定された状態

もしくは右サイドバーのフローの開始点セクションから追加することもできます。

図7.187 インタラクションを設定する前にフローの開始点を設定する

フローの設定後、オブジェクトを選択していない状態だと右サイドバーにフローの一覧が表示されます。 それぞれのフローの名前にマウスオーバーするとアイコンが現れ、クリックするとアクションが行えます。

表7.68

名称機能
1. フレームを選択フローの開始点であるフレームを選択する。
2. リンクをコピー選んだフローのプロトタイプのURLをクリップボードにコピーする。
3. プレゼンテーションを実行選んだフローのプロトタイプを再生する。
図7.189 インタラクションを設定する前にフローの開始点を設定する

Figmaのプランごとのちがい

FigmaにはStarter、Professional、Organization、Enterpriseの4つのプランがあります。 それぞれのプランごとのちがいを解説します。

用語自体が難しくて理解しきれない機能もあるかもしれません。 ただ、最初のうちからすべてを理解する必要はないです。

例えば、管理者権限やセキュリティの部分についてです。。 組織全体にFigmaを導入しようと思ったとき、情報システム部門の方に下記の解説を見せればつうじるはずです。

基本的にはこれまでの章の内容を理解できていれば、問題なくFigmaでの制作ができるため、詳細なちがいを知りたくなったときにご活用ください。

料金

料金について注意すべきは次の2点です。

ただ、請求書が発行される数日前にFigmaから確認のメールが届くので、事故を防ぎやすいです。 「編集者が〇〇人なので全部で$15x〇〇を請求する予定です。誤って編集者に設定している人がいたら今のうちに解除しておいてください。」といったメールなので、親切です。

デザインとプロトタイピング

バージョン履歴の日数以外はどのプランでも変わりません。 基本的な操作を練習したい場合や、個人で少しだけ使ってみたい場合であればスタータープランでことたります。

表7.69

スタータープロフェッショナルビジネスエンタープライズ補足
バージョン履歴30日間すべてすべてすべて作業履歴が保存される期間。
Figma編集者エディターアカウント。
高度な描画ツールベクターネットワークや円弧ツールなど。
オートレイアウト
スタイル
プラグインとウィジェット
無制限のファイルストレージ
クロスプラットフォーム
Sketchインポート
インタラクティブプロトタイプ
オーバーレイプロトタイプにて、他要素の上に表示される要素。(例:モーダルウィンドウ)
トランジション
高度なアニメーションイージングなどを自分で定義できる。
開発者のハンドオフ実装者がデザインファイルを見てコードを取得できる。
PDF、PNG、JPG、SVGのエクスポート

コラボレーション

セキュリティを高める必要があればビジネス以上のプランで、そうでなければスターターやプロフェッショナルプランで十分です。

表7.70

スタータープロフェッショナルビジネスエンタープライズ補足
マルチプレイヤー複数の編集者で利用できる。
閲覧者数無制限
共有可能なリンク
キャンバス上のコメント
オブザベーションモード特定のユーザーの視点、作業を追従して観察できるモード。
プライベートプロジェクトチーム内で招待した人だけが参加できるプロジェクト。
プロトタイプ共有権限プロトタイプのみを共有する設定。
音声での会話Figma上での音声通話。
チーム数無制限無制限にチームを作れるかどうか。
ブランチ機能とマージ機能1つのファイルから複数のバージョンの変更を作成し、統合できる機能。
カスタムワークスペース組織内にワークスペースという単位を作れる機能。

デザインシステム

大抵のことはプロフェッショナルプランで実現できますが、組織全体で1つのシステムを使おうと思うとビジネス以上のプランが必要です。

表7.71

スタータープロフェッショナルビジネスエンタープライズ補足
コンポーネント
チームライブラリチーム内で利用できる、ファイルをまたがったライブラリ。
組織全体のデザインシステム組織内で利用できる、チームをまたがったライブラリ。
共有フォントフォントファイルをアップロードして共同利用できる機能。
デザインシステムアナリティクスチームライブラリ内のコンポーネントがどれだけ使用されているかなどをトラッキングできる機能。

開発者用プラットフォーム

本書ではほぼ取り扱っていない範囲ですが、Slackなどの他ツールとの連携はスタータープランでも可能です。

表7.72

スタータープロフェッショナルビジネスエンタープライズ補足
REST APIshttps://www.figma.com/developers/api を参照。
サードパーティ統合JIRA, Zeplin, Dropbox, SlackなどFigma以外の製品をワークフローに組み込める。
ライブ埋め込みデザインファイルの最新バージョンと連動した埋め込みができる。
プライベートのプラグインとウィジェットビジネス内だけで使えるプラグインの開発
Webhooks他の製品との連携のためのWebhookの使用。

管理者権限やセキュリティ

厳しいセキュリティ要件がある場合、ビジネス以上のプランが必要です。

表7.73

スタータープロフェッショナルビジネスエンタープライズ補足
パスワード保護
プラグインとウィジェットの管理
一元管理アカウントや請求の管理を一元的に行う。
ドメインキャプチャ会社のメールアドレスでアカウントを登録すると会社に所属させるなどの機能。
リンクアクセス制御組織外の人へのアクセス権のコントロール。
コンテンツの一元管理Draftファイルを含むすべてのファイルを組織に紐付ける。
シングルサインオン(SSO)
アクティビティーログ
ワークスペースの管理ワークスペースごとの管理者設定。
ゲストアクセス管理組織外外のメンバーへのアクセスの設定。
既定の役割新規ユーザーが追加されたときのデフォルトの権限(閲覧者、編集者)の設定。
既定のチーム新規ユーザーが追加されたときのデフォルトで所属するチームの設定。
SCIM経由の役割分担SCIMを用いた役割の設定。
パスワード保護の要求パスワード設定の必須化。

サポート

運営からのサポートを求める場合、ビジネス以上のプランが必要です。

表7.74

スタータープロフェッショナルビジネスエンタープライズ補足
Figmaサポートフォーラムhttps://forum.figma.com/
Figmaヘルプセンターhttps://help.figma.com/hc/en-us
オンボード計画とサポートFigmaの運営チームによるオンボーディング
専任のアカウントマネージャー組織ごとに就く専任のアカウントマネージャー。
ハンズオントレーニング

注釈

  1. macOSであればreturn、WindowsであればEnterを押すことでも同様に子要素を選択できます。

  2. まだ日本語化対応がされていないようです。

  3. マウスの矢印をかざすことをマウスオーバーと呼びます。

  4. 執筆時点(2022年8月現在)ではまだ日本語化対応がされていないようです。

  5. この、上書きのことをオーバーライドといいます。