Figma Figma Design Systems and Styles 2 — Questions and Answers
Question 1: What is the purpose of 'effect styles' in Figma?
- To animate layers
- To save reusable drop shadows, inner shadows, and blur effects (Correct answer)
- To define layer blend modes
- To apply filters to exported images
Correct answer: To save reusable drop shadows, inner shadows, and blur effects
Effect styles let you save and apply consistent drop shadows, inner shadows, and blurs across your designs as named, reusable styles.
Question 2: In a Figma design system, what is the role of a 'grid style'?
- To apply a background grid image to frames
- To save reusable layout grids and column/row configurations for consistent layout structure (Correct answer)
- To align layers using the grid tool
- To export grid templates as CSS
Correct answer: To save reusable layout grids and column/row configurations for consistent layout structure
Grid styles save layout grid configurations (column count, gutter, margin) so every screen frame applies the same consistent grid.
Question 3: What are 'design tokens' in the context of Figma design systems?
- Access tokens for Figma's API
- Named design decisions (color, spacing, radius) stored as variables or styles that map design to code (Correct answer)
- Figma plugin license keys
- Tokens earned through Figma certifications
Correct answer: Named design decisions (color, spacing, radius) stored as variables or styles that map design to code
Design tokens are named design decisions stored as reusable values that bridge design tools like Figma and front-end code implementations.
Question 4: How do Figma Variable 'modes' support design system theming?
- Modes switch the Figma UI between light and dark displays
- Modes define alternate value sets for the same variable, enabling theme switching like light/dark mode (Correct answer)
- Modes control prototype interaction states
- Modes are alternate naming conventions
Correct answer: Modes define alternate value sets for the same variable, enabling theme switching like light/dark mode
Variable modes let you define multiple value sets (e.g., Light and Dark) for the same variable so you can switch the entire design's theme instantly.
Question 5: What is 'aliasing' in Figma Variables?
- Renaming a variable to a shorter name
- Pointing one variable's value to another variable, creating a semantic layer over raw values (Correct answer)
- Duplicating a variable for multiple uses
- Aliasing is not a Figma feature
Correct answer: Pointing one variable's value to another variable, creating a semantic layer over raw values
Aliasing connects a semantic token variable (e.g., 'color/button/background') to a raw value variable (e.g., 'color/blue/500'), separating meaning from value.
Question 6: In Figma, which panel shows all locally defined styles and variables available in the current file?
- Prototype panel
- Assets panel under the Local variables/styles sections (Correct answer)
- Plugins panel
- Layers panel
Correct answer: Assets panel under the Local variables/styles sections
The Assets panel (Shift+I) contains dedicated sections for Local variables and Local styles defined in the current file.
Figma Figma Design Systems and Styles 2
What is the purpose of 'effect styles' in Figma?