Configuring Figma layouts
The file src/polipo.ts defines which layouts should be imported from Figma and allows customizing responsiveness.
Name normalization
Layer names in Figma are automatically normalized and converted to PascalCase, in order to be used in the code. The normalization works as follows:
- non-alphanumeric characters are converted to spaces,
- words are capitalized and joined,
- if the resulting name starts with a number, it is prepended by an underscore (
_).
For example "1 this-is-a (very) strange layerName!!" is converted to _1ThisIsAVeryStrangeLayerName.
It is not necessary to change the names in Figma to follow this format. The normalization happens automatically and transparently.
Root properties (defineFigmaRoot)
| Prop | Type | Default |
|---|---|---|
layouts | Record<string, FigmaLayoutOptions> | - |
There are more experimental options available, to customize how images and fonts are loaded. These options are not yet stable. Please contact us if you need this feature.
Layout properties (defineFigmaLayout)
Specifying the Figma layer
| Prop | Type | Default |
|---|---|---|
path | string | - |
Use the path property to specify which Figma layer to use.
In order to use a Figma layer, it must satisfy the following:
- it must be either a Figma frame or a Figma component,
- it must be placed directly under a page or a section (i.e., deeper layers cannot be used directly).
(Note that layers with the above properties will show their name on the canvas in Figma.)
To refer to such a layer, the full path must be used, which consists of:
- the normalized name of the Figma page,
- the normalized names of the sections containing the layers, from outermost to innermost, if any, and
- the normalized name of the layer itself,
separated by a forward slash (/).
Examples: Page1/Frame4, Components/SimpleButton, Page1/Section2/InnerSection/Frame3.
Note that Figma names are normalized.
Adjusting the size
| Prop | Type | Default |
|---|---|---|
hFill | boolean | false |
wFill | boolean | false |
Set wFill and hFill to true to make the layer to fill the container horizontally or vertically.
The design will adapt to the new size in the same way as if you were resizing it in Figma.
Selecting nested layers by name
| Prop | Type | Default |
|---|---|---|
#<layer name> | FigmaLayoutOptions | - |
By adding a key formed by a hash character (#) followed by a normalized figma name, you can customize all the occurrences of nested layers with their name.
Media queries
| Prop | Type | Default |
|---|---|---|
@media <query> | FigmaLayoutOptions | - |
By using a media query as a key, you can customize the properties of the layer when the query matches.
Specify a path inside a media query to use a different Figma layout when the query matches.
Pseudo selectors
| Prop | Type | Default |
|---|---|---|
:hover | FigmaLayoutOptions | - |
By using a pseudo-selector as a key, you can customize the properties of the layer when the selector matches.
Specify a path inside a pseudo-selector to use a different Figma layout when the selector matches.
At the moment, :hover is the only supported pseudo-selector. Contact us to request support for more selectors.