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

著：相原典佳

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

通販で買う(PDF/書籍)
ちょっとできる人向けFigma本の書影

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

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

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

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

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

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

本のなかみを紹介！

目次・サンプルファイル

1章Figmaの基本

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

2章Figmaでデザインする

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

3章デザインを共有する

  1. Collaboration-コラボレーション-
  2. Inspect-実装者用の機能-
  3. Prototype-プロトタイプ-
  1. Q&Aよくある質問に答えます
    P.36マウスオーバー
    P.37記事レスポンシブ
    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行目		 「まとめる機能」としてのフレームとグループの２つ 新機能「セクション」
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ファイルとして編集可能な状態でコピーできます。