BIGGEST THINGS IN TECH: EXCITING ANNOUNCEMENTS FROM TOP GRAPHIC DESIGN SOFTWARE COMPANIES

The month of June saw conferences and live presentations from three of the largest graphic design software companies in the world: Adobe, Figma and Canva.

Along with a myriad of product announcements and demos, the conferences also revealed how each of these companies view the relationship between designers, developers, and machine learning tools.

Adobe

In March of this year, Adobe announced Firefly, a new generative AI platform used for generating and editing graphics from text prompts.

The Firefly Beta was made available as a standalone service to any user with an Adobe ID, and over the past two months, Adobe has integrated the platform into some of their most popular graphics tools: Photoshop, Illustrator, and Express.

Many of these new features were showcased this month at Adobe’s Max London and Summit EMEA events.

Photoshop

Photoshop, Adobe’s flagship image creation and editing software, has had its Content-Aware Fill feature taken to the next level with the new Generative Fill. 

Not only can it replace or extend parts of an image, but also allow designers to guide how the selected space is filled with a text prompt via Firefly.

“My favorite thing is using generative fill to not generate things, but to take stuff away.I t is so helpful to be like: oh I need this little detail out of there, and I don’t have to clone-stamp and healing brush,” says Andrew Hockradel, content strategist and workshop host at Adobe Max London 2023.

Illustrator

Illustrator, Adobe’s vector graphics design product, now leverages Firefly with its new Generative Recolor feature.

This allows for modification of the color palette of a selection to match either a preset color palette, or a new palette generated from a text prompt.

Illustrator is now also capable of recognizing fonts in rendered graphics, which allows designers to more quickly replicate and edit existing graphics without hunting for what font the source material used.

Express

Adobe Express is Adobe’s streamlined content creation tool centered around making social media and marketing materials.

During Adobe Summit EMEA 2023, Express was shown working with Firefly prompts to automate image generation and development of entirely new text effects.

While these new generative AI tools are exciting to explore, Adobe does not permit using any Beta features, including all features powered by Firefly, for commercial work.

Figma

Figma, acquired by Adobe late last year for $20 Billion, is a popular interface wireframing and design tool, primarily used for rapid-prototyping websites and apps.

At Figma’s Config 2023 conference, a new Variables system was unveiled, which can be used to name various text, number, toggle, and color values commonly used across a project or component.

“The Variables feature seems pretty powerful, something more reminiscent of a CAD program or game engine. This could also be useful for handing off to developers, so that they can understand what all the values in the design mean and how they relate to each other, which will make the implementation more robust,” explains Matt Giallourakis.

These variables can then be assigned to different values depending on context, so designers can view their designs with different color schemes, language, and spacing, all without having to modify the design itself.

Variable values can also be updated within the prototype preview by assigning actions to buttons, and can be used to create conditional navigation between frames. This vastly reduces the number of individual screens needed to fully describe all of the possible permutations of a design.

The next major announcement was a new interface for interacting with Figma projects, called Dev Mode.

This new view gives developers the ability to see how a design has changed over time. 

The new component playground and code generation tools also make it easier for developers to import designs directly into their projects as code. 

The new Figma VS Code plugin brings the Dev Mode file view, notifications, canvas, inspection tools, and even code completion, all into the VS Code development environment. This means developers don’t even have to leave their code workspace to find and implement designs.

To wrap up the keynote, a brief sneak-peek of a new AI tool was shown that will make using plugins and creating variants of designs easier.

While there was no mention of when these features will be added to Figma during the keynote speech, it was announced that Figma acquired an AI company, Diagram, to facilitate creation of new AI tools on the platform.

Canva 

Canva, a freemium graphic design platform known for its quick onboarding, streamlined user experience, and extensive plugins (called Canva apps), held their first ever developer event this month.

Canva apps are sandboxed React programs that run inside a side panel that can fetch, generate, or edit graphical elements, and load them into the canvas. 

Up until now, outside development teams and companies had to work with Canva directly to develop apps for the platform, but as announced during the keynote, Canva has opened their Apps SDK to everyone after a nine-month closed beta.

Any developer can now use the Apps SDK to create apps that can read, edit, and export content of users’ designs, dynamically upload graphic assets and data from a server while the app is being used, and seamlessly authenticate users with other platforms for personalized content and paid features.

To get started making new apps on Canva, developers simply have to create an app listing on the Canva developer portal, clone and run the starter kit repo, and configure the development urls.

The template app will then be loaded on the developer preview page, where devs can see edits to the app code in real time.

“With prebuilt React components and hot reloading, I couldn’t think of a better way for Canva to set up this development environment” says Matt.  

Canva also announced additional Web APIs that will launch later this year that can hook into Canva profiles and projects directly, without the need of a running Canva session or app.

Final Thoughts

With these three companies all competing in the same space, it’s perhaps surprising how differently they are handling the rising popularity of generative AI and how it’s shaping graphic design software development.

Adobe is taking an open and rapid, yet protective, stance with their AI tooling. Generative tools are rapidly being integrated into other Adobe products; however, these tools and their usage are being shaped entirely by Adobe, with little to no mention on how they can be used by, or handed off to, developers for integration into things beyond just static graphics and videos.

Figma has put their focus on not only improving the developer experience and handoff on their platform, but also on giving designers developer-like tools such as conditional navigation and theme swapping, even before a developer is invited to the project. Generative AI is still on the horizon for Figma, but with their acquisition of the AI company Diagram, and the fact that Figma is now owned by Adobe, Figma has plenty of resources to draw from.

Finally, Canva is taking a radically different approach than other companies in the graphic design space by working side-by-side with other software and AI companies. They’re even opening access to the internals of their platform through an open developer program so that anyone can create new (and possibly AI powered) tools on the platform for themselves, their company, or all users of Canva.