Figma Enhancement Guide

Questions and Answers

What is the first child of the node parent in the Figma API endpoint?

Middle div

Left div (correct)

Top div

Right div

Elements in a ROW are generated from top to bottom.

False

What is the utility class to enable flex behaviors?

d-flex

The utility class to specify the initial length of a flexible item is ______.

flex-basis Signup and view all the answers

How do you set a vertical direction in flexbox?

flex-column Signup and view all the answers

What class is used to align flex items to the end?

justify-content-end Signup and view all the answers

Match the following Bootstrap class with its declaration:

Flex = d-flex Flex-grow = flex-grow Justify-content-start = jca Align-items-center = aic Signup and view all the answers

Which of these classes is used for flexbox vertical alignment?

align-items-start Signup and view all the answers

Study Notes

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.

Description

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.