Introdution
With the rapid development of AI, developers have been facing the question of whether AI can replace developers. The answer to this question depends on the perspective of each individual.
In this article, I will focus on the fact that, thanks to a few AI tools, it is now possible for anyone to create a website, not just developers. You can be a designer, or simply have the skills to use Figma.
Using Figma, you only need to have good aesthetic sense and a good layout for the interface to create your own portfolio website.
Key values
Although the code generated by the current plugins is not always clean or optimized, it can still be valuable for beginners and designers.
- For beginners, these tools can help them quickly create a websit without having to learn how to code. This can be a great way to learn the basics of web development and to create a portfolio website.
- For designers, these tools can be used to create prototypes of websites. This can help them get feedback from users and iterate on their designs.
Some Figma Plugins
Here are a few Figma plugins that can convert design to code.
- DhiWise — Figma to Code
- Locofy Lightning — Figma to Code in 1 click [FREE BETA]
- Anima — Figma to Code: React, HTML, Vue, CSS, Tailwind
- Clapy — Export Figma design to code (React, HTML, CSS)
- Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
- Codelessly — Figma to Websites and Apps (Figma to Code, Figma to Flutter, HTML, CSS)
- Codia-AI Figma to code:HTML, CSS, React, Vue, iOS, Android, Flutter, Tailwind, Web, Native, …
- Builder.io — AI-Powered Figma to Code (React, Vue, Tailwind, …)
- Figma to Tailwind CSS
- BUBBLE x FIGMA
Paid plugins often have more features than free plugins, such as the ability to create custom code, support code templates, and more. However, the free plugins can still meet the needs of many projects.
Demo
Creating a portfolio website with DhiWise
DhiWise is a free tool that helps you convert your designs into developer-friendly code for React apps. It supports two main settings: React code with Javascript or Typescript.
Requirements
To use DhiWise, you need a Figma and DhiWise accounts.
Instructions
Step 1: Create a design template in Figma.
Step 2: In the DhiWise interface, click on Add New Project and select From Figma.
- Enter the URL of the Figma design file.
- Or, upload the file.
Step 3: Select a platform.
DhiWise supports converting Figma designs to code for web, iOS, and Android platforms.
Step 4: Configure optional settings:
- Style: Choose the CSS style you want to use. Read for create responsive here.
- Layout: Choose the web interface layout.
- Naming: Choose how to name the web interface components.
Step 5: Click on Submitto start the conversion.
DhiWise will create a folder containing the web interface code.
Step 6: Check the code.
Make sure it works correctly.
Notes
DhiWise may create non-optimized code. If you know code, you can manually edit the code to improve performance.
DhiWise cannot create code for complex features, such as animation effects.
Conclusion
Here is a product created using DhiWise, with some manual source code edits.
Demo: figmatocode.bunhere.com
Source code demo: BunDemo — Figma to code
I am always looking for feedback on my writing, so please let me know what you think. ❤️
