UI作成

[bookmark](https://www.figma.com/plugin-docs/creating-ui/)

- `figma.showUI(`**`html`**`)`
	- Figma 内に HTML ファイルの内容を表示する
	- 以下のように、公式では`themeColors` というオプションについて記載がある。

	> `themeColors`このオプションを使用し`figma.showUI()`、このオプションが UI に提供する[CSS 変数](https://www.figma.com/plugin-docs/css-variables/)を使用して、明るいテーマと暗いテーマをサポートすることを強くお勧めします。

	- showUIの型は以下の通りとなっており、第二引数にoptionsが渡せる。

	```javascript
	showUI(html: string, options?: ShowUIOptions): void
	```

	- optionsの型

	```javascript
	interface ShowUIOptions {
	  visible?: boolean
	  title?: string
	  width?: number
	  height?: number
	  position?: {
	    x: number
	    y: number
	  }
	  themeColors?: boolean
	}
	```


	この`themeColors` を`true` にしてみると


	```typescript
	figma.showUI(__html__, {
	  themeColors: true
	});
	```

	- ダークテーマとライトテーマの設定に合わせてサポートしてくれていることが確認できた。

	themeColors: falseの時


	![代替テキスト](/notion/image/c5c04cfc-3b64-4b5e-8f25-dce4151e90c6/ce336ca2-060d-450e-aaa5-6d9a4222a12d.jpg)


	themeColors: trueの時


	![代替テキスト](/notion/image/c5c04cfc-3b64-4b5e-8f25-dce4151e90c6/29216915-10e3-495c-a8d5-2fa8373ef135.jpg)

参考

- [https://www.figma.com/plugin-docs/](https://www.figma.com/plugin-docs/)
	- Figma Developers公式
- [https://github.com/figma/plugin-samples](https://github.com/figma/plugin-samples)
	- figmaのplugin sampleがたくさん載っている