> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/help-guides/design.md).

# Design

Design is the look and feel of your app. Learn how Bubble's elements, styling tools, and responsive engine help you build anything from simple forms to full SaaS apps.

## Why design matters

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2FlfapddrhgHeq5IJJHn6N%2Flaptop-bubble-design.jpeg?alt=media&amp;token=e2575f0f-5908-464f-b0bf-2f08af3bac00" alt="A laptop showing a signup page with email and password fields, a Sign up button, and a photo of a smiling person on a yellow background."><figcaption></figcaption></figure>

Design is about the look and feel of your app, including its visual appeal, the experience it delivers, and the emotions it evokes in users. Working on design means focusing on the aesthetics: the layout of elements, typography, colors, and effects like borders, shadows, and transitions.

Good design serves several important purposes. A thoughtful design creates an intuitive user interface, making the app easy and enjoyable to navigate. It also helps you establish a consistent brand identity, making your app recognizable and helping it stand out.

{% embed url="<https://www.youtube.com/watch?v=21n8iSE6Xwk&list=PLoNVJrdvQQYlGHGcKDCpbgAv1lruNA8db&index=3>" %}

### Great design solves problems

If you think about it, most apps are really a polished layer on top of machinery that simplifies a task the user would otherwise find complicated.

Take a marketplace for finding freelancers, a task management app, or an e-commerce store for buying art. None of these tasks are impossible to solve without an app, but a good app makes them simpler and more enjoyable. Great app ideas make it easy for users to solve a problem and store their data securely.

This is why design isn't just about making your app look good. The goal of any well-designed app is to combine appealing visuals with user-friendliness. There are several aspects to a successful design, and the sections below are a good starting point for planning your app's user interface.

{% hint style="info" icon="user-robot" %}
The Bubble AI Agent can generate polished, on-brand designs from a natural-language description. Try prompting it with the layout, tone, or specific components you want, and let it handle the initial setup so you can focus on refining the details.

**Article:** [Bubble AI Agent](/help-guides/ai/bubble-ai-agent.md)
{% endhint %}

{% hint style="info" icon="newspaper" %}
You can read our more extensive guide on the theory behind designing user interfaces (UI) and thinking about the user experience (UX) in the article below:

**Article:** [Design and UX](/help-guides/getting-started/building-your-first-app/design-and-ux.md)
{% endhint %}

***

## Bubble's design tools

Bubble offers a unique way to build apps: 100% WYSIWYG[^1] tools to draw your app on an empty canvas and preview[^2] the design immediately. There's no code to write or unexpected results.

By combining Bubble's design tools, you can create layouts that are consistent, pixel-perfect, fully responsive, and compatible across devices and browsers. If you're building with [AI](/help-guides/ai/bubble-ai-agent.md), these tools let you fine-tune the results after the initial generation, or keep prompting the Agent to adjust things for you.

### Elements

Your app's user interface is made up of elements: input fields, buttons, images, checkboxes, calendars, icons, and more, each serving a specific purpose. Bubble's WYSIWYG visual editor lets you pick and place elements directly on the page instead of writing code, and preview the result immediately.

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2F68DvddgkWDAO7OSA8o3r%2Fblog-dashboard-bubble-design.png?alt=media&amp;token=523de993-5fbd-40b1-b459-63d3a4a79d63" alt="The Bubble editor with a blog dashboard page on the canvas, the Elements Tree and element list on the left, and the page&#x27;s properties on the right."><figcaption><p>By combining elements, you can build interfaces ranging from simple forms to full-featured dashboards.</p></figcaption></figure>

The Elements article series covers the different element types and how they can be combined to build a virtually limitless number of different user interfaces.

**Article series:** [Elements](/help-guides/design/elements.md)

### Styling

Every visible element on your page can be styled in different ways. You can apply styling on a per-element basis, or you can use styles to save stylesheets that can be applied to multiple elements and controlled from one central place.

Bubble also allows you to set up [font and color variables](#user-content-fn-3)[^3] that apply those properties to styles and elements across your app.

**Article series:** [Variables and styles](/help-guides/design/variables-and-styles.md)\
**Core reference:** [List of styling properties](/core-resources/elements/styling-properties.md)

### Responsive design

Bubble's responsive engine helps your app look and behave well on different devices, such as smartphones, tablets, and desktop computers. Setting up a responsive design removes the need to create separate versions of a website for different devices.

**Article series:** [Responsive design](/help-guides/design/responsive-design.md)\
**Core reference:** [List of responsive properties](/core-resources/elements/responsive-properties.md)

***

## Additional design resources

In addition to Bubble's tools for building your own designs, we have different resources that can help you set up the design even faster.

**Article section:** [Design and UX resources](/help-guides/getting-started/building-your-first-app/design-and-ux.md#design-resources)

### Importing from Figma

Figma is a popular and useful tool for the first stage of prototyping and design, and Bubble has a tool for importing designs from Figma into Bubble.

**Article:** [Importing from Figma](/help-guides/design/importing-from-figma.md)

[^1]: WYSIWYG stands for *What You See Is What You Get*.

    In the Bubble editor, this means the layout and elements you arrange in the editor look and behave the same way when previewed or deployed live. You can build your app visually and see it exactly as your users will experience it.

[^2]: Every change that you make in the Bubble editor is immediately visible in the preview of your app.\
    **Article:** [Previewing your app](/help-guides/getting-started/navigating-the-bubble-editor/previewing-your-app.md)

[^3]: The font and color variables in the [**Styles**](/help-guides/design/variables-and-styles/styles.md) tab let you save colors and fonts to reuse throughout your app. When you change a variable, every style and element linked to it updates automatically.\
    **Article:** [Color variables](/help-guides/design/variables-and-styles/color-variables.md)\
    **Article:** [Font variables](/help-guides/design/variables-and-styles/font-variables.md)