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.

This quiz covers key aspects of enhancing designs using Figma, focusing on naming conventions and frame adjustments according to HTML hierarchy. Participants will learn how elements are generated in relation to their positioning, including reverse and top-to-bottom generation of components. Ideal for designers looking to optimize their workflow in Figma.