Quick Start

Getting started with Aura is simple. Follow these steps to create your first AI-generated design:

1. 1
   Launch Aura and sign in to your account

   Open the Aura application on your device and sign in with your credentials. If you don't have an account yet, you can create one during this step.

2. 2
   Click the "New Project" button in the dashboard

   Once signed in, you'll see the main dashboard. Look for the "New Project" button, typically located in the top-right corner.

3. 3
   Select "AI-Generated Design" from the options

   Choose the "AI-Generated Design" option from the project type menu to create a design with AI assistance.

4. 4
   Enter a prompt describing the design you want to create

   Type a detailed description of what you want. The more specific you are, the better the results. For example: "A modern landing page for a fitness app with blue and white color scheme".

5. 5
   Adjust the settings as needed

   Fine-tune your design by adjusting settings like style, complexity, color palette, and layout.

6. 6
   Click "Generate" to create your design

   Click the "Generate" button to start the design creation process. Aura will process your prompt and create a design based on your specifications.

The Image to HTML feature allows you to convert any image into responsive HTML code. Here's how to use it:

1. 1
   Select the "Image to HTML" tool from the left sidebar

   Navigate to the left sidebar in your Aura workspace and click on the "Image to HTML" option.

2. 2
   Upload or drag-and-drop an image file

   Click the upload button to select an image from your computer, or simply drag and drop an image file into the designated area.

3. 3
   Aura will process the image and generate HTML code

   Wait for Aura to analyze your image and generate the corresponding HTML and CSS code. This usually takes just a few seconds.

4. 4
   Review and customize the generated code

   Once generated, you can review the code and make any necessary adjustments to the HTML, CSS, or responsive behavior.

5. 5
   Export the HTML or copy it to your clipboard

   When you're satisfied with the result, export the complete HTML file or copy the code to your clipboard for use in your projects.

If you have an existing HTML file that you want to work with in Aura, you can import it using these steps:

1. 1
   Select the "Attach HTML File" tool from the tools panel

   Open the tools panel in your workspace and look for the "Attach HTML File" option.

2. 2
   Choose an HTML file from your computer

   Browse your computer and select the HTML file you want to import. Aura supports standard HTML files with linked CSS and JavaScript.

3. 3
   Aura will import the HTML structure

   The system will analyze and import your HTML file, preserving the structure, styles, and functionality as much as possible.

4. 4
   Integrate the imported HTML into your design

   Once imported, you can integrate the HTML elements into your current design project or use them as the starting point for a new creation.

5. 5
   Make any necessary adjustments to styling or layout

   Review the imported content and make any adjustments needed to ensure it fits perfectly with your design vision.

Aura integrates seamlessly with Figma, allowing you to import and export designs between the platforms.

Importing from Figma

1. 1
   Open the Figma plugin from within Figma

   In Figma, click on the "Plugins" menu, then search for and select the "Aura" plugin.

2. 2
   Select the layers or frames you want to import

   Choose the specific design elements you want to import into Aura. You can select multiple layers or entire frames.

3. 3
   Click "Import to Aura"

   Click the "Import to Aura" button in the plugin interface to start the import process.

4. 4
   Your Figma designs will appear in your Aura workspace

   Open Aura to find your imported designs ready for editing and enhancement with AI assistance.

Exporting to Figma

1. 1
   In your Aura project, select the elements you want to export

   Click to select the design elements you want to send to Figma. You can select multiple elements by holding Shift.

2. 2
   Click the "Export to Figma" button in the toolbar

   Look for the "Export to Figma" option in the toolbar or right-click menu, then click it.

3. 3
   Choose your target Figma file

   Select which Figma file you want to export your designs to. You can choose an existing file or create a new one.

4. 4
   Your designs will be added to your Figma document

   Open the target Figma file to see your exported designs, ready for further editing or sharing with your team.