Figma Cheat Sheet
This cheat sheet provides quick definitions of key Figma terms used in this document. Understanding these terms will make it easier to follow the guidelines and workflows.
Frames
Frames act as containers for design elements like text, images, and shapes. Similar to <div> elements in web development, they help structure layouts, support nesting, and enable responsive design. Frames are essential for creating everything from individual UI components to full web pages and app screens while maintaining alignment and hierarchy.
Styles
Styles are reusable sets of properties that can be applied to text, colors, effects, and layout grids. They help maintain design consistency by standardizing attributes such as fonts, colors, shadows, and spacing. Local styles are style definitions that exist in the current file.
Variables
Variables in Figma Design store reusable values that can be applied to colors, spacing, text styles, and even interactive prototypes. Instead of manually updating multiple elements, you can change a variable once, and it updates everywhere it’s used. This makes managing design systems easier, saves time, and ensures consistency across designs.
Components
Components are reusable design elements that help maintain consistency across projects. They can include buttons, icons, layouts, and other UI elements, making it easier to create and manage cohesive designs efficiently.
Instance
Instance is a copy of the component you can reuse in your designs.
Auto Layout
Auto Layout in Figma enables responsive design by allowing elements to grow, shrink, and adjust dynamically.
learn more about Auto Layout here
Learn about Auto Layout properties here