I’ll be honest from the start — there are no direct use cases for in-house product designers to use Adobe Firefly (currently in Beta).

We simply don’t use images in our work that often. Our primary tools are typography, components, patterns, icons, flowcharts.

Still, it doesn’t mean that we shouldn’t benefit from an image generating AI. Firefly can help us to make our work more fun and entertaining by adding some unique and often curiously looking images to mockups and communications.

Adobe Firefly Text to image user interface

From boring to unboring

In a nutshell Firefly is an advanced interactive search engine for stock images, where instead of actually searching, you generate images out of the prompt text. User types some combination of words, chooses visualisation settings and clicks generate. Iterating both the prompt and settings until a satisfactory result. Quite fun tool to play around.

In B2B in-house product design images are usually provided by marketing and brand teams, if these are ever required. Alternatively, we quickly dive into free stock libraries to find some portraits for user personas, as those are mostly for internal use only. Our work does sound boring though.

This is where Firefly can help us — make B2B in-house product designer’s work unboring!

• Generate some fun images for chat and user avatars, as well as various empty and error state illustrations, all to be used in mockups.
• Enrich your presentations with unique characters or create a mascot for your in-house design system.

All these small details, that make our work more fun, but we neither have time nor skills (or both in my case) to create.

Let’s start with constraints

Firefly is in Beta, hence there are several noticeable limitations.

It doesn’t really generate anything real to look real. Like for example, if you want to generate a cat, its anatomy may turn out really weird — 3 tails or strange poses (even for cats). Though during last few weeks it seems to improve slightly, but still getting 3 forelimbs once in a while is a must.

“Black Oriental cat with glasses drinking coffee” (with three forelimbs) by Adobe Firefly

It is also not capable of thinking in abstract terms, thus don’t ask anything ambiguous or conceptual, unless your goal is to achieve psychedelic results. As yet, same goes with asking to replicate famous artists’ styles, except for the most obvious art movements like surrealism and pop-art.

As a result, the prompt should be very straightforward and ideally describe either a single object or something initially absurd. So far, my best results were with a man-made or non-existing objects, like castles and robots. It seems to be easy for Firefly to generate a random castle out of various pieces of other castles, and it is safe to generate a robot with some weird anatomy errors, cause who knows how they actually could be designed.

“Medieval castle ruins on the hill” as a photo looks extremely realistic

While castles is something a product designer may rarely find useful in their work, a robot, on other hand, may have some nice employment. Hence, for the sake of this story, let’s focus on robots.

Avatars and illustrations for mockups

I found Firefly generated robots really cute. Robots are one of few objects who in a way benefit from AI’s clumsiness with their weird shapes and poses. Furthermore, unlike castles, robot images can be used in product design mockups and visualisations. For example, as an avatar to a chatbot, or illustrations for getting started or error states.

My favourite application is to generate a robot or fantasy creature to be a mascot for an internal design system.

Happy robots to be used as mascots for an internal design system

To generate avatars or a mascot, I would recommend to select either none or a photo content type, depending on whether you are looking for a realistic or cartoonish result. While for illustrations to reduce number of colours and details, it is best to select a black and white colour and tone with none content type. Though, feel free to try out the rich variety of Firefly settings, and let me know in the comments your preferences. Personally, I ended up using as little settings as possible to simplify the process.

Minimalistic robot by Firefly (left) edited in Express (right)

TIP: Remove background with Adobe Express
Check free Adobe Express tool to remove a background from the Firefly images to use them as illustrations in user interface mockups. This will also remove Firefly credentials, hence use it only for internal purposes and don’t publish anywhere publicly to avoid copyright issues.

Making your documentation more fun

There are few things less boring looking than internal design documentation and consequently research result’s presentations.

Firefly can help with quickly generating various illustrative images to fit to the topic. These might still look a bit weird, as it was described earlier, but at least not as repetitive as from Unsplash (with all due respect to Unsplash). Again, my favourite is creating robots in all colours and shapes.

Text effects user interface in Adobe Firefly

Text effects

In addition to text to image, Firefly provides text effects generator. And, honestly speaking, it is odd. Firefly uses font letters as a mask and a text prompt generates a texture that tries to fill those letters. The result is a clumsy and poorly readable words caused by an AI generated texture breaking font’s anatomy. It reminds me of, when you quickly doodle an outline text in a notebook, then start filling the shapes, and they loose its readability.

“English breakfast” by Adobe Firefly

At the moment, I don’t really understand what is the use case here, unless they plan to improve it further to become something similar to Stefan Sagmeister’s typography.

While playing around, the only feasible idea I came with is to add visual effects to four seasons: summer, autumn, winter and spring. Where a pattern has a direct visual connotation with the season itself. Not really a useful thing for product design. Unless adding some fun text images to your presentations may distill its serious content.

Simple prompts, like “yellow leaves” and “green grass”, work well with season names

Though latest update has improved Firefly’s Text effects quite significantly, as you can see from images I generated for this article. I might need to review my opinion about it soon. Well done Adobe!

Recolor vectors

The third feature that Firefly provides is a recolor vectors. It seems to utilise Adobe Color wheel functionality to apply those combinations to your vector files. This might be indeed useful for graphic and brand designers. Though again, I cannot devise any concrete examples for its application in product design.

Future potential — storyboarding

While writing this story, I realised what would be a great use case — illustrations for storyboards! Ability to quickly produce images for a storyboard could have a more significant impact on product design work than everything mentioned above.

Unfortunately, Firefly’s current capabilities are quite limited in this regard.
It is possible to generate an image that describes a certain situation. But once you try to create a series of similarly looking illustrations, it fails.

Today Firefly has an option to mark a generated image as a reference image for a next iteration. I tried this approach to create similar images, but it didn’t work either. Let’s hope this function will improve in the future.

Attempt to generate consistent storyboard illustrations by applying same setting

Conclusion from 20 years ago

Playing around with a Firefly brought back memories from exactly 20 years ago, when I was first time introduced to a Photoshop and its Filters functionality. I remember how I was fooling around with those Filters same way as now with a Firefly — with no real purpose, just poor fun.

We tend to forget what it used to be some 20 years ago, when transforming a photo into a drawing with a single button felt so unbelievable. Back then I wondered how amazing it would have been if you had thought of something and a computer visualised it for you. And now here we are! It is quite amazing how far technology has reached in our lifetime.

One of my first photo manipulations in Photoshop from 2003