# Craft your intent on the canvas. Bring the cost of design iteration to zero.

> This page is about FlutterFlow Studio (the visual builder), not FlutterFlow (the app builder you use by describing your app).

URL: https://docs.flutterflow.io/designer

Discover FlutterFlow Designer—the fastest way to design apps. Explore its key features, understand how it works, and start designing your first app with ease.

<p style={{ fontSize: '1.125rem', lineHeight: 1.6, color: 'var(--ink-2)', maxWidth: '640px' }}><a href="https://designer.flutterflow.io/"><strong>FlutterFlow Designer</strong></a> provides the fastest UI generation in the world, without sacrificing quality or control integrated with agents for a seamless design-to-code experience.</p>

<p style={{ fontSize: '0.95rem', color: 'var(--muted)', marginTop: '12px' }}>Available on the web and as a desktop app for macOS and Windows.</p>

<iframe src="https://www.youtube.com/embed/NhH8j169voo" title="FlutterFlow Designer Demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style={{ display: 'block', width: '100%', height: 'auto', aspectRatio: '16 / 9', border: 0, borderRadius: 'var(--r-page)' }}></iframe>

## Get started

- [Quickstart](https://docs.flutterflow.io/designer/quickstart): Generate your first app design from a simple text prompt and export it in just a few steps.
- [Tour the workspace](https://docs.flutterflow.io/designer/workspace): Get familiar with the panels, canvas, and tools that make up the Designer environment.

## Explore the Designer

- [Components](https://docs.flutterflow.io/designer/components): Build reusable UI blocks with variants and parameters to keep your design system consistent across screens.
- [Import & Export](https://docs.flutterflow.io/designer/import): Bring existing FlutterFlow Studio screens into Designer or hand off designs back to FlutterFlow Studio, PNG, or agent-ready prompts.
- [Integrations](https://docs.flutterflow.io/designer/integrations): Integrated with agents for a seamless design-to-code experience. Connect Designer with Claude, Gemini, and other AI tools to edit designs in natural language.

FlutterFlow Designer empowers both non-technical creators and development teams to move faster during early UX and UI exploration, then hand off straight to code.