【読書録】Figma for デザインシステム デザインを中心としたプロダクト開発の仕組み作り
本書はFigmaでのデザインシステムの制作や管理について、具体的な操作方法をもとに学べる内容となっている。デザインシステムの構築や管理に興味のある方にはぜひ手に取って欲しい一冊。
取り掛かる前にFigmaの基本的な操作、オートレイアウトの挙動やコンポーネント・バリアントの知識はある程度習得していた方が良いだろう。
注意点として、有料プラン用の機能を利用している部分がある。無料では本書の内容を完全に再現できない…が別のやり方でできる部分もある。
デザインシステムとは何か
デザインシステムはサービスのあらゆるタッチポイントにおいてユーザーに一貫した体験を効率的に提供することを目的としている。
色、タイポグラフィ、アイコンなどスタイルのみならず、マーケティングやコンテンツの制作時に何を重視するべきかを判断できるような考え方や思想をまとめたもの、文章の記述方法、実装時のコードなどもデザインシステムの構成要素と言える。
なお本書で取り上げられているのは、スタイルガイドとパターンライブラリである。
面倒なパターン出しはプラグインで
一度デザインシステムを構築しようとした方ならわかってもらえると思うが、スタイルやパターンの登録はかなり面倒くさい。プラグインで解決しよう。
プライマリーカラーの階調
「Color Shades」で自然な階調を制作できる。
この中から、必要なものを抜き出し微調整を加えることでプライマリーカラーの階調とする。出来上がったものはバリアブルに登録しておく。
グレーの階調
同様にグレーの階調も「Color Designer」で出力できる。
出力される階調は変化量が一定なので、デザインの目的に合わせて調整する必要がある。
スケール
見出し、本文などはフォントサイズがそれぞれ異なる。あらかじめ決めた一連のフォントサイズをスケールと呼ぶ。
「Typescales」を使用してスケールを作成できる。
pxやremを整数に変更すれば可読性は担保される。
また、出力された文字列を改行してフォントサイズごとの行間の調整を行うと良い。
使用するフォントによっては文字間隔も調整する。
デザイントークン
色、角の半径、スペーシング、タイポグラフィなどデザインを構成する設定値に名前をつけたものをデザイントークンと呼び、Figmaではバリアブルを使って管理する。
デザイントークンは階層化されており、以下のものがある。
・プリミティブトークン（グローバルトークン）
基本的なデザイントークンで、使用される文脈の情報を持たず、デザインには直接使用されない。
・エイリアストークン
プリミティブトークンの別名（エイリアス）。画像の例では、「プライマリカラーの30である」ことを意味する。
・セマンティックトークン
デザイントークンの役割を名前で表現し、特定の文脈で使用される。値を直接指定するのではなく、他のデザイントークンを参照する。
なお、いずれの階層もデザイントークンの意味や役割を名前で表現しているだけなので、強制力はない。
ドキュメント
作成したデザイントークンやコンポーネントは一覧しやすいようにドキュメントを作成しておくと良い。
「Variables for Frames」や「EightShapes Specs」で出力できる。
総評
デザインシステムの詳細な取り扱い方法を学ぶことができた。
組織でデザインシステムを構築する人ならば本書は強力な助っ人になるだろう。
システムの構築のためルール決めをしっかりする必要があったが、後々の保守性や他部門との共有の効率化のためなのでしっかりとやっていきたい。
改めて思うが、プラグインの開発者には頭があがらない…
この記事が気に入ったらサポートをしてみませんか？