UI

Figmaでボタン、テーブル、リストといったUI(ユーザーインターフェース)を作成・レイアウトする方法を紹介します。本サイトにおけるUIとは、主にコンピュータ(スマホやPC)をユーザーが使用する際に、視覚的に理解できるよう設計された画面(GUI、CUI)、または画面を構成する要素全般を指します。


figma-how-to-create-dialog

Figmaでシンプルなダイアログ・コンポーネントを作る方法

2024.01.12
figma-resource-ios17-and-ipados17

FigmaでiOS 17・iPadOS 17のUIキットを利用する方法

2023.06.09
figma-simple-pi-chart-plugin

Figmaでシンプルな円グラフを生成するプラグインの紹介

2023.03.03
figma-how-to-insert-icons-into-text

Figmaでテキスト内にアイコンを挿入する方法

2023.02.24
figma-table-cell-animation-prototype

マウスオーバー・クリックすると罫線スタイルが変わるテーブル(プロトタイプ)

2022.09.03
figma-how-to-design-ui-components

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

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

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

2022.04.15
figma-how-to-create-tooltip

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

2022.03.25
figma-button-with-fill-animation-prototype

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

2022.03.11
figma-how-to-create-side-menu

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

2022.03.04
figma-how-to-create-radio-button

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

2022.02.04
figma-how-to-create-checkbox

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

2022.01.21
figma-how-to-use-component

Figmaのコンポーネント機能の基本的な使い方

2021.12.17
figma-how-to-create-form

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

2021.11.19
figma-how-to-create-header

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

2021.10.29
figma-how-to-create-tab

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

2021.10.15
figma-how-to-use-icons

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

2021.09.24
figma-how-to-create-button

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

2021.09.17
figma-how-to-create-table

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

2021.09.03
figma-how-to-create-pie-chart

Figmaで簡単に円グラフや棒グラフを作る方法

2021.06.18