ちょっとできる人向けFigma本

著:相原典佳

Webデザイナーなんだけど今からFigma入門したい! Figmaを使わなきゃいけなくなっちゃった! 
そんな人にちょうどよい内容の本にしました。

ちょっとできる人向けFigma本の書影

『ちょっとできる人向けFigma本』ってどんな本?

「Figmaがちょっとできる人」に
なれる!

今までFigmaを使ってこなかったWebデザイナーさんが、3時間くらいで要点を掴めるようになる、といったコンセプトの本です。
Figmaがちょっとできる人、になれます!

「なんとなく使えばわかる」箇所の解説を省略しつつ、デザイン作成に役立つ「オートレイアウト」などの箇所や、はじめてFigmaをさわる人が困る部分をしっかりと解説しています。

こんな人におすすめです!

  • Figmaに移行したいWebデザイナー
  • Webも担当するグラフィックデザイナー
  • コーダーだけどFigmaを使ってみたい人
  • 久しぶりにデザインをしてみたい人
  • Photoshopをひと通り学んだ初心者さん
  • 同僚を「Figmaちょっとできる人」にしたい

本のなかみを紹介!

目次・サンプルファイル

1Figmaの基本

  1. Price-料金-
  2. Tools-ツール-
  3. Frame-フレーム-
  4. Design System-デザインシステム-
  1. コラム-Figmaのフォント事情-

2Figmaでデザインする

  1. Components & Styles-コンポーネント&スタイル-
    P.14バリアント
  2. Auto Layout-オートレイアウト-
    P.16文字幅ボタン
    P.17幅固定ボタン
  3. Responsive-レスポンシブ対応-

3デザインを共有する

  1. Collaboration-コラボレーション-
  2. Inspect-実装者用の機能-
  3. Prototype-プロトタイプ-
  1. Q&Aよくある質問に答えます
    P.36マウスオーバー
    P.37記事レスポンシブ

2023年のFigmaアップデートに対応!

2022年夏〜23年夏の1年間のFigmaのアップデート情報をまとめた記事を用意しました! 2022年に発売した本書内の古くなった部分をカバーしています。

Figmaの2022年夏〜23年夏の新機能を扱うシリーズ

本書内の古い箇所と対応記事

ページ、行 古い箇所 アップデート記事と内容
P.1
8行目
一ヶ月あたり$12〜の 現地通貨での支払いができるように
日本円での決済ができるようになりました。
P.2
1行目
「スターター」と「Figmaプロフェッショナル」の違い 「開発モード」は「Figmaプロフェッショナル」以上のプランで利用可能
2024年以降、「開発モード」は有料のアカウントで利用可能となります。
P.2
表組み内
「おすすめプラン選択スタイル」 「開発モード」は「Figmaプロフェッショナル」以上のプランで利用可能
「一人Figmaプロフェッショナルスタイル」でも、コーダーさんに依頼する際に代理で課金する必要が出てくるでしょう。
P.6
2行目
「まとめる機能」としてのフレームとグループの2つ 新機能「セクション」
3つ目のまとめる機能として「セクション」が追加されました。
P.10
3, 4行目
どのフォントが日本語フォントなのかが分かりづらいです。また、フォントの言語絞り込み機能もありません。 「自分がインストールしたフォント」を絞り込める
「言語絞り込み」は未実装なのですが、「自分がインストールしたフォント」で絞り込めるようになったため、日本語フォントを探しやすくなりました。
P.18
5行目
オートレイアウトの利用ケース オートレイアウトの「折り返し」
本書では、オートレイアウト適用中のフレーム内に要素が入り切らないケースを扱っていなかったのですが、「折り返し」ができるようになりました。
P.19
11行目
「…(三点リーダー)」をクリックして、「詳細なレイアウト」を開き、「間隔設定モード」を「感覚を空けて配列」 オートレイアウトの間隔の「自動」(UIの位置変更)
アップデートによって、「詳細なレイアウト」を開かずに「自動」を選べるようになりました。
P.27 - P.29
2行目
「ハンドオフ」機能 【Figma】開発モード:できること総まとめ
ハンドオフ機能としての「インスペクト」に、さらに機能が追加されています。実際に活用していくことで学んでいきましょう。
P.30
1行目
画像書き出し 「インスペクト」のアセットとスタイル
「エクスポート」は別タブではなく、「インスペクト」の最下部にあります。また、選択中の要素内のアイコンや画像を一覧で出してくれる「アセット」機能も使っていくとよいでしょう。

正誤情報

ページ、行 内容
CONTENTS(目次)
1行目
[誤] Figima
[正] Figma
P.8
1行目
[誤] 文字が表示されておりませんでした
[正] 画面内の「デザインシステム」を選ぶと、ユーザーが作成したFigmaファイルが一覧で表示され、自分のFigmaファイルとして編集可能な状態でコピーできます。