Living Design Guidelinesなどで生成されたコードは、実際にプロダクションで使えるのか？

[takogawa815]

デザインとエンジニアリングのワークフローについて語りましょう

高度なプロトタイピングツール、デザインシステムといった、様々な手法が台頭している現在、そのあり方は再び変わりつつあります。 協業する上での悩み、ノウハウ、Yahoo/GYAO/リッチラボで実践されているワークフローについて、なんでもお答えします。

• @narirou（Yahoo! JAPAN）
• @oodemi（Yahoo! JAPAN / リッチラボ株式会社）
• @deytack（Yahoo! JAPAN / GYAO株式会社）

質問

Living Design Guidelinesなどで生成されたコードは、実際にプロダクションで使えるのか？
より上位のデザインシステム（ブランド）とか、より下位のシステムとはどう絡んでいるのか？

[takogawa815]

答え

• GYAO

  • 実際にプロダクションで使われているコードを、デザインシステムに落とし込んでいる
    • コンポーネントがどういうデータを受け取るのかをJSON Schemaで定義してある
    • そのJSON Schemaに沿ったスタブを生成できる
    • そのスタブを使って、デザインガイドラインでパターンを生成できる
    • コンポーネントを反映すると、デザインガイドラインも反映できる状態。リンクしている。
  • より上位（Visual Identity・Component Identity）との絡み
    • まだ整備できていない
    • Sketch / inVisionなどでアセットを作り、それに従ってコードに落とし込んでいく

• 広告管理ツール

  • スモールスタートで始めているので、コンポーネント単位で切り出すことはできていない
  • React Storybookを使って、Reactのコンポーネントをデザインに合わせた形で定義している
    • 何かに紐付いたりはしていなく、エンジニア主導で進めている
  • より上位（Visual Identity・Component Identity）との絡み
    • ヤフーでは全社的にVisual Identityが定義されている
      • 各サービスが個別に作ることはないので、考えるコストは少ない
    • 他部署で一から上位概念を作った事例があるが、Visual Identityなどを決めるのに数ヶ月かかったと聞いている
      • 本当に一から作る必要があるのかは、最初に確認しておく必要がある