Search for a command to run...
I'm a software developer based in the United Arab Emirates 🇦🇪. I enjoy coding open-source projects that solve unique, out-of-the-box problems. I love combining my hobbies like design, coding and building various cool projects with Raspberry Pi and IoT. Obsessed with Automation and Software Development.
No comments yet. Be the first to comment.
Save. Search. Share.
Learn more about Hashnode AI
Originally published on DevDojo Authentication is the most thing that a user does on a website, logging in or out, and it's necessary to take your application's authentication to the next level with password-less authentication. 🚀 This article will...
Learn more about the role of AI in debugging in the future
ChatGPT is a state-of-the-art language model developed by OpenAI. It is a deep learning model trained on a vast amount of text data, allowing it to generate human-like text and respond to text-based inputs. It is considered one of the most advanced l...
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!
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.
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.
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.
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
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!