Figma Enhancement Guide

Naming and Hierarchy in Figma

• Element naming requires the element type followed by the name, along with bootstrap or custom classes.
• Frames should be positioned according to their hierarchy in HTML:
  • ROW: Elements are generated in reverse order based on the Figma API, with the first child generated first.
  • COLUMN: Elements are generated from top to bottom, following the sequence of child nodes within the frames.

Bootstrap Classes Integration

• Flex: Activate flex behaviors using the d-flex class.
• Flex-basis: Sets the initial length of a flexible item via the flex-basis property.
• Flex-grow: Defines how much a flexible item can grow relative to others in the same container with the flex-grow property.
• Flex-direction: Controls the item's orientation:
  • Flex-column: Use flex-column for vertical direction.
  • Flex-row: Use flex-row for horizontal direction (default when flex is enabled).

Justify-content Utilities

• Utilities to align flex items along the main axis:
  • justify-content-start: Align items at the starting edge.
  • justify-content-end: Align items at the ending edge.
  • justify-content-center: Center items within the container.
  • justify-content-between: Distribute items evenly with the first and last items at the edges.
  • justify-content-around: Distribute items with equal space around them.
  • justify-content-evenly: Distribute items with equal space between them.

Align-items Utilities

• Utilities to change alignment on the cross axis:
  • align-items-start: Align items at the starting edge of the cross axis.
  • align-items-end: Align items at the ending edge.
  • align-items-center: Center items on the cross axis.
  • align-items-baseline: Align items along their baseline.
  • align-items-stretch: Stretch items to fill the container.

Additional Information

• Each bootstrap utility class is designed to streamline layout and design processes in Figma, ensuring a clear structure in generated HTML/CSS.