Figma Enhancement Guide.docx

Figma Enhancement Guide 1. Naming. Name of the element, followed by element to generate, the rest are bootstrap classes or custom classes. 2. Adjust the frames according to their positioning or hierarchy on the HTML. ROW -- elements are reverse generated, it means, if you have...

Figma Enhancement Guide 1. Naming. Name of the element, followed by element to generate, the rest are bootstrap classes or custom classes. 2. Adjust the frames according to their positioning or hierarchy on the HTML. ROW -- elements are reverse generated, it means, if you have  Left frame generated first, because in the API endpoint of the Figma, The first child of the node parent is left div\ COLUMN -- elements are generated from top to bottom. For example  Elements will be generated along the sequence of the child nodes within the frames. Which means div welcome will be the first to be generate, and div text will be the last element to be generated. 1. Bootstrap Classes Integration +-----------------------------------+-----------------------------------+ | Class | Declaration | +===================================+===================================+ | **Flex** - Enable flex behaviors | d-flex | +-----------------------------------+-----------------------------------+ | **Flex-basis** - specifies the | flex-basis | | initial length of a flexible | | | item. | | +-----------------------------------+-----------------------------------+ | **Flex-grow -** specifies how | flex-grow | | much the item will grow relative | | | to the rest of the flexible items | | | inside the same container. | | +-----------------------------------+-----------------------------------+ | **Flex-column -** to set a | flex-column | | vertical direction | | +-----------------------------------+-----------------------------------+ | **Flex-row -** to set a | flex-row | | horizontal direction (default | | | value when flex has been enabled) | | +-----------------------------------+-----------------------------------+ | **Justify-content -** utilities | jcs | | on flexbox containers to change | | | the alignment of flex items on | jced | | the main axis (the x-axis to | | | start, y-axis if flex-direction: | jcc | | column). | | | | jcb | | 1. justify-content-start | | | | jca | | 2. justify-content-end | | | | jce | | 3. justify-content-center | | | | | | 4. justify-content-between | | | | | | 5. justify-content-around | | | | | | 6. justify-content-evenly | | +-----------------------------------+-----------------------------------+ | **Align-items -** utilities on | aist | | flexbox containers to change the | | | alignment of flex items on the | aie | | cross axis (the y-axis to start, | | | x-axis if flex-direction: | aic | | column). | | | | aib | | 1. align-items-start | | | | aisch | | 2. align-items-end | | | | | | 3. align-items-center | | | | | | 4. align-items-baseline | | | | | | 5. align-items-stretch | | +-----------------------------------+-----------------------------------+ | **Wider --** custom class that | wider | | would set the width to take all | | | the spaces available in the | | | container equivalent to flex-grow | | | but if the two div inside the | | | container has flex-grow, this | | | wider will have higher precedence | | | to the other div. | | +-----------------------------------+-----------------------------------+ | **Relative -** The element is | relative | | positioned relative to its normal | | | position, so \"left:20px\" adds | | | 20 pixels to the element\'s LEFT | | | position. This will be the parent | | | container or div with nested | | | children | | +-----------------------------------+-----------------------------------+ background-clr (background color of the button) lbl -- text inside the button background-clr -- background color of the button preview: \ **please take note**: node properties in the FIGMA endpoint API have already the following CSS styles like,\ border-radius, width and height, background-color and, border type. When button is created, bootstrap CSS button is the default however it can override the properties from the FIGMA. List of elements available Elements Declaration -------------------------- ------------- Div div Input, type text txt-input Span (all words or text) lbl Images svg Button btn 3. Angular Material Supported a. Sidebar\ example declaration b. Custom Checkbox Example declaration  c. Accordion Example declaration d. Input text\  e. Table