How to use

First, let's create a new document in Figma or use an existing one.

⁠

The plugin we need can be found along the following path

⁠

Click on Figma to HTML, CSS, React & more!

⁠

Here is our plugin. Done with figma, now let's go to chrome

⁠

On the top right, open the panel with extensions and pin the item with our extension

⁠

Click on the icon and our extension is ready to use. Let's try to download an element from our site. Press the Enable Selector button in the extension and select the element you want to download.

For example, let's download this block. Hover the cursor until we capture the area we need and right-click

⁠

We will be prompted to save this document in .json format

Save in a convenient place and go back to Figma

⁠

Select our file by clicking on the blue Upload here button

⁠

We got an almost perfect block ready for implementation in just a minute of work, knowing where to click. But it should be borne in mind that pulling out the full information from the site will not always come out and minor corrections will have to be done manually, for example, like inserting pictures, replacing the color of icons and the boldness of fonts. But this will not interfere with our work at all.

⁠

Here is a direct comparison of what we got with the original.

⁠

We change the weight of the fonts, the color of the icon and we get a 100% copy of this block without having the original do

⁠

Having already downloaded the template, we make fixes, and give our layout to the developer in just a few minutes.

⁠

That's all. It is really very simple and fast, but you must not forget that it is not always possible to obtain complete information for downloading and sometimes you have to work a little manually.

⁠
`Examples of using`⁠
⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

How to use

⁠Examples of using⁠⁠

⁠
`Examples of using`⁠
⁠