Generating Landings in Figma Make

As a front-end developer, I'm not a vibe coder or designer. My goal is to streamline the landing page generation process for our design team and help other front-end engineers focus on more important work instead of repeatedly building marketing landing pages. In my previous post, I compared Figma Sites and Figma Make, and chose Figma Make for our company's needs. Now, let's dive into the actual process of generating a landing page using Figma Make.

Note

Our landing pages are in Persian (Farsi), which adds an extra layer of complexity to the AI generation process. Figma Make needs to handle right-to-left (RTL) text direction and Persian typography correctly.

Warning

What I'm describing here is R&D work tailored for our company's specific workflow. This may not be a general solution for every team or project.

Before jumping into Figma Make, designers need to prepare their designs properly. AI-generated code is only as good as the input it receives. Here are the key guidelines:

Auto Layout is essential for responsive output. Figma Make relies on Auto Layout to understand how elements should behave across different screen sizes. Without it, the generated code will be rigid and break on mobile devices.

Important: The design should include both mobile and desktop versions. This helps Figma Make understand the responsive behavior and generate appropriate breakpoints.

Layer naming directly impacts how well Figma Make understands your design structure. Clear, semantic names help the AI generate better component hierarchies and more maintainable code.

For example:

• Frame 1234 ❌
• Group 56 ❌
• Rectangle 789 ❌
• HeroSection ✅
• CTAButton ✅
• FeatureCard ✅
• NavigationBar ✅

There are Figma plugins that can auto-name layers using AI, but designers should review and refine these names themselves for the best results. The extra effort here pays off significantly in code quality.

The prompt is the most critical part of the Figma Make workflow. A well-crafted prompt ensures the generated code fits seamlessly into your existing architecture. Here's what we need to consider:

In our company, landing page content comes from a third-party CMS via API. The data is dynamic, not hardcoded. This creates a challenge: Figma Make doesn't natively support SSG (Static Site Generation) or API calls during code generation.

Our solution: We built a simple tool where users can paste their CMS API URL. The tool then generates a complete prompt that includes:

• The CMS data structure as a hint (not as mock data)
• Instructions for Figma Make to generate a React component with a data prop

Since Figma Make doesn't natively support SSG, it generates a client-side React app that fetches data at runtime. Based on our prompt, the output will look something like this:

import { useEffect, useState } from 'react';
import ExampleLanding from './ExampleLanding';
import { type APIResponse } from './types';
import './styles/globals.css';

const API_ENDPOINT = 'https://example.com/api';

function App() {
  const [cmsData, setCmsData] = useState<APIResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(API_ENDPOINT);

        if (!response.ok) {
          throw new Error('خطا در دریافت اطلاعات');
        }

        const result: APIResponse = await response.json();
        setCmsData(result);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'خطای نامشخص');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return (
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          minHeight: '100vh',
          fontFamily: 'Vazirmatn, sans-serif',
          direction: 'rtl',
        }}
      >
        در حال بارگذاری...
      </div>
    );
  }

  if (error || !cmsData) {
    return (
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          minHeight: '100vh',
          fontFamily: 'Vazirmatn, sans-serif',
          direction: 'rtl',
          color: '#e11900',
        }}
      >
        {error || 'خطا در بارگذاری اطلاعات'}
      </div>
    );
  }

  return <ExampleLanding data={cmsData} />;
}

export default App;

The key insight here is that ExampleLanding is a pure component that receives data via props. This separation makes it easy to extract and adapt for SSG.

We can copy the ExampleLanding component and related code into our Next.js app, then fetch the data at build time instead of runtime:

export default async function LandingPage() {
  const data = useExampleLandingData();

  return <ExampleLanding data={data} />;
}

With this approach, the landing page is generated at build time, improving performance and SEO while maintaining the exact same UI that Figma Make generated.

Figma Make tends to generate everything with div elements. We explicitly instruct it to:

• Use semantic HTML (header, main, section, nav, footer, etc.)
• Include proper ARIA attributes where needed
• Ensure keyboard navigation support
• Maintain proper heading hierarchy
• Add alt text for images

These instructions make the landing pages usable for all users, not just those with perfect vision and mouse access.

Marketing campaigns typically use UTM parameters in query strings to track campaign performance. We need to:

• Extract UTM parameters from the URL
• Pass them to all CTAs and links
• Preserve them throughout the user journey

This makes the marketing team's job easier and ensures accurate campaign tracking.

Some CMS content includes HTML strings. We must:

• Sanitize HTML content using libraries like dompurify
• Validate UTM parameter values before using them in CTAs
• Prevent XSS attacks through proper escaping

Security isn't optional, even for marketing landing pages.

Once the prompt is ready, we can provide designs and optionally a component library to Figma Make. There are two main approaches:

Provide Figma Make with the complete design (both mobile and desktop) and ask it to generate the entire UI in one go.

Pros:

• Reaches initial completion faster
• Single generation step

Cons:

• Takes a long time to generate
• Less accurate output
• Fixing issues is extremely difficult
• Hard to pinpoint where things went wrong
• Requires extensive manual corrections

Start with a core prompt that establishes context, then generate the landing page incrementally.

Step 1: Generate the Foundation

Without providing any design, give Figma Make a core prompt to create:

• TypeScript types based on CMS data structure
• CSS tokens (colors, spacing, typography)
• Landing page component structure
• Empty section components

This works well because our API design has a meaningful mapping between landing sections and the CMS response, making it easy for Figma Make to understand the structure.

Step 2: Generate Sections One by One

After the foundation is ready, provide designs to Figma Make section by section. For each section:

• Provide both mobile and desktop designs
• Reference the existing types and tokens
• Generate only that section's implementation

Pros:

• More accurate output per section
• Faster generation time per iteration
• Easier to identify and fix issues
• Incremental progress feels more manageable
• Better overall quality

Cons:

• Requires more steps
• Needs careful coordination between sections

Here's a visualization comparing the two approaches over time:

As the chart shows, Approach 1 reaches high progress quickly but then stalls during the lengthy bug-fixing phase. Approach 2 grows incrementally but finishes sooner with higher quality output.

Generating landing pages with Figma Make is a powerful way to bridge the gap between design and development, but it requires careful planning and execution. By following proper design guidelines, crafting a comprehensive prompt, and using the section-by-section approach, we've been able to significantly reduce the time front-end engineers spend on marketing landing pages.

This workflow isn't perfect, and it's tailored to our specific needs — a third-party CMS, SSG architecture, and Next.js stack. But the principles can be adapted: clear design structure, thoughtful prompting, and incremental generation are universally valuable when working with AI-powered code generation tools.