デザインシステムの作り方 ~Text / Color / Effect Style編~

こんにちは。UIデザイナーのカヒブンです。

今週のデザトレ（弊社のデザイン部で毎週行われているデザイン勉強会）でチームと一緒にデザインシステムの中に「Text Style」「Color Style」「 Effect Style」の作り方について学んでみました。

デザインシステムの定義

目的：効率的でまとまりのあるプロダクト開発・運用。
用意するもの：Figmaを利用する上で、「Text Style」「Color Style」「Component」などの機能を活用すると作業効率を上げるだけでなく、一貫性のあるデザインを作成できます。

Text Style

スタイルの名前を登録するときに、/（スラッシュ）を使うとスタイルをグルーピングして整理できます。

Headline/Large
Headline/Normal
Headline/Small
Headline/Extra Small
Body/Large
Body/Normal
…

上記のように整理しておくと、どこで使用するスタイルなのかも管理できます。

例のText Style

ここでの命名規則は、メンバーが使いやすいものにしてください。例えば、見出しならHeadline 1からHeadline 6、本文ならBody Normal, Body Large, Body Smallなど、さまざまな命名規則があります。自分にあったものを選んでください。

Color Style

Border、Background、Status、Textなど役割ごとに色を定義しています。

Text Styleと同様に、スラッシュ（/）でグループ化し、参照しやすくすることをお勧めします。例えば、こんな感じです。

Status/Alert
Brand/Main
Text/Dark
Text/Light
…

例のColor Style

Effect Style

そして、忘れてはならないのが、シャドーです。

例のEffect Style

最後に

以上はデザインシステムの作り方（Text / Color / Effect Style編）をまとめました。ご参考になれば幸いです。

また、弊社のデザイン部の他の方々が担当された回のデザトレも以下のリンクから見れますので、興味がある方は見てみて下さい！

「#ゴーリストデザトレ」の人気タグ記事一覧｜note ――つくる、つながる、とどける。