Keys to the Max

Introduction

After building my first Figma plugin for usability testing, one of our content designers approached me with a workflow problem. Our content management system required specific layer naming conventions for translations, but designers were spending 2-3 days manually renaming layers, clearing content, and managing translation keys for each project file.

This wasn't just a time sink—it was preventing content designers from focusing on strategy and user experience. Instead, they were drowning in administrative tasks that felt like they should be automated.

The Problem

The existing workflow was a manual nightmare:

1. Layer identification: Go through every artboard and identify all text layers that needed translation keys
2. Content clearing: Remove existing placeholder text from each layer individually
3. Layer reset: Reset each layer back to default layer types
4. Key generation: Manually create unique translation keys following naming conventions
5. Layer renaming: Apply the new keys to each layer name
6. System updates: Enter new keys into the translation management system
7. Consistency checks: Ensure no duplicate keys across the entire design system

For complex design files, this process consumed 2-3 full days per project. The cognitive load of maintaining consistency and avoiding naming conflicts was just as draining as the time investment.

Understanding the Workflow

Instead of jumping straight to building, I asked the content designer to walk me through their exact process step by step. This revealed the real pain points weren't just about speed—they were about:

• Cognitive overhead: Keeping track of naming patterns across large files
• Error prevention: Avoiding duplicate keys that would break the translation system
• Context switching: Constantly moving between design work and administrative tasks
• Handoff friction: Creating layer names that developers could immediately use

The manual process was preventing our content team from doing what they did best: crafting user-centered content strategy.

The Solution

I built "Keys to the Max"—a Figma plugin that automates the entire translation key workflow in minutes instead of days.

Core Features

Intelligent bulk processing: Select multiple text layers and clear content, reset types, and apply naming conventions in one action.

Context-aware naming: The plugin analyzes layer hierarchy, artboard names, and component structure to generate meaningful, consistent translation keys automatically.

Duplicate prevention: Built-in detection prevents naming conflicts across the design system, flagging potential issues before they break anything.

Convention enforcement: Automatically applies team naming standards, removing the guesswork and ensuring consistency across all projects.

The Evolution

After building the first version in 2-3 hours, the content designer came back with feedback that expanded the scope. What started as a simple automation tool became a comprehensive workflow solution:

Team standards integration: The plugin learned from existing naming patterns and suggested consistent approaches for new projects.

Developer handoff ready: Generated layer names that engineering teams could immediately sync with the translation management system.

Scalable architecture: Built to work across multiple projects while maintaining consistency and preventing conflicts.

The plugin evolved from solving one person's workflow problem to becoming the standard tool for content design handoffs across the team.

Building and Testing

The development process followed the same user-centered approach I use for any design project:

1. Deep workflow understanding: Mapping every step of the manual process
2. Rapid prototyping: Building a working version in minutes, not weeks
3. User feedback: Testing with the content designer who requested it
4. Iterative improvement: Expanding features based on real usage patterns
5. Team adoption: Rolling out to the broader content design team

The key insight was focusing on workflow optimization, not just feature automation. The plugin needed to fit naturally into existing processes while removing friction.

The Impact

Time savings: Reduced content preparation from 2-3 days to 1-2 hours per project—a 90% time reduction.

Quality improvement:

• Eliminated naming inconsistencies across design files
• Prevented translation key conflicts that previously broke developer handoffs
• Removed manual errors from the key generation process

Process transformation:

• Content designers could focus on strategy instead of administrative tasks
• Engineering teams received properly formatted, ready-to-use translation keys
• Reduced back-and-forth between design and development teams

Team adoption: The plugin became standard workflow for the entire content design team, with engineering teams now able to sync translation keys without additional coordination meetings.

What Made This Work

This project succeeded because I treated it like any UX design challenge: understand the user before building the solution.

The content designer's step-by-step workflow walkthrough revealed automation opportunities I wouldn't have seen by just looking at the end goal. The real insight wasn't about building a faster way to rename layers—it was about removing cognitive overhead so designers could focus on higher-value work.

Starting with a working prototype in hours rather than weeks meant we could test real workflows immediately and iterate based on actual usage, not assumptions.

Technical Architecture

Built using Figma's plugin API with a focus on batch operations and pattern recognition. The naming convention system uses contextual clues from design structure to generate meaningful keys that both humans and systems can understand.

The plugin architecture allows for easy updates to naming patterns as our translation system evolves, making it maintainable for long-term use across different projects and teams.