これからはじめる Figma Web ・ UI デザイン入門

■ Figma とは Figma (フィグマ) は、デザインプロセスのすべての人をつなぎ、チームがより良いデジタルプロダクトをより速く提供できるようにするためのデザインコラボレーションツールです。 『すべての人がデザインを利用できるようにする』というビジョンのもと、 2012 年にアメリカのサンフランシスコで誕生しました。現在は世界中で多くのユーザーに支持され、日本でもユーザー数が伸びています。 シンプルな操作性や軽快な動作、強力な共同編集をはじめとした特徴をもつ Figma は、 Web サイトやアプリケーションをデザインするデザイナーだけでなく、さまざまな職種のメンバーとコラボレーションすることで、プロジェクトや制作フローの改善においても活躍してくれます。世界中の人々が利用し、アップデートが活発なツールでもあるため、ぜひ一度 Figma を使ってその魅力に触れてみてください。 ■本書の特徴 ・日本語化対応 2022 年 7 月 29 日にリリースされた日本語化に対応しました!操作画面および解説も日本語化に対応しているため、これから Figma をはじめる人も安心です。 ・ 4 つの作例で学べる ポートフォリオサイト、コーポレートサイト、 EC サイト、レシピアプリ、 4 つの作例を本書では収録しています。それぞれの作例のデータもダウンロードできるようにしています。ハンズオンで自分の手を動かしながら Figma の操作方法を学べます。 ・デザイン制作のながれがつかめる 4 つの作例を通じて、 Figma を使ったデザイン制作のながれをつかめます。それぞれの作例に求められる調査や情報整理、フレームの用意やスタイル、プロトタイプの作成方法もご紹介します。 第 1 章 準備編 Figma の準備と基本機能 1-1 アカウント作成と初期設定 1-2 ファイルブラウザ 1-3 Figma のチーム・プロジェクト・ファイル 1-4 インターフェイス 1-5 デザインタブの各パネルの使い方 1-6 コンポーネント・オートレイアウト・スタイル 1-7 30 分でできるサムネイル制作 1-8 Figma コミュニティ 1-9 Figma 公式リソース 第 2 章 実践編 Figma で実践する Web デザイン制作体験 2-1 ポートフォリオサイトのデザイン作成 2-2 ファイルの準備 2-3 色スタイルの作成 2-4 テキストスタイルの登録 2-5 ボタンのコンポーネントの作成 2-6 グローバルナビゲーションの作成 2-7 フレームの作成 2-8 ファーストビューの作成 2-9 Service (サービス) セクションの作成 2-10 Works (制作実績) セクションの作成 2-11 About (私について) セクションの作成 2-12 フッターの作成 2-13 ページ全体の余白を調整する 第 3 章 応用編 3 つの作例から学ぶデザイン制作のながれ 3-1 3 つの作例概要 3-2 コーポレートサイト 3-3 インテリア EC サイト 3-4 レシピアプリ 第 4 章 活用編 チームでの Figma 活用とペアデザイン 4-1 チーム制作に向いている Figma の特徴 4-2 チームで利用できる Figma の 5 つの便利な機能 4-3 Figma を使ったペアデザイン 4-4 職種を越えたコラボレーション 4-5 便利なツール連携