Figma でボタンを作成する方法

2023/08/17

Figma のデザインボタンは、プラットフォーム上のコンポーネントと自動レイアウトプロパティを利用して、さまざまな方法で作成できます。そのため、ボタンはラベル、サイズ、アイコンを使用してカスタマイズできます。Figma でボタンを作成する方法がわからない場合は、ここが正しい場所です。

この記事では、ボタンの作成方法とFigmaを最大限に活用する方法を説明します。

ボタンの作成

ボタンは、機能的なユーザーインターフェイスを設計するときに使用される一般的な要素です。Figma デザインでボタンを作成できます。Figma を初めて使用する場合は、まず基本を理解する必要があります。

ボタンを作成するためのステップバイステップのガイドは次のとおりです。

新しい Figma デザインを作成します。
キーボードの F キーを押してフレームを追加し、「デスクトップ」または「電話」を選択します。
キーボードの R キーを使用して、高さ 50 ピクセル、幅 200 ピクセルの長方形を追加します。
キーボードの「T」を押してテキストを追加します。テキストをテキストボックスの水平方向と垂直方向の中央に配置するように中央揃えにします。
このテキストボックスを長方形の中央に配置します。
コンポーネントを必要に応じてグループ化します。

カラーピッカーを使用して色を作成して追加することも、インターネットから 16 進数の色にアクセスすることもできます。

対比

ボタン内のテキストの色は、黒の背景と白の背景のどちらとのコントラストがより優れているかによって異なります。両方のオプションを使用して、どちらが最適であるかを確認できます。どのオプションも気に入らない場合は、ボタンのスタイルと色を調整できます。

基本的なボタンの作成

Figma で作成できる基本的なボタンは 3 つあります。

主ボタン

プライマリボタンは単色で、黒または白のテキストが付いています。このボタンは、アプリを使用するユーザーを引き寄せます。作成方法は次のとおりです。

ボタンの色を選択します。
長方形を選択し、選択した色を適用します。
より良いコントラストに応じて、テキストの色を白または黒にします。

二次ボタン

これは通常白いボタンですが、選択した色で輪郭が描かれます。ボタンのテキストも同じ色にすることができます。これは、作成できる 2 番目に重要なボタンです。また、ユーザーの目を引く必要があります。

長方形の色を白 (#FFFFFF) に変更します。
長方形にストロークを追加します。ここでお好みの色を選択できます。
テキストの色をテキストと同じ色になるように変更します。

三次ボタン

3 番目のボタンは、最初の 2 つほど重要ではありません。これらは、リンク、購読解除、戻るボタンとして機能します。これらは多くの場合プレーンテキストであり、場合によっては下線が付けられる場合もあります。

長方形をストロークなしで白にします。
文字の色を好みの色に変更します。

第 1 ボタンまたは第 2 ボタンに似た第 3 ボタンを作成できます。ストロークの幅を変更して視認性を高めることもできます。

テキスト、自動レイアウト、色を使用してボタンを作成する

プラットフォーム上のツールを使用すると、自動レイアウトとテキストツールを使用して実践的な経験を積むことができます。ステップごとのガイダンスがあれば、ボタンの作成は比較的簡単に行えます。ボタンを作成するには、テキストレイヤーを作成し、テキストレイヤーを自動レイアウトフレームに変換し、ボタンのスタイルを設定する必要があります。

テキストレイヤーの作成

このステップでは、テキストツールを使用します。

ツールバーのテキストツールをタップするか、文字「T」を押します。
テキストツールがアクティブなときに、キャンバスをタップし、「ボタン」という単語を入力します。テキストレイヤー名は、レイヤーパネル内で手動で変更しない限り、キャンバスに入力されたものと一致することに注意してください。
レイヤー名を変更する必要がある場合は、左側のサイドバーをダブルクリックし、選択した新しい名前を入力します。

フォントサイズを増減して、フォントサイズを調整することもできます。

テキストレイヤーを選択します。
右側のサイドバーに移動し、「テキスト」セクションでフォントサイズを変更します。フォントを変更したり、デフォルトのオプションを使用したりすることもできます。

テキストレイヤーを自動レイアウトフレームに変換する

この時点で、ボタンをさらに微調整して魅力的に見せる必要があります。自動レイアウトを使用すると、さらにアレンジを加えることができます。自動レイアウトは Figma の強力な機能であり、レスポンシブデザインに適用できます。これらのデザインは、コンテンツのサイズ、オブジェクトの配置、デバイスの種類などの変更に自動的に適応します。

自動レイアウトを適用して、レイヤーをフレームに変換したり、既存のフレームに変換したりできます。既存のフレームにレイアウトを適用するには、テキストレイヤーを選択し、「Shift」「A」ショートカットを押します。レイアウトが適用されると、いくつかの変化に気づくでしょう。

テキストレイヤーはフレーム内になります。自動レイアウトはコンポーネントとフレームにのみ適用されるため、Figma は新しいフレーム内にテキストレイヤーを自動的に配置します。フレームには塗りつぶし色がありません。これはボタンのスタイル設定ステップで適用されます。
フレームを選択すると、右側のサイドバーに自動レイアウト設定が表示されます。自動レイアウトはさらに調整できます。
テキストが変更されるとフレームが縮小したり拡大したりすることがわかります。このような動的な要素を使用すると、さまざまなデバイスで表示されるコンテンツや他の言語に翻訳されるコンテンツのデザインにかかる時間を節約できます。

ボタンのスタイルを設定する

色を追加することから始めることもできます。

フレームレイヤーを選択し、右側のサイドバー内の「塗りつぶし設定」を選択します。これにより、色が
自動的に塗りつぶされます。カラーピッカーは色を変更します。
テキストレイヤーを選択し、塗りつぶしを#FFFFFFに調整します。
フレームを再度選択し、右側のサイドバー設定を使用して角の半径を調整します。

次はフレームのパディングを修正することです。文字テキストが自動フレームレイアウトに変換されると、テキストとフレーム境界の間にパディングが自動的に追加されます。この時点でのパディングは、すべての面で均等に表示されます。下部と上部のパディングを左右のパディングより小さく変更できます。

パディングは必要に応じて更新できます。左右のパディングまたは上下のパディングは、以下のショートカットを使用して同時に変更できます。

<⌥ Option> または <Alt> を押したままパディング領域をクリックして、反対側のパディング値を入力します
<⌥ Option> または <Alt> を押したままハンドルをドラッグすると、反対側のパディングを変更できます

この時点ではボタンの見た目は良好ですが、まだラベルを更新できます。編集できるようにするには、テキストをダブルクリックする必要があります。「サインアップ」という言葉を入力します。入力するとボタンのサイズが変更されます。これは、自動レイアウトおよびテキストツールを使用してボタンをデザインする方法です。これで、ボタンをコンポーネントに変換したり、バリアントを追加したりするなど、新しいことを試すことができます。

クリック可能なボタンの作成

Figma は、Uber、Facebook、Google、Netflix などの企業で使用されています。クリック可能なボタン機能を使用すると、このような企業の設計者は、インタラクティブなクリック可能なボタンを簡単に作成できるようになります。ボタンを使用すると、このようなプラットフォームでのナビゲーションがはるかに簡単になります。

Figma でそのようなボタンを開発する方法は次のとおりです。