Figma bets on human judgment at Config 2026 while the AI powering its canvas belongs to someone else

Learn how to create a Figma plugin that integrates external AI services like OpenAI to enhance your design workflow with automated suggestions and intelligent design assistance.

Introduction

In this tutorial, you'll learn how to integrate AI-powered design assistance into your Figma workflow using external AI APIs. While Figma's Config 2026 event showcased advanced AI capabilities, the actual AI models are often provided by third-party services. This tutorial demonstrates how to connect these APIs to your Figma designs, enabling features like automated design suggestions, content generation, and intelligent layout adjustments. We'll focus on using a popular AI service (OpenAI's GPT) to enhance your design process.

Prerequisites

Figma account with access to plugins
Basic understanding of Figma's plugin API
OpenAI API key (or similar service key)
Node.js installed on your machine
Basic knowledge of JavaScript and HTTP requests

Step-by-Step Instructions

1. Set Up Your Figma Plugin Environment

First, create a new directory for your plugin and initialize it with npm. This sets up the basic project structure for our AI integration.

mkdir figma-ai-plugin
 cd figma-ai-plugin
 npm init -y

Why: This creates a clean project space and initializes package management for dependencies we'll need.

2. Install Required Dependencies

We'll need to install the Figma plugin SDK and axios for making HTTP requests to our AI API.

npm install @figma/plugin-typings axios

Why: The plugin typings provide TypeScript support for Figma's API, and axios handles our HTTP communication with the AI service.

3. Create the Plugin Structure

Create the basic plugin files needed for Figma to recognize and run your plugin.

mkdir figma-plugin
 touch figma-plugin/manifest.json
 touch figma-plugin/plugin.js

Why: Figma requires a manifest file to understand plugin capabilities and a main plugin file to execute functionality.

4. Configure the Plugin Manifest

Define your plugin's capabilities and settings in the manifest.json file.

{
  "name": "AI Design Assistant",
  "id": "ai-design-assistant",
  "apiVersion": "1.0.0",
  "main": "plugin.js",
  "ui": "ui.html",
  "permissions": ["ai"],
  "network": ["openai.com"]
}

Why: This file tells Figma what permissions your plugin needs and where to find the main code files.

5. Create the Plugin Interface

Set up a simple UI that allows users to input design prompts and see AI-generated suggestions.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AI Design Assistant</title>
</head>
<body>
  <div>
    <h2>AI Design Assistant</h2>
    <textarea id="prompt" placeholder="Describe your design idea..." rows="4" cols="50"></textarea>
    <br>
    <button id="generateBtn">Generate Design</button>
    <div id="output"></div>
  </div>
</body>
</html>

Why: This provides a user-friendly interface for interacting with the AI service, allowing designers to input prompts and receive design suggestions.

6. Implement the Main Plugin Logic

Write the core JavaScript logic that handles communication between Figma and the AI service.

figma.showUI(__html__, { width: 500, height: 400 });

const generateBtn = document.getElementById('generateBtn');
const promptInput = document.getElementById('prompt');
const outputDiv = document.getElementById('output');

generateBtn.addEventListener('click', async () => {
  const prompt = promptInput.value;
  
  if (!prompt) {
    outputDiv.innerHTML = 'Please enter a design prompt.';
    return;
  }
  
  try {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${figma.getLocalPluginSetting('openai_api_key')}`
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [
          { role: 'system', content: 'You are a helpful assistant that provides design suggestions.' },
          { role: 'user', content: prompt }
        ]
      })
    });
    
    const data = await response.json();
    const suggestion = data.choices[0].message.content;
    
    outputDiv.innerHTML = `<p><strong>AI Design Suggestion:</strong></p><p>${suggestion}</p>`;
  } catch (error) {
    outputDiv.innerHTML = `Error: ${error.message}`;
  }
});

Why: This code handles user input, makes the API call to OpenAI, and displays the AI-generated suggestions back to the user.

7. Configure Plugin Settings

Set up a way for users to input their API keys securely.

figma.ui.onmessage = (msg) => {
  if (msg.type === 'SET_API_KEY') {
    figma.setLocalPluginSetting('openai_api_key', msg.apiKey);
    figma.ui.postMessage({ type: 'API_KEY_SET' });
  }
};

Why: Storing API keys locally ensures security while allowing the plugin to function without hardcoding credentials.

8. Test Your Plugin

Package your plugin and test it within Figma to ensure everything works correctly.

npm run build
# Then in Figma: Plugins → Development → Import Plugin from Manifest

Why: Testing in the actual Figma environment ensures compatibility and functionality before sharing with others.

9. Deploy and Share

Once tested, you can publish your plugin to the Figma Community for others to use.

Why: Publishing makes your plugin available to the broader design community, allowing others to benefit from your AI-enhanced design workflow.

Summary

This tutorial demonstrated how to create a Figma plugin that leverages external AI services to enhance the design process. By integrating OpenAI's API into Figma, designers can now receive AI-generated design suggestions directly within their workspace. The plugin architecture allows for easy expansion to include other AI services or additional features like automated layout adjustments or content generation. While Figma's own AI capabilities are impressive, third-party integrations provide flexibility and access to specialized AI models that might not be available through Figma's native API, allowing for more customized design workflows.