Using AI in UX design, Interactions, Motion, & Marketing.

Recently top companies have publicly come out to share their processes implemented by senior designers and entire creative teams. Some notable companies like Meta and Atlassian stood out. Not only are these companies building their own AI workflows, but they are spending millions of dollars to train their employees on them. From watching interviews to reading lengthy articles, here is what I’ve learnt about their carefully crafted AI workflows.

Atlassian’s design-to-prototype workflow, powered by AI

The famous software company has to build large scale tools and software for some of the biggest enterprises in the world. AI is the perfect companion for their team to design and test faster.

In a recent hands-on session with their design team, the wonderful people at Dive Club who interviewed them, shared exactly the methods that work for them. PS. It’s all about the balance here.

Using a pre-built template strategy:

The Atlassian team realized that AI was often messing up core elements and not completely understanding complex commands. So they created a sort of “design system” for their AI led prototyping. Here they feed a page with pre-coded elements which AI doesn’t change, but lets the tool work on other elements which are open to interpretation in a way.

They built instruction files:

Unlike most designers who just ask AI tools to code in a certain programming language or use a certain framework, their team has created certain instruction files to “guide the AI”. This instructions file (essentially a text file) might have a specific instruction to use a design system element, variable or certain token in case the AI encounters a certain type of element.

In the interview, their team discusses using tailwind (a CSS framework), but writing specific instructions to only use their own design components in certain areas. This is essentially an over-ride instruction, where the AI skips certain actions in order to fulfill their prompts.

Recipes over hard work:

A complex business like Atlassian requires simplified workflows to make life easier. The team just uses the copy-paste strategy to add pre-baked instructions to their prompts. The team talks about how most of their products consists of a dark mode switch. So, whenever they prototype a new page or product, they just add a dark mode switch command in their prompts. It’s barbaric, but it works!

They calibrate AI to see better:

Custom software production needs custom AI. When training their AI, they feed their design elements in and ask the AI what it sees. If the AI is accurate they move on, but if the AI gets an element wrong, they correct it to avoid future issues. This also fixes the screenshot-to-code conversion that they use in their company.

Designers at Meta are adopting AI at all levels

A slew of designers across different departments at Meta are scrambling to incorporate AI and supercharge their workflows. They’ve stated how AI currently is only for mundane tasks, while manual human-centered processes rule the more important steps like user research and strategy.

Automating execution:

VP of monetization design — (JJ) Jhilmil Jain states how designers at meta are using AI for generating quick screens and even coded components for better hand-off. However, they are focused on more manual, age-old ways of working when it comes to product intuition and strategy. They are also more focused on the user’s POV to ensure they are going in the correct direction. You should check out her article here.

Using playbooks for better adoption:

Much like Atlassian, they are building sets of instructions and playbooks for designers to follow when using AI. Recording and documenting processes early and setting a standard has been crucial.

Changing roles:

A product manager at Meta recently shared how his role at the company has shifted from a generic PM to a true product owner. Being able to give code has given him “superpowers”, he explained on a podcast.

His statement saying, “everyone is going to be a builder” stood out to me.

He further dives deeper by sharing that he now sets up the basic UI design and vibe codes a concept to handover to the developers directly. He clarifies that he’s only taking over smaller tasks rather than completely removing designers from the equation. According to the PM, a majority of roles at these companies are collapsing, and one person needs to do much more.

Tesco designers are vibe coding their own Figma plugins

In a recent interview with Tesco’s senior designer, it was revealed that they developed their own powerful Figma plugins to get the most out of the tool.

They’ve created a Figma plugin that connects directly to the data of their website. So whenever the team wants to populate their prototypes with real data, the plugins fetches information from their live website — images, product descriptions, ratings, etc. and inserts it into different UI components at once. This saves so much time and also keeps the designs true to the actual products listed on their platforms.

The designer reveals the tools that he used — Cursor for vibe coding, and the Figma MCP server to ensure that the results stay on brand.

I actually explored building my own Figma plugin myself, check the video out if that is something you’re interested in — watch video.

Designers at Faire are researching using AI

Faire is a popular platform that connects wholesale retailers to customers, and research is an absolute necessity for them. The quality of research data defines their future in a way.

In a detailed Medium article, Jess Brown reveals the techniques they use at the company to gather data and connect with users faster.

Implementing AI Chat-bots

The team released an AI chat-bot called Fairey for internal purposes, which can quickly fetch user queries and tickets and help them make out the problems and issues being faced by their users from a distance. She states that whenever she has a question about their users or brands working with them, they just ask the chat-bot. A good example of these questions is — “Can you find support tickets from brands about our Top Shop program in the last six months?”.

This is a great way to do primary UX research, without the hassle of reaching out to customers directly or doing expensive interviews. Since they have such a vast set of customers from different regions and use cases, the chat-bot helps filter out the right information.

Raw Data to Readable Content

Now synthesizing interviews can be a long process, sometimes taking more time than actually collecting data. This laborious task was replaced at Faire with ChatGPT with a security layer of course. Whenever they conduct real interviews, the transcript data is inserted into the tool, and a concise prompt is given to get organized information.

Here is what a prompt template at Faire looks like:

This is a series I intend to keep on doing, so make sure you follow me for more articles like this!

How top companies are using AI in their design workflows was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.