Day 1: Components

Components are reusable elements that help maintain consistency and efficiency in design projects. Here are the key components in Figma:

Components are like parent elements, and instances are like their children. Whatever changes are made to the components will be instantly reflected in their instances.

By using components, you can create multiple types of UI elements easily without recreating them again and again.

Using component properties, we can create different types of variations:

• Text Property: This lets you change text in UI elements like buttons and cards without selecting the text layer inside the frame. Just select the instance of the component and edit the content inside the frame as needed.
• Boolean Property: This is used to control the visibility of icons, text, and illustrations in buttons and cards. Like turning on or off the Visibility.
• Instance Swap Property: This lets you change UI elements like icons inside a button quickly. You can easily swap the UI elements inside the instance of the component in seconds.
• Nested Instances: These allow you to use instances of components within other components. This way, you can build complex UI elements by combining simpler ones. Any changes made to the nested component will update all its instances.

Day 2: Auto-Layouts

Auto Layout brings responsiveness to the design. It ensures the feasibility of the design on various devices and helps reduce the need for manual adjustments and rearranging of UI elements inside the frame. Auto Layout makes the visual design easily understandable for users on various devices like phones, tablets, and the web.

• In frames, children adapt when the parent changes, but in Auto Layout, the parent changes if the children change.
• Auto Layout should be used when the width or height of the elements inside the frame regularly change.
• If the elements inside the frame remain the same in terms of numbers or physical dimensions, then we can use a basic frame.
• In Figma, there are three types of layout behaviors: Vertical Layout, Horizontal Layout, and Wrap.
  1. Vertical Layout: Arranges elements in a vertical stack, adjusting spacing and padding automatically.
  2. Horizontal Layout: Arranges elements in a horizontal stack, adjusting spacing and padding automatically.
  3. Wrap: Arranges elements to fit within boundaries, stacking horizontally and vertically as needed.

Day 3: Variants

Variants are a way to create, organize, and use components. If you've ever created multiple variations of a component, you'll want to give variants a try."