Welcome to Beatrix

This extension automates updating your environment with new versions of projects that use Beatrix.

Prerequisites

1. You need an interface project created in figma.

2. You need the figma file-id, see how to get it in the image below,

(Get file Id)

Quick Start

Let's start with the configuration, which is very simple.

1. In the root folder of your project create a file .bea.json.

2. Copy the content below into the file and make the necessary changes.

   {
       "version": "1.0.0", // this is the current version
       "figma_project_id": "Your Figma fileId",
       "user_name": "Your Name"
   }
   

3. Now you are ready to use Beatrix .

How to use

The extension summarizes all available versions to be consumed by the developer. With it, the developer in his work environment can evaluate the new version, talk to the designer about problems identified in the new version made available by Beatrix before getting the code from the repository.

1. You can open the extension from the Command Palette (Ctrl+Shift+P on Linux/Windows and Cmd+Shift+P on Mac) and then type Open Beatrix.

(Extension opened image)

With the extension open you have several relevant information:

• Updated: When the extension was created.

• Author: Who created this version.

• Features: The new pages that are in this version.

• Comments: All messages between all persons about this version.

  Step by step

  1. Design creates a new version with new screens or changes.
  2. All developers receive notification in vscode of new version available.
  3. The developer can check the generated code by clicking on the Preview button to preview the generation result.
  4. If he identifies a problem in the generated code or in the visual result, he can send a message in the Comments section for the design to reevaluate.
  5. If the generation result is as expected, he can click on the Approve button, to update the Beatrix branch with this new version.
  6. The backend will do all that work. When this code is available on the Beatrix branch the button will change its label to Merge.
     ⚠️ Note: This process is asynchronous and you can continue working normally, however it is extremely fast.