Introduction

Redesigning a website is often a common project for designers. However, without design assets in Figma, it can be time consuming to create them from scratch. With “html.to.design”, existing design assets can be automatically imported to Figma, giving designers editable layers to allow them to move, edit, and redesign their website with ease.

The plugin Figma “html.to.design” makes the process of converting an HTML mockup into a graphic design a lot easier for web designers. This plugin allows you to automatically import an HTML model on Figma, offering a more effective solution for creating design.

How to use it

IMPORT VIA URL

This feature allows users to quickly convert a web page into graphic design by simply using its URL. Users can copy and paste the URL of the web page into the plugin to automatically convert the page into a graphic design that can be edited on Figma, thus saving time and effort compared to creating designs from scratch.

SETTINGS

The plugin settings allow you to choose from a predefined list of screen types such as Macbook Pro or iPhone with the associated screen resolution. Additionally, users can also set a custom resolution if they want a different format.

You can choose between the “Light” or “Dark” versions, depending on the options available on the site you want to convert. Finally, for mobile screens, users can choose between portrait and landscape orientation. This option is only available for mobile screens offered by the plugin.

IMPORT VIA CHROME EXTENSION

The plugin also offers the possibility of using a Chrome extension to import a website. With the Chrome extension, you can convert any site using the.h2d file generated by the extension. You can also convert sites to local, unpublished ones, which is convenient for sites in development.

In addition, the Chrome extension allows you to convert particular behaviors such as displaying a modal, active element, or tab on a page, giving you a more complete picture of the site.

FULL SCREEN CAPTURE

The “Full Screen Capture” function of the Google Chrome extension allows you to capture an entire web page. However, if you only need a specific component or block for your designs, you can also import only a section of the page. To do this, click on “Capture selection”.

Conclusion

To summarize, the “html.to.design” plugin is a valuable ally for web designers. It easily converts sites into mockups Figma taking into account their structure. Although it may not always be able to capture all behaviors, the Chrome extension can be used as a complement. This plugin is very useful with its many options and saves time, but it is limited to 20 free captures per day. We recommend it for designers looking for a simple and effective solution to convert their sites into mockups. Figma.

PRACTICAL LINKS

Figma plugin

Some links are affiliate links, if you make a purchase from them we may receive a commission.