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

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

公開: 更新:



Figmaでチェックボックスを作成する基本手順

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

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

Python基礎・実践(Django)

企業・法人向けのPython研修では、基礎から応用まで体系的に学べます。

Python研修の詳細

DX社員研修

企業・法人向けのDX研修では、実務に繋がるリスキリングでITレベルを向上させます。

DX研修の詳細

Javaエンジニア育成研修

企業・法人向けのJavaエンジニア育成研修では、Javaの基礎から応用まで確実に習得できます。

Java研修の詳細

新卒・新入社員向け研修

企業・法人に新入社員・新卒社員に向けたプログラミング研修を提供しています。

新入社員研修の詳細

コードキャンプのIT研修を全て見る

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

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の間隔が一般的ですがデザインに応じて適宜調整しましょう。

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

おすすめのPython研修一覧

Python研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Python研修の一覧を見る

おすすめのDX研修一覧

DX研修を提供しているおすすめの企業・法人を一覧で掲載しております。

DX研修の一覧を見る

おすすめのJava研修一覧

Java研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Java研修の一覧を見る

おすすめのJavaScript研修一覧

JavaScript研修を提供しているおすすめの企業・法人を一覧で掲載しております。

JavaScript研修の一覧を見る

Figmaのチェックボックスをプロトタイプで動作させる方法

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やプログラミングに関するコラム


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

ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。

コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア フューチャーアーキテクト株式会社が実現した新入社員向けIT研修プログラムでタスクフォース制度が主体的な学びと成長を生み出す - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【IT新入社員研修】オンラインとオフラインの最適バランスを実現したFutureOneの導入事例 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【新入社員研修】柔軟なハイブリッド型Java研修で実現した新卒20名の成長と成果|サークレイス株式会社 - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修|株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩|株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア

新着記事

対象者別で探す

子供(小学生・中学生・高校生)向け
プログラミング教室検索する

子供(小学生・中学生・高校生)がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

子供(小学生・中学生・高校生)
プログラミング教室検索する

ITやプログラムなどの
最新情報を検索する

日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

ITやプログラムなどの
最新情報を検索する