4 AI Resources To Add To Your UX Design Toolbox
UX / UI + Web Design

4 AI Resources To Add To Your UX Design Toolbox

By:

Morgan Plappert
Morgan Plappert

on 7/18/2023

I’ll admit, I wasn’t exactly the first to hop on the ChatGPT or MidJourney AI bandwagon. “So we are just plugging in cheat codes for our jobs and remote controlling what will eventually replace all of us now?” … Slow down. Take a deep breath. Allow yourself to properly embrace the next wave of tech.

The Opportunities & Challenges of AI in UX

Although intriguing and sometimes impressive, AI image generators are not something that I use for projects, personally, but are they fun? Yeah. Will Adobe Firefly and Midjourney play a consistent role in my everyday work? Probably not.

Rather than filling out search queries and prompts to generate an image to be used directly in designs, I’ve found that the best use of AI resources is to generate quick ideas, brainstorm visual solutions, and get top-level inspiration. It’s a tool, not an end solution. And if you treat AI as a whole, as just that - another tool. That’s when you can unlock its full potential.

By the end of this blog, you’ll have a deeper understanding of four robust AI-powered tools, their best uses, and how (through my experience) not to use them. If used correctly, these resources can significantly streamline your workflow, help you take advantage of insightful analytics and historical data, and above all, empower you to take your designs to the next level.

4 Efficient & Highly-Effective AI Powered Figma Plugins

FigGPT

How it Works:

“Generates copy with ChatGPT in Figma or FigJam! Easily change the style, length, or formatting of text in just one click.”

Goodbye, copy/paste from https://www.lipsum.com/! This has proved to be VERY useful in the early stages of design when content is still being generated. FigGPT allows you access to (literally) a magic button to populate your layouts with placeholder copy. You can provide specific prompts, adjust tone, fix grammar, ask for a shorter or lengthened copy around the same subject, and even “improve writing”.

Most Efficient Use-Cases:

  • Replace placeholder copy in page layouts. Often, you’re approaching content design with a content outline, but not necessarily completed copy for the whole site. This allows you to have related copy to the project / outline and generate desired length / tone to guide the content creator.
  • Idea generation for copy. And yes, that includes long-form copy, clever headlines, or introduction paragraphs. It can help to quickly generate ideas to spark inspiration.

Use-Cases to Avoid:

  • Finalized content. I would never hit the “magic button” and call it a day.
  • Honorable mention: MagiCopy – AI Text Generator is another great resource that I’ve used for the same reasons listed above.

Attention Insight

How it Works:

“Artificial intelligence instantly predicts where users will look after engaging with your design. Learn if a CTA button is visible enough, conduct A/B testing to see which object attracts the most attention, and create better UX based on data.”

This one is pretty neat, but you have to know how to use it. It’s based on data and predictions. Not necessarily reality. Essentially you select a frame of a full-page design, select what type of website it is (e-commerce, marketing, landing page, etc), Attention Insight does its thing and VOILA! You have fully generated heatmaps and focus maps of your design, predicting where users will be drawn to look.

Most Efficient Use-Cases:

  • This is great to use as a gut check. To make sure your layout decisions are accessible and support conversion goals. There is value in using a ton of historical data to predict user outcomes. Use it as a measuring stick early on in the design process to help you make decisions.

Use-Cases to Avoid:

  • This should not replace post-launch analytics and/or performance metrics. You are putting a lot of trust in the plugin’s algorithm and while I’m sure they spent a ton of research making sure this is reliable, it shouldn’t replace the tried and true.

WireGen - AI GPT wireframe generation

Most Efficient Use-Cases:

“WireGen uses chat GPT AI to generate wireframe designs quickly and easily. Just input the description of the design you want to create, and the plugin will generate wireframes for you in minutes. Not satisfied with the first result? Simply ask the AI to change something, or generate with a slight change in the prompt.”

I have a very specific way I go about conducting wireframes and setting things up for a smooth transition into design. This plugin could never replace that but it does act as a really fun tool for fast idea generation and could help you get unstuck if you are in a layout / UX rut.

Best Use-Cases:

  • Quickly iterate on ideas and layout / content decisions. It spits out full layouts that insinuate UI, component needs, CTA placement and copy. It’s possible that it could generate a layout decision based on its algorithm and data trove that you may not have previously thought of.

Use-Cases to Avoid:

  • It’s not meant to be a final deliverable or replace wireframing. It can’t take into account all of the strategy work that you’ve done to get to wireframes. User flows, personas, sitemap, etc.

Automotor

How it Works:

“Build custom drag and drop automations that do time-sensitive Figma tasks for you in one click.”

This is a super powerful tool. Unfortunately, it costs money, but it does offer a free trial. Essentially, it allows you to build automation based on a preset number of specific actions in Figma. So trivial and repetitive adjustments to layout that would usually be a bit time-consuming and mind-numbing can be accomplished in a single click. Either create your own customized automation or use a library of pre-made actions.

Most Efficient Use-Cases:

  • Create custom automations that cater to your workflow. You can save time by combining batch actions, commonly performed.
  • Automator offers a variety of features. I use it for creating batch actions, BUT there is so much more. You can convert designs into skeleton or loading pages, generate full-style guides from designs, import data/content from Airtable, etc. I’m just breaching the surface of its potential. Maybe I’ll report back with additional findings 🙂

Just Like VIA, AI is Here to Help

There is no doubt that AI has generated mixed perceptions. It’s powerful and impressive but it can also be seen as compromising originality and creativity. No matter how you feel about it, one thing seems certain - It’s not going anywhere.

According to experts, 80% of business executives claim that their businesses will adopt AI technology between 2020 to 2027.

At the end of the day, I think it’s less about what AI does and more about how you use it. The purpose of AI resources for designers (in their current state) should be to improve workflow, create efficiencies and save you time. Let AI technology carry the weight of some of that grunt work. Let it perform some of those routine operations. Let it act as inspiration to help you reach a more creative solution, faster. AI provides designers with a competitive advantage if used properly. It’s not here to replace us. It’s here to help us.

“As long as we are designing for humans, we’ll always need human designers.”

AI is here to stay. We are here to stay. Let’s figure out how we can work together.

Speeeeeaking of working together … Contact us if you have any questions or want to talk about how we can help your business navigate this next wave of tech.

Share to

Related Posts

Wireframing vs. Prototyping and Everything In-Between

By:Morgan Plappert on 7/14/2020

Prototyping demonstrates ideas, and baking prototyping into your workflow can begin to shift the way you think and approach design problems as a whole.

Read More »
Creating a Design System in Figma

By:Morgan Plappert on 6/12/2023

A guide to designing for scalability, flexibility, automation, cohesion, and every other positive, time-saving adjective you can think of.

Read More »