Creating a Figma Plugin that creates stripes quickly - 'Simple Stripes'
overview
Creating stripes in Figma is tedious, manual, and time-consuming.
I created Simple Stripes, a Figma plugin that cuts stripe creation time by 97%, from ~3 minutes to ~5 seconds. The plugin currently serves over 250 users, with consistent growth each week.
timeline
Jan - Feb 2025
roles
TOOLS
Overview
THE PROBLEM
Creating stripes in Figma is tedious, manual, and time-consuming.
As a designer, I was frustrated by how difficult it was to create stripes in Figma.
Online SVG stripe generators weren’t compatible, and existing Figma plugins were either inaccurate or hard to use. I often had to manually create stripes with rectangles, wasting my time and energy.
I figured other designers ran into the same problem too.
THE SOLUTION
Instead of spending ~3 min manually creating rectangles, this plugin creates stripes in ~5 secs! 🚀
Powerful Customization
Adjust angle, color, stripe width, spacing, and order.
Instant Live Preview
Live preview updates instantly, so users can see changes in real time.
Flexible, Editable Output
Final result is componentized, allowing for future edits even when the plugin is closed.
Discovery & Direction
understanding the background
Current plugins were not up to par.
Before building, I did some research on how designers currently create stripes in Figma. Since Figma doesn’t support SVG patterns, most turn to plugins or image generators as the ‘easy’ way to create stripes.
The most common issue was a lack of performance, leading to uneven stripes, “staircasing”, or not being able to see the pattern while editing.
Key goals
I mapped out 2 key goals to distinguish itself from other methods:
👶🏻 Keep the plugin simple and easy to use
For a tool this simple, it was important for there to be no learning curve
For a tool this simple, it was important for there to be no learning curve
👍 Prioritize quality, both in interaction and output
The plugin should run smoothly and produce reliable results
The plugin should run smoothly and produce reliable results
DESIGN DECISIONS
Balancing Constraints and Usability
A FAMILIAR interface
Deciding on the UI
Between my own sliders and input fields, I chose to utilize Figma’s native design components (notably, the input sliders) so users are already familiar with the interface → no learning curve.
performance first
Handling occasional lag
Even though the preview only lagged during quick input changes, I prioritized optimizing the preview for a smooth experience across all use cases.
flexible output
Turning a limitation into a feature
Figma didn’t support my ideal output format, and because of time constraints, I had to use rectangles in a frame.
Instead of treating it as a limitation, I turned it into a feature, where users can edit the stripes even after closing the plugin.
Results
SOLUTION
A Powerfully Simple Tool That Saves Time and Frustration
Fully Customizable
Add as many colors as you want, reorder them, add their size and angle
Intuitive Controls
Familiar inputs fields that can be adjusted by dragging ensure an intuitive experience for Figma users
Live Preview
Real time adjustments improve efficiency and provide a smoother workflow
Editable Output
Each stripe is created with a parent component, allowing you to make edits even after closing the plugin.
This speeds up iterations and add flexibility.
Light / Dark Mode
The theme adapts to Figma’s preference settings, ensuring seamless integration with the design environment and user preferences.
IMPACT
A positive contribution to the community
After launching the plugin to the Figma Community, Simple Stripes quickly made an impact:
TOTAL USERS
278
+ ~25 new users each week
TIME REDUCTION
97%
from ~3 mins to just ~5 secs
POSITIVE FEEDBACK
“This is exactly what I was looking for today. Looks great”
- sword9mm on r/FigmaDesign
takeaways
What I learned from this project
1. Small details can make or break the experience.
Even when an interface looks good and works correctly, I saw firsthand how a bit of lag can break the overall flow of the experience, even if it only happened at an edge case. Performance is a huge part of the UX, and it reminded me to not only think about the ideal path, but also about how users can interact in all kinds of unexpected ways.
Even when an interface looks good and works correctly, I saw firsthand how a bit of lag can break the overall flow of the experience, even if it only happened at an edge case. Performance is a huge part of the UX, and it reminded me to not only think about the ideal path, but also about how users can interact in all kinds of unexpected ways.
2. Constraints can inspire new ideas.
Having a time constraint allowed me to make quick, smart decisions. By leaning into the ‘rectangles in a frame’ approach, it opened up a more flexible solution than I initially expected. Working with the constraint didn’t limit me, as I was able to be opportunistic and create a more creative, designer-friendly outcome.
Having a time constraint allowed me to make quick, smart decisions. By leaning into the ‘rectangles in a frame’ approach, it opened up a more flexible solution than I initially expected. Working with the constraint didn’t limit me, as I was able to be opportunistic and create a more creative, designer-friendly outcome.
next steps
The next steps for this project
Add support for gradient stripes to add more versatility
Improve the UI for a smoother experience
Continue iterating with feedback from Figma Community
Suggest colors that work well with the current color palette (potential for AI-integration?)