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 Fileshttps://www.figma.com/community/file/1104105411031025831Here is the source code generated by FigAct using the above sample template:https://github.com/nguyentathung943/figact-generated-sample-template-react-codeHow does FigAct work?Install the pluginFill in the credentials as requiredFigAct will generate the full project of all the frames under the ReactJS folder structure and put them in a zip fileDownload the generated zip file and extract it into a folderOpen 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 designsReact Router for frame navigations, you can use interactions (navigate to) from Figma to switch amongst pages in your source code as you perform on FigmaReact Hooks for state management is supported. We use state for special componentsAutomated asset management with images are downloaded and imported automatically in the project zip fileSupport SOLID and LINEAR_GRADIENT fill on Figma for every componentFonts are imported automatically from Google FontsFigAct can generate recycle component as one of the most interesting feature of React.Airtable integration with dynamic visualization of dataYou can visualize your data under list and carousel format easily and dynamically with data fetched from your API ServiceFigAct 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 inIf you have no API service, we have Airtable integrated with FigAct for youClick here to read more and follow some rules to make it workLimitationsFigAct 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 supportedOnly support onClick action for page navigationTypes of media (audio, video,...) are not supportedOnly support SOLID and LINEAR_GRADIENT color typeImages sometimes cannot be downloaded from your figma filesThe size of your frame will be automatically set to 1440px according to the designs standardOur websiteVisit our website for demos and documentation: https://figact.vercel.appContact and moreThanks for downloading and using FigActThis is our university thesis. If there is any issues or suggestions, please write down so we can listen.Find us on LinkedInwww.linkedin.com/in/nguyentathung943www.linkedin.com/in/nguyen-t-b55476124/Email: [email protected] Chi Minh City University of ScienceFaculty of Information Technology Department of Software Engineering