Material Theme Builderの活用方法 - テコテック開発者ブログ

本投稿は TECOTEC Advent Calendar 2025 の19日目の記事です。

こんにちは、システム開発第二事業部の飯髙です。
最近はFlutterアプリ開発に携わっています。
アプリ勉強の傍ら、Figmaを利用してデザインの勉強を進めております。

Material Theme Builderを知っていますか？
Figmaのプラグインで、カラーシステムを簡単に設定・導入できるものになります。
カラーシステムとは？利用できたら開発効率が上がるのか？
気になったため、今回はこちらを調査しました。

カラーシステムとは？
Material Theme Builder
リソースファイルの導入
テコテックの採用活動について

カラーシステムとは？

カラーシステムはUIやブランドで使う色を体系的に整理したルールになります。
Primary ColorやSecondary Color、エラー時の色など、色に関してのルールを定めることで一貫性のあるデザインを作成することができるようになります。またルールで取り決めているため、デザイナーやエンジニアなどでイメージの共有も容易になります。

Material Theme Builder

とはいえ、カラーシステムを1から作るのには中々に苦労するものだと思われます(実際には最低でも10 ~ 20程度の色を設定する必要あるため)
そこでMaterial Theme Builderを使ってみましょう。 Material Theme BuilderはMaterial Design(https://m3.material.io)*1のColor Systemの原則に沿って、Primary Color(メインのブランドカラー的なもの)を設定するだけでカラーシステムを構築できます。任意の画像からもカラーシステムを作成できますが、Primary Colorとして認識されるためには、画像に対してのその色の割合が大きくないと難しそうでした...(以下参考まで)

Primary Colorを設定したらupdateを押下することで、Figma上にカラーがimportされます。また、Material Theme BuilderのFigmaのサイトにて、PlayGround FileよりMaterial Theme Builderの色の調整に合わせて自動で変化するトーンパレットも生成できます。

リソースファイルの導入

また、作成したテーマをエクスポートして、そのまま開発に利用することも可能です。

メインの色等を変更した場合、ファイルをエクスポートして共有することで簡単に開発に反映することができます(カスタムカラーは調整が必要)。

// Jetpack Compose Theme.ktの場合
package com.example.compose
import androidx.compose.ui.graphics.Color

val primaryLight = Color(0xFF0D6780)
val onPrimaryLight = Color(0xFFFFFFFF)
val primaryContainerLight = Color(0xFFBAEAFF)
val onPrimaryContainerLight = Color(0xFF004D62)
val secondaryLight = Color(0xFF4C616B)
val onSecondaryLight = Color(0xFFFFFFFF)
val secondaryContainerLight = Color(0xFFCFE6F1)
val onSecondaryContainerLight = Color(0xFF354A53)
...

Material Theme Builderを使用すると簡単に統一感の取れたカラーを生成でき、利活用のハードルも低いです。
個人開発時のUI作成やデザインにぜひ利活用してみてください！