「便利」を生み出す、Figmaプラグイン開発
- カテゴリー
- 開発ツール
全5回
フロントエンド・エンジニアになじみのある技術、HTMLとJavaScriptを使って、デザインツールFigmaのプラグインを開発します。アイデア次第でさまざまな機能をつくることができます。
最終回 スタイルをバリアブルに置換するプラグイン
これまで解説してきた実装を使いながら、設定された色のスタイルをバリアブルに置換するプラグインを実装します。バリアブルは比較的新しい機能なので、従来の色のスタイルを一括して置換するニーズは実際の制作現場でもありそうです。
第4回 色管理表からバリアブルを作成する
前回のプラグインをさらに作り替えて、色の管理表からコピー＆ペーストした情報を使って、バリアブルを自動作成します。重複したバリアブルがあればエラーが出るようにします。
第3回 バリアブル作成を自動化するプラグインの基本
Figmaのスタイル設定に使用する「バリアブル」の作成を自動的に行うプラグインを開発します。まずは手動で設定し「バリアブル」の利用方法を理解したのち、ブラグインの作成を行います。
第2回 開発環境を構築する
公式のクイックスタートで構築した環境を作り変えて、TypeScript、ESLint、Viteを使ったモダンな開発環境にしてみます。これは筆者が業務で構築した一例です。
第1回 サンプルプラグインを分析する
デザインツールであるFigmaのプラグイン開発のためのシリーズです。1回目はFigmaのクイックスタートに用意されたサンプルプラグイン作成し、ファイル構造などを調べ、開発の概要をつかみます。