Intermediate everything in UI Design & Figma, page 9
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 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.
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.
.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.
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.
Jakob's Law: Don't Reinvent the UI Wheel
Users spend most of their time on other sites, so they expect yours to work like everything else they already know. Leverage familiar patterns for navigation, icons, and workflows.
Affordances Are Actions, Signifiers Are Clues
An affordance is what's possible (a door can be pushed), while a signifier is the clue telling you how (the flat plate). In UI, a button's styling is a signifier for its click affordance. The footgun is saying 'affordance' when you mean 'signifier'.
UI Typography for Readability
Good typography isn't about fancy fonts; it's about making content effortless to read by controlling size, spacing, and alignment. It's crucial for body copy, headings, and labels. The footgun is using justified text or lines over 90 characters long.
Color Theory: Harmony, Contrast, and Meaning in UI
Color theory is a system for using contrast, harmony, and symbolism to guide user experience. It's applied in UI to create visual hierarchy, evoke brand emotions, and ensure readability.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles