reactjs
sketch
AtomicDesign
SketchDay 6

SketchのシンボルをAtomicDesignで設計する。

概要

デザイン界隈でよく聞くAtomicDesignですが、
普段エンジニアの僕はReactのコンポーネント設計時にAtomicDesignに出会いました。

ReactやCSS(SCSS)側でも、AtomiDesignを採用しているのですが、
Sketchでも徐々にAtomicDesignを採用しています。

AtomicDesignは賛否両論あると思いますが、
賛成派の意見でAtomicDesignでのシンボル切り分けについて書きます。

AtomicDesignとは

AtomicDesignとは、様々なパーツを合体させて、繰り返し可能なエレメントやテンプレートが作成できるシステムを構築することをいいます。

1_j1P0pjQtl36QJavv8lHdyw.png

AtomicDesignのメリット

Sketch/CSS/React全てで言える事だと思いますが、以下の様なメリットがあります。

  • 保守性の高いUIを作る事ができる。
    • デザイン仕様の変更に強くなる。
    • コンポーネントの再利用性が高まる。(無駄な作業軽減)
  • コンポーネントの粒度を論理的に説明できる。
    • コンポーネントの粒度を決定する基準が個人の感覚に依存しにくくなる。

Sketchのシンボル設計

よくあるパターンですが、弊社では以下の切り分けでシンボルを設計しています

デバイスの名称 / レベル / コンポーネントの種類 / コンポーネントの名称 (または属しているコンポーネントの名称) _ 状態

デバイス名称

デバイス毎の切り分けです。

名称 用途
pc PC
mobile モバイル
common PCもモバイルも共通

レベルとコンポーネント

lv1

ATOMSです。
それ以上分割のできないシンボルたちの集まりです。

名称 用途
icon アイコン
txt テキスト
fill 塗り(色)
img 画像

lv2

MOLECULESです。
ATOMSを組み合わせて作っています。
主にボタンが多いです。

名称 用途
btn ボタン類
form フォーム類 (インプット・ラジオ・チェックボックス)

lv3

ORGANISMSです。
lv1とlv2を組み合わせてできる、ブロックやリストです。

名称 用途
list リスト
block ブロック
header ヘッダー
footer フッター
aside アサイド
nav ナビデーション
card カード

lv4

TEMPLATESです。
lv3が組み合わさってできたコンポーネント ※シンボル化は基本しない
(lowレベルのワイヤー)

lv5

PAGESです。
より具体的な姿となったTEMPLATES ※シンボル化は基本しない
(highレベルのワイヤー)

状態

クリックした状態などのイメージです。
コンポーネント名に_区切りで記載します。

名称 用途
hover ホバー状態
selected 選択されている状態
click クリック状態
small 小サイズ
big 大サイズ
red, green, blue etc... テキストや背景色

  • パソコン画面のカードのタイトルテキスト
pc/lv1/txt/card_title
  • モバイル画面のアサイドの項目のボタン
mobile/lv2/btn/aside_item
  • 検索フォームのボタンをホバーした時
pc/lv2/btn/searchform_hover
  • PC画面のヘッダー
pc/lv3/header

最後に

SketchでのAtomicDesignは発展途上ですが、
React側ではリファクタリングも進み可読性も上がり、
AtomicDesignを導入した事でかなり柔軟にUIの変更が可能になりました。

今後もAtomicDesignを意識して、保守性の高いUIを設計したいと思います。

AtomicDesignでよく参考にする記事