​

Hi friend,

This is Design Current, your go-to newsletter about user experience design.

Over the past few months, we've been exploring how to better incorporate Figma Make into our design workflow at Koi Studios.

But then, I quickly realized:

If the output quality I'm getting from my prompt is bad, it doesn't matter where I use it in my design process, because it's useless.

So I started researching best practices for prompting Figma Make.

The top tip: front-load your prompt

If you’ve looked into Figma Make prompting, you’ve probably seen this advice everywhere: front-load your prompt.front-load your prompt.

That is, starting with structured information so the AI has clearer guidance. The most common framework is:

Task, context, elements, behavior, constraints (or TCEBC)

I mean, yeah, I think that make sense?

But as a person with trust issue when it comes to anything AI related, I wanted to test it myself.

Setting the scenario

For this test, I'm designing a mock money transfer screen for a global payments app.

On this screen, the money sender can enter an amount they want to send in one currency, and then select the recipient's currency.

For the design library, I used the Untitled UI design kit from Figma Community.

Baseline: My original input, and Figma Make's output

First, I wrote the input as how I typically would.

This is what I got.👇

Front-loaded prompt

Then I rewrote the prompt using the TCEBC format.

While writing it, I realized new requirements I hadn’t considered:

• Users should be able to enter an amount in either "send" or "recipient gets" field
• UX and copy must be extremely clear and beginner-friendly

Incorporating these thoughts, I wrote a structured prompt:

This was the output. 👇

Making a comparison

Comparing the two different outputs, here's what I found:

Baseline prompt output

• More visually bold (I love the large cards)
• More UX issues (Why is the EUR tag floating? What's the logic behind using the primary purple everywhere? Is it clear to users what they can tap on?)

Front-loaded prompt output

• Better alignment and hierarchy
• Fewer usability issues
• Less visually adventurous (more boring than the baseline)

Both designs

• Not production-ready (need to tweak the designs)
• Added elements independently (e.g., "No fees" or "terms and conditions"

The verdict

So, is the structured prompt better?

If your goal is to get a design that's closer to production ready, then yes, because:

• The output has better usability
• The design is easier to refine in Figma
• Writing the prompt forces you to think through requirements (this actually made the most difference, IMO)

If your goal is visual exploration, not necessarily. There are better ways to use Figma Make for visual ideation. I promise, I will cover that in one of the upcoming newsletters.

If you've also tested different prompting methods, I'd love to hear your findings. You can always email back directly.

---

Thanks for reading!

Anyi & Andrea

Cofounders @ Koi Studios​

PS - If you enjoyed the read, please share it with a friend.

If someone forwarded this to you → join us​
If you're looking for product design help → chat with us

600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246
​Unsubscribe · Preferences​