The Ultimate Figma Dictionary📙

From Auto-Layout to Variants, we have it all, with icons to ease out the process of getting your hands in Figma’s Layer Panel(that really sounds a little creepy lol)

Do let us know what more you want us to write in this. Let’s build this as detailed as possible.

• Auto Layout: Auto Layout is a feature that helps create flexible and responsive designs. It automatically adjusts the size and position of design elements based on their content and constraints. 3 vertical lines represent that ‘Auto layout’ property has been applied to the elements within that layer.

• Blend Mode: ‘Blend Mode’ button is a feature that allows you to control how layers or objects blend with the layers beneath them. It is present in the ‘Fill Section’ at the right side. It affects the way colors interact and combine, creating different visual effects. The blend modes in Figma mimic the blending options found in graphic design and image editing software.

• Components: Components are like building blocks or templates that you can create and reuse in your designs. They represent a specific element or group of elements, such as buttons, icons, or navigation bars. Think of them as the master version of a design element.

• Cover Art: It is essentially the visual representation of the file or project when viewed in the Figma interface. The cover art is displayed as a thumbnail or preview image, allowing users to quickly identify and locate their files.

• Frames: Frames are containers that hold design elements like shapes, text, and images. They help organize and group related elements.

• Instances: Instances are copies of components that you place in your design. When you make changes to the master component, all the instances of that component get automatically updated. This makes it easy to maintain consistency across your design and saves you time from manually updating each instance.

• Mask Icon: The mask icon is a square with a circle inside it. It appears in the layer list next to the layer that acts as the mask. You can enable or disable the mask by clicking on this icon.

• Section: Sections let you designate areas of the canvas for collaboration or ideation, specifically create a cluster/grouping of designs, or mark content as “Ready for development” to help with the developer handoff

• Slice: The Slice button is used to create image slices. Image slices are designated areas within an image file that can be exported separately. Slicing is a technique commonly used in web and UI design to optimize the export of specific parts of an image, such as icons, buttons, or other UI elements, without exporting the entire image. When you select an image or an element in Figma and click the ‘Slice’ button, Figma will create a rectangular bounding box around the selected area. This bounding box represents the slice, and you can adjust its size and position as needed. Once you have defined your slices, you can export them individually or all together as needed.

• Variants: Variants are different versions or variations of a component. For example, you might have a button component with different states like normal, hover, and pressed. Each state is a variant of the button component. Variants allow you to create different versions of a component without creating separate components for each variation.

We’re a passionate community of Figma-obsessed people, designing one triangle at a time.

Join the movement, and try our design-to-code tool :
bit.ly/DUALITE