FigAct - Figma to React, React Hooks, React Router and dynamic data display from API call

About this plugin

Convert Figma designs to ReactJS source code with high quality, responsive React, ReactJS, JSX with React Router, React Hooks and Airtable integration with dynamic visualization of data.

You can take this sample template as a reference in order to enhance the accuracy of the ReactJS code which was generated from your Figma Files

https://www.figma.com/community/file/1104105411031025831

Here is the source code generated by FigAct using the above sample template:

https://github.com/nguyentathung943/figact-generated-sample-template-react-code

How does FigAct work?

1. Install the plugin
2. Fill in the credentials as required
3. FigAct will generate the full project of all the frames under the ReactJS folder structure and put them in a zip file
4. Download the generated zip file and extract it into a folder
5. Open your system command line and hit npm install and npm run start to view your project with all frames generated with ReactJS (please make sure that you already have Node.js installed in your local machine)

Why FigAct?

• Turn your design into high quality and responsive ReactJS with navigation and button event within one click with the accuracy rate from 80% to 90%
• Quickly turn design components into real site components with every pixel is accurately positioned according to the original designs
• React Router for frame navigations, you can use interactions (navigate to) from Figma to switch amongst pages in your source code as you perform on Figma
• React Hooks for state management is supported. We use state for special components
• Automated asset management with images are downloaded and imported automatically in the project zip file
• Support SOLID and LINEAR_GRADIENT fill on Figma for every component
• Fonts are imported automatically from Google Fonts
• FigAct can generate recycle component as one of the most interesting feature of React.

Airtable integration with dynamic visualization of data

• You can visualize your data under list and carousel format easily and dynamically with data fetched from your API Service
• FigAct generates the function in your source code to get the data from your API Service or bases on credentials you provided and displays it dynamically if the data is changed from your API service or from your table in
• If you have no API service, we have Airtable integrated with FigAct for you
• Click here to read more and follow some rules to make it work

Limitations

FigAct can turn your Figma designs into ReactJS source code within few seconds per frame which helps you to save tons of effort to do so. However, to make the source code to be generated accurately, there are only few things that you have to comply with. Click here to read some rules.

A few known limitations:

• Not all element types are supported (e.g. pseudoelements, ..)
• Not all CSS properties are supported or fully supported
• Only support onClick action for page navigation
• Types of media (audio, video,...) are not supported
• Only support SOLID and LINEAR_GRADIENT color type
• Images sometimes cannot be downloaded from your figma files
• The size of your frame will be automatically set to 1440px according to the designs standard

Our website

Visit our website for demos and documentation: https://figact.vercel.app

Contact and more

Thanks for downloading and using FigAct

This is our university thesis. If there is any issues or suggestions, please write down so we can listen.

Find us on LinkedIn

www.linkedin.com/in/nguyentathung943

www.linkedin.com/in/nguyen-t-b55476124/

Email: [email protected]

Ho Chi Minh City University of Science

Faculty of Information Technology 

Department of Software Engineering