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

Lee Stanton 著Lee Stanton 著者 Lee Stanton は、ソフトウェア分野に重点を置いた多才なライターであり、モバイル アプリケーションとデスクトップ アプリケーションの両方とオンライン テクノロジをカバーしています。 続きを読む• Evan Gower 編集 Evan Gower 編集者 デジタル パブリッシングで 10 年以上の経験があります。 エヴァンは、新たなテクノロジートレンドに鋭い目を向けて私たちのチームを率いています。 続きを読む2023 年 8 月 17 日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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