Advanced Figma

Breakpoints are specific screen widths at which a design adjusts to fit different device categories, like phones, tablets, and desktops.

Responsive design ensures that layouts adapt to different screen sizes, maintaining functionality and visual consistency across devices.

In Figma, variants are distinct versions of a component that combine properties like state, size, or inclusion of icons. By using variants, we can link all versions of a component, such as a button with secondary and inactive variants, into one umbrella category.

In Figma, variables allow designers to define reusable values that can be applied across multiple elements, improving consistency and efficiency. Variables make it easier to manage design properties like colors, text sizes, and corner radii. They can be strings, numbers, colors, or booleans.

Constraints in Figma determine how elements scale or remain fixed in relation to their parent frame, ensuring responsive designs.

Figma’s Auto Layout enables dynamic alignment and spacing of elements, allowing layers to adjust automatically to content changes. Auto Layout works by stacking elements vertically or horizontally. It also makes designs more responsive, meaning they can adjust more easily to different screen sizes.

Components in Figma are reusable elements (such as layers, frames, or objects) with defined properties, supporting consistency and scalability in design systems.