Building to Put to Use with Figma Make, Part 1: Creating a Landing Page Draft in 3 Hours with Figma Make and Gemini, a New-Generation Web Production Workflow That Makes Red-Pen Revisions Fast for Busy Executives

Hello! I'm Hashi, a UI designer at Liberogic Inc.

My current concern is that progress on the new landing page (LP) for our accessibility services has been slow.

Our CEO, who oversees the structure of our own website, is incredibly busy with other projects, which I'm grateful for. But at this rate, nothing will move forward...

"Alright, to make the CEO's review a little easier, let's at least put together a rough draft on our end!"

This idea sparked a rapid LP production process using AI (Gemini) and a design automation tool (Figma Make). In this post, I'll share every step of the process along with my honest thoughts along the way, from a designer's perspective.

Goal for this session: Get the CEO's "red ink" feedback by producing a solid rough draft!

Nobody gets it perfect on the first try! Anyway, the key is to throw a ball the CEO can easily catch and respond to. That's exactly it!

Full Steps for Rapid LP Production (It Gets Even Faster Once You're Used to It!)

Here's a realistic breakdown of time spent on the production workflow we tested this time. The part that took the most time was the "iteration" phase, where we repeatedly refined the design to improve its precision.

1. [Analysis] Gemini, what do you think of this landing page? (15 min)
2. [Text Generation] Have Gemini write landing page copy that includes improvement points (15 min)
3. [Prompt Creation] Have Gemini craft the "magic spell" to feed into FigmaMake (5 min)
4. [Design Generation] FigmaMake, let's get a first draft in one shot! (5 min)
5. [Iteration Loop] Improve precision by cycling between analysis and generation (1.5 hours)
6. [Figma Conversion] Import into Figma using the Html to Design plugin (5 min)
7. [Figma Adjustments] Final tweaks to fix layout issues and similar problems (30 min)

Now, let's take a closer look at each step!

STEP 1: [Analysis] Gemini, what do you think of this landing page? (15 min)

First, I'll have Gemini read our existing accessibility page and give me candid, no-holds-barred feedback.

[Sample Prompt for Gemini]

Analyze the landing page about web accessibility at the URL below, and list its strengths and areas for improvement. (continued)

Within seconds, the analysis came back: "'No case studies or customer testimonials, making it hard to picture the concrete benefits after adopting the service'... Ouch, that's painfully accurate... But it's something I couldn't have said myself. Thanks, Gemini!" It put into words a problem I had only vaguely sensed myself.

Alright, let's start by assessing the current state. I built this page myself, but... I need Gemini to call out the things I can't see on my own!

STEP 2: [Text Generation] Have Gemini write landing page copy that incorporates the improvements (15 minutes)

Paste the STEP 1 analysis results and request text that incorporates the suggested improvements.

[Sample Prompt for Gemini]

Based on the previous analysis, please create a text structure for the web accessibility landing page. (omitted) Clearly label any newly added elements as [Sample Text].

Once specific text like "[Sample Customer Testimonial] Company XX: Inquiries from our site increased 1.5x!" shows up, the page really starts to look like a landing page. It's easy to feel like you've done the job right there.

Alright, let's take that list of critiques and hand it straight to Gemini to turn it into polished copy. This is the smart way to use AI! ...Oh, and I should make sure it labels things "[Sample Text]" so I don't get confused later. I tend to jump to conclusions, so...

STEP 3: [Prompt Creation] Have Gemini write the "magic spell" to feed into FigmaMake (5 min)

Share the text outline from STEP 2 and the image of the design you want to create, and have Gemini generate an English prompt for FigmaMake.

Once the text is ready, it's finally time for the design! The most fun part! ...But first, I need to write a "request letter (prompt)" for FigmaMake. My broken English won't get the message across, so I'm leaving this one to Gemini-sensei. Counting on you!

STEP 4: [Design Generation] FigmaMake, over to you! (5 min)

Alright, copy and paste the magic spell, hit Enter, and... here goes! Will it produce a godlike design in one shot? ...Probably not. Or maybe, just maybe? This feeling of anticipation is a bit like a gacha pull, and it's kind of fun.

Copy the generated prompt, paste it in, and click the design generate button. These few seconds of waiting quietly build up the suspense. And then, the first design appears.

Oh, it worked! It still looks rather plain, though... I'll keep going, adjusting the design and refining the copy.

But yes, this is where the real work began.

STEP 5: [Iteration Loop] Improve accuracy through repeated analysis and generation (1.5 hours)

From here on, it's brainstorming time with the AI. While looking at the design FigmaMake generated, I consult Gemini on what I want to change and refine the prompt step by step. It's a steady, unglamorous grind.

"Ah, no, not that way!" I catch myself muttering out loud. I'm probably echoing through the office. Strangely though, this back-and-forth is starting to get fun.

Yep, it didn't work with a single try, of course! I knew it! Though I secretly hoped it might. The real work starts now, a three-legged race with AI. I'm the director, and Gemini is more like the coach, right?

And here is the final output.

It's come together much better than the initial draft. Still... removing or adding unnecessary parts is tedious (probably because I give instructions by translating my Japanese into English, so my intent often doesn't come across).

