Autonomy VS Code Extension Documentation

Welcome to the Autonomy VS Code Extension Documentation! This guide will walk you through the installation process and usage of the Autonomy extension, which enables you to generate code from Figma designs.

Introduction

Autonomy is a comprehensive AI-driven development tool. It integrates directly into developers' IDEs, using a Large Language Model (LLM) alongside micro-agents to offer code analysis, improvement suggestions, and auto-refactoring. Emphasizing traceability, Autonomy encapsulates changes within git-patches. Its unique strength lies in assimilating project context from supplementary documents like User Stories, Style Guides, and Software Design Documents. Autonomy serves three primary users: ongoing developers, newcomers to the code, and team leads overseeing project management.

Installation

1. Open Visual Studio Code (VS Code).
2. Go to the Extensions view by clicking on the squares icon on the sidebar or by pressing Ctrl+Shift+X.
3. Click on the three dots menu (...) and select "Install from VSIX...".
4. Navigate to the folder where you saved the Autonomy VSIX package.
5. Select the VSIX package and click "Open" to install the extension.

Setup

After installing the Autonomy extension, follow these steps to set up Autonomy:

1. Click on the Autonomy logo in the sidebar to open the Autonomy panel.
2. In the Autonomy panel, enter the Token and the Organization URL you received from us. Both can be found in the mail we sent you.

   NOTE: the Autonomy token and the Figma token are different. Make sure to enter each token into its respective field.

3. After logging in, enter your name and role to continue.
4. Wait for Autonomy to study your project and understand your style.

Generate Figma access token and link:

• Generate Token

1. Log in to your Figma account.
2. Head to Settings from the top-left menu inside Figma.
3. Find the Personal access tokens section.
4. Click Generate new token to open the configuration modal.
5. Set the expiration and scopes for the token. The scopes will determine which endpoints the token has access to.
6. Click Generate token. This will be your only chance to copy the token, so make sure you keep a copy of this in a secure place.

• Generate Link

1. Open your Figma project.
2. Right-click on the page or the element you want to generate code for.
3. Choose Copy as and then Copy link to selection

Using Autonomy

Generating Code from Figma designs:

• Upload Design

1. Click on the Autonomy logo in the sidebar to open the Autonomy panel.
2. In the Autonomy panel, click on the Magician Agent in the agent's carousel menu.
3. Enter your Figma access token in the Personal Access Token field.
4. Enter the Figma design URL in the "Design URL" field.
5. Click on the Prepare button to load the design.
6. After clicking on Create Code, a menu will open on the right side of the screen.

• Choose Element

Now you can choose the element you want to create code for

1. The Magician recognizes the components of the Figma page you uploaded.
2. You can choose an element and split it into smaller components.
3. You may delete unnecessary components.
4. When you're ready, choose the element you want and click on Done.

• Choose Components

• The Magician will suggest components as candidates to be used in the code generation.
• You can choose which of the components to use.
• You may add additional components to the list.

• Code Generation

Wait for the Magician to transform Figma design into context-related code! When the process is done, it will appear as Completed in the Recent Breakdowns section.

For more information

• Our website

Enjoy!