14. Glossary

Dynamic layout engine in Figma that adapts content when elements change.

Auto Layout in Figma is a powerful feature that helps designers automatically adjust the positioning and spacing of elements within a frame. When you use Auto Layout, you can specify rules about how items should be arranged. For instance, if you add or remove elements from a layout, Auto Layout will dynamically adjust the overall composition, ensuring that everything stays aligned and spaced according to your instructions.

Imagine Auto Layout as a rubber band; when you pull or push one side, all the other parts move together flexibly. This is similar to how Auto Layout offers adaptability in a design as you add or remove content, making your workflow smoother and more efficient.

Horizontal grid to ensure consistent vertical spacing across text and components.

A baseline grid is a set of horizontal lines that helps maintain uniform vertical spacing between elements in your design. It is particularly useful for creating a coherent and organized layout in typographic design. By aligning text to these lines, designers can ensure that spacing is consistent, leading to better readability and aesthetic appeal.

Think of a baseline grid as a series of lines in a music sheet. Just like musicians need to read the notes lined up correctly for harmony, designers benefit from aligning typographic elements to baseline grids for visual harmony and fluidity.

Different states (e.g., default, hover, disabled) of a design Variant component.

In design, a component is a reusable design element that can represent different states, such as 'normal', 'hover', and 'disabled'. Components make it easier to maintain consistency across a project. For example, a button can have a default appearance, change colors when hovered over, and appear greyed out when disabled. This approach simplifies the design process because you can modify a single component, and all instances of that component will update automatically.

Consider a light switch with three positions: on, off, and dimmed. Each position represents a different state of the same switch, just like how components can have multiple states, allowing designers to manage and implement them efficiently across various designs.

A non-destructive way to hide parts of layers using shapes or alpha channels.

A mask is a technique used in design software that allows designers to hide parts of elements instead of deleting them. This method is non-destructive, meaning you can conceal parts of a layer while keeping the pixel data intact for future adjustments. You can use shapes to dictate what is visible and what is hidden. Masks are often used to create complex shapes or effects without permanently altering the original images.

Imagine a photographer using a piece of black paper to cover parts of a photo. The paper hides those sections, but the photo itself remains unaltered. Similarly, in design, masks allow you to manipulate visuals dynamically without losing any data.

Small animations that provide feedback or reinforce an action.

Micro-interactions are subtle animations that enhance user experience by providing immediate feedback during user actions. These interactions can be as simple as a button changing color when hovered over or an animation showing a loading icon. Micro-interactions add a layer of polish to the design, indicating successful actions or guiding users on what to do next.

Think of micro-interactions as the small vibrations or clicks of a smartphone when you tap a button. Just as these auditory or tactile signals indicate that something has happened, micro-interactions visually inform users that their action was recognized, enriching their overall experience.

--