Blueprint

Efficiently styled typography in just a click.

Comment

Inspiration

Originally, we wanted to build a layout add-on, but we realized lots of resizing features were limited to experimental use. We also wanted to speed up the process for building typographic hierarchy, such as titles, headers and body text. We decided to build a tool that automates the layout and styling of text elements in Adobe Express.

What it does

With our add-on Blueprint, users can quickly establish a strong typographic hierarchy with the click of a button. This add-on will allow you to insert text that is already styled, rather than adjusting the styles afterwards. This is especially helpful when you want to insert multiple text levels at once, such as titles, headings, and body text.

How we built it

We used our local development environment as opposed to Code Playground. The UI was built with React and swc-react (Spectrum Web Components) for native Adobe theming. For text generation, we used the Adobe Express Add-on SDK to create and position TextNode elements on the canvas.

Challenges we ran into

Many experimental APIs like resizeToFitWithin() were difficult to get working despite proper manifest.json setup. Furthermore, many of our original ideas needed to be revamped due lack of support on the Document API.

Accomplishments that we're proud of

We're very proud of putting this together in a short amount of time! We saw this hackathon extremely late into the submission period, but was saved by the extended deadline (we believe it was a typo somewhere).

What we learned

We learned a lot about Adobe's API documentation and software architecture. One of us is not very experienced with coding but ended up learning a lot about programming and sequencing operations within different areas of the project. The other is not very experienced with design but ended up learning a lot about design fundamentals.

What's next for Blueprint

We want to further enhance its features! Right now, we have simple text size modifications working in a slider/textfield component. To level it up, we want to increase font choices, so it truly becomes a styling tool rather than just a font size tool.

Built With

Share this project:

Updates