figmaのUIキットとは？フロントエンジニアが初めて使ってみた感想

この記事は2025/02/26に作成されました。

みなさんは作業などをしている際に「『どうしようもないセンスの壁』にぶち当たった経験」はございますか？

私はど～～～してもデザイン作業が苦手でして…。
コーディングを行う時はウッキウキで「ここはこういうCSSで再現しよう」とか「こういう風に工夫すればタグ数減らせる」といったアイディアはどんどん湧いてくるのですが、同じようにデザインをたくさん見ても「このパーツここで使えそう」や「このレイアウトの方が見やすい」といったアイディアが自分の引き出しからは上手く引き出せずコーティングの時と何が違うのだろう…と悩む日々であります。

そんな中FigmaのUIキットというものに出会ったので、今回はFigmaのUIキットがどのようなものなのかみなさんに共有したいと思います。

FigmaのUIキットとは？

Figmaとはクラウド共有、共同作業が可能なデザインツールになります。

FigmaではUIキットと呼ばれるテンプレートが多数公開されており、それぞれのテーマに沿ったパーツなどが揃っています。
配色やトーンが最初から揃っているため、色のルールから外れることなく使用できます。
その中からパーツを自分好みに配置してウェブサイトのデザインを手軽に作成することができる便利なツールです。

一からデザインする必要がないためデザイン初心者でも使いやすく、ライセンスフリーのUIキットもあるので業務でも使用できるのもおすすめできるポイントです。

Figma：https://www.figma.com/ja-jp/
UIキットページ：https://www.figma.com/community/ui-kits

UIキットのメリットとデメリット

UIキットのメリット

・デザイン初心者でも簡単にサイト画面を作成しやすい
・ライセンスフリーで商用利用もできる

先述の通りデザイン初心者でも簡単にサイト画面を作成しやすい手軽さはとても大きいメリットです。
ライセンスフリーで商用利用もできるので、業務の効率化を図れるのもデザイン作業が苦手な私にはうれしいポイントです。

UIキットのデメリット

・デザインの独自性がなく、ありきたりになりがち

UIキットは多数用意されているものの、「独創的なデザインを作りたい！」といった希望を100%叶えるのは不可能かと思います。

個人的には、商用利用なら管理画面などデザイン勝負ではない個所の作業工数削減などに使うのがベストかなと感じました。

実際に使ってみた感想とまとめ

今回私は業務でUIキットを使用してみましたが、UIキットだけでクライアントの要望通りのデザインを作成することができなかったのですが、初案の作成にはとても役に立ち確実に時短になりました。

また、個人で使う分には不自由なくデザイン作成できるので、Webデザインを勉強している学生にとってもいい教材になり得るのではないかなと思いました。

使用するUIキットにもよりますが、オートレイアウトを多用しているキットでは自動で余白やレイアウトを揃えてくれるものもあり、こちらも確実な時短に繋がるかと思います。

UIキットには無料・有料があり、各キットにライセンスの記載が必ずあるので、よく読んでからみなさんも上手に使ってみてください。