“Atomic Design”を導入するときに便利な Sketchプラグイン

デザインしちゃったあと、“Atomic Design”を導入するときに便利だった Sketchプラグインをまとめてみました。

目次

はじめに
・社内管理画面のリニューアル
・Atomic Design…いきなり「原子」と言われても。
あってよかった便利なSketchプラグイン
・1. シンボルを整理整頓「Symbol Organizer
・2. リネイムの定番「Rename It
・3.レイヤー探すなら「Sketch Search Everywhere
・4. 空のフォルダ一斉削除!!「Cleanup Useless Groups
・6. おまけ

はじめに

社内管理画面リニューアル

弊社では約1年前から社内管理画面のリニューアルをしています。ほぼ新管理画面へ移行が完了。
でも実は画面のデザインはかなり前に完成していました。

社内管理画面(左)旧デザイン (右)新デザイン

すでにリニューアルはほぼ完了しています。とはいえ、機能面のPDCAを素早く回すにはデザインをシステム化し、”Atomic Design”を取り入れることが向いていると推察しました。

Design SystemやAtomic Designについては多くの方がすでに記事を書かれているのでぜひ参考にしてみてください。
参考にした記事の一部
Atomic Design を分かったつもりになる|DeNA DESIGN BLOG
Atomic design: how to design systems of components|uxdesign.cc
Each screen isn’t a special snowflake: Brad Frost on design systems|invision Blog

Atomic Design…いきなり「原子」と言われても。

Atomic Designにとりかかろう!とはいうものの、いきなり「Atoms(原子)」と言われても…
共感したのはこちらのサイトの「Atomic Designの欠点」の部分。
Atomic Designの考え方と利点・欠点 | I’m kubosho

どんなデザインもいきなりアイコンから創造するのは難しいです。
やはり、サイト全体のワイヤーフレームを作成し、せめて代表的なページのデザインカンプを作成してから、流用できるパーツを作成する…というステップがデザイナー視点だと作りやすいと思います。

あってよかった便利なプラグイン

ということで、今回はすでに作成しているデザインを元にAtomic Designのパーツを洗い出すことからスタート。
今からご紹介するプラグインを順に対応すれば、いまからでもAtomic Designに対応できるかも??


1.シンボルを整理整頓「Symbol Organizer

作成済みのデザインを新規に作成したsketchにコピペすると元々あったSymbolがどんどん溜まっていきます。気づけばすごい数となり整理が大変なことに。

ポイントはsymbol名に「/(半角スラッシュ)」を入れ階層管理します。例えば、Atoms/btn/xxx や Molecules/form/xxx のようにリネーム。

一例です

Symbolの画面で[Command + Option + Shift + O]
このようなダイアログが表示されます。設定はお好みで▼

するとSymbolがきれいに整理整頓▼
このとききれいにAtomic Designのコンポーネントを整理しておきます。

シンボルを選ぶときも整理され探しやすくなり、置き換えも楽になります。▼

最後の最後に。設定のRemove unused symbols on page (未使用のシンボルを削除する)にチェックを入れ、使っていないSymbolを一掃できるのも良い点です。

2.定番!レイヤー名一斉置換の「Rename It

せっかくsymbolを整理したなら、レイヤー名もきれいに整理したい!
あと、[Copy]が付いているレイヤー名もチラホラ^_^;)

そんな時、レイヤー名を一括変換できるのが「Rename It
変更したいレイヤーを一気に選択し[Command + Control + R]で変更内容を指定すれば完了です。

スペルミスや、後から命名ルールを変更したくなっても大丈夫。
レイヤーを選択し[Command + Option +Control + R]でレイヤー名を検索して置換する機能もあります▼

但し、この検索&置き換え機能が有効なのは選択しているレイヤーに限ります。他のpagesに潜んでいる書き換えたい名前を探すにはこちらのプラグインが有効▼

3.あのレイヤーどこだ?「Sketch Search Everywhere

[Option + Command + F]でPagesの中の全範囲でレイヤーやテキストを探してくれます。これで変更の抜け漏れも防げます。

4.空のフォルダーを一斉削除!!「Cleanup Useless Groups

一通りの整理が終わったところで、ふと気づく…空のフォルダの数々。
これらも一斉に削除しましょう。無駄にネストしてしまったフォルダも一瞬できれいに整います。


おまけ

Pixel Perfecter

レイアウト時、小数点が入っていると気になりますよね?
これはすべてのデザイン要素がグリッド状にぴったりと合わさっているか確認するプラグインです。
どのレイヤーを修正する必要があるのか、ハイライトしてくれます。
[ショートカット]Option + command + P

Font finder

同じフォントで作成しているつもりでも、うっかり指定を忘れることありますよね?
このプラグインはSketchのページの中で使われているフォントを一覧化し、指定したフォントを含むレイヤーを選択状態にします。特定のフォントを一括変換したり、いつの間にか指定したしまったけど、どこにあるか分からないフォントを探すのに便利です。

Sketch measure

フロントエンドエンジニアにpx単位できちんと伝えたいときに便利です。マージンや高さとかを図って記入してくれます。

Atomic Designで参考になるSketchテンプレート

Atomic Design Template by Nolte Sketch Resource
今回はこのフォーマットに則っていませんが、参考になったSketchのテンプレートです。何をAtomsにして、何をMoleculesにしたら良いか迷ったときに参考になりました。


今回は作業する中で便利だったプラグインのご紹介でした。
Atomic Designをまとめることは単独でもできるのですが、ルール設定はデザイナーだけではなくフロントエンドエンジニアと話し合いながらチームで作成していくことでより良くなると思います。
また作成したSymbolをライブラリにまとめ、デザイナー同士共有することもできます。

次はグリッド システムを構築に取り組んでみようと思います。