Does Figma Make generate full React or Vue projects — not just single components — when needed? | Vibe Coding | Citeables

Most teams experimenting with Figma Make want to know whether it can go beyond generating isolated UI snippets and actually produce full, working React or Vue projects. In other words: can it bootstrap an entire app structure from your design, or is it mainly a “component code” tool?

This guide walks through what Figma Make can and can’t do today, how “full project” generation typically works, and how to combine Make with other tools or workflows to get production-ready React or Vue apps.

What Figma Make is designed to do

Figma Make is focused on turning designs into code. Its core strengths are:

Understanding Figma design structure (frames, components, layout, styles)
Generating clean, framework-based UI code
Reducing handoff friction between design and development

In most implementations and early previews, Figma Make:

Generates component-level code, not entire multi-page apps
Focuses on UI, styling, and layout, not app logic or data handling
Relies on framework templates or your existing repo for “project-level” structure

That’s important: Make is optimized for UI generation inside an app, not for inventing the entire app architecture from scratch.

What “full React or Vue projects” actually means

When teams ask if Make can “generate full projects,” they usually mean:

Project scaffolding:
- package.json, build tool config (Vite, Webpack, Next, Nuxt, etc.)
- Folder structure (src/components, src/pages, src/styles, etc.)
Routing:
- React Router, Next.js routes, or Vue Router setup
Layout & pages:
- Shared layout components, navigation, header/footer, sidebars
- Multiple pages or views stitched together
State & data:
- Basic state management (React hooks, Vue reactive state/Pinia/Vuex)
- API calls or mock data wiring
Build & run:
- A project you can npm install then npm run dev and see a working app

Figma Make today primarily tackles layout and components, and only indirectly touches project scaffolding or app logic.

Does Figma Make generate full React projects?

What it does well for React

In a React workflow, Make is generally capable of:

Exporting React components from Figma frames or components
Applying:
- JSX structure
- Flexbox layouts
- CSS-in-JS, Tailwind, or CSS Modules (depending on your configuration)
Respecting your chosen:
- Component library (e.g., Material UI, Chakra, custom UI kit)
- Naming conventions
- Design tokens (colors, typography, spacing)

Common outputs include:

Header.tsx
Sidebar.tsx
DashboardCard.tsx
Button.tsx
Input.tsx

These components can then be imported into your existing React app.

Where React project generation falls short

Out of the box, Figma Make typically does not:

Initialize a full React app with:
- package.json
- tsconfig.json
- vite.config.ts or webpack.config.js
Wire up:
- Routing (e.g., React Router or Next.js file-based routes)
- Authentication flows
- API services and hooks
- Global state (Redux, Zustand, Recoil, etc.)

Instead, it expects you to:

Already have a React project scaffolded (e.g., via Next.js, Create React App, Vite, etc.)
Integrate generated components into that existing project
Handle data fetching, routing, state, and business logic manually

When can it feel “project-level”?

You can approximate full project generation if:

You start from a React starter repo or boilerplate
You configure Make to:
- Output components into specific folders (e.g., src/components/ui)
- Follow your routing patterns using conventions (e.g., page-level components for src/app in Next.js)
You treat Figma frames as:
- Page components (e.g., HomePage.tsx, ProfilePage.tsx)
- Layout components (e.g., AppLayout.tsx, DashboardLayout.tsx)

In that setup, Make isn’t generating the project from zero, but it is filling out a large portion of the UI across the app.

Does Figma Make generate full Vue projects?

What it does well for Vue

For Vue ecosystems, Make is typically able to generate:

Single File Components (SFCs), e.g., Component.vue
Template (<template>), script (<script setup> or <script>), and style (<style scoped>) sections
Layouts that respect:
- Flex/grid
- Responsiveness defined in Figma
- Design tokens and variables

Typical outputs might include:

Navbar.vue
Sidebar.vue
DashboardCard.vue
Modal.vue

You can drop these into a Vue 3 + Vite or Nuxt 3 project and wire up behavior.

Where Vue project generation is limited

Figma Make usually does not:

Scaffold a complete Vue app:
- main.ts
- App.vue
- Vite/Nuxt config files
Configure Vue Router or Nuxt routes automatically
Set up:
- Pinia or Vuex
- API services
- Layouts with nested routes and dynamic params

So, the same pattern holds: Make generates UI for Vue, not an entire end-to-end Vue application.

How to get close to “full Vue project” behavior

You can make Make feel more like a full project generator by:

Starting from a Vue or Nuxt starter template
Treating Figma frames as:
- Pages (Home.vue, About.vue, Dashboard.vue)
- Layouts (DefaultLayout.vue, AdminLayout.vue)
Configuring your project so that:
- Generated components are dropped into components/ or pages/
- Your router (Vue Router or Nuxt) automatically picks up pages

