AI Alt Text Generator

About this plugin

# Figma Plugin: AI Alt Text Generator

AI Alt Text Generatorは、Figma上で選択した画像に対してGoogle GeminiまたはOpenAIのAIを使い、アクセシブルな代替テキスト（altテキスト）を自動生成するFigmaプラグインです。

---

## 機能概要

- **Gemini（Google）またはOpenAI Vision API**を利用し、画像内容に応じたaltテキストを自動生成

- **日本語・英語のUI/プロンプト切り替え**（画面右上のボタンで即時反映）

- **APIキーはFigmaのclientStorageに安全に保存**

- **複数候補（1～5件）を一度に生成し、編集・選択可能**

- **キーワード指定**で生成内容をカスタマイズ

- **画像プレビュー**とステータス表示

- **エラー時の明確なフィードバック**

---

## セットアップ

1. プラグインをFigmaにインストールします。

2. [Google Gemini APIキー](https://aistudio.google.com/apikey) または [OpenAI APIキー](https://platform.openai.com/api-keys) を取得します。

3. プラグインを起動し、設定タブでAPIキーを入力・保存してください。

---

## 使い方

1. **Figmaキャンバス上で画像ノードを選択**

2. 「Altテキスト生成」タブで「画像を解析」ボタンをクリック

3. 画像プレビューとサイズが表示されます

4. 必要に応じてキーワード（日本語は読点「、」区切り、英語はカンマ区切り）や候補数を指定

5. 「代替テキストを生成する」ボタンをクリック

6. 候補リストが表示され、各候補は編集可能

7. 必要に応じて内容をコピーし、プロジェクトの代替テキスト欄等に貼り付けてご利用ください

---

## 言語切り替え

- 画面右上の「日本語 | English」ボタンでUI・プロンプト・説明文が即座に切り替わります。

---

## APIキーについて

- GeminiまたはOpenAIのAPIキーが必要です（どちらか一方でも可。両方入力時はGeminiが優先されます）

- APIキーはFigmaのclientStorageに安全に保存されます

- 無料枠や利用制限については各サービスの公式情報をご確認ください

---

## 注意事項

- このプラグインは選択画像の内容を外部AIサービス（Google Gemini/OpenAI）に送信します。プライバシーや機密情報の取り扱いにご注意ください。

- 生成されるaltテキストはAIによる自動生成のため、最終的な内容はご自身でご確認ください。

---

## English

### Overview

AI Alt Text Generator is a Figma plugin that uses Google Gemini or OpenAI Vision APIs to automatically generate accessible alt text for selected images in your Figma file.

### Features

- Generate alt text using **Gemini (Google) or OpenAI Vision API**

- **UI and prompt language switch (Japanese/English)** with a single button

- **API keys are securely saved** using Figma's clientStorage

- **Generate multiple candidates (1–5) at once, editable and selectable**

- **Keyword input** to influence the generated alt text

- **Image preview** and status display

- **Clear error feedback**

### Setup

1. Install the plugin in Figma

2. Obtain a [Google Gemini API key](https://aistudio.google.com/apikey) or an [OpenAI API key](https://platform.openai.com/api-keys)

3. Launch the plugin and enter/save your API key(s) in the Settings tab

### How to Use

1. **Select an image node on the Figma canvas**

2. In the "Generate Alt Text" tab, click the "Analyze Image" button

3. The image preview and size will be displayed

4. Optionally, enter keywords (comma-separated for English, "、" for Japanese) and select the number of candidates

5. Click the "Generate Alt Text" button

6. Candidate alt texts will be displayed, each editable

7. Copy the desired alt text and paste it into Figma's alt text field or elsewhere as needed

### Language Switch

- Use the "日本語 | English" button at the top right to instantly switch all UI and prompts between Japanese and English

### About API Keys

- Either Gemini or OpenAI API key is required (if both are entered, Gemini is prioritized)

- API keys are securely saved in Figma's clientStorage

- Please check each service's official documentation for free tier and usage limits

### Notes

- This plugin sends the selected image to external AI services (Google Gemini/OpenAI) for analysis. Please be mindful of privacy and confidential information.

- The generated alt text is AI-generated; please review and edit as needed before use.