ShapeStyler

ShapeStyler allows the Express users to generate and add shadows and gradients to the shapes of different types.

Comment

Inspiration

Adobe Express is an amazing tool, but when it comes to customizing basic shapes, users are stuck with limited styling options — no gradients, no drop shadows, no real-time controls. After seeing multiple user complaints and requests on the Adobe forums, we decided to build ShapeStyler, a seamless add-on to empower creators with design precision and visual flexibility right inside Adobe Express.

What it does

ShapeStyler lets users instantly design and style shapes (like rectangles, circles, stars, polygons, lines, and more) with:

  • Custom gradients (linear/radial) and multiple color stops
  • Drop shadows with adjustable angle, distance, blur, and inset/outset
  • Stroke controls including type, width, color, and border radius
  • Real-time updates for all styles with an intuitive, minimal UI

It’s built to feel like a native design panel inside Adobe Express, offering a clean and responsive user experience.

How we built it

We built ShapeStyler using:

  • React for component-driven development
  • TailwindCSS for a flexible and elegant UI
  • Canvas rendering (Konva + HTML2Image) to export styled shapes
  • Custom state management via Context API to keep shape settings global and reactive
  • Gradient + shadow logic manually calculated and applied in sync with user controls

The UI was carefully structured to mirror modern design tools — clean sliders, color pickers, collapsible menus — making it accessible to both designers and beginners.

Challenges we ran into

  • Gradient rendering across multiple shapes was tricky, especially ensuring consistency with export
  • Getting real-time drop shadow + gradient updates to feel smooth without lag
  • Arrow, cross, heart, and checkmark shapes required custom rendering logic without relying on third-party libraries
  • Designing a responsive layout that didn’t clutter the Adobe Express canvas or distract the user

Accomplishments that we're proud of

  • Fully responsive shape tool with live previews, smooth transitions, and advanced controls
  • Built 10+ shape components with pixel-perfect customization options
  • Unified UI across tools (General, Drop Shadow, Gradient) with collapsible panels and fine-tuned controls
  • Used clean component abstraction and reusable logic for fast future scaling

What we learned

  • How to build a production-ready design tool UI
  • Deepened knowledge of canvas rendering, color blending, and shadow math
  • Better appreciation for UX principles in editor workflows
  • Importance of keeping interfaces intuitive when offering deep customization

What's next for ShapeStyler

  • Export directly as SVG or PNG to drag into Adobe Express canvas
  • Add support for text + AI-assisted shape suggestions
  • Enable collaborative shape styling with preset sharing
  • Open up plugin API for others to add their own shape logic
  • Ship ShapeStyler as a public Adobe Express Add-on

Built With

Share this project:

Updates