Figmaを本格的に身につけたい人に、デザインシステムの構築方法をしっかりと学べる解説書 -Figma for デザインシステム

※本ページは、アフィリエイト広告を利用しています。

ここ2,3年、UIデザインにおけるツールの一強はFigmaと言えるでしょう。2022年の日本進出から、現在では日経225の1/3がすでにFigmaを導入しています。

そんなFigmaをより本格的に身につけたい人に、デザインシステムの構築方法をしっかりと学べる解説書を紹介します。

本書は、Figmaの中級者向けの解説書です。基本的な使い方の解説はほとんどなく、デザインシステムを構築する上で必要となるFigmaの応用的な機能が解説されています。また、デザインシステムについては基礎知識からがっつり解説されているので、デザインシステムの初心者でもよく分かると思います。

Kindle版も発売されています！

• Figma for デザインシステム Kindle版

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書は8章構成で、デザインシステムとは何なのか、デザインシステムを作るのになぜFigmaがいいのか、から始まります。デザインシステムとは簡単に説明すると、Webサイトやアプリを実装する際のルールやツールがまとめられたもので、スタイルガイドやパターンライブラリやガイドラインなどから構成されます。

デザインシステムがあることで、デザインの一貫性が向上し、一元管理されているので実装や保守性にも優れます。

第2章では、デザインシステムを作るときに必要となるFigmaの使い方。オートレイアウト、コンポーネント、バリアブルなど、Figmaファイルを操作しながら学ぶことができます。Figmaファイルや素材などはすべてサポ－トサイトから利用できます。

第3章からさっそくデザインシステムの構築が始まります。まずは、Webサイトを作例にしてライブラリ化・モジュール化して、ベースとなるコンポーネントを作成します。

デザイントークンとは、UIデザインを構成する最小要素のことです。カラーやタイポグラフィをはじめ、角丸の半径やスペースなどがそれになります。Figmaではバリアブルを使用してデザイントークンを管理できます。

たとえば、タイポグラフィのデザイントークンには、書体・フォントサイズ・行間・文字間隔などの情報が含まれます。これらを定義しておくことで、見出しのテキストはどうすればよいか、画像に添えるテキストにはどういうバリエーションがあるのかなどが明確になります。

アイコンもUIデザインには重要な要素です。その場その場でアイコンを使用するのではなく、トーンとマナーが一致したアイコンを使用することで、一貫性のあるデザインに仕上がります。

エレベーションとは、UIデザインで階層を表現する手法の一つです。要素の重要性や関連性を伝えることができ、ユーザーの操作を促す効果もあります。

デザイントークンを作成したら、あとはそのルールをUIに適用します。Figmaのバリアブルから適用するだけで、そのデザインが反映されます。

第7章では、再利用可能なレイアウトやUI要素をまとめたパターンライブラリを作成します。Figmaにはコンポーネントという便利な機能もあり、複数のデザイン間で再利用できる要素を管理できます。ボタンやアイコンだけでなく、レイアウトも再利用できます。

最後の第8章は「実装コードとの連携」で、デザインとコードを連携させる方法・ツール・ワークフローがよく分かります。Figmaには便利なプラグインも豊富で、バリアブルをCSSに変換して書き出すこともできます。

Figma for デザインシステムの目次

Figma for デザインシステムの目次

Figma for デザインシステムの目次

Figma for デザインシステムの目次

2024年もFigmaの独走が続きそうですね！
毎週のようにアップデートが繰り返されており、4月にはタイポグラフィ関連が強力になり、2月にもたくさんの新機能が追加されました（リリースノート）。

UIのデザインにFigmaをもっと使いこなしたい！ そんな人にお勧めの一冊です。

献本の御礼

最後に、献本いただいた翔泳社の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス