Figma入門ガイド｜デザイン未経験でも始められるUI設計ツール

最近はエンジニアもFigmaを使う機会がすごく増えているよ。デザイナーが作った画面のデザインを確認するだけじゃなくて、自分でワイヤーフレームを作ったり、デザインシステムのコンポーネントを理解するのに使うんだ。

個人利用なら無料プランで十分使えるよ。ファイル数に制限はあるけど、基本的な機能は全部使える。ブラウザでそのまま動くから、インストールすら不要なんだ。アカウントを作ったらすぐ始められるよ。

最初に覚えるべきは3つ。①フレーム（画面の枠組み）、②図形とテキストの配置、③オートレイアウト。特にオートレイアウトはCSSのFlexboxに似た概念で、エンジニアなら直感的に理解できるはずだよ。

要素を縦や横に自動で並べてくれる機能だよ。たとえばボタンを3つ横に並べたいとき、オートレイアウトを設定すれば均等に並んで、間隔も自動で調整される。要素を追加・削除しても自動で再配置されるから、レスポンシブなデザインを作るのに必須なんだ。

再利用可能なパーツのことだよ。たとえばボタンをコンポーネントにしておけば、100箇所で使っていても、元のコンポーネントの色を変えれば100箇所全部が一括で変わる。プログラミングでいう「関数」や「クラス」に近い考え方だね。

大きく3つあるよ。①デザインから直接CSSの値（色コード・余白・フォントサイズ）を読み取れる、②「Dev Mode」でデザインをコードに変換したヒントが見られる、③デザイナーと同じツール上でコメントやフィードバックができる。認識のズレが激減するんだ。

作れるよ！画面同士をつなげて「このボタンを押したら次の画面に遷移する」というインタラクションを設定できる。アニメーションも付けられるから、実装前に動く画面のイメージを共有できるんだ。プロダクトマネージャーへの提案にも使えるよ。

最大の強みは「リアルタイム共同編集」。Googleドキュメントみたいに複数人が同時に作業できるんだ。あとはプラグインが豊富で、アイコン挿入やカラーパレット生成、AIでのデザイン補助まである。2024年にはAI機能が本格追加されて、テキストからUIを自動生成できるようになってきているよ。