Figma デザイン入門

期間

2022/5 - 2023/2

キーワード

  • Figma
  • 書籍
  • UIデザイン
  • プロトタイピング

2023 年 2 月に「Figma デザイン入門 〜UI デザイン、プロトタイピングからチームメンバーとの連携まで〜」という本を出版しました。 こちらの本を書くにいたった経緯や、内容について紹介します。

書籍の簡単な紹介

Figma デザイン入門 〜UI デザイン、プロトタイピングからチームメンバーとの連携まで〜

本のテーマは「本当の本当に入門用の本」です。
Figma のことをまったく知らない人が一通り触れるようになるための内容を目指しました。
逆に、この本の内容をすべて理解しても Figma マスターにまではなれません。

かなり基礎的な使用方法から解説しているので、完全な Figma 初心者の方でも問題ありません。
なんなら、初めてのデザインツールとして Figma を選んだという場合でも大丈夫です。

チーム内に広めたい人にとっては「この機能は ◯ ページにあるよ」というような参照用のドキュメントにもなると思います。 2 章 3 章のデータをアレンジして練習問題として使っていただくのも良いかもしれません。

執筆にいたるまで

時系列としては次のような流れでした。

  1. Qiita で Figma 関連の記事を投稿
  2. 出版社の方よりメールをいただく
  3. 1~2 回打ち合わせをして、執筆確定

ご連絡をいただいた時点では Qiita 記事は 20 本ほどでした。 自分自身、Figma は非常に良いツールだと思っているため、他者にも知識を共有できたらと思い、Qiita に投稿していました。

制作した範囲

常に編集者の方と二人三脚ではありますが、その中でも私が制作したと言える範囲は以下の通りです。

  • 本の構成
    • 説明すること・しないことの選定
  • 本文
    • 文章のすべてとスクリーンショットの準備
  • 練習用データ
    • 配布データと、完成見本データ

逆に、以下の部分は私が制作しておらず、出版社の方が制作してくださいました。

  • 表紙
  • レイアウト
  • スクリーンショット以外の図版

気をつけていたこと

本の立ち位置を明確にする

この本が出版されるより先に、日本語の Figma 本はすでに何種類か出版されていました。 それらの本を読み、ユニークな立ち位置となるよう心がけました。

具体的には、既に出ていた本は「Figma の使い方」に特化しているものが多かったため、本書では「どのように組織に導入するか」「Figma を用いてどのように他の職種と連携するか」にも焦点を当てました。

また、はじめてのデザインツールとして Figma を選ぶ人も対象にしているため「Adobe ソフトでいうとこの機能」といった説明はできるだけ減らし、よくある機能であっても丁寧に解説しています。

リアルに見えて、かつ、初心者にもわかりやすいデータを作る

初心者向けの教本でよくあるのが、実務にはフィットしないほど簡略化されていることです。 見本とは言え現場で使うデータとかけ離れていると学習効果が薄れてしまいます。

そのため、本書ではできるだけリアルな見本データを意識しました。

ただし、本当に実務レベルでデータを作ると、トークンの登録だけで数十にもなってしまい初心者にはハードルが高すぎます。
数やバリエーションはできるだけ少なく、それでいてリアルに見えるバランスの見本を意識しました。

一貫したスクリーンショットの撮影をする

技術書全般において、スクリーンショットの範囲や解像度がバラバラなのを見かけます。
意外と、読んでいる最中はそういった違いもストレスになります。

特に初心者の方においては、少し画面の内容が変わるだけでも操作する対象や方法がわからなくなってしまうことがあります。
そのため、一連の操作では一貫したスクリーンショットを撮影するようにしました。

サイズや位置、表示している内容などを統一することで、読者の負担を減らせていると思います。

前の記事: Kodowg