TUTORIAL: Create a Banner Ad in Figma with DALL·E 3

This tutorial does not include copyrighted images from the original conference.

Overview and Audience

In this workshop, you will learn how to use the DALL·E 3 AI tool to generate images from text prompts and incorporate them into Figma.

This tutorial is designed for designers and design teams looking to create visually engaging ad campaigns quickly and efficiently.

We will work directly with ChatGPT Plus and DALL·E 3, requiring no specialized hardware or software.

Objective

By the end of this workshop, you will:

  • Generate stunning images using DALL·E 3 with simple text prompts.

  • Rapidly create and iterate on diverse visual concepts.

  • Re-contextualize images to improve design aesthetics.

  • Upload and integrate images into Figma prototypes seamlessly.

About DALL·E 3

DALL·E 3 is a cutting-edge AI tool designed to:

  • Generate high-quality images from text descriptions in seconds.

  • Enable rapid iteration and collaboration for design teams.

  • Expand creative possibilities with natural language inputs.

Prerequisites

To prepare for the workshop, ensure you:

  1. Have a ChatGPT Plus account with DALL·E 3 integration.

  2. Install and set up Figma on your device.

Agenda

Part 1: Getting Started with DALL·E 3 (20 minutes)

  • 7 steps

Part 2: Create Designs in Figma using DALL·E 3 (20 minutes)

  • 13 steps

Quiz & Questions: 10 minutes

Conclusion & Next Steps

Section 1: Getting Started with DALL·E 3

Introduction to DALL·E 3

DALL·E 3 represents a significant advancement in text-to-image AI, enabling users to generate images that closely align with their text prompts without requiring expertise in prompt engineering. Accessible through ChatGPT, it is user-friendly and fast, making it ideal for creative projects.

Step 1: Sign Up for ChatGPT Plus

  1. Visit ChatGPT and log in or create an account.

  2. Click Upgrade to Plus in the sidebar and select the $20/month subscription.

  3. Enter your payment details to access DALL·E 3.

Step 2: Explore DALL·E 3

  • Access DALL·E 3 via the Explore menu in ChatGPT.

  • Enter text prompts to generate images. Each prompt produces four variations.

  • For example, start with:
    "A stock photo of an older person wearing sunglasses."

Step 3: Iterative Prompts

DALL·E 3 improves prompts automatically, generating slightly different text for each image. To view the exact prompt used, click on the generated image.

Step 4: Download Images

  • Hover over an image and click the download icon to save it.

Step 5: Directing DALL·E 3 with Natural Language

Enhance your results by interacting with ChatGPT. You can:

  • Request more variations of an image.

  • Adjust the point of view or aspect ratio.

  • Add or modify subject and background details.

Example:
"Can you make this a side-on view?"

Note: DALL·E 3 creates new images based on your input rather than directly editing existing ones. For advanced edits, use tools like Jasper Art.

Step 6: Tips for Best Results

  1. Use Detailed Prompts: Add specific details about the subject, style, and mood for optimal results.

  2. Ask for Subtle Variations: This ensures minimal changes for a more cohesive set of images.

  3. Leverage Artistic Styles: DALL·E 3 excels in creating art-like images, such as drawings and paintings.

Section 2: Create a Series of Designs in Figma using DALL·E 3

Scenario

You are designing a spring break promotion for AIUG Travel, targeting families with warm-weather escapes.

Step 1: Generate Initial Images

  1. Open ChatGPT Plus and launch DALL·E 3.

  2. Use a prompt like:
    "Images depicting a family enjoying their spring break and warm-weather escape."

  3. Download your preferred images.

Step 2: Customize with Variations

  • Experiment with parameters such as:

    • Point of view

    • Subject placement

    • Background details

    • Adding diversity (e.g., families of color)

Step 3: Upload Images to Figma

  1. Visit Figma and open the shared file.

  2. Upload your saved images.

Step 4: Customize Designs in Illustrator

  • Adjust colors to match AIUG branding:

    • #E3E7AF

    • #A2A77F

    • #EFF1C5

    • #035E7B

    • #002E2C

Step 5: Create and Export the Banner

  1. Open the shared banner.ai file in Illustrator.

  2. Add your image and finalize the design.

  3. Export the file and prepare it for submission.

Quiz

  1. What is the main focus of the tutorial?
    Answer: B. Using DALL·E 3 to generate images from text

  2. What is DALL·E 3 aimed at generating?
    Answer: C. Stunning images from simple text prompts and images

  3. Where is DALL·E 3 available?
    Answer: A. Via ChatGPT or Microsoft’s Bing Image Center

Conclusion & Next Steps

Recap

You can now:

  • Generate high-quality images using DALL·E 3.

  • Rapidly iterate on visual concepts.

  • Integrate generated images into Figma for prototypes and campaigns.

Advanced Steps

  • Use tools like remove.bg to refine your images.

  • Explore additional DALL·E 3 features and community insights.

Homework:
Design a new ad campaign with five variations adhering to IAB guidelines. Experiment with different image styles and use ChatGPT for copywriting assistance.