3. Key Concepts and Terminology

A schematic, low-detail layout showing element placement and basic functionality.

A wireframe is like the skeleton of a website or app. It provides a visual guide that represents the basic structure and layout of the design without focusing on the finer details like color or typography. Think of it as an architectural blueprint that outlines where different elements, such as buttons and text fields, will be places on a digital platform.

Imagine you're planning a new home. Before you start decorating or making detailed designs, you first create a simple outline of the rooms and their placements. This outline, or wireframe, helps everyone understand the basic flow and function of the space before adding any finishing touches.

A near-complete representation of the final product, including styling, typography, and interactivity.

A high-fidelity prototype is a more polished version of your design, showing exactly how the final product will look and function. It incorporates all the visual elements, interactions, and detailed specifications. This phase allows designers to test usability and gather feedback on the design as it closely resembles the finished product.

Think of a high-fidelity prototype as a model home. Just like a model home showcases the color of the walls, the furniture arrangement, and how the rooms feel together, a high-fidelity prototype provides a 'realistic' version of the digital product that users can interact with before it's actually built.

A Figma feature that dynamically arranges child elements based on defined constraints and spacing rules.

Auto Layout is a powerful tool in Figma that helps you organize and manage your design elements automatically. When you use Auto Layout, you can set specific rules about how elements should be aligned, spaced, or resized. This saves time and ensures a consistent layout, especially when elements need to be adjusted as the design changes.

Imagine you’re packing a suitcase with clothes of different sizes. Auto Layout acts like a packing assistant who neatly organizes your clothes based on their size, ensuring that everything fits well and is easy to access, rather than having a jumbled mess where necessary items are hard to find.

Reusable design elements that ensure consistency and speed up updates across multiple artboards.

Components, also referred to as symbols in some design tools, are elements that can be reused throughout a project. When you create a component, any changes made to it will automatically update all instances of that component across your design. This feature enhances consistency and reduces the time it takes to make design changes.

Think of components like a reusable mold in cooking. If you're making multiple cookies that need to be the same shape (like round cookies), you would use the same mold. If you decide to tweak the recipe, making changes in one place (the mold) ensures all your cookies are uniformly updated without having to reshape each one individually.

A technique that uses one layer (the mask) to reveal or hide parts of another layer.

A clipping mask is a way to control the visibility of your design elements. By placing one layer over another, the top layer acts as a 'mask,' allowing only the parts of the bottom layer that fall within its shape to be visible. This technique is useful for creating interesting visual effects and ensuring clean designs.

Think of a clipping mask as a stencil. When you hold a stencil over a sheet of paper and paint over it, the design shows through only in the areas allowed by the stencil shape. Once you're done, you'll see a neat pattern, just like how a clipping mask works to reveal specific sections of an image.

Small animations (hover states, button presses) that provide feedback and enhance usability.

Micro-interactions are subtle animations that occur in user interfaces to provide feedback to the user. These could be things like a button changing color when hovered over or a notification appearing when a task is completed. They significantly enhance the user experience by providing visual cues and making the interaction feel more dynamic.

Think of micro-interactions as the small gestures in a conversation that express interest or emphasize a point. For example, nodding your head while someone speaks indicates you are listening and engaged. Similarly, these design animations confirm to the user that their actions have been registered, fostering a sense of engagement and feedback.

Unscored input gathered during development to inform iterative improvements.

Formative feedback refers to the input collected from users during the design process. Rather than being part of a final evaluation, this feedback is intended to guide improvements and refine the product as it develops. It allows designers to see what works, what doesn't, and how the design can better meet user needs.

Consider formative feedback as a teacher giving ongoing comments on a student's draft essay. Instead of waiting until the final submission to critique content and structure, the teacher offers insights throughout the writing process, helping the student to revise and strengthen the essay before showing it to others.

--