ajike switch

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×

Atomic DesignとSketchの活用

こんにちは。
デザイナーの原です。

さて、皆さんは「Atomic Design」をご存知でしょうか?
今回は、Sketchを活用した「Atomic Design」の実践方法についてご紹介したいと思います。

Atomic Designとは

パーツ・コンポーネント単位でデザインを行っていくデザインシステムのことです。
通常のページ単位のデザイン方法とは異なり、パーツ同士を組み合わせて制作していく方法を指しています。
原子(Atomic)を一番最小のパーツとし、分子(Molecules)、有機体(Organisms)、テンプレート(Templates)、ページ(Pages)の5つの単位に分けられています。

原子(Atomic)

パーツの中で一番最小のパーツを指し、UIの基礎的な要素になります。
他の原子と組み合わさることで、分子になります。

分子(Molecules)

2つ以上の原子から構成される原子の次に小さい要素です。

有機体(Organisms)

原子や分子を組み合わせた要素で、分子よりも複雑なパーツを指します。

テンプレート(Templates)

分子や有機体を組み合わせたページの構造を表す要素です。

ページ(Pages)

テンプレートに画像やテキストなど実際に使用する要素を設置した状態を表し、
こちらが最終的なデザインを意味します。

Sketchを活用した「Atomic Design」の実践

続いて、Sketchを活用したAtomic Designの実践方法をご紹介します。

今回はSketchの主要機能であるシンボル化という機能をご紹介します。


シンボル化とは…パーツをシンボルとして登録することで複数の共通要素を一度に管理することができる機能

Step1 命名ルールの設定

シンボル化する際に命名ルールを設定することで、パーツを一元管理することが可能になります。
単位を1〜5までのレベルに置き換え、/(スラッシュ)で区切っていくことで各シンボルをレイヤー化することが可能です。

下記が実際の命名ルールの例です。

命名ルール:単位のレベル(原子)/パーツの種類(ボタン)/パターン(青色)
シンボル名:Lv1/btn/blue

スラッシュで区切った命名ルールで統一することで、シンボルがレイヤー化され、レベル別のまとまりとして管理できるようになります。

Step2 Overrides機能

シンボル化したパーツは、1つを変更するとすべてのシンボルに変更が反映されますが、Overridesという機能を使うとシンボル化した状態でも個別にテキストやアイコンを変更することができます。

Step3 シンボル化された複雑なパーツの可変

Step1とStep2を活用することで、下記のような複数のパーツの組み合わせの可変にも対応できるようになります。
ナビゲーションやフォーム、カード型のデザインなど形状が統一されていて、中身を変更することが必要な際にとても便利な機能です。

以上がSketchを活用したAtomic Designの実践方法になります。

パーツ単位でデザインをすることの難しさはありますが、組織化という考え方でデザインを統一し、管理していくという点においてはとても便利なデザインシステムだと感じました。
みなさんもぜひ試してみて下さい。

servi