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 機能は格別で、その使い勝手の良さから頻繁に利用しています。

実際にデザインを行う

実際にデザイン作業を行い、デザインの前後で大きな変化を実感しました。以前 Figma を使っていた時は、基本的な形状を積み重ねたり、手書きでラフなスケッチをする程度でした。しかし、現在はより構造化された、ちゃんとしたデザインが作成できるようになったと感じています。

以下は、Figma を使わずに実装したbochi bochiの見た目です。

そして、この数日間で取り組んだ Figma を使用したbochi bochiの新しいデザインです。

どちらが優れているかは一概には言えませんが、個人的には新しいデザインに満足しています。

まとめ

これからは、Figma で作成したデザインを React のコードに落とし込み、既に稼働しているbochi bochiにデザイン適用していく予定です。 Figma との出会いは、私の開発スキルに新たな一歩を加えました。

役立ったら、☕でサポートしてね！