こんにちは。駆け出しデザイナーのともろう(@tomoro)です。

多くの開発現場で採用されているAtomic Designを僕個人の勉強でも練習していこうということで、恥ずかしながらAtomic Designを採用したトレースのプロセスを書きたいと思います。

「こんなのはAtomic Designじゃない！」
「もっといいシンボル構造知ってる！」

という方がいたらTwitterのDMからアドバイスください🙇‍♂️

Atomic Designとは
Atomic Designでトレースする
課題と感想

Atomic Designとは

小さいUIコンポーネントを組み合わせてより大きなコンポーネントを作っていく手法で、ページ単体でデザインしていくのではなくて、コンポーネントを組み合わせてデザインしていきます。

Atomic Designについてはこちらの記事を参考にしました。

Atomic Designのコンポーネントは以下の5つに階層化されています。

最小単位のatomsは、「それ以上UIとしての機能性を破壊しない最小要素」として定義されています。

level2以降は一段下のコンポーネントを組み合わせたコンポーネントという認識です。本来level4はレイアウトだけで中身がない状態のようですが、今回はlevel5と一緒にしてしまいました。

Atomic Designでトレースする

1.atoms

まず最小単位であるatomsからコンポーネントを作り、シンボル化していきます。シンボル名は、

lv◯: コンポーネントの種類/コンポーネントの状態

みたいな感じにしてます。例えば

これのシンボル名は「lv1: btn/square」にしてます。ちなみに丸長ボタンは「lv1: btn/round」にしてます。色や文言はOverridesでバリエーションを作ってます。

最近は頑張ってパーツをストックして、色をAPPEARANCEに登録してバリエーション増やしてます、、！

2.molecules

level1を貼り付けて組み合わせていきます。

Overridesで文言とか色を変える方法は以下のnoteがとても参考になりました！

3.organisms & 4.templates & 5.pages

ごめんなさい、はしょりすぎですね。。
ただ今回はパーツを組み合わせるだけのトレースだったので、templateやpagesを意識する必要は特にないと考えました。

完成はこんな感じです。

ただ実際の開発でAtomic Designを採用する際には複数ページあることが多いですし、それぞれのページで機能が異なることがあれば、「どこまで共通にするか」という判断は大事になってくるはずなので、そのあたりは開発に携わりながら鍛えていきたいところです、、！

感想

まだ勉強し始めたばかりなのもあって、正直めっちゃ複雑だと感じました。

ただ今までのUIトレースと違って、「見た目」ではなく「機能」にも目を向けながら繰り返すべき共通項を考えられた気がしたので、勉強になりました。

あとSketchのシンボルの命名規則がしやすくなりました。

一番初めにも書きましたが、正直自分でもいろいろ試行錯誤しながら勉強してます。

「こんなのはAtomic Designじゃない！」
「もっといいシンボル構造知ってる！」

という方がいたらTwitterのDMからアドバイスください🙇‍♂️
👇
@tomoro