Figmaを使ってAtomicDesignを導入したWebアプリケーションのデザイン設計をする

オザサです。

engineedというAWSエンジニア特化型マッチングプラットフォームでは、Atomic Designを導入しています。

フロントはNuxt.js(TypeScript)/Vuetifyで実装されており、デザインの段階ではFigmaを使用しています。デザインの段階からコンポーネントの設計をできれば、実装の段階で行われる議論の濃度を高めることができるのではと思い、デザインワークフローを整えてきまして、ある程度形になってきたのでシェアしようというのが本稿の趣旨です。

■前提

ライブラリをフル活用して開発を進めていくことで、開発のスピードをあげようというのが基本的な考え方にありました。

■下準備

・FigmaのPagesにComponentsとAppを作成します。

ComponentsはNuxt.jsプロジェクトのcomponentsディレクトリと対応させています。

AppはNuxt.jsプロジェクトのpagesディレクトリと対応させています。

・ComponentsにAssets/Atoms/Molecules/Organismsというフレームを作成します。

■デザインワークフロー

・Assetを用意する

必要な素材はまず準備しておきます。

ロゴ画像やアイコンなどはAssetsに格納します。

・Vuetifyから探す

Atomic Designを活用する上で、このプロジェクトではAtomsはVuetifyのコンポーネントとしています。

なので、デザインをする上では仕様を満たすコンポーネントがあるかをVuetifyのライブラリから探す作業から始めます。

・Atomsを作る

Vuetifyで使うものを決めたらそれをFigma上に再現します。

「Vuetify Components」という有志が作ったFigmaから引用することも行います。

https://www.figma.com/community/file/809503557326720142

この例ではv-btnとv-text-fieldを再現しています。

この時点で作ったものはコンポーネントとして設定しておきます。

・Moleculesを作る

Atomsにある任意のコンポーネントをインスタンス化して組み合わせます。

組み合わせたものをコンポーネントとして設定します。

この例ではv-btnとv-text-fieldを組み合わせて検索フォーム(ESearchForm)を作っています。ここでいうEとはengineedです。対象のアプリごとに独自の接頭語を付けると良いでしょう。

・Organismsを作る

AssetsやAtoms、Moleculesを組み合わせてOrganismsをコンポーネントとして設定します。

例ではロゴ入りのヘッダー(EAppHeader)を作っています。

Vuetifyにはv-app-barがあるので通常はそれとの組み合わせになるでしょうがここではあくまで例として。

・pagesをAppに切り替えてインスタンスを配置

基本的に作業はComponentsで行いAppは貼り付けるだけにします。

これによりコンポーネントに変更があった際Appにも適切に反映されるようにしています。

・開発者によるレビュー

デザインができてコンポーネントの設計までできたら開発者にレビューをもらいます。この時点である程度フィードバックをもらうことで実装時との認識ずれを軽減します。

・リファクタリング

実際にコードにする際、Figma上のコンポーネント設計から変わることもあります。

具体的にはダウンロード機能つきリンクをあまり深くまで考えず、デザイン上は単なるAtomとして定義してしまっていたのですが、汎用性を認められMoleculeとして実装されました。

実際にどう実装されているのかはコードを見ながら、適宜Figmaに反映していきます。当然実装されたコードを正とします。

こんな具合でFigmaを活用していくと、最初こそ大変ですが、あとからはありものの組み合わせだけでデザインができるようになり、スピードと品質が担保できます。

終わりに

今は僕がデザインをやっているのですが、代表取締役としてのタスクも盛り盛りになってきたので大変です。

こちらからは以上です。