はじめに
Figmaを実務で扱うことになり、現在キャッチアップを進めています。
学んだ内容を自分用の備忘録としてまとめていきます。
これからFigmaを触る型の参考にもなれば嬉しいです。
Figmaとは
UI/UXデザインを行うためのデザイン制作ツール
特徴
- ブラウザで動作し、PC環境に依存しない
- リアルタイムでチームと共同編集できる
- 共有が容易で、フィードバック機能が充実している
- シンプルなUIで初心者も扱いやすい
Figmaが活躍するケース
- デザインからの実装
- Figmaで作成したデザインから、CSS情報（サイズ・色・余白等）を確認できるため、エンジニアがデザインを忠実に反映しやすい
- ワイヤーフレーム作成
- 図形やテキストなどの基本要素で画面構成を素早く作れるため、初期段階のUIアイデア出しに最適
- デザイナーとのディスカッション
- コメント機能や共有リンクを用いることで、デザインの議論がFigma内で完結できる
導入手順（無料プラン）
-
Figma にアクセスして↓赤枠をクリック
- ログイン
3.画面の指示に従ってユーザ情報を入力する
※料金プランだけ注意（無料プランは「スターター」）
4.編集画面へ遷移したら準備完了
デザインファイルを作ってみる
今回はフレームにボタンUIを配置するだけのシンプルなデザインを作成する
1.ホーム画面からDesignボタンをクリック
2.デザインファイルに遷移する
画面構成（４つのエリア）
- ナビゲーションパネル（左・赤枠）
- レイヤー、ページの構造およびコンポーネント/アセットを閲覧・管理するパネル
- 参考
- プロパティパネル（右・緑枠）
- 選択中のレイヤーの「設定」や「コメント」「画像エクスポート」操作を行うパネル
- 参考
- ツールバー（下部・青枠）
- キャンパス上にオブジェクトを追加したり、操作するためのハブ
- 参考
- キャンバス（中央・黄枠）
- 要素を配置してデザイン作業を行う作業エリア
- 参考
3. フレームの作成
4. ボタンの作成
5.完成
（Figmaは自動保存に対応）
まとめ
今回はFigmaの概要と導入手順について触れてみました。
次回はより実践的な機能に挑戦していきます。