Inspiration
Adobe Express users often need to reuse branded symbols, maintain consistent styling, and efficiently manage design assets. Existing workflows are manual and error-prone. I wanted to streamline this through automation, better UI, and direct integration with Adobe's ecosystem.
What it does
The add-on simplifies symbol management by allowing users to tag, filter, and reuse assets directly within Adobe Express. It provides a structured inventory for symbols, supports custom tagging, and integrates seamless document updates with real-time previews.
How we built it
- React with TypeScript for UI
- Redux Toolkit for centralized state management
- Adobe Spectrum Web Components for a consistent Adobe-native UI
- Adobe Add-on SDK for document interaction
- Canvas API for SVG to PNG conversion
- FileReader API for handling uploads
- react-select for advanced multi-select filtering
- framer-motion for smooth animations
Challenges we ran into
- SDK limitations in document manipulation and storage persistence
- Handling SVG-to-PNG rendering in varied environments
- Ensuring consistent UX styling between Spectrum components and custom elements
- Complex state management across nested symbol/tag relationships
Accomplishments that we're proud of
- Fully working prototype tightly integrated with Adobe Express
- Achieved seamless image insertion with dynamic previews
- Developed a modular, scalable architecture ready for future features
What we learned
- Deep understanding of Adobe's Add-on SDK lifecycle and limitations
- Effective strategies for state management in complex UIs
- Optimizing SVG/Canvas workflows within browser constraints
What's next for Creator Insights
- Expand to support bulk asset management
- Explore AI-based tag suggestions and asset recommendations
- Improve UX through enhanced search and batch operations
- Include svg quick edit tools to give designers a way to perform quick final touches
- Include CV models to gain predictions of how successfully the content will impact the audience and what kind of audience ("Creator Insights")
Built With
- react
- redux
- swc-react
- typescript
Log in or sign up for Devpost to join the conversation.