Figma
208 bites tagged Figma — interview questions with model answers, and 60-second explainers.
Figma Versioning for Clean Developer Handoff
Treat Figma's version history like a Git commit log, not just an undo. Create named versions to give developers a stable, immutable design target for handoff, preventing them from building against a file that's still in flux.
Figma for VS Code: Designs Inside Your Editor
Embed a live Figma inspector in your IDE to stop switching contexts. Use it to grab code snippets, check measurements, or reply to comments without leaving VS Code. The footgun: it's for inspection, not editing—you can't change the design itself.
Figma's Handoff Status: A Traffic Light for Devs
Think of Figma's handoff status as a traffic light for your designs, signaling what's safe to build. Designers mark sections `Ready for dev`, and Figma automatically flags them as `Changed` if modified.
Figma Dev Mode: From Design to Code Snippets
Figma's Dev Mode translates designs into code snippets, not just redlines. Select an element to get CSS, Swift, or Android XML with layout and style properties. The footgun is relying on this starter code; use Code Connect to link to your real design system.
From Design to Code: Inspecting in Figma
Inspection translates a design into code-ready specs. It's the "view source" for a design file, showing exact colors, sizes, and spacing. Developers use it to build UIs; designers use it to verify consistency. Don't blindly copy auto-generated code.
Figma: Exporting Assets for Handoff and Sharing
Exporting is Figma's shipping department, packaging designs into standard files like PNGs or SVGs. Use it to hand off assets to developers or share mockups with stakeholders. Footgun: If you can't see the Export panel, the file owner likely restricted it.
Figma Dev Mode: The Developer's View of Design Files
Figma's Dev Mode is a developer-focused lens for design files, translating visuals into code specs. Developers use it to inspect properties, grab code snippets, and track changes. The footgun is building from designs not explicitly marked 'Ready for dev'.
Figma Accessibility Annotations: Spec for Developers
Accessibility annotations embed a11y specs directly into your Figma file, translating visual design into build instructions. They're used during handoff to specify screen reader order and roles. The footgun is inconsistency; use a plugin or a system.
Figma: Stacking Multiple Interactions on One Object
Stack multiple interactions on a single Figma object by treating each as a separate event listener, like `onClick` and `onHover`. This is essential for components with hover states that also need to navigate.
Figma Video: It's a Fill, Not a Layer
Treat video in Figma as just another fill, not a special layer. Apply it to any shape to prototype video players or motion backgrounds. The footgun is forgetting it requires a paid plan to upload and won't play in the Figma mobile app.
Figma Expressions: Dynamic Prototypes with Logic and Math
Figma expressions are like mini-formulas in your prototype, letting you manipulate variables with math and logic. Use them to build shopping carts that calculate totals or progress bars that fill up.
Preserve Scroll Position: Seamless Figma Prototypes
Preserve scroll position makes Figma prototypes feel real by remembering where a user scrolled, even after navigating away. It's essential for long lists or maps. The footgun: if scrollable layers aren't identically named and structured, the position resets.
Figma Interactive Components: Prototype Smarter
Interactive Components build prototype logic directly into your component variants. Instead of wiring up hundreds of frames for a form, you define interactions like 'On Click' or 'Hover' once, and every instance inherits them.
Figma Prototype Scrolling: Simulating Overflow
Think of a frame as a window onto your content. To make it scroll, the content must be larger than the window. Use this for long pages, image carousels, or to fix navbars. The biggest footgun: if content doesn't extend beyond the frame, there's nothing.
Figma's Slot Pattern: Flexible Components Without Detaching
Think of a slot as a 'bring your own content' area within a Figma component. It lets you customize instances with unique layouts, like in a card or modal, without detaching them from the main component and breaking your design system.
Breaking the Link: Detaching Figma Instances
Detaching an instance in Figma permanently breaks its link to the main component, converting it into a standard frame. Use this to make changes overrides can't handle or to create a new component variation.
Figma Libraries: Your Team's Single Source of Truth
A Figma library is your team's shared toolbox, ensuring everyone uses the same approved components. Use it to distribute your design system across files. The footgun is forgetting to publish updates, leaving teammates with outdated, inconsistent designs.
Instance Swap Properties: Control Nested Components
An instance swap property is like a designated parking spot for a nested component. It tells designers 'you can swap this part out' and provides recommended replacements, like swapping an icon in a button.
Figma Text Properties: Beyond Font and Size
Text properties are your toolkit for precise typographic control, managing readability and hierarchy beyond just font and size. Use them to adjust line height for paragraphs, letter spacing for headings, and alignment for layout consistency.
Nesting Components: Building Systems, Not Just Screens
Nesting components is like building with Lego: you combine small, reusable pieces (icons, buttons) into larger structures (cards). This is key for scalable design systems, where a card might contain nested icon and button instances.
Figma Components: Main vs. Instance
Think of a main component as a cookie cutter and instances as the cookies. The main component defines the master design (e.g., a button's shape). Instances are linked copies you use everywhere.
Auto Layout's `border-box`: strokesIncludedInLayout
Figma's `strokesIncludedInLayout` is the equivalent of CSS `box-sizing: border-box`. It makes an Auto Layout frame's total dimensions include its stroke, preventing size changes.
Figma REST API: Access Design Files as Structured Data
The Figma REST API treats your design files as structured JSON data, not just images. Use it to automate workflows like exporting assets, syncing design tokens, or posting comments. The main footgun is using the wrong base URL for Government vs.
Figma Color Profiles: sRGB vs. Display P3
Figma's color profiles ensure consistent color across screens. Use sRGB for web standard compatibility or Display P3 for more vibrant colors on modern displays.
Get Figma bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.