AVAILABLE AS A FIGMA PLUGIN
Create Stripes With Ease
Simple Stripes generates striped patterns in a fast, customizable, and easy to visualize way.
Try Simple Stripes
FEATURE OVERVIEW
Easy and Simple, as it should be
Built for effortless workflows and optimal, high quality results
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.
behind the scenes
why did i make this?
Stripes are surprisingly cumbersome to make in Figma.
For something that seemed so simple, I was surprised at how tricky it was to create stripes in Figma. I wanted to create a solution that made it effortless. Here’s a breakdown of the current stripe-creation methods in Figma:
Other plugins are not user-friendly
Similar plugins were hard to use and sometimes outputted inconsistent stripes.
Online SVG tools don't work
Figma doesn't allow <defs> to be imported, which is what most repeating SVGs use.
Doing it manually is tedious
Copy-pasting in an auto-layout is slow, especially when making adjustments
Key Design / development decisions
Balancing Design and Development
Throughout many wireframe and development cycles, I made several impactful (and sometimes challenging) decisions. Here's a breakdown of the most significant ones and how they shaped the final plugin.
Switching to Figma Input
Instead of a slider + value combo, I decided to use Figma’s drag-to-increment input fields.
They're familiar to users, blend seamlessly with the environment, and look better.
Creating Real-Time Preview
It was important for include a preview so that users can see how the final design looked.
This included scaling the preview based on the width and height to give a sense of proportion.
Optimizing Performance
Lag ruins any user experience.
Instead of redrawing the preview on every change, I optimized performance by ensuring only the relevant parts of the SVG were updated to reduce calculation time.
next steps
Future improvements
1. Tweaks for a smoother UI
The layout could be improved to enhance usability for a smoother experience. For example, allowing users to resize the window would provide more space for the Stripe List, and implementing an overlay scrollbar would prevent the layout from shifting when the scrollbar appears.
The layout could be improved to enhance usability for a smoother experience. For example, allowing users to resize the window would provide more space for the Stripe List, and implementing an overlay scrollbar would prevent the layout from shifting when the scrollbar appears.
2. Smart Color Suggestions
A future update could include a color algorithm that generates complementary colors based on the existing stripe palette. This would help users create visually appealing stripes to spark creativity.
A future update could include a color algorithm that generates complementary colors based on the existing stripe palette. This would help users create visually appealing stripes to spark creativity.
3. Usability Testing
I can conduct usability testing to focus on how users interact with the stripe list, like if the spacing feels too restrictive or not. I’d also test the overall experience with both beginner and advanced Figma users to identify other improvements.
I can conduct usability testing to focus on how users interact with the stripe list, like if the spacing feels too restrictive or not. I’d also test the overall experience with both beginner and advanced Figma users to identify other improvements.
conclusion
Combining design and engineering to enhance stripe creation in Figma
Simple Stripes was built to solve a surprisingly complicated problem in Figma: creating accurate, customizable stripes without the tedious workarounds.
With real-time previews, familiar Figma controls, and optimized rendering, this plugin provides a simple and seamless experience for designers.
Throughout development, I made sure to balance design and technical decisions. While there are still improvements to explore, this project allowed me to think critically as both a UX designer and engineer, ensuring that functionality and usability go hand in hand.