> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/devlink/design-guidelines/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Design guidelines overview

> Principles and best practices for designing Webflow components that are reusable, consistent, and export cleanly to React.

This section is dedicated to designers and developers working within the Webflow Designer, focusing on principles and best practices for creating components that are reusable, consistent, and export cleanly for use in React applications. Understanding these guidelines will help ensure a smooth transition from design to code.

### Key areas:

#### [Component architecture](/devlink/docs/component-export/design-guidelines/component-architecture)

Principles for designing components in Webflow to ensure clean export.

#### [Element settings](/devlink/docs/component-export/design-guidelines/element-settings)

Best practices for working with element settings to ensure your components are semantic, accessible, and easily integrated into React.

#### [Props and slots in exported components](/devlink/docs/component-export/design-guidelines/props-slots)

How to create and expose custom properties and slots in Webflow Designer for use in React.

#### [Interactions](/devlink/docs/component-export/design-guidelines/interactions)

How Webflow interactions map to exported components and what is supported.

> Principles and best practices for designing Webflow components that are reusable, consistent, and export cleanly to React.

## Docs

- [Component architecture](https://developers.webflow.com/devlink/docs/component-export/design-guidelines/component-architecture.md): Principles for designing components in Webflow to ensure clean export
- [Element settings](https://developers.webflow.com/devlink/docs/component-export/design-guidelines/element-settings.md): Principles for element settings in Webflow to ensure clean export
- [Props and slots](https://developers.webflow.com/devlink/docs/component-export/design-guidelines/props-slots.md): How to create and expose custom properties in Webflow Designer for use in React.
- [Interactions](https://developers.webflow.com/devlink/docs/component-export/design-guidelines/interactions.md): Principles for interactions in Webflow to ensure clean export