React でデザインシステムを正しく実装する - コンポーネントカタログを超えて | Wantedly Engineer Blog

Wantedly でバックエンドのテックリード的なやつをやってる @izumin5210 です。半年くらい前から取り組んでいた、UI デザインシステムの React 実装について紹介します。ソフトウェアの設計としても非常にエキサイティングだったので、ライブラリ作ったりするのが好きな人なども楽しんでもらえると思います。 TL;DRWantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール＆アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となるデザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮するこの話が気になった（Web・モバイル問わず）フロント

[izumin5210]

UI デザインシステムを React 上で表現した話をブログに書きました / GraphQL のような API 技術とかもだけど、何かしら専門領域の境界をまたぐような技術は双方へのそれなりの理解とリスペクトが重要というのが最近の学び

[kawasin73]

バックエンドエンジニアがUIコンポーネントについて語ってらっしゃるのは一種のギャグなんだろうか

[saloverses]

“まれ”

[laptice]

WantedlyのReactとデザインシステムのつなぎ込みについて、概念というよりは現場寄りのまとめ。デザイナーとフロントエンドの共通言語を作るためにどうしたかという話。

[Tomato-360]

こういうのうまく決まると最高だなって思うけど、エンジニアもデザイナもうまく歩み寄らないといけないから実現はすごく大変

[mayumayu_nimolove]

たしかに。マージンはない方がいい。

[yanAoyama]

ふつうデザイナー側のほうが、システムとして一般的に利用できるために必要な抽象...という考え方との距離がある。繋げる人が必要。マージンも必要

[tossy_yukky]

マージンも含めちゃうのか