デザインシステムを作っていく時に考えたこと

Figmaのコメント機能の使い方
- issueみたいに課題管理したい
- コメントのしやすさ。返事のしやすさ。ディスカッションのしやすさ。
- まずは、Figmaコメント→Slackの通知orチャンネル連携にしたい。
- 参考） https://wentz-design.com/post/figma-how-to-use-comment/
開発しやすくするためにFigmaサイドに必要な状態
- 構築で必要なプロパティのスマートな参照方法
- スタイルの活用
  - プロジェクト内の定数にしておく
- コンポーネントの活用
  - プログラミングコードの再利用性をあげる
- 不要なプロパティを削減していくとか？
  - 要素の両サイドに同じマージン置くならCenterでよいなど？:face_with_monocle:
- 将来的に発展させていくには、ロードマップ参考になるかも
  - 参考）https://roadmap.sh/design-system

hott3

デザインデータ作成時のレイヤー構造

ContentLayer：テキストなどのコンテンツを配置するレイヤー
StateLayer：状態によってスタイルを変えるレイヤー
BaseLayer：UIコンポーネント固有のスタイルを持つレイヤー

こんな感じ？

switch (state) {
  case UiStack.blank:
  case UiStack.loading:
    return CircularProgressIndicator();
  case UiStack.showData:
    return DataList();
  case UiStack.partial:
    return OnbordingContents();
  case UiStack.emptyData:
  case UiStack.error:
    return Text(
      state.message,
    );
}

hott3

トークン管理に便利なプラグイン
Github連携する

hott3

Interaction States

網羅性

デザインシステムを実現する取り組み

Q

A