ともすたmedia
デザインツール、設計ツールとして人気のFigmaが、2024年9月に操作画面（UI）を大幅にアップデートして、UI3として順次展開され始めました。
ここでは、そんなUI3を使った基本的な操作を学ぶために、ボタンのデザインを作る手順を紹介しましょう。
なお、既存のFigmaユーザーの場合は新UIが展開されるまでに時間がかかる場合があるため、すぐに試してみたい場合は新しくアカウントを取得して、試してみると良いでしょう。
[ad]
フレームを作ろう
Figmaでは、デザインするものに合わせて画面サイズや用紙サイズの「フレーム」を準備してデザインを作成していきます。画面下のツールバーから「フレーム」をクリックしましょう。
右端のパネルに、各画面サイズや用紙サイズのリストが表示されるので、ここでは例えば「Macbook Pro 16」などを選びましょう。キャンパスエリアに、白いエリアが現れます。ここにデザインを作成していきましょう。
長方形でボタンの土台を描こう
それでは、デザインを作成していきましょう。まずは、ボタンの土台を作ります。これには「長方形」ツールを利用しましょう。画面下の「長方形」ボタンをクリックします。
なお、もしボタンが長方形以外のものになっている場合は、その右の「シェイプツール」ボタンをクリックすると、各ツールに切り替えることができます。
長方形を選ぶと、マウスカーソルが「+」のマークに変わるので、これでフレーム内で好きな大きさにドラッグします。実際の大きさは後で調整するので、まずは大体の大きさで問題ありません。Figmaは「ベクターツール」と呼ばれる描画ツールなため、描いた図形を後から何度でも変更できます。
大きさを変更しよう
それでは、今描いた長方形の大きさを変更して、実際の大きさに合わせましょう。描かれた長方形は周りに青い枠が表示されます。この枠にカーソルを重ねると、カーソルの形が変化します。また、四隅の正方形（ハンドルといいます）では、カーソルが斜めの矢印に変わります。
この辺やハンドル部分をドラッグすると、図形の大きさを変更することができます。辺の場合は縦または横が、ハンドルの場合は縦横を同時に調整できます。
この時、長方形の下にその時の大きさが「ピクセル」という単位で表示されるので、これを見ながら調整することができます。ただし、マウス操作で大きさを調整するのは、細かな調整がしにくいので、ここではプロパティを変更して調整してみましょう。
デザインパネルを利用しよう
長方形が選ばれた状態になっている場合、画面右側のパネルが「デザインパネル」と呼ばれるパネルとなり、今選んでいる長方形の各種情報が表示されます。
なおこの時、もし長方形に青い枠がない状態、つまり選択状態ではなくなってしまっている場合は、ツールバー左端の「移動」ツールを使って、長方形をクリックしましょう。選択状態になります。
デザインパネルでは、例えば「位置」というプロパティは長方形の位置を変更すると、その時の値が自動的に反映されます。また逆に、このエリアに数字を直接入力すると、位置を変更することができるなど、両者はリンクをしています。
ここでは、大きさを変更するため「レイアウト」の「W（幅）」と「H（高さ）」の値を調整しましょう。それぞれ「175」と「44」と入力します。
塗りの色を変更しよう
続けて、ボタンの色を変更しましょう。色の変更には「塗り」という設定項目を使います。
現状「D9D9D9」という値が挿入されていますが、これは図のようなグレーの色を表す「カラーコード」というコード番号です。ここでは詳細は省略するので、興味があれば「カラーコード」などのキーワードで学んでみましょう。
左側のチップをクリックすると、カラーパレットが表示されて好きな色を作成して、適用することができます。
グラデーションを設定しよう
グラデーションを設定することもできます。カラーパレットの上部の2番目の「グラデーション」をクリックしましょう。
スタート位置とゴール位置の色がそれぞれ設定できるようになり、その間のグラデーションが自動的に塗られるようになります。
また、色の変化する位置（ストップ位置）は、カラーバーの途中をクリックすると増やすことができます。
不要な場合は、右端の「-」ボタンをクリックしましょう。
ここでは、左端の色を「2F91BC」に、右端の色を「23A2A2」に設定しましょう。見本と同じようなグラデーションに設定できます。
グラデーションの位置を調整しよう
グラデーションを設定中は、長方形に直線が描かれます。両端には丸い「ハンドル」があるので、これをドラッグすると、グラデーションの位置や方向などを調整することができます。
ここでは、互いに少し内側に移動してグラデーションの開始や終了の位置を変更しておきましょう。
なおこの時、マウス操作によって線が斜めになってしまう場合は、「Shift」キーを押しながら操作してみましょう。ある程度の所（45度まで）は回転しないようになるため、操作しやすくなります。
[ad]
枠線を引こう
続いて、ボタンの枠線を引きましょう。デザインパネルの「線」という所の右端にある「+」をクリックします。
すると、黒い線が周りに引かれるので、色を「2F91BC」に設定しましょう。見本と同じ色になります。
線の位置
線の設定項目には「内側」「外側」「中央」という設定があります。これは、図形に対する枠線の位置を示しています。「内側」の場合、図形の大きさ自体は変わりませんが、枠線の分だけ中の図形の大きさが小さくなります。
「外側」にすると、元の図形はそのままの大きさでその外側に線が引かれます。そのため、図形自体の大きさは一回り大きくなります。
「中央」はその間で、半分だけ内側に、半分だけ外側に線が引かれます。
角丸を設定しよう
続いて、長方形の角を丸めてみましょう。これには、専用の「ハンドル」があります。ただしこのハンドル、図形の大きさが小さいとうまく表示されません。
そこで、画面右上の「ズーム」を使って画面サイズを拡大してみましょう。
上の入力欄に「300」などと入力します。300%に拡大されました。
こうして長方形を選択すると、図のように内側に丸いハンドルが表示されます。
これをドラッグすることで、角の半径を変更することができます。
個別の角を設定しよう
角丸は、個別に設定することもできますOption（またはAlt）キーを押しながら、ハンドルをドラッグしてみましょう。その角にだけ、角度が付きます。
さらに続けて、各角を設定することでバラバラの角度にすることができます。この時、2つめ以降の設定の時はOption（Alt）キーは離した状態で行いましょう。ややこしいのですが、2つめ以降でOption（Alt）キーを押すと、今度は全体の角に戻ってしまうので注意しましょう。
プロパティで設定しよう
角の半径は、プロパティでも変更ができます。デザインパネルの「外見」の右側で、先の手順で個別の角を設定した場合は「混在」という設定項目になっていますが、右側の「個別の角」ボタンをクリックしましょう。
小さなウィンドウが開いて、各角の設定を変更できます。
なお、「混在」を別の数字に置き換える事もできます。ここでは、「3」と入力して各角3の半径に設定しましょう。
ドロップシャドウを設定しよう
最後に、ボタンに薄いドロップシャドウを設定しましょう。
デザインパネルの「エフェクト」で、右側の「+」をクリックします。
「インナーシャドウ」「ドロップシャドウ」「レイヤーブラー」と「背景のぼかし」を設定できるので、ここでは「ドロップシャドウ」を選びましょう。
左の「エフェクトの設定」というチップをクリックすると、次の設定項目が表示されます。それぞれ、次のように設定しましょう。
- 位置X： 0
- 位置Y： 0
- ぼかし範囲： 10（ぼかしのぼんやり感）
- 広がり： 0（ぼかしの幅・高さ）
- 色： 000000、20%
図のようなドロップシャドウが設定されます。
[ad]
テキストラベルを設定しよう
続いて、ボタンの表面に記述するテキストラベルを作成しましょう。これには、ツールバーの「テキスト」ツールを利用します。
ボタンの表面の適当な位置をクリックしましょう。白いテキストカーソルが表示されます。位置は後で調整します。
なおこの時、背景が明るい場所はクリックしないようにしましょう。Figmaはテキストツールを利用するとき、その時の背景色に従って文字色を白にするか、黒にするかを自動で判別します。白い文字にしたい場合は、あらかじめ暗い背景でクリックしておくと便利です。
タイポグラフィーを調整しよう
テキストを選択すると、デザインパネルがテキスト用の設定が表示されます。真ん中あたりにある「タイポグラフィー」を設定しましょう。
ここでは、次のように設定します。
- フォント： Not Sans JP
- 太さ： Bold
- 文字サイズ： 16
その他の設定はそのままで良いでしょう。
なお、タイポグラフィーは右下の「タイプの設定」をクリックすると、より詳細の設定も可能です。ここでは、詳細は省略しますが、こだわった設定をしたい場合は調整していきましょう。
[ad]
ペンツールを使おう
続いて、テキストラベルの右にある「>」の記号を作りましょう。ここでは、「ペン」ツールを使って作成します。ペンツールは、連続した直線や「ベジェ曲線」と呼ばれる曲線を引くことができるツールです。ツールバーの「ペン」ツールをクリックしましょう。
そしたら、フレーム内の適当な場所でクリックします。すると、カーソルに青い線が付いてきます（ドラッグではなく、クリック後にカーソルを動かすだけです）。
そしたら、ここで45度の斜めの線を引きたいのですが、マウス操作で正確に45度に設定するのは難しいので、「Shift」キーを押してみましょう。45度単位でしか回転しなくなり、操作しやすくなります。適当な長さで再度クリックしましょう。
続いて、「Shift」キーを押しながら反対側にカーソルを移動して、同じ角度の線を引きます。この時、先ほど引いた線と同じような長さの場所まで移動すると、赤いガイドラインが表示され、同じ長さであることが示されます。
このガイド線が表示されているところでクリックしましょう。きれいな画像が作成できます。
これで図形は完成ですが、まだ連続直線が引ける状態になっているので「Esc」キーを押して、解除します。さらにそのままでは、確定状態にはなっていないので、もう何度か「Esc」キーを押して図の状態になるまで解除しましょう。
ベクターパスを調整しよう
では、この図形を調整して仕上げていきましょう。ペンツールで描いた図形は「ベクターパス」としてデザインパネルで調整できます。ここでは、幅を4ピクセルに設定します。ただし、そのままでは幅だけが変わってしまってゆがんでしまいます。
そこで、レイアウトの右端にある「縦横比を固定」ボタンを先にクリックしておきましょう。
「レイアウト」の「W（幅）」を「4」に設定すると、自動的に高さが「8」に設定され、大きさが調整されます。
後は、図形をボタンの表面まで移動して、「線」の色を「FFFFFF（白）」に設定しましょう。
また、太さを「2」に設定します。
これで完成です。
位置調整をしよう
最後にそれぞれ作ったパーツの位置調整をして、仕上げていきましょう。まずは、文字ラベルと記号の位置を合わせます。記号をドラッグして、図のような位置に変更しましょう（だいたいで大丈夫です）
この時、赤いガイドラインが表示されることがあり、微妙な位置調整ができなくなってしまうので、それが嫌な場合は「Ctrl」キーを押しながらドラッグしましょう。ガイドラインが表示されなくなります。
グループ化しよう
さて、これで文字ラベルと記号の位置が決まったので、ずれないように「グループ化」しておくと良いでしょう。まずは、文字ラベルと記号を選択します。「移動」ツールを選んだら、記号をクリックして、「Shift」キーを押しながら文字ラベルもクリックします。（ドラッグで選択してしまうと、ボタンの土台も選択されてしまうので、ここではクリックで選択しました）。
そしたら、右クリックして「選択範囲のグループ化」を選びます。またはキーボードショートカットの「Command(Ctrl)+G」でもグループ化できます。
整列ツールを使おう
最後に、ボタンの土台とラベルの位置を調整します。マウス操作でも調整できますが、ここでは「整列」ツールを使ってみましょう。
土台とラベルを選択したら、デザインパネルが「2個選択されました」となっている事を確認し、上部の「位置」の各ボタンをクリックしてみましょう。左寄せや中央揃え、右寄せや上揃えなど、位置をそれぞれ整列できます。
ここでは、横も縦も「中央」に設定しましょう。
なおこの時、グループ化をしていない状態だった場合は、整列ツールが正しく使えないで気をつけましょう。例えば左寄せをすると、図のように記号も左に寄ってしまいます。
整列ツールを正しく使うためにも、各パーツは適切にグループ化しておくと良いでしょう。
こうしてボタンを作成することができました。Figmaの基本的な操作を抑えることができました。
[ad]
