アプリデザイン作成時Skech(Figma)でsymbol(component)化をするタイミングと注意点覚書

印刷からキャリアを始めWEBからアプリへと媒体をチェンジしながらデザインを行って結構な年数がたっている自分ですが、直近アプリ初心者のアシスタントさんにお手伝いいただくことになり、そこで役に立つかなと思った覚書などを記載していきます。

どのタイミングでsymbol(component)化するのかわからない

わたしの返答は「何度も同じものを使うとき、または同じようなデザインの2つ目を作成した時」だったのですが、説明がニュアンスすぎたと思い反省して、整理含め記載していきます。

自分がsymbol(component)化を利用する時がどんな時か出してみました。初心者の方にわからないのは、どこまでといった定義のない組み合わせたコンポーネントではないかと思います。

1. システムアイコン
2. ボタン
3. 区切り線
4. タブコントロール（セグメントコントロール）
5. インプットフィールド
6. セル（上記を組み合わせたコンポーネント）

1. システムアイコン

アプリを作る前に、iOSの場合 Human Interface Guidelines 、Androidの場合Material Design : System icons を読むこと。読まない人だと後からエンジニアとの間に亀裂が生じたりします。
※ptとdpの違いをそもそも理解できていないと厳しいのですが、そこは割愛します。

Human Interface Guidelines:
Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44x44 pt for all controls.

Material Design:
Icon sizes
System icons are displayed as 24 x 24 dp. Create icons for viewing at 100% scale for pixel-perfect accuracy.

システムアイコンは、アプリ内で使用するアイコンです。iOSとAndroidで作成すると共通して作成できるため、24で作成することも多いです。Artboard(Frame)を作成しsymbol(component)化します。

ちなみに、私の場合 Adobe Illustrator でアイコンを作成し、SkechやFigmaに落とし込みます。

エンジニアさんとの円滑なやり取りのため、名前は「ico24_xxx」のように作成するのがおすすめです。シェアボタンをshareという名前にしたアイコンを書き出して渡した場合、これはアイコンなのか画像なのか判別がつかないためです。

2. ボタン

デザインを行う上で、ボタンを画面毎に変更してしまうと、ユーザーの混乱を生むため、デザインを行う場合は、基本同じ意味を持つもので見た目を変更するデザインを作成します。その際、symbol(component)化を行います。基本的に標準でボタンは存在するため、最初に作成しておくと便利です。

1. 基本使用するボタン（活性/非活性）：
        button_primary_enable / button_primary_disable
2. 基本使用の他にボタンを並列表記する場合に使用するボタン：
        button_secondary
3. キャンセルに使用するボタン：
        button_cancel

/（スラッシュ）をいれる入れないは、Skechだと便利なので入れています。figmaはPage名を作成して作っていればAssetsの中で分けてくれますので、Pageを綺麗に作成して作る癖をつければ快適に作成できます。

3. 区切り線（dividers：ディバイダー）

アプリの区切り線です。毎回変更してしまうと、デザインの統一性が損なわれるため、最初にsymbol(component)を作成することが多いです。標準で使用する線は最初に作りますが、背景が暗い時に使用する線、背景が標準より白い場合に使う線などは、その画面が出てきた時に作成します。

・divider_normal
・divider_dark、driver_whiteなど

4. タブコントロール（セグメントコントロール）

よくアプリにある、スワイプ操作で右左に画面が変更するデザインです。
現在のアプリでは、スワイプ毎に全然違う画面が多いですが、元々の意味は、同じ表示のものをフィルタリングするといった意味合いであったという記憶があります。

まず（活性/非活性）enable / disableのタブを作成して、symbol(component)に変換します。
次に、組み合わせて一列に表示させ、オーバーライドで中のテキストを変更した完全な形をsymbol(component)とすることが多いです。

5. インプットフィールド

WEBにもありますが、入力フィールドです。
こちらも、最初から作成しておくことが多い symbol(component) です。

1. 入力前の状態：Form_TextField_placeholder
2. 入力中の状態：Form_TextField_input
3. 入力エラーの状態：Form_TextField_Err

状態変化を作成することはデザイナーとして基礎なので、作成しましょう。完成図だけではなくて、タップ前と、タップしているときと、間違った時はどうなるのかわからないと実装はできないのです。

6. セル（上記を組み合わせたコンポーネント）

セルとは、一つの情報のまとまりのことを意味しているのですが、アプリのメニュー画面などによくあるテキストとアイコンと線の表示を思い出すと理解しやすいかと思います。

上記はテキストとdividerと→アイコンをあわせたセル。こういったセルだと同じように繰り返し使用するので、最初に作成します。

下にあるようなテキストとdividerとアイコンを合わせたセルですが、この場合、同じサイズのアイコンを差し替えれば、他の要素が同じなので、 symbol(component) してしまうことが多いです。

オブジェクトとして、normal_iconのセルを呼び出して、オーバーライド（上書き）でアイコンだけを虫眼鏡アイコンに変えるということにしておけば、例えば縦のサイズを変更したとき、アプリ内のどこに配置していても、大元のnormal_iconを変更すると、オーバーライドしたセルも変更になるためsymbol(component)にします。

なんとなく、スーパークラスを作って、コピーしてオーバーライドしていくみたいにいうと自分はわかりやすいのですが、デザイナーにそれを求めるのは厳しいことを認識しています。

ここが一番よくわからない箇所だと思うのですが、他にも同じ要素を繰り返す一覧などを作る時には、必ずsymbol(component)化が発生していきます。

私のsymbol(component)化ルールを言語化しました。どなたかの助けになれればよいと思います。