Skip to main content

Using FireJet in Figma Dev Mode

You can use FireJet in Figma Dev Mode to convert your designs to code

Video Tutorial​

Switching to Figma Dev Mode​

When in Figma, you can switch to Figma Dev Mode by either

  1. Pressing Shift+D
  2. Clicking the Dev Mode Toggle on the top right of the figma editor

Dev Mode Toggle Button

Installation​

When in Dev Mode, click on the Plugins tab (Just below the dev mode toggle), and search for FireJet to install the plugin

Install FireJet

Configuring the conversion​

Now you can switch back to the Inspect tab and select the options that you want Available Options

For the code language, you can pick between the following Alt text

For File Output Type, you can choose if you want your output to just be a single component, or if you want FireJet to componentize your components for you

Auto Fix and Fix Misaligned Frames can be used to further improve the quality of your code with our algorithms, but may result in unexpected results.

We recommend setting Auto Fix to true and Fix Misaligned Frames to false by default, and you can find more information on what setting best suits your need here

Converting a Frame​

Once you have configured your settings, click the frame that you want to convert.

After a while, a confirmation dialog will appear at the bottom of the screen. Click Start to begin the conversion once the correct frame is selected

Start button for conversion!

After clicking Start, A loading indicator will appear on the middle right of the editor

Loading Example

Viewing the code​

After a while, your converted component will appear in the center right panel

Code in Inspect Panel

Caveats​

Converting large frames​

Converting large frames uses alot of RAM, and may cause figma to hang or crash

  1. If you are converting a large frame, please be patient.
  2. Try to avoid clicking on large frames while moving around the document.

Conversion may take time​

After clicking on a frame, the conversion process may take some time.

As long as the spinner is spinning, the conversion is still processing If the spinner disappears, and the code does not appear, FireJet may have encountered an issue, and you can report it to us in our discord for us to debug.