> ## Documentation Index
> Fetch the complete documentation index at: https://docs.codejet.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma plugin

> Display inline code and code blocks

## Introduction

Codejet Assistant Figma Plugin is synced with Jet UI Design System. It helps you design and launch your product.

<Frame type="glass">
  <img src="https://codejetphotos.s3.eu-north-1.amazonaws.com/images/figma-plugin-1.png" />
</Frame>

## Video tutorial

Here is a short tutorial on how to use Codejet Assistant Figma Plugin:

<Frame type="glass">
  <iframe width="560" height="415" src="https://www.youtube.com/embed/UkUOx9HMb2Y?si=TsViEGDjkISYGaZO" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen style={{ width: '100%' }} />
</Frame>

## Step-by-step guide

Here, you will find a step-by-step guide on how to use the Codejet plugin to generate code from your Figma design. Please follow the instructions carefully and enjoy the process!

<Steps>
  <Step title="Open Codejet Plugin">
    To use the plugin in Figma, open it from the Plugins section. Alternatively, you can find it on the Community page and launch it from there. Get the plugin [here](https://www.figma.com/community/plugin/1276157706852546687/codejet-ai-ai-figma-to-code-generation).

    <Frame type="glass">
      <img src="https://codejetphotos.s3.eu-north-1.amazonaws.com/images/figma-plugin-2.png" />
    </Frame>
  </Step>

  <Step title="Select Artboard">
    When the Codejet plugin opens, you will need to select the frame of your design that you want to preview. This selection will be added to the preview pane.

    <Frame type="glass">
      <img src="https://codejetphotos.s3.eu-north-1.amazonaws.com/images/figma-plugin-3.png" />
    </Frame>
  </Step>

  <Step title="Generate Code">
    After generating the code, you can manage and view all your converted projects by clicking on "View Code." This action requires logging into Figma, where you’ll be directed to a page listing all projects you've worked on with the Codejet Assistant. Select any project to open it in the Visual Builder.

    <Frame type="glass">
      <img src="https://codejetphotos.s3.eu-north-1.amazonaws.com/images/figma-plugin-4.png" />
    </Frame>
  </Step>

  <Step title="View Projects">
    By clicking "View Code," you will be prompted to log in to Figma. Once logged in, you'll see all the projects you have converted.

    <Frame type="glass">
      <img src="https://codejetphotos.s3.eu-north-1.amazonaws.com/images/figma-plugin-5.png" />
    </Frame>
  </Step>

  <Step title="View Code">
    Select a project to view it in our visual editor, where you can enhance design, download the code or publish it on any domain of your choice.

    <Frame type="glass">
      <img src="https://codejetphotos.s3.eu-north-1.amazonaws.com/images/figma-plugin-6.png" />
    </Frame>
  </Step>
</Steps>