Getting Started1

Getting Started

Reactor is a tool that immediately converts Figma designs into pixel-perfect React front-end code. If you are using Material UI components in your designs, the conversion to the functional React app goes even more smooth. Please follow the instructions below to build your first React application with Reactor plugin.

Build your first React app from Figma design with Reactor plugin

  1. Open Figma and install the Reactor Figma plugin. No sign up or credit card is required.

  2. Open the design needs to be converted into React code.
    Screenshot 2

  3. For better conversion make sure the design has auto layout where needed and follow guidelines and recommendations.
    Screenshot 3

  4. Select element or frame need to be converted. It could be the whole page or screen or only a part of it.
    Screenshot 4 Скриншот 5

  5. Open the Reactor plugin and click the “Generate” button.
    Screenshot 6

  6. After plugin processing you will see the list of the warnings found (if any) and options to preview generated code in the browser and for code downloading.
    Screenshot 7

  7. Click on the warnings link to see the issues found and to understand what can be done to improve the output code quality.
    Screenshot 8

  8. Use the “Preview in browser” option to open generated code built as an app in your browser immediately. Check the output quality and follow the guidelines in order to update design or go to the next step to download the generated code.
    Screenshot 9
    If “Preview in browser” option is not available on the plugin screen, there are too many issues found and automatic conversion is not available at the moment for your design. Please follow the guidelines to update the design accordingly and try to use Reactor again.
    Screenshot 10

  9. If the conversion is successfully done and you are satisfied with the results shown by “Preview in browser” option, feel free to download the generated code for free to continue the development in the editing tools you like.
    Screenshot 11

  10. Enjoy the development and don’t forget to leave your feedback in the Figma community about using Reactor! You may also submit issues or questions to the development team in the Figma community or on Reactor official website.