> For the complete documentation index, see [llms.txt](https://docs.buzzy.buzz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buzzy.buzz/working-with-buzzy/buzzy-for-figma.md).

# Buzzy for Figma

Buzzy for Figma lets you turn a marked-up Figma design into a working Buzzy app with real data, live forms, navigation, user-generated content, and responsive layouts.

Use this path when the design file is the source of truth, when a designer is leading the app experience, or when you want to keep iterating visually in Figma after an app has been created.

## Start from Figma

The usual Figma path is:

1. Design the screens in Figma.
2. Use Buzzy markup conventions to identify screens, forms, fields, buttons, menus, data-driven lists, images, galleries, and responsive behavior.
3. Use the Buzzy Figma plugin to connect to Buzzy.
4. Publish the marked-up design as a Buzzy app.
5. Test the live app with real data and real forms.

For a hands-on walkthrough, start with [Getting Started with Figma](/getting-started-with-buzzy/getting-started-with-figma.md).

## Keep Iterating with Figma and Buzzy

After the app exists, Figma remains useful for visual and structural changes:

* update layouts, sections, responsive behavior, and visual hierarchy
* refine themes, typography, colors, and components
* add or adjust screens and navigation
* update forms, fields, galleries, images, menus, and data-driven content
* publish changes back to the Buzzy app

Use Buzzy Workspace alongside Figma for the parts that are better managed as app configuration:

* datatables, fields, relationships, sample data, and row permissions
* People, Teams, Organizations, and app settings
* functions, constants, APIs, MCP, and Custom MCP exposure
* tests, security review, publishing, and deployment

## Figma, AI, and Builder MCP Together

Figma is not isolated from the other creation paths.

* Start with [Buzzy AI](/working-with-buzzy/buzzy-ai.md), then refine the generated app in Figma.
* Start with Figma, then use Buzzy AI or the Workspace to refine data, flows, screens, and theme.
* Use [Builder MCP](/the-building-blocks/mcp/buzzy-builder-mcp.md) for staged agent-assisted changes when you need deeper inspection, code widgets, functions, validation, or test-oriented edits.

## Table of Contents

* [About Buzzy for Figma](/working-with-buzzy/buzzy-for-figma/about-buzzy-for-figma.md)
* [Learning Figma](/working-with-buzzy/buzzy-for-figma/learning-figma.md)
* [Creating a New App Directly in Figma](/working-with-buzzy/buzzy-for-figma/creating-a-new-app-directly-in-figma.md)
* [Automarkup](/working-with-buzzy/buzzy-for-figma/automarkup.md)
* [Responsive layouts](/working-with-buzzy/buzzy-for-figma/responsive-layouts.md)
* [Responsive layout checklist](/working-with-buzzy/buzzy-for-figma/responsive-layout-checklist.md)
* [Overflow and scrolling](/working-with-buzzy/buzzy-for-figma/overflow-and-scrolling.md)
* [Forms and fields](/working-with-buzzy/buzzy-for-figma/forms-and-fields.md)
* [Images and galleries](/working-with-buzzy/buzzy-for-figma/images-and-galleries.md)
* [Logging users in to your app](/working-with-buzzy/buzzy-for-figma/logging-users-in-to-your-app.md)
* [Theming](/working-with-buzzy/buzzy-for-figma/theming.md)
* [Troubleshooting Buzzy for Figma](/working-with-buzzy/buzzy-for-figma/troubleshooting-buzzy-for-figma.md)
* [Plugin error messages](/working-with-buzzy/buzzy-for-figma/plugin-error-messages.md)

## Resources

* [The Buzzy Figma plugin](https://www.figma.com/community/plugin/980407395621457657)
* [Buzzy Figma templates and files](https://www.figma.com/@buzzy)
* [The Building Blocks](/the-building-blocks/the-building-blocks.md)

## Support

* [Discord community forum](https://discord.gg/qt7svhCMbj)
* [Email support@buzzy.buzz](mailto:support@buzzy.buzz)

{% hint style="info" %}
**What is Figma?** [Figma](https://www.figma.com/about/) is a collaborative interface design tool used by product, design, and development teams.
{% endhint %}