Hallo! Wie geht's? ("Hello, how are you?" in German)
Hoping you are having a fruitful day, today we'll convert Figma components to React (Next.js) components! Which is a super time-saver ✨.
Let's go!
1 - Creating an Amplify project
Go to the AWS Amplify page and click on Build an app with AWS Amplify. If required, sign in/sign up for an AWS account, after that, set the app name to your preferred name and click Confirm Deployment.
2 - Creating our Figma
Open the Figma Community Site and search for AWS Amplify UI Kit and use the original one made by AWS Amplify, or use this direct link:
Click the Duplicate button and edit the sample components as your needs.
3 - Import Figma components to AWS Amplify Studio
On the sidebar in the studio, click UI Library and click on Get Started and paste the Figma file you duplicated and continue.
Then you will get all the components, where you can accept/reject every component alone, or only accept all.
4 - Setup Next.js with the Amplify dependencies
In your terminal, run:
npx create-next-app figma-to-next
Now, just to make sure the app is working, run:
npm run dev
And check localhost:3000, now, the app is working, let's install a few things before importing the components from Amplify:
npm i aws-amplify @aws-amplify/ui-react
Now, also a requirement, be sure that you got Amplify CLI installed on your system, to verify that, run:
amplify -v
5 - Import the components from Amplify to Next.js
Open the studio and click Local Setup Instructions and copy the command, and run it in your Next.js project's root folder, now let's check if the components have been imported by running the following simple command:
ls -la ui-components
Now, you're all done! You can now use your components which are made using Figma in React/Next.js!
Have a nice day ✨! See you!