I figured it was going to be impossible to go any further within FigmaMake, so I took a brute-force approach and converted it to Figma data before making the revisions.

STEP 6: [Figma Conversion] Import into Figma with the Html to Design plugin (5 minutes)

Once the design direction has settled to a certain degree, it's finally time to move the data into Figma. The steps are outlined below.

1. First, publish the design generated in FigmaMake as a web page.
2. Launch the "Html to Design" plugin in Figma.
3. Enter the URL of the published FigmaMake page and run the import!

The plugin you'll use is "Html to Design." Just copy and paste the URL of the page you published in FigmaMake, click the button, and that's it. Your web page gets converted into Figma layers. It's amazing how convenient things have become...

Publishing in FigmaMake

First, publish your FigmaMake file. Click Publish, and the status will switch to Published.

Open the Figma plugin "Html to Design," enter the URL of your published FigmaMake, and run the import!

Open the plugin and paste the URL you copied earlier. Then just click the Import button, and you're done!

After a few minutes, the design exported to Figma will appear.

Finally, switch the status back to unpublished

Once you've finished the process, return to the unpublished state by clicking Unpublish.

Points of Concern

Currently, there are no features such as password-protecting published pages or creating development environments. When using this for renovating corporate websites, be careful about the risk of information leaks.

Generally, this shouldn't be an issue if you only use our own content or create a rough draft with dummy data, so I think it's best to choose based on the project. (Never use it for projects where content cannot be shared externally.)

Alright, things are looking pretty good now! This is where I take over, on my home turf, Figma! Sorry for the wait, partner!

STEP 7: [Figma Revisions] Final adjustments to fix layout breaks, etc. (30 min)

Freshly imported data is still very rough. There are mysterious groupings, text boxes spilling out of place, and plenty of things to nitpick.

From here, it's all about steady, meticulous work. Reapplying auto layout, turning scattered elements into components, adjusting the overall spacing... This extra effort is what raises the design quality and turns it into a proper rough draft.

Here's the finished result.

Further down the landing page, the level of design detail drops off. I'm not sure if that's an inherent limitation of AI or if my instructions were the problem... I'll keep experimenting and refining my approach.

Importing... Hmm, the layout is looking quite lively, more than I expected! Well, AI did its best, so now it's my chance to show my love by tidying everything up.

Summary: Key Takeaways from Designing with AI

What I realized from this production workflow is that AI isn't a "magic wand" but a "capable partner."

• Huge time savings for the first draft: It's far faster than staring at a blank page trying to figure out the structure from scratch.
• The key is the trial-and-error loop: Creating a good design takes persistence in repeatedly refining the conversation with AI.
• Human hands make the final call: Rather than accepting AI output at face value, the quality depends on designers intentionally refining the work to completion.

By the way, when I nervously showed this first draft to our president... "Oh, this is interesting! With this, we can move things forward easily! Having a draft makes a world of difference. Thanks!" That's what he said.

Yes! All that effort paid off... Beer tonight tastes especially good!

That's all for now! The part that actually gets built into the LP will be designed and finalized after the president's markup, and published as [Part 2]!

Why not try creating new designs through collaboration with AI yourself?