Figma
208 bites tagged Figma — interview questions with model answers, and 60-second explainers.
Base Component Pattern: Your Design System's Template
Think of a base component as a master template for UI elements. Changes to the master instantly update every copy, ensuring consistency. Use it for repeated elements like buttons or icons that need slight variations.
Figma Instance Overrides: Local Changes, Global Components
Instance overrides let you customize a component copy without breaking its link to the main. Use them to change a button's text or swap an icon for a specific context. The footgun: Overrides are lost when swapping variants if layer names don't match.
Figma's Smart Animate: Motion Without Keyframes
Figma's Smart Animate creates fluid animations by tweening layers between frames. It's perfect for prototypes with expanding cards, sliding toggles, or parallax effects.
Figma Prototypes: Build Interactive Flows, Not Just Screens
Figma prototypes turn static designs into interactive user journeys by connecting frames. Use them to test user flows, present to stakeholders, or get feedback before writing code. The footgun: a single top-level frame can only be one flow's starting point.
Boolean Operations: Non-Destructive Shape Math
Boolean operations are non-destructive shape math, combining layers into complex forms while keeping the original pieces editable. Use them for icons and illustrations. The footgun: intersecting non-overlapping shapes makes them disappear until they touch.
Figma Vector Networks: Graphs, Not Just Chains
Vector networks are graphs, not just chains. Unlike traditional paths where a point connects only two lines, a vector network allows multiple lines to meet at a single vertex. This is Figma's engine for complex shapes.
The Figma Interface: Your Digital Design Workshop
Figma's interface is a digital workshop: a central canvas for your work, a left sidebar for layers and assets, and a right sidebar for properties. It's the hub for UI/UX design, prototyping, and developer handoff.
Figma Constraints: Building Responsive Layouts
Constraints are rules for how layers react when their frame is resized. Use them to build responsive designs, like pinning a logo to the top-left or stretching a background. The footgun: Constraints don't work on groups or inside Auto Layout frames.
The 8-Point Grid: A Shared Language for UI Spacing
The 8-point grid system stops spacing debates by making every dimension and gap a multiple of 8px. It's used in design systems like Google's to create consistent layouts that render cleanly across devices. The biggest mistake is breaking the rule for "feel."
Layout Grids: Your Blueprint for Consistent UI
Layout grids are visual blueprints for frames, enforcing structure and alignment. Use them to create consistent, responsive layouts for web and mobile. A common footgun is using fixed-width columns instead of 'Stretch' columns, which breaks responsiveness.
Low-Fi vs. High-Fi Prototypes: Test Ideas Fast vs. Polish for Realism
Low-fi prototypes are quick sketches to test core ideas and flows. High-fi prototypes are detailed, interactive mockups that look and feel like the final product. Use low-fi early for brainstorming and high-fi late for usability testing.
Information Architecture: The Blueprint for Your App
Think of Information Architecture (IA) as the blueprint for an app, defining its structure before visual design begins. It dictates navigation and content organization to make things findable.
Building Custom Figma Widgets with the Widget API
Build interactive objects on the Figma canvas using a React-like API. The Widget API uses components, functions, and hooks to create tools like polls or timers. The footgun is forgetting `useSyncedState`, which breaks your widget in multiplayer sessions.
Figma's Plugin API: Read and Write to the Canvas Tree
Think of a Figma file as a node tree. The Plugin API gives your JavaScript code read/write access to this tree to automate design tasks. Use it to batch-edit layers or generate content. The main footgun: files load dynamically, so you must use async APIs.
Figma Codegen: Turn Designs into Framework-Specific Code
Figma codegen plugins are custom translators for Dev Mode, turning designs into framework-specific code. Use them to generate React components or extract i18n strings.
Tokens Studio: Git-Backed Design Tokens in Figma
Tokens Studio treats design tokens like code, using a Git repo as the single source of truth instead of a Figma file. It syncs tokens across files and bridges the gap to developer workflows, enabling a true single source of truth for your design system.
Automated Design Linting: Your Design System's Spellchecker
Design linting is like a spellchecker for your UI, automatically flagging inconsistencies against your design system. It catches missing styles or wrong colors before handoff, ensuring consistency. The footgun: a 'clean' file isn't necessarily a good design.
Figma: Order Matters in Chained Actions
Think of Figma actions as a script running sequentially on one trigger. This lets you build complex logic, like updating a variable and navigating based on its new value. The footgun: order is critical, as actions execute top-to-bottom.
Figma String Variables: Manage UI Text in One Place
A string variable is a single source of truth for UI text. Instead of typing text directly, you apply a variable. This is key for managing translations or different component states, like a button label changing from 'Submit' to 'Submitting...'.
Private Plugins: Internal Tools, Not Public Apps
Private Figma plugins are internal tools, not public apps, built for your team's eyes only. Use them to connect to internal APIs or automate workflows with a private design system. The footgun is building one when a simpler script would suffice.
Figma Library Analytics: Measure Your Design System's Impact
Treat your design system like a product by measuring its adoption. Figma's Library Analytics shows which components and styles are actually used, guiding decisions on what to build, improve, or deprecate.
Figma's Organization Plan: Structure and Permissions
Think of a Figma Org as a company-wide container for all design work, providing unlimited teams, SSO, and shared libraries. The main footgun: confusing paid seats with permissions. A seat grants product access, but permissions control a user's actions.
Figma Branching: A Sandbox for Your Design System
Branching in Figma is like Git for designers. It creates a safe copy (a branch) of your main file for experimentation, perfect for trying new ideas or updating components without risk.
Figma Dev Mode: Visually Diff Your UI
Treat UI changes like a code diff. Figma's Dev Mode lets you visually compare component versions side-by-side or as an overlay. This helps you see exactly what changed between handoffs, preventing drift. The footgun is ignoring the code and property diffs.
Get Figma bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.