Unable to find the entry to open the plugin in Figma
Figma stipulates that plugins can only be enabled if you have editing rights to the current design.
If you do not have the permission to edit the design draft and cannot open the plug-in, you can copy the design draft or use the plug-in to transcode in Dev Mode.
copy design draft
or in Dev Mode use
Why is the whole page turned out to be a picture?
- The cause of the problem: If Export is set for the Figma layer, the layer and its child nodes will be converted to images by default. You can check what other situations will be converted into pictures: What situations will be converted into pictures.
- Solution: Therefore, when you find that the entire page is a picture, please first check whether Export is configured. Export can be canceled by clicking the - button to the right of Export
Unreasonable grouping of elements
- General phenomenon: After the design draft is converted into code, the division of the content structure does not meet expectations,
- The cause of the problem: By default, the tool will determine the division of the DOM structure according to Figma's layer structure. The reality is that designers usually place a large number of layers at the same level, which does not meet the expectations of the R&D side. At this time, the tool will automatically "group the rows and columns" of the content, which can solve most of the problems, but there are still situations that do not meet expectations. See # How to group automatically for details.
- Solution: At this time, you can manually add groups to the layers to make the generated code structure meet expectations. (You can hold down the ⌘ key when you need to select multiple layers)
The icons/graphics/pictures in the design draft are split into multiple img tags
- Rough phenomenon: the whole picture is split into multiple pictures
- The cause of the problem: The main reason is that the layer division is unreasonable. The actual design draft divides the picture into multiple layers, and places it at the same level as a large number of other layers. You can view the specific situations that will be converted into pictures: What situations will be converted into pictures
- Solution: You can manually merge the layers and manually set the Export for the layers
The output result has a fixed width and height
- Rough phenomenon: the code exported by the tool will add a fixed width and height (the original width and height of the layer) by default, as shown below
- The cause of the problem: The main reason is that in most cases, because the design draft is not configured with Auto Layout, the output result does not support responsiveness, so the outermost layer fixes the original width and height, which can ensure that the UI restoration remains in line with expectations.
- Solution: You can manually configure width: auto to turn off the horizontal fixed width
How to quickly select Figma layers
Click operation: Click in the canvas or in the layer panel on the left to select the layer
Select Sublayer: When multiple layers overlap, figma will select the outermost parent layer by default. When you need to select a sublayer, you can hold down the ⌘ key
Select Multiple Layers: Press and hold the ⌘ key to select layers, and multiple layers can be selected
Switch selected layer: When a layer is selected, you can switch to parent/child/sibling/layer by the following shortcut keys
- Switch to child layer: Enter
- Switch to parent layer: Shift + Enter
- Switch to next sibling layer: Tab
- Switch to previous sibling layer: Shift + Tab
