Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

デザイン界隈でよく聞く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でよく参考にする記事

tfrcm
React / ReactNative / Go / TypeScript / AWS / Docker / k8s
https://gemcook.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした