Figma Make and CROFTC For The Win

In the previous installment of the Bumbling Prompter, I experimented with Figma’s AI tool—with mixed results—to craft an iPhone 16 Home screen for the Rabbit Blanket Lake provincial park. I discovered it was quite a time-consuming process, needing several prompt tweaks just to get somewhat close. Once I was close, I had to dive into the layers panel and spend extra time removing the autolayout features and unnecessary elements added to the screen. It was a classic example of the challenge of figuring out how to write a prompt that came even close to matching my intent. Obviously, I was using the wrong tool.

There has to be a better way. 

According to the wizards at Figma, their new tool, Figma Make might be the answer. When I checked out the  Figma Make page ,  I realized my life may have just gotten better.

“Making your designs “real enough” to play with can be time-consuming or require you to code. That’s why we built Figma Make: so you can go beyond imagining how your designs will feel - and actually experience them. Just start with a design and prompt how you want it to come to life.”

Note: You can move Figma frames into Figma Make and build from them. This article concentrates on creating a Home screen using only a prompt. Anna, from Figma, has great overview of how all of this works on YouTube.

Rather than provide a reference frame for the design, I dove straight into the prompt:

The results were unacceptable. In reviewing the reasoning, I had a fundamental disagreement  with the claim: “The design will be mobile-first with card-based navigation and a clean, modern interface.” There was nothing there that was “clean” or “modern”. In fact, it was unimaginative.

Rather than resigning myself to a “Here we go again” scenario and going back down the Prompt Editing Rabbit Hole, I decided to take a different approach and use the CROFTC prompt technique presented in Tomasz Dylik’s AI Prompt Engineering Bible. So what is CROFTC?

The technique appeals to the writer in me. I essentially write a narrative based on the following:

• Context: You say what is needed for the AI to understand your request.
• Role: What role should the AI adopt? Or, tell the AI who you are.
• Objective: Layout the primary task.
• Form: Tell the AI what structure or layout you want the AI to accomplish. 
• Tone: What attitude or emotional style should be used.
• Conditions: What are rules, limitations or specific information the AI must adhere to.

Though this may all seem relatively rigid, I discovered all I had to do was write a paragraph that follows the CROFTC technique. Rather than write out a long string of requirements and constantly editing and rewriting the prompt, I could actually express my intent in a “Here’s what I would like to do” format.

Here’s the prompt:

“Rabbit Blanket Lake Park is creating an iPhone Home Screen for an app. Your role is a designer creating the Home Screen.  Generate the Home Screen. Please use an image of a lake, viewed from the shore of the lake, with pine trees along its shore. Include iOS system icons, an app bar with a Hamburger menu and directions text link and four icons at the bottom of the screen in the Nav Bar. The tone should be peaceful. The words Welcome to Rabbit Blanket Lake should be placed over the image. Text to be Roboto Bold 24 px “FFFFFF. Icons in Nav Bar should be a canoe, a tent, a hiking boot and a picnic table. Icons color to be #FFFFFF and use Dark mode for the screen.”

Here’s the result:

This closely reflected my original idea, with just a few friendly tweaks. I moved the navigation bar to the bottom of the screen and adjusted its size to fit the UI perfectly. The app bar also got a little makeover—removing the opacity and filling it with a sleek black. Make’s “Point and edit” tool was a lifesaver here, allowing me to directly select elements and tweak them easily with prompts or tools.

I used the colour picker to boost the opacity of the selection from 20% to 100%. The bottom navigation bar was a bit different; since you can’t move elements directly, I used a prompt to make the change. To do that, I simply entered:

Change width to screen. Scale bottom to the bottom of the UI.

Even though I was happy, there is a button in the prompt Update that intrigued me. As you move through the changes and prompts Figma Make has a rudimentary version control.  If you want to go back one version click this button.

Conclusion

Starting from scratch in Figma Make requires a detailed prompt. As you saw in my first attempt, the results were unacceptable. Rather than get into a never-ending series of prompts in an attempt to wrangle the result into my intent, I used the CROFTC technique to write a prompt that worked.

The CROFTC technique changes a prompt from a series of requirements into a narrative. The technique's format is:

• Context: Tell the AI what you need.
• Role: What personna should the AI use.
• Objective: What is the primary task.
• Form: What structure or layout do you want to accomplish.
• Tone: What attitude or emotional style should be used.
• Conditions: What limitations, rules or specific info must the AI adhere to.

As I discovered, all I had to write was a paragraph following the structure, and Figma Make created exactly what I was intending. Of course, there were changes required, but the Point and edit tool made this task a breeze.

Finally, you can share your Figma Make projects with your team or publish them to give stakeholders a glimpse of your ideas. While I noticed that the background image wasn't exactly what I requested, I found the process of changing it a bit frustrating since it needs to be done in the code. What's more, Figma Make projects can’t be opened directly as a Figma Design because they are code-based. But don't worry—this isn't a major issue. I'm confident that the talented team at Figma will soon find an easy way to open Make projects directly in Figma, making everything even smoother!

In the next installment, I explore the world of image generation. 

This should be fun.