Podcast
Questions and Answers
What is the first child of the node parent in the Figma API endpoint?
What is the first child of the node parent in the Figma API endpoint?
Elements in a ROW are generated from top to bottom.
Elements in a ROW are generated from top to bottom.
False
What is the utility class to enable flex behaviors?
What is the utility class to enable flex behaviors?
d-flex
The utility class to specify the initial length of a flexible item is ______.
The utility class to specify the initial length of a flexible item is ______.
Signup and view all the answers
How do you set a vertical direction in flexbox?
How do you set a vertical direction in flexbox?
Signup and view all the answers
What class is used to align flex items to the end?
What class is used to align flex items to the end?
Signup and view all the answers
Match the following Bootstrap class with its declaration:
Match the following Bootstrap class with its declaration:
Signup and view all the answers
Which of these classes is used for flexbox vertical alignment?
Which of these classes is used for flexbox vertical alignment?
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-flexclass. -
Flex-basis: Sets the initial length of a flexible item via the
flex-basisproperty. -
Flex-grow: Defines how much a flexible item can grow relative to others in the same container with the
flex-growproperty. -
Flex-direction: Controls the item's orientation:
-
Flex-column: Use
flex-columnfor vertical direction. -
Flex-row: Use
flex-rowfor horizontal direction (default when flex is enabled).
-
Flex-column: Use
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.
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Related Documents
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.
