Figma
208 bites tagged Figma — interview questions with model answers, and 60-second explainers.
Figma Shape Tools: Your Design Building Blocks
Figma's shape tools are the building blocks for any design. Use them to create everything from buttons and icons to dividers. The footgun: forgetting to hold `Shift` for perfect squares/circles or `Option/Alt` to resize from the center, slowing you down.
Figma: Frames vs. Groups
A Frame is a container with its own size, like an artboard; a Group's size just shrinks to fit its contents. Use Frames for UI components with fixed dimensions and clipping, and Groups for simple collections.
Baseline Grid: Aligning Text for Vertical Rhythm
A baseline grid is like ruled notebook paper for your UI, forcing all text to sit on common horizontal lines for clean vertical rhythm. Use it in text-heavy layouts to improve readability.
Modular Grid: Organizing UI with Cells, Not Just Columns
Think of a modular grid as spreadsheet cells for your UI. It extends a column grid with horizontal rows, creating a matrix of modules. It's ideal for repeating items like product cards or dashboard widgets.
Focal Point: You Can't Emphasize Everything
A focal point guides the user's eye by making one element dominant. To make something stand out, other elements must fade into the background. Use it to draw attention to a call-to-action or headline. The footgun is trying to emphasize everything at once.
Figma's Auto Layout Grid
Figma's Auto Layout Grid arranges items in a true 2D grid of rows and columns. Use it for complex, responsive layouts like dashboards or bento boxes. The footgun is expecting items to auto-wrap; it's a structured grid, not a flowing container.
Icon System Design: Build Once, Use Everywhere
Treat icons as reusable building blocks, not one-off graphics. A systematic setup in Figma ensures consistency and speeds up your entire design process. The footgun is skipping standardization, which creates tedious overrides and visual debt later on.
Color Schemes: The Logic of Color Harmony
A color scheme is a logical combination of colors to achieve a goal, not just a random palette. It's used in UI design for brand consistency, in data viz to encode information, and in safety systems for high visibility.
Rule of Thirds: Guide the Eye, Don't Just Center
Don't center your subject; place key elements along the lines or intersections of a 3x3 grid. This creates a more dynamic, visually interesting composition in photos and UI layouts. The footgun is treating it as a rigid law; sometimes centering is better.
Figma's Library Analytics API: Quantify Your Design System's Impact
Figma's Library Analytics API lets you quantify your design system's impact by tracking component usage. Use it to find adoption trends or get a snapshot of where components are used. The footgun: data for files you can't access is obfuscated, not omitted.
Design Linting: A Spellchecker for Your Designs
Design linting is like a spellchecker for your design files, automatically flagging inconsistencies against your design system's rules. It helps maintain visual consistency at scale and speeds up design reviews.
Component Detachment Rate: A Design System Health Metric
Component Detachment Rate is a design system health metric, like customer churn. It tracks how often designers must break a component's link to its source to make custom changes, signaling that the component is too rigid or lacks needed variants.
Token Studio: Bridge Figma Designs to Production Code
Token Studio is a control panel for your design system's raw values, bridging Figma with production code. Use it to manage themes and sync design decisions to a developer-accessible Git repo. The main footgun is using it only locally for Figma styles.
Figma-to-Code: From Pixels to Production Code?
Figma-to-code tools act as translators, turning visual mockups into code. This speeds up bootstrapping new components or prototypes, but the output is rarely production-ready and often needs heavy refactoring to be performant and maintainable.
Figma Variables: The Single Source of Truth for Tokens
Figma variables are the central vault for your design tokens, letting you reference a name like `color-background` instead of a hardcoded value. Use them to build scalable themes and update spacing across an entire app.
Figma Team Libraries: A Single Source of Truth
Think of a Figma Library as a shared box of official LEGOs for your team. It ensures everyone uses the same approved components, styles, and variables, keeping designs consistent. The biggest footgun is forgetting to publish changes to the main components.
Get Figma bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.