ChatGPT Figma プラグイン

v0.3.6

Figma 用の実験的な ChatGPT プラグイン

概要

ChatGPT Figma プラグイン UI のスクリーンキャプチャ

この実験的なプラグインを使用すると、設計者は Open AI の ChatGPT を Figma 内で直接利用できるようになります。画像の「作成」は Lexica と Unsplash を通じて容易になります。コードを実行するための小さなパネルとミニコンソールもあります。

このプラグインは実験的であり、非公式の ChatGPT API を利用しているため、「開発者モード」でのみ動作し、いつでも動作が中断または停止する可能性があります。現在の ChatGPT の関心を考慮すると、セットアップは少し面倒でサーバーを頻繁に再起動する必要があるため、ターミナルの使用にある程度慣れている必要があります。

デモを見る

はじめる

前提条件

OpenAI アカウントを作成する
Node 18.0以降がインストールされていることを確認してください。ノードのバージョン管理には nvm をお勧めします。

ダウンロードしてビルドする

このリポジトリのクローンを選択したディレクトリに作成します。 git clone https://github.com/frederickk/chatgpt-figma-plugin.git
必要な依存関係をインストールするnpm install
.envファイルを作成し、OpenAI ログイン資格情報OPENAI_EMAIL="..."およびOPENAI_PASSWORD="..."を追加します。
ビルドnpm run build

インストールして実行する

ChatGPT 中間サーバーnpm run serve実行します。
Figmaプラグイン > 開発 > マニフェストからプラグインをインポート...内でプラグインをロードします。
さあ！

使用法

ChatGPT への質問またはリクエストを入力し、 [送信] (紙飛行機のアイコン) ボタンをクリックするだけで、(数秒後) 結果は次のいずれかになります。

新しいテキストボックスを生成するか、
選択したテキストボックスのテキスト内容を置き換えます
エラーが発生しました...もう一度試してください?

Lexicaパネルを開いて、指定した説明に一致する AI 生成作品を Lexica で検索します。

[コード]パネルを開き、実行する有効な Figma Plugin API JavaScript を入力します。 ️気をつけて！これはeval()使用して行われますが、最も安全ではありません️ 。

[コンソール]パネルを開くと小さなコンソール出力が表示され、舞台裏で何が起こっているかを確認できます。

建てる

指示	説明
`npm run build`	Webpack ビルドプロセスを 1 回実行します
`npm run clean`	`./build`およびキャッシュされたファイルをクリーンアップします。
`npm run dev`	Webpack ビルドプロセスを実行し、変更を監視します。必要に応じて再構築する
`npm run dev:serve`	dev と同じですが、UI には`http://localhost:8080`経由でアクセスできます。
`npm run serve`	ChatGPT API 中間サーバー`http://localhost:3000`を実行します。これはプラグインが機能するために必要です。