Cutting Stripe Creation Time by 80% for Figma Designers
A Figma plugin that cuts stripe creation time from ~3 minutes to 40 seconds
🙍🏻♂️ 1000+ total users
📈 ~25 new users / week
⏱️ 80% reduction in stripe creation time
My Role
Product Designer
Developer
(Solo Project)
Timeframe
10 Weeks
Skills
UX Research
UI Design
Plugin Dev (TypeScript, HTML)
Performance Optimization
Problem Overview
There are limited options to make stripes in Figma… none of them work well
Creating stripes in Figma isn't as easy as you'd think. Since Figma lacks a built-in pattern feature and doesn't support the file type used by most online stripe generators (repeated SVG patterns), third-party plugins have tried to fill the gap. However, they often fail to make the process any easier because:
1
Unintuitive Interfaces
Hard to preview and adjust the pattern
2
Low quality
Stripes are inconsistent and blurry
Creating stripes manually, especially if you need to constantly adjust each stripe, can take between 1 - 10 minutes.
Business Problem
For a leading design tool, missing such a simple feature makes workflows unnecessarily clunky. When Figma has to rely on 3rd party plugins to cover a simple functionality, it weakens the overall perception of Figma's completeness.
As of May 2025, Figma added native pattern fills, which validates the demand and value of incorporating simple designs into workflows.
Solution
I built Simple Stripes, a plugin that lets designers create clean, customizable stripes directly in Figma.
Improves existing 3rd party stripe plugins in both performance and usability
Prioritizes scalability by allowing for adjustments even after the plugin is closed
Follows Figma's design system for reduced cognitive load and matched mental modals
Research & Insights
Users needed flexibility, quality, and ease of use
To understand broader pain points, I needed to know what other people were struggling with and how they wanted the plugins to work. I started by exploring a total of 10+ plugin reviews, forums, and user feedback to understand the problem.
Theme 1: Lacking Performance
"Stripes aren't the same width, and the edges get blurry on small stripes and big planes"
Figma Designer
Each method of creating stripes had drawbacks that hurt the plugin's performance. They either had poor render quality or lacked customization. I mapped out their pros and cons to identify opportunities for improvement: customizable and high-quality.
Using Gradients
Easy to use
Blurry edges
Premade Stripes
Quick presets
Limited customization
Manual Rectangles
Full control
Tedious / slow
Theme 2: Poor Usability
"Hard to visualize what I'm making. The interface feels clunky."
Figma Community Member
Plugins were hard to use because of its unintuitive interface. It was hard to visualize what the output would look like.
Design Decisions
Using UI that is familiar and works
To make workflows simple, I used Figma's UI to make the plugin lightweight and easy to pick up. This lowers the learning curve, streamlines functionality, and aligns with Nielsen's "Consistency and Standards" heuristic.
Sliders vs. input fields
Dynamic workflows needed both the convenience of a slider and the precision of an input field. The challenge was implementing both without cluttering the UI. Too many types of inputs would overwhelm the user.
This is why I decided to emulate Figma's UI. The input fields double as sliders when you drag the icon, keeping the design clean and reducing development time. And since users are already familiar with Figma's interface, the plugin feels intuitive and well-integrated into their workflows.
Turning a limitation into a feature
My biggest challenge was finding a solution despite these constraints:
Figma's lack of support for repeated SVG patterns
Limited timeframe
Need for a high-quality and customizable solution
I tried improving the gradient-stripe approach, but quality was still poor at large scales. Drawing manually on a canvas took too much time to learn. With so many constraints, I landed on a simple solution: stacking rectangle components in an auto-layout.
While this approach seems simple, it allows for quality and flexibility. Since the stripes are essentially rectangles, users can edit the stripes even after the plugin is closed. This adds a layer of scalability that other solutions were missing.
Less is More (Simplicity)
Because the solution was something the user could create themselves, I had to focus on highlighting the value it brings:
Easy Customization: Each stripe can independently be restyled, recolored, or readjusted any time.
Consistent Quality: Native Figma objects maintain sharp edges at any scale.
Future Proof: Designers can make changes even after the plugin closes.
Adjusting component to make changes even after the plugin is closed
Despite its simplicity, the plugin streamlines workflows for designers, enabling fast, flexible output that adapts to changing needs even when the plugin is closed.
Optimizing performance
During testing, I noticed lag when users rapidly adjusted the slider and moved the mouse quickly. Rather than dismissing this edge case, I had a friend test the plugin and confirmed the same behavior. This taught me:
⭐ Performance isn't just about speed, but it's about maintaining trust in the tool.
Even if it's rare, lag will still lower confidence in the plugin, which is important in tools meant to simplify processes. Good UX means giving users the freedom to use their tools however they want and still expect great performance.
I optimized rendering by recalculating only the relevant parts of the code (partial rendering), ensuring the plugin stays responsive during rapid adjustments. This removed any frame drops (from 500ms lag to ~0ms) and made performance snappy.
500+ slider adjustments in <1 second with 0 visible lag
Designing for modularity and control
Other plugins were limiting customization to one or two stripes. This didn't allow for much customization or user expression. To fix this, I decided to make the stripes modular, which has three advantages:
Less cognitive load to pair the color with its width together
Flexibility for unlimited stripes for complete creative expression
Intuitive drag-and-drop control to rearrange stripes for faster iteration time
Adding, rearranging, and adjusting stripes as modular objects
Light and Dark Mode
Designers work across different environments, so the plugin automatically adapts to light/dark mode preferences. This enables seamless integration with Figma's UI, further reducing friction in the workflow.
Impact and Results
Simple Stripes plugin full walkthrough
Saving 80% of time and offering customizability
To quantify time savings, I timed 5 designers to create the same striped pattern manually vs. using Simple Stripes plugin. Users who used the plugin were 80% faster.
Project Metrics
Over 80% faster than manual methods
1,000+ users, with ~25 new users per week
20+ bookmarks by designers using it as their go-to tool
Positive feedback in the Reddit Figma Community
80% time reduction: before and after
Beyond metrics, the plugin solved real usability pain points:
Individual stripe control and modular design gives designers flexibility and ease of use
Live preview and component outputs enhance performance and usability
Clean, familiar UI helps designers feel uninterrupted during their workflows
😀 "This is exactly what I was looking for. Looks great"
sword9mm on r/FigmaDesign
Reflection
What worked
The live preview really stood out in this project. It provided instant feedback and clearly visualized the output. It was also satisfying to interact with and was fun to use, especially because it was so fast and responsive.
I wasn't confident in making the solution simple. I was worried that simplicity would cheapen the experience. So I focused a lot on the framing and highlighting the value, and it surprisingly paid off really well. The quality and customizability that goes with it is more flexible than any other approach.
What I'd do differently
Conducting 10-15 direct user interviews instead of relying on only secondary research from reviews and forums. While it provided valuable insights, direct user research would reveal more edge cases and user needs that I missed.
Measure retention, not just acquisition. I don't have access to see how users are using the plugin, but knowing how often users are using the plugin would give me feedback on what features to prioritize next.
Key learnings
Constraints inspire creativity.
At first, Figma's lack of SVG support seemed limiting, but stacking the rectangles became one of the plugin's distinguishing features.
Always show value to users
Since my solution was simple, I had to focus on highlighting its value rather than focusing on the solution itself.
Performance matters, even in edge cases.
The lag during quick adjustments could've lowered users confidence in the plugin.
What's next
Staying close to the community
I will be actively monitoring plugin reviews and emails for user feedback. This allows me to directly improve the product based on actual needs of designers. In addition, these are the next steps:
More customization: Add gradient support for more design flexibility and improve usability
Smarter suggestions: Use AI to recommend stripe colors that match the current palette to reduce decision-making friction
Visual polish: Fix layout shifts at certain breakpoints to improve edge cases
Thanks for reading!
Check out the next case study
TikTok Redesign
Reducing TikTok Burnout to Boost User Retention
Brand Research, Feature Analysis, User Journey, Prototype