Figma AutoNamer

Inspiration

Designers and developers working in Figma often deal with messy, unorganized layer structures, making collaboration harder and workflows inefficient. Renaming layers manually is tedious and time-consuming. What if AI could automate this process?

This idea led to Figma AutoNamer—a Figma plugin that analyzes layers and images using AI, generates meaningful descriptions, and renames layers automatically for better organization.

What it does

Figma AutoNamer:

Extracts layers and images from a selected Figma frame.
Uses AI to analyze images and generate descriptions.
Sends the extracted data to AI, which suggests proper layer names.
Automatically renames layers in Figma, improving design structure.

How we built it

Frontend: Built using Figma Plugin API and TypeScript.
AI Models:
- Llama-3.2-90B-Vision-Instruct (for extracting image context).
- Mistral-small (for generating meaningful layer names).
Backend: Server hosted on Deno Deploy, handling API requests.
AI Integration: Used GitHub Marketplace AI and the GitHub Developer API instead of Azure AI due to credit card constraints.
GitHub Copilot: Assisted in code generation, debugging, and optimizing AI interactions.

Challenges we ran into

Azure AI Credit Limitation: Without a credit card, I couldn’t use Azure AI directly. Instead, I leveraged GitHub Marketplace AI as a workaround.
AI Accuracy: Ensuring AI-generated names were contextually relevant required prompt engineering and multiple iterations.
Figma API Constraints: Handling nested layers efficiently and ensuring smooth updates without breaking existing structures.
Deno Deployment Adjustments: Adapting server-side logic to Deno’s runtime while ensuring smooth API calls.

Accomplishments that we're proud of

Developed a fully functional AI-powered Figma plugin that enhances design workflow.
Successfully integrated AI models for both image context extraction and intelligent renaming.
Found a workaround for Azure AI limitations, making the solution accessible.
Optimized performance to handle large Figma frames efficiently.

What we learned

AI-powered automation can significantly improve design workflows.
GitHub Copilot is a great tool for boosting development speed.
Deno Deploy is a strong alternative for serverless AI services.
Fine-tuning AI models through prompt engineering is key to achieving accurate results.

What's next for Figma AutoNamer

Improve AI accuracy for better layer categorization.
Bulk renaming support for multiple frames at once.
User customization options (e.g., preferred naming styles).
Auto-grouping layers based on AI-detected similarities.
Export AI-enhanced layer structures to JSON for integration with other tools.

Figma AutoNamer is just the beginning—excited to refine and expand its capabilities! 🚀