Figma Plugin Suite

Role Solo Developer
Period 2022 - 2023
Users 300+ Designers
palette Plugin UI & Demo

brush Project Overview

楽天グループのデザイン品質(Rakuten Design System)の統一を支援するため、3つのFigmaプラグインを開発しました。
1. Design Linter: デザインがガイドラインに準拠しているか自動チェック。
2. Data Populator: CSVデータからバナーや商品カードを大量生成。
3. Asset Exporter: 開発用アセットの命名規則統一とエクスポート自動化。

code Technical Challenges

Figma Plugin APIの制限(サンドボックス環境)の中で、高速なDOM走査とリアルタイムなフィードバックを実現することに注力しました。

技術的工夫:
ReactでUIを構築し、メインスレッド(Plugin Sandbox)とのメッセージングを最適化することで、数千レイヤーを含むファイルでも遅延なくチェックが完了するパフォーマンスを実現しました。

check_circle Impact

デザイナーとエンジニア間の「ハンドオフ(受け渡し)」におけるコミュニケーションコストが激減。デザインレビューでの指摘事項が平均30%減少し、実装時のCSS修正の手戻りも大幅に削減されました。現在、社内の300名以上のデザイナー・PMに利用されています。

Quality

Standardization

30%

Less Design QA

Tech Stack

Figma API TypeScript React Webpack