Web制作を始めてから「デザインどうしよう？」と悩むことが多かったのですが、
最近ようやく Figma を使い始めました。
今回はその学習記録として、感じたことや学んだポイントをまとめます。

初めて触ったときの印象

最初は「英語UIだし、レイヤーもどんどん増えて混乱…」という状態。
四角や文字を置いても、すぐにごちゃごちゃして管理できませんでした。

ただ、少しずつ ショートカット や 基本操作 を覚えていくと、
「お、意外と直感的で使いやすいぞ！」と感覚が変わりました。

学んだ3つのポイント

1. コンポーネント化が便利すぎる

同じボタンを何度も作るのは面倒。
でもコンポーネントにしておけば、デザインを修正すると全ページに反映されるんです。
最初は「どうせコピーでいいじゃん」と思ってましたが、
大規模になると一括修正が効くのは本当にありがたい。

2. オートレイアウトでレスポンシブを意識できる

Web制作だと「スマホでどう見えるか」が大事ですよね。
オートレイアウトを使えば、テキストを増やしてもボタンの大きさが自然に調整されたり、
要素の間隔が崩れにくかったりします。
コードに落とし込むときのイメージもしやすくなりました。

3. 共有リンクで誰とでも確認できる

「できたデザインをどう見せよう？」と思ってましたが、
FigmaはURLを送るだけでOK。
わざわざ画像に書き出す必要もないし、共同編集もできます。
チームやクライアントとやり取りするときに便利そうだと感じました。

失敗談

一番やらかしたのは、レイヤー管理を放置してしまったこと。
後で見返すと「Rectangle 123」「Frame 45」みたいな名前が並んでて、
自分でも何がどれかわからない…。
今は「Button」「Header」みたいに名前をつけるようにしています。

まとめ

まだまだFigma初心者ですが、
「デザインが整理されていくのって気持ちいい！」と感じています。
これからは実際のWeb制作の案件にも活かしていけそうです。

次は デザインから実装にどうつなげるか（Tailwind CSSと組み合わせるなど） を学んでいきたいと思います。