Skip to content

Add from Figma

One of the core features of CodeBuddy IDE is the ability to generate code from designs. It supports the Add from Figma feature button to import design drafts from the built-in Figma into the IDE, accurately converting Figma designs into production code. Below is the process of importing design components from Figma into the IDE.

  1. Under the Craft Agent, Select fromFigma

  2. After entering the official Figma website, log in and authorize.

  3. Upon successful login, the screen will appear as shown below.

  4. Choose the required design draft and open it to enter the editing panel.

  5. In the Layers section, select the required components or regions, and then click the Add to Conversation button in the top-right corner to import the design into the IDE.

  6. Once successfully imported into the IDE, it will be displayed in the conversation panel. At this point, you can input your requirements in the input box to automatically generate production code.

  7. After converting the Figma design into code, the Preview effect is shown below, and you can see that the accuracy is very high.