Independent product · Figma plugin · 2024

Batch Frame Creator: making repetitive Figma setup faster

I researched, designed, built, and launched a plugin that creates, names, sizes, and organizes multiple Figma frames in one action.

Open in Figma Community ↗

Batch Frame Creator plugin interface inside Figma

Role: UX Designer and Front-end Developer
Date: May 2024
Responsibilities: Research, wireframing, UI design, testing, and development

Opportunity

A small task that repeats at scale

Complex user flows often require dozens of frames. Creating, naming, sizing, and arranging each frame by hand interrupts the design process.

The idea started during a normal workday, after I watched a colleague struggle with the same repetitive setup I had experienced.

Figma had no built-in way to create, name, size, and arrange a batch of frames in one action.

Discovery

Tracking the manual workflow

I broke the task into three actions: creating, naming, and ordering frames. Initial tests suggested that creation alone takes about one to five seconds per frame, depending on whether a designer uses a template or starts from scratch.

Each action is short. The cost becomes visible when a flow needs 20, 40, or 80 frames.

Manual creation of frames in Figma — **Manual workflow**Each frame repeats the same setup steps.

Estimated time ranges for creating, naming, and ordering Figma frames — **Time estimate**Task times vary with the method and designer experience.

Research signals

A market scan found plugins with related features, but none matched the workflow I wanted to test. An empathy map helped frame three needs: less time spent on repetition, less frustration during setup, and more consistency across large projects.

Empathy map for designers who create large groups of Figma frames — **Empathy map**Workflow friction became a set of concrete product requirements.

Scope

A focused MVP

I used an effort matrix to balance user value with development complexity. The first release needed to solve the complete setup task while keeping the interaction short.

Create multiple frames in one batch
Add an individual name to each frame
Set one size for the full batch
Arrange new frames in a row without overlaps

Effort matrix used to prioritize Batch Frame Creator features — **Prioritization matrix**The first release stayed focused and achievable.

User flow for creating a batch of named Figma frames — **User flow**One short flow covers quantity, names, dimensions, and placement.

Build

Designing through implementation

Building the plugin made technical feasibility part of the design process from the beginning.

I combined my HTML, CSS, and JavaScript experience with Figma API documentation. AI assistance helped me learn TypeScript and work through parts of the product logic.

The interface evolved through personal testing, informal feedback from colleagues, and repeated usability checks.

Code and development process for the Figma plugin — **Implementation process**Documentation, testing, and AI-assisted learning supported the build.

Interface

Familiar inside Figma

The plugin uses Figma's visual language, including its typography, colors, spacing, and control patterns. Familiar conventions reduce the learning curve and help the tool feel native to the platform.

Accessibility checks focused on legibility, contrast, clear labels, and a simple task flow.

Batch Frame Creator interface layout and features — **Interface layout**The required inputs fit in one compact view.

UI kit based on Figma interface conventions — **UI kit**Components reuse familiar patterns from Figma.

Accessibility contrast checks for the plugin interface — **Accessibility check**Contrast and legibility checks informed the final interface.

Outcome

From prototype to community release

The plugin turns a sequence of repeated actions into one configurable batch.

A comparison with the manual method showed that the time gap grows as the number of frames increases. These figures are estimates and vary with user experience and system performance.

Estimated creation time comparison between the manual method and Batch Frame Creator — **Performance comparison**Estimated creation time for the manual and batch workflows.

Continuous improvement

After the community release, I continued to address bugs and incorporate feedback. Each update improved a specific part of the workflow.

UI and performance

Refined the interface, fixed bugs, and improved frame positioning to prevent overlaps.

Flexible batch creation

Added support for unlimited frames per batch and specific names for each frame.

Core experience

Adjusted the plugin view and improved how the interface renders.

Reflection

What I learned

A Lean UX approach made it possible to test features early and keep the release focused.
AI assistance helped bridge technical gaps, while testing and documentation kept decisions grounded.
Designing and building the product exposed implementation constraints early.
Small workflow problems can create useful tools when they occur often enough.

Next step

Continue collecting community feedback and improve the plugin without adding friction to its core workflow.

Next project

Proximic by Comscore

Selected enterprise product work available on request.

Return to selected work