Figmaと仲良くなる

これまで、デザイナーの方々が作成した素晴らしい Figma の成果物を参考にしながら、Web フロントエンドの実装を行ってきました。何度もこれを経験するうちに、私も Figma を使いこなせるようになりたいと思うようになりました。

CSS フレームワークへの依存

これまでの個人開発においては、Bootstrap や Material UI などの CSS フレームワークを利用して、見た目が整った Web アプリケーションを開発していました。「Bootstrap っぽさが強すぎる」と感じることもしばしばありました。しかし、オリジナリティ溢れる Web の見た目を良くする方法を知らなかったのです。数年前からは Tailwind CSS がトレンドとなり、より自由なスタイリングを目指したくなりました。さらに、業務で Figma を使ったデザインから React のコードに落とし込む作業が増え、自らスタイリングを行うことが多くなりました。それが、Figma を自分で使いたいと思うようになったきっかけです。

コンセプトの策定

いきなり Figma を開始するのではなく、まずは描きたい Web アプリの目的やターゲット、解決したい問題などを大まかに考えました。私が個人開発している「bochi bochi」という食材価格比較サービスを例に、これらを思考しました。

デザインシステムの参照

コンセプトがある程度固まったら、デジタル庁のデザインシステムを参考にしました。タイポグラフィ、カラー、スペーシングなどの基本的なスタイルから、ボタンやテキストフィールドなどのコンポーネントまで、使えそうなものを参考にします。

Figma の使い方を学ぶ

プロジェクトを Figma で開始した際、最初は PC やタブレットのレスポンシブデザインを考慮せず、スマートフォン向けのデザインに焦点を当てました。 Figma の操作には当初苦労しましたが、繰り返し使用することで徐々に機能への理解が深まりました。特に、スタイルやコンポーネントの定義と再利用の便利さを実感しました。中でも Auto Layout 機能は格別で、その使い勝手の良さから頻繁に利用しています。