# Getting Started

This documentation introduces the layout, features, and usage of FlexDesigner.

## Overview

![1742266521118](image/getting_started/1742266521118.png)

The main interface of FlexDesigner consists of three sections:

1. [Page Editor](page_editor.md): This area displays the same effects as Flexbar, allowing you to preview and adjust each interface of Flexbar
2. [Key Editor](key_editor.md): Here you can edit the appearance and functionality of keys
3. [Key Library](key_library.md): Lists all preset/imported keys that you can drag and drop into the page editor or key editor
4. [Toolbar](toolbar.md): Contains file management, software configuration, and other functions.

## Your First Profile

#### **Create a New Profile**

![1743992112936](image/getting_started/1743992112936.png)

#### **Add a Key**

![1743992435420](image/getting_started/1743992435420.png)

1. Select a key from the Key Library and click to drag it out
2. Drag the key to the Page Editor
3. Release the mouse to place the key in an appropriate position

#### **Make Some Changes**

> You can check the [Key Editor](key_editor.md) to learn how to customize keys

![1743992720153](image/getting_started/1743992720153.png)

#### Upload to Device

![1743992793052](image/getting_started/1743992793052.png)

#### All Done!

You can now see this page on your Flexbar!

![1743992816226](image/getting_started/1743992816226.png)

## Next Steps

- Visit the [Create My First Profile](../troubleshoting/create_my_first_profile.md) to learn how to create a profile for an application
- Visit the [Background](background.md) and [Foreground](foreground.md) to learn how to customize a key