Figmaでチェックボックスを作る方法！基本からプロトタイプまで詳しく解説

Figmaでチェックボックスを作成する基本手順に関して、以下2つを簡単に解説します。

• アイコンのみのチェックボックス作成方法
• ラベル付きチェックボックスの設計手順

アイコンのみのチェックボックス作成方法

Figmaでチェックボックスを作成する際、まずはアイコンのみの基本形から始めるのが効果的です。フレームを24pxで作成し、その中に2pxのストロークと4pxの角丸を持つ矩形を配置します。このシンプルな構造がチェックボックスの土台となります。

チェックマークはペンツールを使って自作するのがおすすめです。作成したチェックマークと枠線を「Outline stroke」で複合パスに変換することで、一体感のあるデザインが完成します。ON/OFFの状態を表現するため、チェックマークの有無で2つのバリエーションを用意しましょう。

作成したチェックボックスは、コンポーネント化とバリアント化を行うことで再利用性が高まります。「Create multiple components」機能を使ってコンポーネント化し、「Combine as variants」でバリアント化することで状況に応じて簡単に切り替えることが可能です。

ラベル付きチェックボックスの設計手順

ラベル付きチェックボックスは先ほど作成したアイコンと、テキストを組み合わせて構築します。アイコンのサイズ調整時は右プロパティのResizingで「Scale」を設定することで、拡大・縮小時の崩れを防止できます。この設定によりインスタンスのサイズ変更時も一貫性が保たれるのです。

テキストとアイコンの配置には「Auto layout」機能が便利です。「Shift + Aキー」でAuto layoutを適用し、アイコンとテキスト間の間隔を「Spacing between items」で調整します。8pxの間隔が一般的ですがデザインに応じて適宜調整しましょう。

完成したラベル付きチェックボックスも、アイコンのみの場合と同様にコンポーネント化とバリアント化を行います。これによりプロジェクト全体で一貫性のあるチェックボックスを使用でき、効率的なデザイン作業が実現可能です。

Figmaのチェックボックスをプロトタイプで動作させる方法に関して、以下2つを簡単に解説します。

1. プロトタイプモードでの設定手順
2. チェックボックスのON/OFFアニメーション作成

プロトタイプモードでの設定手順

Figmaでチェックボックスを動的に機能させるには、プロトタイプモードを活用します。具体的な作成手順は下記の通りです。

1. Figmaで「Prototype」タブを選択し、プロトタイプモードに切り替える。
2. チェックボックスを選択し、オブジェクトの右端に表示される青い丸を確認する。
3. 青い丸をドラッグしてほかのオブジェクトに接続する。
4. クリック時の挙動として、チェックボックスの状態遷移を設定する。

プロトタイプモードを活用することにより、Figma上でインタラクティブなチェックボックスを実現できます。「Smart animate」などのオプションを活用することで、よりスムーズでリアルなアニメーション効果を設定することが可能です。

また、チェックボックスの状態遷移を設定する際、トランジションのタイプやスピードも調整可能です。自然な動きを演出するために「Smart animate」などのオプションを活用し、ユーザーにとって心地よい体験を実現できます。

チェックボックスのON/OFFアニメーション作成

チェックボックスのON/OFFアニメーションを作成する手順は下記の通りです。

1. OFF状態のチェックボックスを選択する。
2. 「Command + オプション + K」（Mac）または「Ctrl + Alt + K」（Windows）でコンポーネント化する。
3. デザインパネルの「Add variant」ボタンをクリックしてバリアントを追加する。
4. 新しいバリアントをON状態にデザインする。
5. ON状態のバリアントに適切な名前を付ける。
6. プロトタイプモードに切り替える。
7. 親要素を選択し、ON/OFFのバリアントをプロトタイプで接続する。

上記の手順で作成したあとに、親要素のON/OFFをプロトタイプで接続します。この設定によりプロトタイプモードで子要素（チェックボックス）をクリックするとON/OFFが切り替わるようになります。この仕組みを利用してフォームの送信ボタンの有効化など、より複雑なインタラクションも実現可能です。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム

• 
  【AI漫画の重要項目】コマや吹き出しの作り方と画像を配置する方法
• 
  これだよこれ！Ankerの新ガラスフィルム「Anker Easy Fit」が便利すぎると話題！
• 
  AI検索エンジンGensparkとは？話題のAutopilot Agent機能の使い方も併せて紹介
• 
  ChatGPTの新モデル「OpenAI o1」の使い方！o1-previewとminiの違いやAPIの利用制限などを徹底解説
• 
  画像生成AI「Stable Diffusion」で漫画のキャラクターを作る方法

ITやプログラミングに関するニュース

• 
  MicrosoftがMicrosoft 365 Copilot Wave 2を発表、AI協働ツールCopilot Pagesなど新機能で生産性向上を加速
• 
  MicrosoftがPython in ExcelのGA版をリリース、Excelでの高度なデータ分析が可能に
• 
  Dockerが開発者向け新サブスクリプションプランを発表、統合ツールセットの提供と価格改定で開発効率化を促進
• 
  Unity TechnologiesがゲームのRuntime Fee撤回を発表、従来の料金体系に戻す方針を明らかに
• 
  OpenAIが新推論モデル「OpenAI o1」プレビュー版を発表、科学やコーディング分野での高性能化を実現