Figmaでよく使う機能を詳しく解説! 短期間で使いこなせるようになりたい人にぴったりな解説書 -Figmaデザイン入門
Post on:2023年3月17日
ここ1, 2年でFigmaが急速に浸透しました。日本でも最近はFigmaだけでUIを制作しているところも増え、仕様やサイトマップの設計、さらにはチームでのコミュニケーションツールとしてもFigmaが使用されています。
Figmaの使い方をひと通り学びたい人に、短期間で使えるようになりたい人に、使用頻度の高い機能を優先的に解説した実用性の高い解説書を紹介します。

著者はQiitaのUIデザイナーである綿貫氏、Figmaを中心にして社内のデザインシステムを整備し、現在も拡張され続けているとのことです。
本書ではFigmaによるUIデザインはもちろん、その前段階であるWebサイトの設計図をはじめ、プロトタイプの作成、デベロッパーへのハンドオフ、さらにチームでFigmaを使用する便利機能まで解説されています。
Kindle版も同時発売されています!
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書は6章構成で、Figmaをこれから始めようとしている人に、最短コースで必要な知識が身につくよう構成されています。
第1章は、Figmaを実際に使用する前段階のアカウント作成や無料プラン・有料プラン、ブラウザ版とアプリ版の違いなど簡潔に要点がまとめられています。

Figmaを使用するにあたって、他のツールから移行する人が多いでしょう。Sketchからの移行は非常に簡単ですが、Adobe XDからの移行はすこし大変です。でもFigmaはAdobeに買収されたので、何かが大きく変わるかもしれません(今年のAdobe MAXとか?)。

Figmaを制作フローのどのようなシーンで使用するのか、簡潔にまとめられています。PhotoshopやIllustratorを使用しているデザイナー、Adobe XDやSketchを使用しているデザイナー、ディレクターやプロジェクトリーダーなど、Figmaはすべての人に必須ツールとなります。

第2章は、Figmaの基本操作。FigmaはUIデザインを主軸としてツールなので、他のツールを使用していればそんなに違和感なく使用できると思います。とは言え、Figma独自のものもあるので、一通り目を通しておきましょう。

基本操作の解説は、プレゼン資料を作成しながら学んでいきます。ステップごとに画像や数値の設定もしっかり記載されており、非常に分かりやすいです。

第3章が一番のボリュームで、FigmaでUIデザインを作成します。Figmaは操作自体は簡単なので、さくさく進められると思います。

FigmaではUIデザインに便利な機能がたくさん揃っています。「オートレイアウト」はオブジェクトを並べる方向、オブジェクト間の距離、水平・垂直のパディング、整列を指定すると、あとは自動でレイアウトをその通りに調整してくれます。たとえば、ボタンの文言を変更しても余白を維持したままテキストの長さに合わせてボタンの幅が変化します。

UIデザインで使用するカラーやテキストの管理もFigmaなら簡単です。使用するカラーを「色スタイル」に設定し、あとはそこから使用するだけです。スタイルはグルーピングもでき、用途に応じて管理できます。テキストのスタイルも同様です。

UIパーツもコンポーネント化することで、簡単に再利用できます。たとえば、ボタンのコンポーネントを作成しておくと、ボタンを修正する際に元のコンポーネントを修正すれば、すべてのボタンに修正が反映されます。いやー、楽ですね。

第4章は3章で作成したUIデザインを元にプロトタイプを作成します。作成してなくても大丈夫、データは本書のサポートサイトからダウンロードできるので、すぐに始められます。

Figmaでプロトタイプを作成すると、画面遷移やインタラクティブなコンポーネントの動作も簡単に再現できます。

第5章は実装するデベロッパーへの受け渡し、ハンドオフです。Figmaではカラーやフォント、レイアウトやコンポーネントのサイズなども正確な値でデベロッパーに渡せます。また、コメントのやり取りもできるので、コミュニケーションもFigma上で完結します。

最後の第6章では、チーム全体でのコラボレーションツールとしてのFigmaの使い方。ブレインストーミング、ムードボード、サイトマップ作成、ワイヤーフレーム作成など、同じURLにアクセスすれば最新版がいつでも共有できます。バージョン履歴やコメントのスレッド表示にも対応しているので、ログも追えます。
Figmaデザイン入門の目次

Figmaデザイン入門の目次

Figmaデザイン入門の目次

Figmaデザイン入門の目次

Figmaデザイン入門の目次
Figmaの解説書もたくさん発売され、どれを手に取るか迷う人もいると思います。本書は使用頻度の高い機能を優先的に解説されており、最初の一冊としてぴったりの解説書だと思います。
献本の御礼
最後に、献本いただいた技術評論社の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors