デザインシステムについて

概要

packages/design_system にて flutter のデザインシステムを管理しています。 これは mobile を初め、Sally社内の Flutter Project で共通で使っているものです。

デザインシステムに対応する Figmaファイルはこちら Figma - Design System

デザインシステムはFigmaの構造に準拠して以下の構造になっています。

• Components : UIの部品を再利用可能な形で格納
• DesignToken
  • Typography : Flutter で使われる TextStlye を管理。 AppTextStyle で呼び出す
  • Colors : 色を管理。 AppColors で呼びだす。
  • Gradients : グラデーションを管理
  • Icons : アイコンを管理

Components について

WARNING

注意: 本来figmaで定義されたcomponentは全て、design_system側に存在すべきですが、mobile側に存在するものも残っています。

• design_system では Widgetbook を用いてコンポーネント管理をしています。
• design_system を変更したときは、Widgetbook も変更する必要があります。

Widgetbook の開発の仕方

1. dart 配下(もしくは dart/examples/design_system配下)で VSCodeを開く
2. dart/examples/design_system ディレクトリで flutter run を実行して Widgetbook を起動し、そこで欲しいコンポーネントの実装してください。
   • おすすめは macos 向けに実行することです。 flutter run -d macos
3. 命名規則はなるだけ Figma の階層構造に合わせてください。
   • widgetbook のコードを変更するときは widgetbook配下でVSCodeを開くのがおすすめです。

WidgetBook はこちらから確認できます → https://widgetbook.uzu.one/

Componentを実装する時

詳細は Componentを実装するとき(for Developer) を参照

Iconを追加する時

詳細は Figmaのアイコンを追加するとき を参照

Typography について

Figma の Name によって適用すべきスタイルが決まります。

例: Figmaの指定

Typography設定で「Normal/sm/Regular」が指定されている場合

Flutter 実装

Text(
  "本文",
  style: AppTextStyle(context).normal.sm.regular.style(
    color: AppColors.text$sub,
  )
)

normal / regular はデフォルトの値になるので、省略することが可能です。

Text(
  "本文",
  style: AppTextStyle(context).sm.style(
    color: AppColors.text$sub,
  )
)

JavaScript実装

<p className="t-normal_sm_regular text-text-sub">
  本文
</p>