Figma入門——Webデザインがもっと楽しくなるツール
この記事でわかること
Figma入門——Webデザインがもっと楽しくなるツール
Webデザインをやってみたいけど、何から始めればいい？という方におすすめなのがFigma（フィグマ） です。ブラウザ上で動くデザインツールで、無料から始められます。
Figmaとは？
FigmaはWebブラウザ上で動くUI/Webデザインツールです。インストール不要で、Googleアカウントがあればすぐ使い始められます。個人利用であれば無料プランで十分な機能が揃っています。
特徴をひとことで言うと「リアルタイムで複数人が同時に編集できるPhotoshop＋Illustrator 」のようなイメージです。
できること
- Webサイト・アプリのワイヤーフレーム作成
- UIデザイン（ボタン・カード・フォームなどのパーツ作成）
- プロトタイプ（画面遷移のシミュレーション）
- デザインの共有・フィードバック収集
- コードヒント表示（CSSの値を確認できる）
基本操作を覚えよう
よく使うショートカット
| 操作 | ショートカット（Mac） |
|---|---|
| 四角を描く | R |
| テキストを追加 | T |
| フレームを作成 | F |
| グループ化 | Cmd + G |
| コピー＆ペースト | Cmd + C / Cmd + V |
| 拡大・縮小 | Cmd + + / Cmd + – |
コンポーネントを使おう
Figmaでは、ボタンなどのパーツをコンポーネント として登録できます。一度作ったデザインパーツを使い回せるので、後からデザインを変更するときも一括で反映できます。
無料プランでできること・できないこと
| 機能 | 無料プラン |
|---|---|
| ファイル数 | 3ファイルまで |
| 共同編集者 | 2名まで |
| プロトタイプ | ○ |
| バージョン履歴 | 30日間 |
個人で学習目的に使うなら、無料プランで十分です。
はじめの一歩
まずはfigma.comにアクセスして、Googleアカウントでサインアップ。「＋ New design file」でファイルを作り、四角（R）とテキスト（T）を置いてみるだけでOKです。
最初から完璧なデザインを目指さなくて大丈夫。ツールに慣れることが先決です。Figmaには公式の日本語チュートリアルもあるので、困ったときはそちらも参考にしてみてください。
関連記事
TAG