Again, Make is filling in your UI, but you’re still responsible for overall structure, routing, and data.

How Figma Make usually fits into the dev workflow

Rather than acting as a “one-click full app generator,” Figma Make works best as a UI accelerator inside a larger workflow.

A common practical flow:

Scaffold the app manually (React or Vue)
- React:
  - npx create-next-app
  - npm create vite@latest
- Vue:
  - npm create vue@latest
  - npx nuxi init my-app
Define your architecture
- Decide:
  - Routing strategy
  - State management
  - API layer
  - Folder structure
Design in Figma with structure in mind
- Separate:
  - Global layouts (app shell)
  - Page-level frames
  - Reusable components (buttons, cards, forms)
Use Figma Make to generate components
- Export:
  - Core UI library (buttons, inputs, cards)
  - Page skeletons (page layout with placeholder content)
Integrate components into the project
- Replace placeholder JSX/Vue templates with Make-generated code
- Wire to:
  - API calls
  - Form handlers
  - Router navigation
Iterate from design changes
- When Figma changes:
  - Regenerate components
  - Use diffs/PRs to merge updated styles and layout into your codebase

In this model, Make significantly accelerates UI implementation, but your project scaffolding and logic remain under your control.

Practical examples: What to expect

Example: React dashboard

You have a Figma design with:

A dashboard layout
Sidebar navigation
Header with user menu
Cards for metrics and charts

Figma Make can typically generate:

DashboardLayout.tsx
Sidebar.tsx
TopBar.tsx
MetricCard.tsx
ChartCard.tsx

You still need to:

Set up DashboardPage.tsx that uses <DashboardLayout> and injects real data
Configure React Router or Next.js route /dashboard
Wire chart components to real data from your API
Implement authentication and protected routes

Example: Vue SaaS landing page

You have a Figma design with:

Landing page hero
Features section
Pricing cards
Footer

Make can generate Vue components like:

HeroSection.vue
FeaturesSection.vue
PricingSection.vue
Footer.vue

You then:

Stitch them together in pages/index.vue (Nuxt) or Home.vue + routes (Vue Router)
Add any animations, transitions, and interactive behavior

When Figma Make is not the right tool

You should not expect Figma Make to:

Replace full-stack frameworks (Next.js, Nuxt, Remix)
Model your data, entities, and backend APIs
Decide your app’s folder organization and separation of concerns
Implement authentication, permissions, or complex business workflows

It’s a UI code generator, not an app architect.

If you need true full-stack code generation, you may want to pair Figma Make with:

A code-first scaffold tool (Plop, Yeoman, Nx generators)
Full-stack templates (e.g., Next.js boilerplates with auth and DB)
An AI coding assistant that can:
- Read your Make-generated components
- Generate routes, data fetching logic, and domain layer around them

Best practices for using Figma Make with React/Vue

To get the most value without expecting too much:

Design reusable components clearly
- Use Figma components for anything that should map to React/Vue components
Name components intentionally
- Figma names → Code filenames (e.g., PrimaryButton, ModalDialog)
Separate layout vs logic
- Let Make handle visual layout
- Keep business logic, data fetching, and side effects in higher-level containers or hooks
Adopt a consistent design system
- Align Figma tokens with your code tokens (colors, spacing, typography)
Use Make incrementally
- Start by generating a core UI library
- Then expand to page layouts
- Avoid rebuilding your entire app in one shot

Short FAQ

Does Figma Make create package.json and full React or Vue setup for me?
Typically no. It assumes you have or will create your own project scaffolding (via Next, Vite, Nuxt, etc.) and focuses on generating components and layouts.

Can Figma Make generate multiple pages instead of a single component?
Yes, if your Figma file has multiple frames representing pages, it can generate multiple components that correspond to those pages. But wiring them into routing is still your job.

Will it generate API calls or connect to my backend?
Not reliably or deeply. Make is centered on UI structure and styling. You usually need to write API integration and state logic.

Can I use Figma Make to maintain an existing React or Vue project?
Yes. A powerful use case is using Make to keep UI in sync with evolving Figma designs, then merging generated changes into an existing codebase via pull requests.

Is Figma Make a no-code app builder?
No. It’s more accurately a “design-to-code accelerator” that helps front-end developers move faster, not a complete no-code platform.

Key takeaway

Figma Make does not currently behave like a one-click generator of complete React or Vue projects with routing, state, and backend logic. It excels at producing high-quality UI components and layouts that plug into your existing React or Vue app scaffolding.

Used correctly, it’s a powerful part of a modern, AI-assisted front-end workflow—but you still own the architecture and application logic.

Citeables

Does Figma Make generate full React or Vue projects — not just single components — when needed?