Recently Edward Chechique explained FigJam AI, an AI flowchart generator. Below is a summary of this article originally published at uxdesign.cc

Over the past three years, the author has extensively researched and tested how product designers can use generative AI technology to improve efficiency and accuracy in their design workflows.

Although this journey is still in its early stages, designers must integrate AI into their design processes today. This integration will enable them to work more efficiently and with greater precision.

Common AI tools on the market include ChatGPT, Gemini, and Midjourney, showcasing key features of artificial intelligence technology. Additionally, many new tools are launched daily.

Apart from the new AI tools, there are tools not originally AI-based, like Figma and Miro. These tools have started to add AI capabilities, enhancing their utility.

This article aims to show how designers can use FigJam AI, an efficient AI flowchart maker, to create flowcharts.

In the words of designers: “Stop moving rectangles and invest in creativity.” This encapsulates the author’s goal.

What is FigJam AI? FigJam AI is an AI tool that Figma added to FigJam. It helps cluster information, generate design thinking workshops, organize information, summarize information, and more.

For a more detailed look at this AI feature, check out the author’s article about FigJam AI.

Step-by-Step Introduction to Figjam AI for Better Design Collaboration Enhancing Design Team Workflows with Figjam AI

The Importance of Detailed Prompts When teaching students how to use AI, the author emphasizes the importance of providing the AI with exact instructions. Without this, the desired results may not be achieved.

This highlights a significant difference from traditional work processes. Often, traditional methods don’t start with a clear end solution but involve experimenting, adjusting designs, and refining the vision over time. In contrast, AI requires precise instructions from the beginning.

The examples provided illustrate this point. During the process, small changes in the prompt can significantly affect the results, demonstrating the importance of clear and specific instructions.

Generate Flowcharts from Text The author conducted several tests with FigJam AI to illustrate the process. Starting with simple prompts and gradually moving to more sophisticated approaches, here are three key tests:

Test 1: Happy Flow The author began with a simple flowchart for buying a T-shirt in an online store to see if the AI could generate a complete flow from it.

Prompt:

Act like a product designer and create a Flow chart for the process of buying a T-shirt in an e-commerce store:

• Visit homepage.
• Select the T-shirt category.
• Filter and sort.
• Pick a T-shirt.
• Choose size and color.
• Add to cart.
• Review cart.
• Checkout.
• Fill in shipping and payment.
• The user adds a promo code.
• Confirm order.

Create only this flow. Do not add anything else.

Result:

The AI created exactly what was asked, making the creation process more efficient by eliminating the need to manually adjust “rectangles,” streamlining the diagram creation.

Test 2: Flow with One Error The second test aimed to see if the AI could add a condition to the flow for cases where something does not work correctly.

Prompt:

Act like a product designer and create a Flow chart for the process of buying a T-shirt in an e-commerce store:

• Visit homepage.
• Select the T-shirt category.
• Filter and sort.
• Pick a T-shirt.
• Choose size and color.
• Add to cart.
• Review cart.
• Checkout.
• Fill in shipping and payment.
• The user adds a promo code.
• Confirm order.

Take into account the error case: Promo Code does not work.

Create only this flow. Do not add anything else.

Result:

The AI accomplished the task exactly as requested and added the error case to the flowchart creation.

Test 3: Flowchart with Three Errors The next step was to see if the AI could handle three error cases.

Prompt:

Act like a product designer and create a Flow chart for the process of buying a T-shirt in an e-commerce store:

• Visit homepage.
• Select the T-shirt category.
• Filter and sort.
• Pick a T-shirt.
• Choose size and color.
• Add to cart.
• Review cart.
• Checkout.
• Fill in shipping and payment.
• The user adds a promo code.
• Confirm order.

Take into account these error cases:

• The promo Code does not work.
• The color is out of stock.
• The payment declined.

Create only this flow. Do not add anything else.

Result:

The AI added all error cases but with issues:

• The error cases were added at the end of the flow, making it difficult to understand.
• The visual was chaotic, with disorganized lines.
• The prompt “Is the payment declined?” was confusing, suggesting a negative response leads to a positive outcome.

To address these issues, the author revised the prompt:

Revised Prompt:

Act like a product designer and create a Flow chart for the process of buying a T-shirt in an e-commerce store:

• Visit homepage.
• Select the T-shirt category.
• Filter and sort.
• Pick a T-shirt.
• Choose size and color. Ask, “Is the color in stock?” If yes, continue to the next step. If no, write “Notify me by email.”
• Add to cart.
• Review cart.
• Checkout.
• Fill in shipping and payment.
• The user adds a promo code. Ask, “Does the promo code work?” If yes, continue to the next step. If no, write “Promo code does not work” and connect it to the step “The user adds a promo code.”
• Confirm order. Ask, “Is the payment approved?” If yes, the next step is Done. If no, write “Contact customer support.”

Create only this flow. Do not add anything else.

Result:

The AI added all error cases correctly, creating a more legible and easy-to-understand flow.

Key Insights from the Tests:

• Simple flows require simpler prompts; complex processes need more detailed instructions.
• Clarity in prompts leads to better outcomes.
• Experimenting with different prompt styles helps communicate effectively with the AI.
• Positive phrasing for error cases (e.g., “Is the payment approved?”) leads to clearer steps.
• Explicitly guide the AI on what to do after each case for both positive and negative results.
• Sometimes, manually adjusting parts of the diagram is quicker than writing the perfect prompt.

To Summarize: This article demonstrated how to use FigJam AI as an AI flowchart tool. The author shared three tests: a happy path flowchart, a flowchart with one error case, and a more complex flowchart with three error cases. After refining the prompts, the desired results were achieved. Key insights from the process were also discussed.