Abbreviations and Terms
Abbreviations and Terms
| Abbreviation | Definition |
|---|---|
| Img | Image |
| MUI | Material UI |
| HTML | HyperText Markup Language |
| SVG | Scalable Vector Graphics |
Metadata
Metadata — it’s information required for the plugin to understand what kind of UI element is used in design. For example, visually it’s difficult to distinguish the button from the ordinary text. But if the corresponding metadata is provided, the plugin understands it’s a button, but not text, etc. All the metadata provided automatically to the plugin if the designer uses the MUI library for the functional elements of the design.
Parent and Child
Parent — is a Figma frame or container that contains other frames or containers called “children”. For example, on web page design parent elements could be “header” and “footer”. Inside the “header” parent container we may place child elements such as logo, menu and set of social icons. Using parent and children is important to use because it makes the design document well structured and understandable for the plugin. When children elements are grouped together by the parent container it’s easy to add changes to the multiple elements simultaneously. Also it allows the designer to manage alignment inside the parent element. For example all child elements could be aligned horizontally or vertically or set interval spaces between them easily. Please note that HTML code also uses the concept of parent and child elements relationship.
Absolute and Relative Positioning
When talking about the positioning of any element on canvas there are two different methods: absolute positioning and relative positioning.
Absolute positioning defines the position of a given element from the top and left side margins of the parent container. This not only allows objects to be placed in an exact location, it also allows objects to be placed one on top of another.
Relative positioning defines the positioning in such a way that elements are offset from the previous element. This allows objects to be placed in relation to one another. Relative positioning is preferred in the most cases when you need your design to be converted to HTML or React code.