> 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 ## Introduction
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="" %} ### 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 list below is a good starting point for planning your app's user interface {% hint style="info" icon="user-robot" %} Bubble's 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's AI Agent](/help-guides/ai/bubble-ai-agent.md) {% endhint %} {% hint style="info" icon="newspaper" %} You can read out 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.
A screenshot of the Bubble editor showing a dashboard interface being built.

By combining elements, you can build interfaces ranging from simple forms to full-featured dashboards.

Our Element section 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 Bubble's *Styles* feature to save stylesheets that can be applied to multiple elements and be 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**: [Styling](/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 ensures that your app looks and behaves well on different devices, such as smartphones, tablets, and desktop computers. Settings up a responsive design eliminates 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 design 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)