Figma Enhancement Guide
8 Questions
1 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson

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 (B)

What is the utility class to enable flex behaviors?

d-flex

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

<p>flex-basis</p> Signup and view all the answers

How do you set a vertical direction in flexbox?

<p>flex-column</p> Signup and view all the answers

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

<p>justify-content-end</p> Signup and view all the answers

Match the following Bootstrap class with its declaration:

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

Which of these classes is used for flexbox vertical alignment?

<p>align-items-start (D)</p> 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.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

Related Documents

Figma Enhancement Guide.docx

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.

More Like This

Figma UI Design Basics
12 questions

Figma UI Design Basics

WellEducatedLobster avatar
WellEducatedLobster
Figma UI Design Essentials
10 questions
Figma Tool Overview and Setup
11 questions
Use Quizgecko on...
Browser
Browser