エンジニアなら知っておきたいFigmaのキホン　ハンズオンで学ぶWeb開発の仕組みと機能

トップページ
プログラミング
設計・開発技法
エンジニアなら知っておきたいFigmaのキホン　ハンズオンで学ぶWeb開発の仕組みと機能

エンジニアなら知っておきたいFigmaのキホン　ハンズオンで学ぶWeb開発の仕組みと機能

2,970円（本体 2,700円＋税10%）

品種名: 書籍
発売日: 2026/6/18
ページ数: 360
サイズ: A5判
著者: 梅田弘之　著
ISBN: 9784295024477

ITエンジニア向けFigma入門書の決定版

ITエンジニア向けFigma入門書の決定版。エンジニアがFigmaを「業務システム開発の共通基盤」として使いこなし、スムーズな実装へとつなげるための実践ガイドです。オートレイアウトやコンポーネントといった中核機能を、Flexboxや部品化など馴染みのあるロジックと結びつけて体系的に解説。変数（Variables）管理やDev Mode、プロトタイプ機能まで網羅しています。無償プランで「受注一覧画面」を構築するハンズオン形式で、デザインの構造を読み解く「勘所」を習得。デザイナーとの連携に課題を感じているエンジニア必携の一冊です。

目次を見る

紙の本を買う

電子版を買う

2,970円
（本体 2,700円＋税10%）

EPUB / 19MB

直販電子版ご利用ガイド

インプレスで電子版を買う（カートに入ります）

「読者アンケートに答える」「読者プレゼントに応募」の場合もこちらをご利用ください。

アンケートに答える

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

お問い合わせフォーム

お詫びと訂正

学校・法人一括購入に関するお問い合わせはこちらへ。

一括購入窓口

著者紹介

■著者プロフィール
梅田弘之（うめだひろゆき）
東芝、SCSKを経て1995年に株式会社システムインテグレータを設立し、現在、代表取締役会長。2006年東証マザーズ、2014年東証第一部、2019年東証スタンダード上場。前職で日本最初のERP「ProActive」を作った後に独立し、日本初のECパッケージ「SI Web Shopping」や開発支援ツール「SI Object Browser」を開発。日本初のWebベースのERP「GRANDIT」をコンソーシアム方式で開発し、統合型プロジェクト管理システム「SI Object Browser PM」など、独創的なアイデアの製品を次々とリリース。
主な著書に『Oracle8入門』シリーズや『SQL Server7.0徹底入門』、『実践SQL』などのRDBMS系、『グラス片手にデータベース設計入門』シリーズや『パッケージから学ぶ4大分野の業務知識』などの業務知識系、『実践！プロジェクト管理入門』シリーズ、『統合型プロジェクト管理のススメ』などのプロジェクト管理系、最近ではThink ITの連載をまとめた『これからのSIerの話をしよう』『エンジニアなら知っておきたいAIのキホン』『エンジニアなら知っておきたいシステム設計とドキュメント』『エンジニアなら知っておきたい生成AIのキホン』『徹底攻略JSTQB』を刊行。
「日本のITの近代化」と「日本のITを世界に」の2つのテーマをライフワークに掲げている。

第1章　無償版でFigmaの基本を理解する
　○ Figmaとは
　○ Figmaの特徴
　○ 無償プランと有料プラン
　○ Figma（無償版）を使ってみる
　○ Figmaの基本
　○ プロジェクトやファイル、チームの登録
　○ 操作のコツをマスターする
　○ 本章のまとめ
第2章　デザインシステムを理解する
　○ デザインシステムとは
　○ Figmaでデザインシステムを作成する
　○ フレームとは
　○ 本章のまとめ
第3章　オートレイアウトのプロパティ設定
　○ グループ化したUI要素のプロパティ設定
　○ オートレイアウトのプロパティ設定
　○ 本章のまとめ
第4章　コンポーネントとインスタンスを活用する
　○ コンポーネントとインスタンスについて
　○ コンポーネントとインスタンスを作成
　○ バリアントの基本
　○ バリアントの特性
　○ 本章のまとめ
第5章　デザイントークンで標準化
　○ デザイントークン
　○ デザイントークンを3層に分類
　○ デザイントークンの設計
　○ 本章のまとめ
第6章　スタイルでテキストのデザインを統一する
　○ スタイルとバリアブル
　○ スタイルとバリアブルの使い分け
　○ スタイル「テキスト」の設定
　○ デザインにスタイルを適用
　○ 本章のまとめ
第7章　バリアブルとコレクションでカラーを標準化
　○ カラーのプリミティブトークンを作成
　○ コレクションを理解する
　○ エイリアストークンを作成
　○ デザインにエイリアストークンを適用
　○ 本章のまとめ
第8章　エフェクトと文字列、数値の標準化
　○ エフェクト
　○ スタイルでエフェクトを作成
　○ 文字列のバリアブルを使ってみる
　○ 数値のバリアブル
　○ 本章のまとめ
第9章　Atomic DesignでUIパーツを設計する
　○ Atomic Designとは
　○ アイコンの追加
　○ アイコンの色の設定
　○ ボタンの追加とアイコンの適用
　○ 本章のまとめ
第10章　フッターをモジュール化する
　○ 画面サイズの基本方針
　○ レスポンシブデザイン
　○ フッターの作成とオートレイアウト設定
　○ コンポーネント化の是非
　○ インスタンスに変更を加えたい場合
　○ 本章のまとめ
第11章　ヘッダーの設計と階層管理
　○ 画面のカラーデザインの方針
　○ カラーバリアブルの追加
　○ ヘッダーの作成
　○ ヘッダーに含めるUI要素を作成
　○ 他のUI要素を作成してヘッダーに配置
　○ UI要素を左右に配置
　○ 本章のまとめ
第12章　ステートベースドデザインを理解しよう
　○ コンポーネントとは
　○ スタイルとバリアブルの追加
　○ 土台のフレームを作成
　○ テキストボックスの作成
　○ 最大値と最小値の設定
　○ ステートベースドデザイン
　○ ステートベースドデザインの適用
　○ 本章のまとめ
第13章　コンポーネントプロパティ
　○ テキストボックスのバリアント作成
　○ テキストボックスのバリアント化
　○ コンポーネントプロパティ
　○ コンポーネントプロパティ「テキスト」を使用
　○ 数値入力ボックスと日付入力ボックス
　○ 本章のまとめ
第14章　コンポーネント化の判断
　○ 画面の構成
　○ タイトルバーの作成準備
　○ タイトルバーのデザイン
　○ 検索セクション
　○ Style Organizer
　○ Tokens Studio for Figma
　○ キーワード検索
　○ 本章のまとめ
第15章　グリッドとテーブル
　○ 検索結果セクション
　○ オートレイアウトのネスト構造
　○ アプリケーションのデザイン
　○ 本章のまとめ
第16章　Figmaのその他の機能
　○ プリセットと制約とtab移動
　○ コンテンツを隠す（Clip content）
　○ マスクとして使用
　○ 複数のシェイプの組み合わせ加工
　○ プロトタイプ
　○ プロトタイプで画面遷移を体感
　○ マッチングレイヤーとスマートアニメート
　○ プロトタイプ
　○ 本章のまとめ
【付録Ⅰ】　これだけは覚えておきたい10の操作と10のコツ
【付録Ⅱ】　Figmaのアイコン一覧

ダウンロード

本製品の読者さまを対象としたダウンロード情報はありません。

お詫びと訂正

現在のところ、本製品に正誤情報はありません。

お問い合わせ

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

お問い合わせフォーム