課題
Figmaのコンポーネント（ボタンなどの部品）を使用するときに、外部UIキットのコンポーネントを使用したい時があります。例えば、 https://www.figma.com/community/file/912837788133317724 のような外部UIキットのコンポーネントを活用して、マテリアルデザインの画面を作成することが可能です。ただし、Figmaの無料プランだと、ライブラリにコンポーネントを組み込むことができません。
その場合の代替案を解説します。
代替案
外部UIキットを複製して使用することで、外部コンポーネントを使用することが可能です。具体的には次の手順です。
- 外部UIキットのURLを開いて、
Figmaで開くを押下します
- ファイルブラウザの下書きの箇所にファイルが追加されたことを確認します
- アセットのローカルコンポーネントで、外部UIキットのコンポーネントを選択できることを確認します
- ページの
+マークを押下してページを作成します- 元からあるページを削除すると、ローカルコンポーネントも削除されてしまうので注意してください
- 無料プランは最大3ページですが、下書きにあるファイルには制限がかからないようです
- ファイルブラウザで下書きのファイルをプロジェクトに移動します
- 無料プランは最大3ページなので、プロジェクト移動後はページ追加ができなくなります
- ただし、既に作成済のページは維持されるようです
- アセットのローカルコンポーネントで、外部UIキットのコンポーネントを使用します
まとめ
無料プランでも、外部UIキットのコンポーネントを使用することができました。ただ、この方法では複数の外部UIキットを組み合わせて使用することはできません。試してみて良さそうだったら、有料プランの検討をすると良いでしょう。