Medium: Create a portfolio website without coding. Why not??

Viblo: Tạo website portfolio mà không cần biết nhiều về coding. Tại sao không?

Source: BunDemo - Figma to code

Create a portfolio website without coding. Why not??

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 to quickly create a website 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 to get feedback from users and to iterate on their designs.

Some Figma Plugins

Here are a few Figma plugins that can convert design to code.

1. DhiWise - Figma to Code

2. Locofy Lightning - Figma to Code in 1 click [FREE BETA]

3. Anima - Figma to Code: React, HTML, Vue, CSS, Tailwind

4. Clapy - Export Figma design to code (React, HTML, CSS)

5. Figma to Code (HTML, Tailwind, Flutter, SwiftUI)

6. Codelessly - Figma to Websites and Apps (Figma to Code, Figma to Flutter, HTML, CSS)

7. Codia-AI Figma to code:HTML, CSS, React, Vue, iOS, Android, Flutter, Tailwind, Web, Native, ...

8. Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, ...)

9. Figma to Tailwind CSS

10. 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 account.

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 Submit
  to 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: BunDemo - Figma to code

I am always looking for feedback on my writing, so please let me know what you think. ❤️