Wordsmith - Figma Plugin

A Figma plugin that generates placeholder text using LLM based on brand tone of voice and text purpose.

Features

• Brand-Aware Text Generation: Enter your brand's tone of voice and background
• Automatic Character Limit: Automatically calculates maximum character count based on text box size and font properties
• Purpose-Driven Content: Specify the purpose of the text (e.g., header, CTA, shop now module)
• LLM-Powered: Uses OpenAI's GPT-4o-mini to generate brand-aligned text

Setup

1. Install Dependencies

   npm install

2. Build the Plugin

   npm run build

3. Install in Figma

   • Open Figma Desktop app
   • Go to Plugins → Development → Import plugin from manifest...
   • Select the manifest.json file from this directory

Usage

1. Enter Brand Prompt

   • Describe your brand's tone of voice, style, and background context
   • This helps the LLM understand how to generate text that matches your brand

2. Select a Text Box

   • Click on any text node in your Figma design
   • The plugin will automatically detect the text box size and font properties

3. Enter Text Purpose

   • Describe what the text should accomplish (e.g., "header", "CTA button", "shop now module", "product description")

4. Set OpenAI API Key

   • Enter your OpenAI API key in the plugin UI
   • The key is stored locally and never shared

5. Generate Text

   • Click "Generate Text"
   • The plugin will:
     • Calculate the maximum character count based on the text box dimensions
     • Send a request to the LLM with your brand prompt and text purpose
     • Update the selected text box with the generated text

How It Works

1. Character Count Calculation: The plugin measures the text box dimensions and font properties to calculate how many characters can fit in the available space.

2. Text Generation: A prompt is sent to OpenAI's API that includes:

   • Your brand's tone of voice and background
   • The purpose of the text
   • The maximum character count

3. Text Update: The generated text is automatically inserted into the selected text box.

Requirements

• Figma Desktop app (for plugin development)
• OpenAI API key
• Node.js and npm

Development

• Watch mode: npm run watch - Automatically rebuilds on file changes
• Build: npm run build - Compiles TypeScript to JavaScript

API Key Security

Your OpenAI API key is stored locally using Figma's clientStorage API. It is never transmitted anywhere except to OpenAI's API when generating text.

License

MIT