この記事はリクルートライフスタイル Advent Calendar 2017 6日目の記事です。

自分はエンジニアですが、普段業務でAtomic Designを用いてデザインファイル作成を推進しています。
10月にリリースされたSketchの新機能であるSketch LibraryがAtomic Designを管理するのにかなり便利になったのでそのことについて書きたいと思います。

Atomic Designについて

Atomic Designとはパーツやコンポーネント単位で定義するデザイン手法です。
以下の例のようにデザインを定義されたコンポーネント単位に分割します。

Component	例
Atoms	アイコン、ボタン
Molucules	入力フォーム
Organisms	ヘッダー、フッター、サイドメニュー
Templates	ワイヤーフレーム
Pages	画面

Atomic Designを取り入れることによって、デザイン、開発でも繰り返しコンポーネントを再利用出来るなどのメリットがあります。

Sketch Library

Sketch LibraryはVersion 47(2017年10月10日release)で追加されたSketchの新機能です。
Sketchファイル間で作成したSymbolを共有、同期することが出来ます。

※Symbol: Sketchで繰り返し利用可能なページとは別で切り出された要素のこと

Sketch Libraryが便利な点は、以下のように今までは、共通の要素に対して修正が入ったときに全てのデザインファイルに対して手動で修正が必要でした。(デザインファイルを画面毎に分割している場合など)

今まで

Sketch Libraryを活用した場合

Sketch　Libraryを活用するとLibraryの更新があった場合には差分を抽出して、画面の更新を行うのみ(ボタンクリックのみ)で完結することが出来ます。

詳しい使い方は公式を見て頂けると！

Atomic Design × Sketch Library

両者のメリットを改めて考えると
Atomic Design: コンポーネント単位でデザイン管理が可能、再利用性が高い
Sketch Library: Symbol管理、更新が簡単に出来る

Atomic Design単位で切り出したComponentをLibraryとして扱うことで再利用の高いコンポーネントの参照、更新を簡単にすることが出来ます。

例えばAtomic Designで以下のようにAtoms、Molecules、Organisms、Templatesで以下のように分けた場合、

Libraryの参照先ではは以下のように見ることが出来ます。
新規でデザインしたファイルに対してもLibraryを参照することができるのに加え、Atomic Designに沿って切り分けているため、どこにどんな要素があるのかを把握しやすくなります。

実際に新規ファイルを作成する場合のデモ

以前は、別のツール(Craft)などを利用しないとSymbolの共通化は出来ませんでしたが、Sketch Libraryが出てからはSketchひとつで完結出来るのでComponentの管理もすごくやりやすくなりました。

今回Demoで作成したLibraryファイルはGithubにあげております。
https://github.com/ichiki1023/SketchLibraryExample

最後に

今回お話したSketch Libraryの活用はAtomic Designでなかったとしても十分活用出来ます。
ただ、個人的にはSymbol化する粒度が明確になるので、Library管理としてはAtomic DesignとSketch Libraryはかなり相性が良いのでオススメします。それではまた！

参考

Atomic Design

Sketch Library

公式