Project Overview
楽天グループのデザイン品質(Rakuten Design System)の統一を支援するため、3つのFigmaプラグインを開発しました。
1. Design Linter: デザインがガイドラインに準拠しているか自動チェック。
2. Data Populator: CSVデータからバナーや商品カードを大量生成。
3. Asset Exporter: 開発用アセットの命名規則統一とエクスポート自動化。
Technical Challenges
Figma Plugin APIの制限(サンドボックス環境)の中で、高速なDOM走査とリアルタイムなフィードバックを実現することに注力しました。
技術的工夫:
ReactでUIを構築し、メインスレッド(Plugin Sandbox)とのメッセージングを最適化することで、数千レイヤーを含むファイルでも遅延なくチェックが完了するパフォーマンスを実現しました。
Impact
デザイナーとエンジニア間の「ハンドオフ(受け渡し)」におけるコミュニケーションコストが激減。デザインレビューでの指摘事項が平均30%減少し、実装時のCSS修正の手戻りも大幅に削減されました。現在、社内の300名以上のデザイナー・PMに利用されています。