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.

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. Click Start and wait for Autonomy to study your project and understand your style.

Using Autonomy

Magician Agent

Magician Configuration

NOTE: this step is optional. The configuration exists to allow you to customize the process and to improve the result

1. In the Autonomy panel, click on the Magician Agent in the agent's carousel menu.
2. Click the gear icon to open the configuration menu
3. In the local component files you can select the folders containing the components you’d like the Magician to work with
4. You can choose the bootstrap file, which serves as the entry point for your project
5. You can configure the run and install commands
6. Select between Lite Mode and Full Mode
   • Full Mode: use the local infrastructure to render the generated code allowing you to catch runtime errors and to improve the result visually
   • Lite Mode: run without compiling the project. It translates to faster runtimes but may reduce quality

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

Generating Code from Figma designs:

• Upload Design

1. Enter your Figma access token in the Personal Access Token field.
2. Enter the Figma design URL in the "Design URL" field.
3. Click on the Prepare button to load the design.
4. After clicking on Connect, a menu will open on the right side of the screen.

• Choose Element

1. Choose the element you want to create code for
2. Use the Split button or double-click to Split an element into smaller elements
3. Cmd+click (or Ctrl+click on Windows) on elements and use the Group button to merge them into one
4. When you're ready, choose the element you want and click 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 the Figma design into context-related code! When the process is done, it will appear as ready in the Recent Breakdowns section.

• Preview and Ask For Changes

• You can click the Preview button to open a browser tab of the rendered code

  NOTE: Preview is only enabled in Full Mode

• We encourage you to use the textbox to submit requests for refining the code
• You can click Show Diff to see the changes and choose to Accept or Revert them

Visualizer Agent

The Visualizer generates flowcharts, mind maps, and other diagrams to represent your code. It also provides detailed, plain-language explanations, all designed to make your code more accessible and easier to understand

1. You can select a directory, choose a file, highlight a block of code, or simply place your cursor within the code
2. Right-click, choose Run Autonomy, and then select Visualizer Agent
3. You can view and save the generated diagrams and explanations in the right-hand panel
4. In the agent carousel, select the Visualize my code to explore all previous breakdowns

For more information

• Our website
• Tutorial videos playlist

Enjoy!