All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8668 bites
Page 258
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.
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.
The Golden Ratio in UI Design
The Golden Ratio (1.618) is a proportion from art and nature used to create visually harmonious UI. Apply it to set layout dimensions or create a typographic scale (e.g., a 26px header for 16px body text).
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.
White Space: Designing with Nothing
White space isn't just empty background; it's an active tool for grouping related elements and separating unrelated ones. Use it to improve readability and create focus. The footgun is seeing it as leftover space to be filled, which creates visual clutter.
Semantic Naming for Design Tokens
Don't name a token by its value (blue-500); name it by its job (color.action.primary). This decouples design intent from implementation, making systems scalable. It's key for theming and avoiding "lie" variables when designs change.
Kerning, Tracking, and Leading: Spacing in Typography
Kerning adjusts space between two letters, tracking adjusts space across a whole word, and leading controls vertical line spacing. These are used in UI and branding to improve readability. The footgun is confusing kerning (pairs) with tracking (groups).
.png&w=1600&q=75)
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.
SVG: Code-Based, Infinitely Scalable Graphics
Think of SVG as HTML for graphics. It's an XML file with drawing instructions, not pixels, so images scale perfectly. It's ideal for logos and icons on responsive sites. The footgun: SVGs can contain JavaScript, posing a security risk (XSS) if not sanitized.
WCAG Color Contrast: A Readability Score, Not an Opinion
WCAG color contrast is a mathematical ratio ensuring text is readable for people with vision impairments. Use it for all text and UI elements. The footgun is only testing on a good monitor or forgetting that large text has a lower 3:1 requirement.