The development of page UI work, as an essential link to translate design into interactive web pages, embodies the progress of technology and the application of innovative tools. Up to now, it can be divided into the following three stages:
With the popularity of PhotoShop, designers can use this powerful graphic editing tool to create more detailed and complex drafts. Front-end developers need to convert static PSD files into dynamic web pages. This process usually includes slicing, measuring, manual coding and other complex steps, that is, cutting out each element in the design draft, using marking software such as markman to measure size and color, and then manually writing HTML and CSS code to reproduce the layout and style of the design draft. This process is not only time-consuming, but also requires a high level of skill for developers and it is hard to guarantee the consistency between the final page and the design draft.
With the advent of Figma, page UI development has taken a new step. Figma is a collaborative interface design tool based on the cloud. It allows designers and developers to collaborate in real time on the same platform, greatly improving work efficiency and communication accuracy. Figma's component design and style system make the design more modular and consistent. Developers can directly extract style information and design resources from Figma, reducing the amount of manual coding. Compared with PhotoShop, Figma not only avoids the cumbersome operations of software download and installation, and marking, but also greatly improves developers' efficiency in terms of icon (multi-bevel) download and CSS code copying. However, Figma provides about 50% usable CSS code. The color, shadow and decoration classes can be used directly. However, due to the inconsistency between design and development habits, layout and size information cannot be directly applied. In addition, HTML structure still needs to be handwritten.
The rise of Design2Code further simplifies the process of page UI development. These tools can directly convert design drafts into front-end code, greatly reducing the workload of developers. Through these tools, the elements in the design draft can be automatically converted into HTML structure, style is converted into CSS code, and even JavaScript interaction can be automatically generated to a certain extent. Compared with Figma, D2C directly generates code and supports multiple languages through plug-ins, which greatly improves efficiency. The intelligence and automation degree of these tools bring revolutionary changes to page UI development, enable developers to devote more energy to functional development and user experience optimization.
In order to directly demonstrate the convenience of modern page UI development, I will show how to quickly generate Web landing pages from design drafts through the demonstration of Codia Figma Plugin, recently launched in the Figma community. This plugin can analyze design elements in Figma and automatically generate HTML and CSS code even support responsive design with the help of AI capability. In the demonstration, I will start from a complete design draft and show step by step how to use the plugin to generate a beautiful web page.
How to quickly get a landing page using the Codia Figma plugin？
Taking a free design draft from the Figma community as an example, enter Figma, search for "Codia" under the Plugin tab in Resources, click on "Codia-AI Figma to code ...". It also supports Figma's devmode mode, as shown in the following image:
This will open the "Codia-AI Figma to code" plugin, as shown in the figure below:
In Figma's left panel, select the design layer for which you want to generate the code, and you can see the preview of the selected layer in the "Codia-AI Figma to code".
Before generating code for the first time, one must verify the runtime platform for the target code and the technology stack being used. As shown in the image, you can switch languages in a pop-up layer. We switched to the HTML+CSS technology stack for developing standard Web pages.
Next, we come to the code generation step: Codia supports 2 modes of code generation. "Base Code" generates code based on rules, while "AI Code" uses large models built on rules to enhance code quality, as shown in the image.
We click on "AI Code", and code generation begins, as shown in the image.
Wait a moment, and after the code is generated, you can see all the code files, as shown in the image.
Click the "Download" button at the bottom and click "Download" in the pop-up bubble to download the code. The code can be saved locally. It also supports “show in codesandbox”, allowing you to preview the code in codesandbox, as shown in the image.
Once downloaded, you will have a zip compressed file, which you can then unzip, as shown in the image.
Open "index.html" in your browser, and you may see the final effect of the landing page generated by the Codia Figma Plugin.
At this point, I have demonstrated the entire process of how to swiftly convert a design draft into a Web page using a Figma plugin. I hope similar AI research efficiency tools can assist you.
For reference:
Codia official website: https://codia.ai/design-to-code
Codia D2C plugin: https://www.figma.com/community/plugin/1301565000406306598
Codia related documentation: https://codia.ai/docs/getting-started/start-here.html
Top comments (0)