本記事ではFigmaで基本的なボタンを作成する方法について解説します。
Figmaでボタンを作成する方法 1 (ボタンの作成)
まず、Figmaで基本的なボタンを作成する方法について確認していきましょう。以下が手順です。
1. テキストを作成
画面上部ツールバーにあるテキストツール（Tマークのアイコン）をクリックします。
テキストツールでキャンバスをクリックし、テキストを入力します。（例として「button」と入力）
2. オートレイアウトが適用されたフレームを作成
テキストを選択した状態で、Shiftキー + Aキー を同時に押すと、オートレイアウトが適用されたフレームが作成されます。
3. 上下の間隔やパディング（余白）の値を設定
フレームを作成すると、右サイドバーにオートレイアウトのパネルが表示されますので、このパネルにある設定項目の値を調整します。
オートレイアウトのパネルで値を調整できる項目は「項目の間隔」「水平パディング」「垂直パディング」などがあります。
ここでは、「水平パディング」の値を大きくしてテキスト左右の余白を広げてみます。「水平パディング」「垂直パディング」それぞれの入力欄に、数値を入力してボタンに最適なフレームの余白を設定してみましょう。水平パディングと垂直パディングの値の調整がフレームに反映されます。
4. フレームとテキストの「塗り」のカラーを設定
上下の余白やパディングが設定できたら、フレームの「塗り」のカラーも設定しておきましょう。右サイドバーに表示されている塗りのパネルにあるカラーコードが表示されているエリアをクリックします。
カラーコードをクリックすると、カラーの設定パネルが表示されますので任意のカラーを設定します。
また、テキストを選択すれば、テキストの「塗り」のカラーも変更できます。ここでは、ホワイト（#FFFFFF）に変更してみます。
5. フレームを角丸に設定
よりボタンらしくするために、フレームの4つの角を少し丸くし、角丸のフレームに変更してみましょう。
角を丸くするには、右サイドバーに表示されているフレームのパネルの中から、「角の半径」という項目の値を入力・調整します。
上の画像のように、フレームが角丸のボタンが完成しました。
Figmaでボタンを作成する方法 2 (ボタンのコンポーネント化)
次に作成したボタンをコンポーネント化して、アセットの素材にすることで簡単にボタンを複製できるようにする方法を説明します。以下が手順になります。
1. 「複数のコンポーネントの作成」を選択
コンポーネントとしてより便利に活用するために、フレームのカラーが異なるバージョンのボタンを作成します。
テキストとフレームを選択して、コピー＆ペーストすればボタンが複製されますので、フレームの「塗り」のカラーを変更し、オリジナルのオレンジのボタンに加え、ブルーとレッドのボタンを作成します。
3つすべてのテキストとフレームを選択した状態で、画面上部ツールバーの中央にある「コンポーネントの作成」のアイコン（アーガイル柄のような4つのひし形のマーク）を長めにクリック（または右側の矢印をクリック）します。
「コンポーネントの作成」を長めにクリックすると、上の画像のようなメニューが表示されますので、「複数のコンポーネントの作成」を選択します。
2. 「バリアントとして結合」をクリック
「複数のコンポーネントの作成」を選択すると、右サイドバーにあるコンポーネントのパネルの中に「バリアントとして結合」というボタンが表示されるので、これをクリックします。
バリアント（Variants）とは少し異なるもの・変種という意味の英語で、簡単に言うと異なるバリエーションのコンポーネントのことを指しています。
ここではオリジナルのオレンジに対し、ブルーとレッドのバリアントがある1つのコンポーネントとしてボタンのアセットを登録したことになります。
「バリアントとして結合」をクリックしたら、コンポーネントの設定がしやすいように、各バリアントを縦にレイアウトし直しておきましょう。右サイドバーに「オートレイアウト」というパネルがありますので、このパネル右端にある ＋マーク をクリックします。
3つのバリアントのコンポーネントに、オートレイアウトが設定されたのでオートレイアウトパネルにある「↓」をクリックします。
3. コンポーネント名やバリアント名を変更
上の画像のように3つのバリアントが縦にきれいにレイアウトされました。
次に、アセットから見つけやすいように、コンポーネント名をわかりやすく変更しておきます。ここでは、「Component 1」となっている名称を、ボタンだとわかるように「Button 1」という名称に変更してみます。
また、3つあるバリアントの名称も変更可能です。ここでは、すでに設定済みのフレーム名を反映して、3つの各パリアントが「Frame1」 「Frame2」 「Frame3」 というプロパティ名になっています。
今回は、この「Frame1, Frame2, Frame3」 というバリアント名のままで作業をすすめます。
名称が設定されていない場合は、それぞれのバリアントに名称を付ける必要がありますので、この欄でプロパティ名を設定します。
バリアントのプロパティ名は、例えば最初に作成したバリアント (オリジナル)を「Default」、バリエーションとして追加したバリアントを 「variant 1」 「variant 2」 とする、もしくはバリアントの目的がわかる名称に設定しておきましょう。後でインスタンスを作成するときに便利です。
これで、バリアントが設定されたボタンのコンポーネントが作成できました。
4. 作成したコンポーネントからインスタンスを作成
作成したコンポーネント（メインコンポーネント）から、インスタンス（複製されたオブジェクト）を作成してみましょう。
左サイドバーの上部にある「レイヤー」「アセット」というタブから、「アセット」をクリックします。
「アセット」をクリックして左サイドバーに表示される項目の中から、「ローカルコンポーネント」をクリックし、表示を開きます。
この中に、先ほど作成したボタンのコンポーネントがありますので、これを選択します。
コンポーネントを選択すると、上の画像のようにコンポーネントの内容が確認できるパネルが表示されます。
このパネルにある「インスタンスを挿入」をクリックします。
「インスタンスを挿入」をクリックすると、上の画像のようにボタンのコンポーネントのインスタンスが作成されます。
5. プロパティからバリアントを変更
ボタンのインスタンスコンポーネントを選択した状態で右サイドバーに表示される各コンポーネントの設定パネルにあるプロパティの欄をクリックすることで、上の画像のようにバリアントを変更できます。
上の動画のように、バリアントが設定されているコンポーネントが用意されていると、簡単にボタンの種類を変更できるので便利です。
作成したボタンのコンポーネントには、オートレイアウトが設定してありますので、上の動画のようにテキストを変更した場合はフレームのサイズも、テキストの長さに合わせて変更されます。
またコンポーネントは、上の動画のように基となっているメインコンポーネントの設定を変更すると、複製したインスタンスのコンポーネントにも反映されます。
作成したボタンをコンポーネント化する方法は以上です。
まとめ
ここでは基本的なボタンの作成方法とコンポーネント化について解説しましたが、この他にもFigmaには様々なボタンの種類と作成方法があります。
ボタンの作成方法はFigmaを用いたWeb制作において必須の知識とスキルです。まずは、本記事を参考にして基本のボタン作成方法をマスターしておきましょう！
お問い合わせ