UI
Figmaでボタン、テーブル、リストといったUI(ユーザーインターフェース)を作成・レイアウトする方法を紹介します。本サイトにおけるUIとは、主にコンピュータ(スマホやPC)をユーザーが使用する際に、視覚的に理解できるよう設計された画面(GUI、CUI)、または画面を構成する要素全般を指します。
![figma-how-to-create-dialog](https://images.ctfassets.net/ubv4j9m3121x/5s9jOUuNjrlVAQD806c1XV/fd7f75f7ca50a2e5bfce88f57cbd6bd3/figma-how-to-create-dialog.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなダイアログ・コンポーネントを作る方法
2024.01.12
![figma-resource-ios17-and-ipados17](https://images.ctfassets.net/ubv4j9m3121x/4P57Op6zTjX77vZLO2cbBO/1174ac0636034c4750358c0a0c91ab51/figma-resource-ios17-and-ipados17.png?w=1200&h=630&q=50&fm=png)
FigmaでiOS 17・iPadOS 17のUIキットを利用する方法
2023.06.09
![figma-simple-pi-chart-plugin](https://images.ctfassets.net/ubv4j9m3121x/6OGI03uhxAKLTRhERZSMQe/32b2a5df649edee2ef9b5f8112130e14/figma-simple-pi-chart-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルな円グラフを生成するプラグインの紹介
2023.03.03
![figma-how-to-insert-icons-into-text](https://images.ctfassets.net/ubv4j9m3121x/5aJyLm1YNPUGxJueopvA4F/2afa7e3312e35c455733e63719357f5d/figma-how-to-insert-icons-into-text.png?w=1200&h=630&q=50&fm=png)
Figmaでテキスト内にアイコンを挿入する方法
2023.02.24
![figma-table-cell-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/51DedOPKQyEZ6nBeUY0irO/d8dc50a6b628bff64df3c5c391450bb6/figma-table-cell-animation-prototype.png?w=1200&h=630&q=50&fm=png)
マウスオーバー・クリックすると罫線スタイルが変わるテーブル(プロトタイプ)
2022.09.03
![figma-how-to-design-ui-components](https://images.ctfassets.net/ubv4j9m3121x/7njRVnBDtfgWjvv0sxSnKh/7859f5e2a654d6ddd869000d0166ebf9/figma-how-to-design-ui-components.png?w=1200&h=630&q=50&fm=png)
Figmaで汎用的なUIコンポーネントを作る方法
2022.07.29
![figma-toggle-switch-with-slide-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/2bXZYxsQNq24uD7b5i9sk8/48f490c4a6048d80efeeb4d385b6e52d/figma-toggle-switch-with-slide-animation-prototype.png?w=1200&h=630&q=50&fm=png)
スライドするアニメーション付きのスイッチ(プロトタイプ)
2022.04.15
![figma-how-to-create-tooltip](https://images.ctfassets.net/ubv4j9m3121x/2MfJHBEivE5Vq7RiqbDi8L/18ec016ac3143a265116e4a42d062495/figma-how-to-create-tooltip.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなツールチップ・コンポーネントを作る方法
2022.03.25
![figma-button-with-fill-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/5bM3Xobkx0BkEsS5RrXTVp/5af1f850fd1208ee316d635e8321b7fc/figma-button-with-fill-animation-prototype.png?w=1200&h=630&q=50&fm=png)
Figmaで塗りが円形に広がるアニメーションのボタン(プロトタイプ)
2022.03.11
![figma-how-to-create-side-menu](https://images.ctfassets.net/ubv4j9m3121x/3DSvo1Pj7ldaFpGloiZ0cj/c5d7358dd8f047969882e850df1a855a/figma-how-to-create-side-menu.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなサイドメニュー・コンポーネントを作る方法
2022.03.04
![figma-how-to-create-radio-button](https://images.ctfassets.net/ubv4j9m3121x/31nOUn6ZSA7N5xdZkW81xN/944b80d8c9f4157e9480fb3d0a497476/figma-how-to-create-radio-button.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなラジオボタン・コンポーネントを作る方法
2022.02.04
![figma-how-to-create-checkbox](https://images.ctfassets.net/ubv4j9m3121x/5WAylG8s1omEtQs83iJASD/25082df9026e60922d84ec17ccfcc2d7/figma-how-to-create-checkbox.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなチェックボックス・コンポーネントを作る方法
2022.01.21
![figma-how-to-use-component](https://images.ctfassets.net/ubv4j9m3121x/2yKGXnTfkrSigj1SdaS1dT/cfaedb149eeafd59ac153ce5e80a92cb/figma-how-to-use-component.png?w=1200&h=630&q=50&fm=png)
Figmaのコンポーネント機能の基本的な使い方
2021.12.17
![figma-how-to-create-form](https://images.ctfassets.net/ubv4j9m3121x/1HrmvRUBlEEviknjtRnT0v/ae8035e2a7d9e1186c5ff3e6af4f09f6/figma-how-to-create-form.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなフォーム・コンポーネントを作る方法
2021.11.19
![figma-how-to-create-header](https://images.ctfassets.net/ubv4j9m3121x/28MQZsVcxlJxyTpi3gr3zU/040a10cadf35982a9cd9464d596a63eb/figma-how-to-create-header.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなヘッダー・コンポーネントを作る方法
2021.10.29
![figma-how-to-create-tab](https://images.ctfassets.net/ubv4j9m3121x/7L0Edq4xwyRzr4Y6yHb94w/1796ca444fbc6a36e6c900e2793afaaa/figma-how-to-create-tab.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなタブ・コンポーネントを作る方法
2021.10.15
![figma-how-to-use-icons](https://images.ctfassets.net/ubv4j9m3121x/7i4advQAd5sneF1dzfzyvp/3b698fd2de6ed95f5e25a6df12959209/figma-how-to-use-icons.png?w=1200&h=630&q=50&fm=png)
Figmaで無料のアイコン素材集を利用する方法
2021.09.24
![figma-how-to-create-button](https://images.ctfassets.net/ubv4j9m3121x/3BvQy2UDmpnNDsS9ehyCRN/9af12c0212cc37d0aeb4f205eb388b6f/figma-how-to-create-button.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなボタン・コンポーネントを作る方法
2021.09.17
![figma-how-to-create-table](https://images.ctfassets.net/ubv4j9m3121x/7rvXHCEd80oANRe0fidITF/ec16d85f8ff5d01d3ab6cda4ce9536bd/figma-how-to-create-table.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなテーブル(表)を作る方法
2021.09.03
![figma-how-to-create-pie-chart](https://images.ctfassets.net/ubv4j9m3121x/6ldpoLTQKoLbwDDNDQyfsy/3423e36d76fe83fed3842b07d6e48c2b/figma-how-to-create-pie-chart.png?w=1200&h=630&q=50&fm=png)
Figmaで簡単に円グラフや棒グラフを作る方法
2021.06.18