figma-how-to-design-ui-components
公開日: 2022.07.29  | 更新日: 2022.07.29

Figmaで汎用的なUIコンポーネントを作る方法

今回はFigmaで汎用的なUIコンポーネントを作る方法をいくつか紹介します。この記事の方法では、プラグインなどは利用せずにFigmaの基本機能のみで作成できます。実際のサンプルデータもあわせて用意しているので、参考にしてみてください。

この記事のターゲット

  • Figmaで汎用的なUIコンポーネントを作りたい方

  • Component、Variants、Auto layoutの使い方が知りたい方


汎用的なコンポーネントの作り方一覧

一般的なWEBサイトやアプリケーションで見られるコンポーネントとその作り方を紹介しています。

Figmaでシンプルなボタン・コンポーネントを作る方法

今回は、Figmaでシンプルなボタン・コンポーネントを作る方法を紹介します。テキストのシンプルなボタンを、「Component」と「Variants」と「Auto layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、ご活用ください。 ... 続きを読む

figma-how-to-create-button

Figmaでシンプルなテーブル(表)を作る方法

今回は、Figmaでシンプルなテーブル(表)を作る方法を紹介します。ヘッダーと罫線だけのシンプルな表を、「Component」と「Auto Layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、よかったらご活用ください。 ... 続きを読む

figma-how-to-create-table

Figmaでシンプルなタブ・コンポーネントを作る方法

今回は、Figmaでシンプルなタブ・コンポーネントを作る方法を紹介します。テキスト長に合わせて伸縮するタブを、「Component」と「Variants」と「Auto layout」を使って作成します。また、自由に使えるサンプルファイルも用意していますので、ご活用ください。 ... 続きを読む

figma-how-to-create-tab

Figmaでシンプルなヘッダー・コンポーネントを作る方法

今回は、Figmaでシンプルなヘッダー・コンポーネントを作る方法を紹介します。一般的なサービスでよくみるシンプルなヘッダーを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-header

Figmaでシンプルなフォーム・コンポーネントを作る方法

今回は、Figmaでテキスト入力のシンプルなフォーム・コンポーネントを作る方法を紹介します。一般的なサービスでよくみるフォームを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-form

Figmaでシンプルなツールチップ・コンポーネントを作る方法

今回は、Figmaでシンプルなツールチップ・コンポーネントを作る方法を紹介します。吹き出し形式のツールチップを、「Component」と「Variants」と「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よかったらご活用ください。 ... 続きを読む

figma-how-to-create-tooltip

Figmaでシンプルなサイドメニュー・コンポーネントを作る方法

今回は、Figmaでシンプルなサイドメニュー・コンポーネントを作る方法を紹介します。一般的なサイドメニューを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-side-menu

Figmaでシンプルなラジオボタン・コンポーネントを作る方法

今回は、Figmaでシンプルなラジオボタン・コンポーネントを作る方法を紹介します。一般的なラジオボタンを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-radio-button

Figmaでシンプルなチェックボックス・コンポーネントを作る方法

今回は、Figmaでシンプルなチェックボックス・コンポーネントを作る方法を紹介します。一般的なチェックボックスを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-checkbox

アニメーション付きコンポーネントの作り方一覧

Figmaのプロトタイプ機能を用いたインタラクション(アニメーション)付きのコンポーネントの作り方を紹介しています。

スライドするアニメーション付きのスイッチ(プロトタイプ)

今回はFigmaのプロトタイプ(Prototype)機能を利用して、スイッチをクリックするとスライドしながら背景色が変わるアニメーションを適用したサンプルファイルの紹介です。 ... 続きを読む

figma-toggle-switch-with-slide-animation-prototype

Figmaで塗りが円形に広がるアニメーションのボタン(プロトタイプ)

今回はFigmaのプロトタイプ(Prototype)機能を利用して、ボタンをマウスオーバーやクリックした際に塗りが円形に広がるようなアニメーションを適用したサンプルファイルの紹介です。 ... 続きを読む

figma-button-with-fill-animation-prototype


この記事を読んだ方におすすめの記事

Figma初心者が使い方に困った時に試してほしいTips

今回は、納品されたり引き継いだFigmaのデザインデータを、修正・変更して再利用しようとした時によく発生するトラブルと、その対応方法をいくつか紹介したいと思います。 ... 続きを読む

figma-beginners-tips

Figmaで無料のアイコン素材集を利用する方法

今回はFigmaで無料のアイコン素材集を利用する方法を紹介します。今回紹介するものはすべてFigma上で公開されているものなります(利用条件はライセンスによる)。アプリケーションのUIやWebページの装飾など様々なシーンで幅広く活用できますので、ぜひチェックしてみてください。 ... 続きを読む

figma-how-to-use-icons

FigmaのComponent propertiesとVariantsの使い分けの考察

今回は2022年5月11日に公開されたFigmaの新機能「Component properties」の使い方を検証しつつ、類似する既存機能「Variants」との使い分けについて考察してみます。自由研究形式で追記しながら記事を更新しています。 ... 続きを読む

figma-component-properties-vs-variants

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告