Comment on page
Adapting Figma & Using Component Library
This documentation page provides a clear guide on how to use Codejet's Components in Figma, and adapt your Figma designs for Codejet.
The first step is to open the Codejet Components (Community) sheet, where you will find the "Foundation" page. This page contains foundational components such as inputs, checkboxes, radios, etc. Feel free to use these components for your UI design and edit their styles according to your needs (just copy it to your designs).
When you copy components, remember to copy whole component.
Please note that their usage is not totally required for Codejet. If you opt not to use them, Codejet will generate all elements as regular divs (meaning there will be no specific tags in the code for buttons, inputs, etc., just divs).
After setting up your foundation, you have two options for designing in Figma:
Design as you want. There are three rules:
- 1.Utilize the autolayout as much as possible. For this, refer to the Create Responsive Designs docs page.
- 2.Use the primary components from the Codejet Components (community) sheet as shown in the Step 1. You can obviously use as well native Figma components.
- 3.Remember that Codejet exports only frames, so that design everything in frames.
This approach ensures that your exported screen remains interactive and responsive after export.
Working with a pre-existing design can be slightly more complex. To make your designs compatible with Codejet, follow the steps below (in this order):
- 1.Your design may contain numerous components with references to external files, to which Codejet does not have access. To avoid this issue, use a figma plugin like "Detach plugin". You can find it here: Detach Plugin. This tool will prevent this error from occurring.
- 2.Ensure you've used autolayout throughout your design. This guarantees that your exported code will be responsive.
- 3.Replace the components you want to be interactive with components from our Codejet Components (community) sheet. This will make your exported screen interactive. For example, an input field designed in Figma will be exported as an interactive input field in the code. Without following this practice, your code will still export, but without any interactive features.i
Remember to not use "Detach plugin" after implementing Codejet Components!
For more information about converting your designs, visit the Figma to React Conversion page in our documentation.