見出し画像

Figmaでつくるデザインシステム設計#1 Atoms作成まで

まずは、figmaを開く前に要件整理を行います。

デザインシステムを作る目的

デザインの一貫性を担保し、デザイナーがユーザーが期待する機能性やユーザビリティを素早く提供できるようする。また、デザインシステムを実行した結果として迅速にKPIを達成できるツールとして機能することを目指している。

メリットと留意点

サービスをまたいで一貫したUXデザインを実行することができる。
コンポーネントが標準化される。
変更・改修を素早く実行することができる。
バージョン管理が容易になる。
デザイナーはUXデザインにより注力した設計に取り組むことができる。

作成する項目

デザインライブラリ→Figma
デザインの使用に関するドキュメント
スタイルガイド/パターン/コンポーネントライブラリ
ソースコードの使用に関するドキュメント

ここからFigmaを使ってデザインシステムを作成します。
なおデザインマナーやオブジェクトの設計は、サービスの背後にある目的と理念を鑑みて決定します。

今回作成するデザインコンポーネント

使用者に与えたい印象→信頼感
余計な装飾はノイズと捉え、必要最低限の要素で最大限のパフォーマンスを実行する。
全オブジェクトが役割を全うしつつ、オブジェクト間のレベル分けが画面上で明確に決定されている。

Spacing-out elements/width/heightの設計

原則各数値は8の乗算とする。
8/16/32/64/128/256/512px

FigmaでAtomsを作る(Assets)

これ以上分解できないエレメントをAtomsといいます。
単体で機能するもの・明示されるものをAtoms(Button / Input / Heading / Paragraphなど)、Atomsを組み合わせたエレメントをMolecules、Moleculesを組み合わせて作る要素をOrganismとします。

画像1

整理中ですが、上記のようにAtomsを作りました。

コンポーネントの名前は、スラッシュ区切りでElement Name/Priority,Status/Designとして命名します。

スクリーンショット 2020-03-22 13.09.09

スラッシュ区切りでコンポーネント登録することで、ローカルアセット内でAtomsが自動的に分類され、Moleculesを組み立てる時に非常に便利です。この機能がFigmaを使う理由でもあります。

スクリーンショット 2020-03-22 13.13.11

Buttonデザイン

figma上での基本設計は下記の通りです。position: absolute;を含むブロックは、Figma上でのレイアウトの指定値になります。

スクリーンショット 2020-03-22 13.17.25

見出しデザイン見本

見出し(headingタグ)は下記の通りです。デスクトップ版のみh1,h2にはfont-weight: 400;を適用します。物理的に大きなフォントサイズになるので、太字にすると必要以上に主張が強くなると考えレギュラーにしています。
尚、フォントサイズはFigma上でText Styleで登録しています。

スクリーンショット 2020-03-22 14.30.39

スクリーンショット 2020-03-22 14.30.47

スクリーンショット 2020-03-22 14.30.54

Atom単位でどう機能するかを考えて作らないと、Moleculesに展開した時に矛盾が生じる。

必要なオブジェクトの数だけAtomsを作成しますが、闇雲にAtomを作っていくのではなく、Atom単体で機能しているデザインが必要です。
単体で機能していないデザインでは、役割が不明確でMoleculesに展開した時に統一性が担保できなくなります。Atomsは基幹となるので、サービスの背後にある目的と理念を必ず理解し、それを伝えるためのスキルとデザインが実行できなければ破綻するので、ご注意ください。

次回はMoleculesの作成まで解説します。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

よろしければサポートお願いします!様々な知見からナレッジ集めてnote上でフィードバックしたいです。

(∪´>‿<`)
16
プロダクト。デザインを最大限にやりやすく実行する環境作りのために、スキル、ツール、知識を総動員して取り組んでいます。あくまでの小規模チーム内での方法論の解説とかになるので、大規模チームには多分向かないかもしれません。

この記事が入っているマガジン

Figma のまとめ
Figma のまとめ
  • 138本

デザインツール Figma の使い方、良い紹介などをまとめたマガジンです。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。