GOOD EAT CLUB Design System

Framer Layout
Framer Layout
Framer Layout

GOOD EAT CLUBのWebサイトのデザインシステムのページの増加に伴い、あらためてシステムを構築、整理を行いました。

Client

GOOD EAT COMPANY

My role

UIデザイン

The team

2 × デザイナー 2 × フロントエンドエンジニア

Period

2022.06 - 2022.10

AtomicDesignを使用したパーツとコンポーネントの再構築 

今後ページが増えることで更新作業が多くなること、パーツのデザインがバラバラな部分があり、統一性を持たせたいという意図からAtomicDesignを採用し進めていきました。Atoms / Molecules / Organisms の項目にすでにあるパーツを分けていき、ボタンの色や形状・余白のサイズを調整を行い、その後TemplateとPageに組み込んでいくという流れで作業を行いました。また命名規則に関しては、フロントエンドとMTGを開きどの方向性でいくか、どういったやり方があるか、そして今後更新していく上でどのやり方が効率がいいかなど、随時相談しながら進めていきました。


AtomicDesignを使用したパーツとコンポーネントの再構築 

今後ページが増えることで更新作業が多くなること、パーツのデザインがバラバラな部分があり、統一性を持たせたいという意図からAtomicDesignを採用し進めていきました。Atoms / Molecules / Organisms の項目にすでにあるパーツを分けていき、ボタンの色や形状・余白のサイズを調整を行い、その後TemplateとPageに組み込んでいくという流れで作業を行いました。また命名規則に関しては、フロントエンドとMTGを開きどの方向性でいくか、どういったやり方があるか、そして今後更新していく上でどのやり方が効率がいいかなど、随時相談しながら進めていきました。


AtomicDesignを使用したパーツとコンポーネントの再構築 

今後ページが増えることで更新作業が多くなること、パーツのデザインがバラバラな部分があり、統一性を持たせたいという意図からAtomicDesignを採用し進めていきました。Atoms / Molecules / Organisms の項目にすでにあるパーツを分けていき、ボタンの色や形状・余白のサイズを調整を行い、その後TemplateとPageに組み込んでいくという流れで作業を行いました。また命名規則に関しては、フロントエンドとMTGを開きどの方向性でいくか、どういったやり方があるか、そして今後更新していく上でどのやり方が効率がいいかなど、随時相談しながら進めていきました。


デザインコンポーネントの連携

整理したパーツコンポーネントは、FigmaのVariants機能でステートやサイズ、アイコン有無などを組み込みセット化し、別でページとして作ってあるTemplateとPageにコンポーネントをエクスポートして連携することにより、既にあるパーツに変更がかかったとしても、コンポーネント本体を更新すれば、全部のパーツが自動的に更新されるように作成しました。

デザインコンポーネントの連携

整理したパーツコンポーネントは、FigmaのVariants機能でステートやサイズ、アイコン有無などを組み込みセット化し、別でページとして作ってあるTemplateとPageにコンポーネントをエクスポートして連携することにより、既にあるパーツに変更がかかったとしても、コンポーネント本体を更新すれば、全部のパーツが自動的に更新されるように作成しました。

デザインコンポーネントの連携

整理したパーツコンポーネントは、FigmaのVariants機能でステートやサイズ、アイコン有無などを組み込みセット化し、別でページとして作ってあるTemplateとPageにコンポーネントをエクスポートして連携することにより、既にあるパーツに変更がかかったとしても、コンポーネント本体を更新すれば、全部のパーツが自動的に更新されるように作成しました。

©️ Yuri Yamada 2024