28 ポイント 投稿者 GN⁺ 2025-09-13 | 1件のコメント | WhatsAppで共有
  • Reshapedは、デザイナーと開発者のためにReactFigmaのコンポーネントライブラリを提供するプロジェクト
  • 当初は有料ライセンス方式だったが、現在は全面的にオープンソースへ移行
  • オープンソース化により、GitHubFigma Communityでソースコードとデザインライブラリの両方を利用可能に
  • このプロジェクトは、デザインとエンジニアリングの連携を強化し、実務でそのまま活用できるベストプラクティスを提示
  • 既存購入者は今後も引き続きアップデートとサポートを受けられる

Reshapedのオープンソース移行の背景

  • 約5年前にReshapedプロジェクトを始めた動機は、ReactとFigmaの両方で使えるコンポーネントライブラリが必要だったため
  • 10年以上にわたりデザインシステムを扱ってきた経験をもとに、デザインシステムで共通して発生する問題点と良い基準を明確に理解している
  • Webの80%はいまなお似たような中核デザイン原則の上に構築されていることを見いだし、これを広くカバーしつつ、開発者が残りの20%を柔軟に扱える低レベルユーティリティを提供するシステムを設計
  • 当初からアクセシビリティやデザインのどちらか一方だけに集中するのではなく、デザインとエンジニアリングの整合性、UIテーマ、ダークモード、マイクロアニメーションなど、さまざまな実務課題をあわせて解決することに重点を置いていた

有料モデルからオープンソース化決定までの過程

  • プロジェクトの継続性を保つため、初期には個人およびチーム向けの有料ライセンス販売方式を採用
  • そのおかげで小規模コミュニティにより集中し、バグレポートや機能リクエストに深く対応できた
  • いつかは有料の壁を取り除きたいという思いがあり、2年前にはReactパッケージを先に無料化したことで新たな可能性が開けた
  • いまやすべてのソースコードとFigmaライブラリをオープンソースとして公開し、ReactはGitHub、FigmaはFigma Communityで利用可能になった

オープンソース化の意義と期待される効果

  • Reshapedはデザインとエンジニアリングの橋渡しをするツールであり、双方がスケーラブルなデザインシステム構築のベストプラクティスを学べる
  • ライブラリのソースが公開されることで、新機能が導入される際に実際の実装プロセスを透明に共有できる
  • FigmaやReactの新機能も、Reshapedの例を通じて企業のデザインシステムへ適用する前に事前ベンチマークできる
広告

今後の計画とコミュニティ支援

  • Reshapedのコンポーネントライブラリは今後も引き続き拡張される予定
    • 既存の有料購入者は変更なく今後のアップデートとサポートを継続して受けられる
    • 既存のコミュニケーションチャネルも同様に維持される
  • 今後はコアライブラリの上に、より高度で使い勝手の良いプレミアムコンポーネントの追加を検討している
    • 50種類のランディングページレイアウトのような断片的機能ではなく、複雑なCSSとReactロジックを必要とする高難度コンポーネントが中心

コミュニティへの還元を決意

  • 5年間のクローズドソース運用を終え、いますべてをコミュニティに還元し、新たな楽しみを期待している

1件のコメント

 
GN⁺ 2025-09-13
Hacker Newsの意見
  • 本当に素晴らしいライブラリであり、同時に多くのコードを無料で使えることに感謝している
  • デザインがすっきりとよくできているという印象を受けた
    • Manjaro Linux と LibreWolf v135 の組み合わせで、タブ切り替えやドキュメントページのナビゲーション時に数ミリ秒ほどフリーズする現象がある
      • Android の Fennec ブラウザでも同様に、Documentation と Properties タブを切り替える際に約 0.5 秒ほど止まる現象を経験した。実際のフリーズではなく、アニメーションの小数点処理がうまくいっていない可能性もあると思う
      • ナビゲーションが遅い現象があることは認識しており、確認予定。現在はナビゲーション時に mdx ファイル探索と簡単な認証をサーバー側で処理しているためサーバーを使っているが、オープンソース化を機に今なら静的ウェブサイトへ直接切り替えられると思っている
      • Next JS サーバーが静的コンテンツをレンダリングするのに約 0.5 秒かかる 画像参照
  • 個人的に、完全に設計・開発されたマイクロインタラクションがしっかり実装されたフレームワーク/ライブラリを探している。最高の UI ツールキットでも微妙なジャンプやグリッチのように感じられることが多い
    • 改善または追加してほしいマイクロインタラクションの例があれば共有してほしい。現在コンポーネントセットを追加開発中で、そのようなマイクロインタラクションを実装できそうだ
  • デザインは素晴らしいと思う。自分は今 Mantine を積極的に使っていて満足しているが、このライブラリも覚えておくつもり。ただ、ReactNative 向けにこれほどの品質のライブラリがあればいいのにとも思う。現状のソリューションにはまだ満足していない
    • 以前 Mantine に a11y(アクセシビリティ)の問題があったと記憶しているが、Mantine でアクセシビリティ準拠チェックをしたことがあるか気になる
  • README の getting started リンクが changelog につながっていて、開始ガイドがすぐに表示されない
    • 感謝を伝えるとともに、その問題についてすぐに PR を出した
  • このライブラリはとても整理されていてクリーンに見えるので印象的。WordPress と簡単に連携する方法があればと思うし、あるいはすでに存在するのか気になる
  • 美しいコンポーネント構成であると同時に、とても大胆な決断をしたと思う。これまでの成功を祝福するとともに、この変化が自分だけでなくエコシステム全体に大きく役立つことを期待している
  • このライブラリの料金プランや課金導線、寄付オプションがサイトにまったくないのが気になる。つまり、完全なオープンソース化によって今後は収益化にもう関心がないのか気になる
    • この 5 年間このライブラリを販売して十分な収益を得られたし、今は購入が難しい人たちも使えるよう公開できることに満足している(従来の価格設定はチーム向けだった)。今後、一部の追加コンポーネントはプラスライセンスの形でリリースする予定だが、コアの React および Figma ライブラリは引き続き無料のオープンソースとして維持する予定
    • 記事の下部に「Reshaped をさらに発展させるため、コアライブラリの上に複雑で明確な思想を持つプレミアムコンポーネントを導入する計画がある。単なる『ランディングページ 50 種レイアウト』ではなく、洗練された CSS と React ロジックを必要とする高度なコンポーネントを意味する」との記述がある
  • オートコンプリート機能で Backspace 入力が動作しない問題を発見した(OSX Safari & Chrome で確認)とのことで、この点が興味深い
    • すぐに謝罪し、本日ドキュメントを redeploy 予定であり、その問題はすでに最新パッチで修正済みだと伝えた