Tutorial: Ando Figma Plugin that Generates Images via AI

Tutorial
March 20, 2023
3 min
Illustration with images passing through the Ando Figma plugin to generate new yellow power icons for Digidop.
Key points

Ando is a Figma plugin that leverages the latest AI technologies to generate images from simple descriptions or prompts. It is designed to be user-friendly, even for those without any graphic design background. With Ando, you can create images or variations of images to assist you in your Figma designs and projects.

The Ando AI has the unique capability to gauge between description and image to generate new visuals. This Figma plugin is therefore an ideal tool for designers, marketers, developers, and anyone looking to quickly create professional-quality images. It is also suitable for beginners wanting to explore the possibilities of AI within Figma.

1. Getting Started with the Plugin

Several methods to begin using this plugin. You can either do it from the plugin page or directly from a Figma design file.

Method 1: From the Plugin Page

Figma plugin page Ando with focus on try it out button
  1. Access the Figma plugin page via this link
  2. Click on "Try it out"

Method 2: From a Figma Design File

Figma file with Ando plugin open and highlighted in blue
  1. Open a Figma file
  2. Access the plugins from the toolbar
  3. Type the name of the plugin "Ando" in the plugins search bar

2. Generating an Image with Ando

Method 1: From a Prompt

Ando plugin in Figma design interface with prompt field highlighted in blue

In the "Prompt" field, you can add a description for the image to be generated. To write an effective prompt for Ando, it is important to be precise and detailed in the description of the desired image, using action verbs and specifying details such as color, shape, size, etc. It is also important to keep it concise to facilitate the understanding of the AI. In summary, to craft an effective prompt for Ando, you should be precise, detailed, and concise in describing the desired image.

Guide for writing an effective prompt for AI

Method 2: From an Image

Ando plugin in Figma design interface with reference field highlighted in blue

Ando also allows you to create variations of an image, for example, to provide inspiration.

  1. Create a frame in Figma
  2. Add an image within a frame
  3. Ensure that the "Reference" field of Ando displays the name of the image
  4. Set the prompt weight to 0 (this will allow the tool to focus 100% on the image)

Method 3: Hybrid from a Prompt and an Image

Ando plugin in Figma design interface with multiple fields highlighted in blue

You can also combine the two previous methods to enhance an existing image or add elements to it.

  1. Select a frame containing the image
  2. Add a description in the "Prompt" field
  3. Adjust the "Prompt weight" gauge to assign more or less importance to the prompt or the image

3. Configuring the Image to be Generated

Ando plugin in Figma design interface with two configuration fields highlighted in blue

Ando also allows you to:

  1. Choose the number of images to be generated: 1 or 4 images
  2. Select the size of the images to be generated: small / medium / large
Alternatives to Ando for generating images with AI
Thomas Labonne
Thomas Labonne
Co-founder

Suggested articles

Abstract glowing visual with yellow and orange gradients, featuring the text “AI & DESIGN 2025” in the center, suggesting a theme focused on artificial intelligence and design in 2025.
Documentation
AI

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)
Screenshot of the Webflow Partner directory showcasing several agencies: Digidop, Finsweet, Flow Ninja, and Simon Lampert. The blue background features the Webflow Partner logo on the left, while partner cards display their status, starting price, awards, and preview of delivered websites.
Documentation
Webflow

The Webflow Partner Program

The Webflow Partner Program
Agentic AI vs. Generative AI
Documentation
AI

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Want to turn your website into your most valuable asset?

Contact us today