Figmaで作るDesign System開発 2021 #1

以前のnoteで「Figmaで作るDesign System設計」を掲載しました。まだまだ手探り感もあったので、アップデート版を作っていきたいと思います。

Figmaで作るデザインシステム設計 2010年度版｜methckykk｜note

はじめに

以前はAtomic Designを同時進行で解説していました。今回つくるDesign Systemの開発は、Componentの在り方にフォーカスして作りたいと思います。

Design Systemを作る理由

インターフェイスを設計する場合、ユーザーの操作やステータスによって適切なComponentの状態をデザインしておく必要があります。一つのCompnentをMainとして、複数のStateが発生します。この状態を予め予期して準備しておくことが、良い成果物へつながります。

Figmaで作る理由

FigmaのVariantsを使用すると、可視性が高い状態でComponentを管理することができます。XDのStateでも同じようなことができますが、可視性を高くするには、FigmaのVariantsを模した状態のArtboardを作る必要があります。FigmaではComponentを階層で管理できることも、Figmaを採用する理由のひとつです。

デザインファイル

まずはベースとなるComponentの整理からはじめました。各ページのComponentにはまだデザインはありません。In Progressページにデザインを作りつつ、他ページへ展開していく予定です。

Figma