Concepts in Design & UX, page 9
Meta Description: Your Sales Pitch on Google
A meta description is the ~155-character sales pitch for your webpage in search results. It's your chance to convince a user to click your link over others. The footgun: Google may ignore it and show a different snippet if it better matches the query.
Likert Scale: A Ruler for Opinions
A Likert scale turns subjective feelings into data by asking users to rate their agreement with a statement on a balanced scale. It's used in UX surveys to gauge attitudes.
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.
Unit Testing UI Components: Beyond the DOM Mock
Unit tests for UI components verify individual pieces in a mocked browser environment (jsdom). This is standard for checking component logic with Jest or Vitest, but it can't test visual rendering, element sizes, or layout, creating critical blind spots.
HTML Header Tags: More Than Just Big Text
Header tags (<h1>-<h6>) are your page's skeleton, creating a navigable outline for users and search engines. Use a single <h1> for the main title, then nest <h2>, <h3>, etc., for sections.
CSAT: Measuring If You Met Customer Expectations
CSAT measures if your product met a customer's expectations for a specific interaction. It's used to evaluate experiences like a support call or purchase, giving a direct pulse check on service quality.
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.
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.
Long-Tail Keywords: Winning with Specificity
Long-tail keywords are specific, multi-word search queries. While each has low traffic, they collectively form the majority of search volume. Use them to target niche audiences with high intent, like 'waterproof hiking boots for wide feet' instead of 'boots'.
Heatmaps: Visualizing User Attention
Think of a heatmap as a weather map for your app, showing 'hot' spots of user clicks and 'cold' spots they ignore. It reveals if users are clicking key buttons or getting distracted. The footgun: a hot spot can mean rage-clicks, not just engagement.
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.
Chromatic: Visual Regression Testing for Components
Chromatic is a smoke detector for your UI's appearance, taking snapshots of every component on every commit to catch unintended visual changes. It's used in CI/CD to prevent visual regressions when refactoring. The footgun is relying on it for business logic.
Internal Linking: Your Site's GPS for Users and Bots
Think of internal links as a GPS for your website, guiding users and search engines to important content. It's crucial for SEO, helping bots discover pages and keeping users engaged. Neglecting this creates "orphan pages" that search engines may never find.
P-Value: Gauging Surprise, Not Certainty
A p-value measures surprise: it's the probability of seeing your results by chance, assuming your change had no effect. It's used in A/B testing to decide if an effect is noise or significant. A small p-value doesn't prove your hypothesis is true.
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.
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.
Topical Authority: Proving Your Expertise to Google
Prove you're an expert on a whole subject, not just a keyword. Google uses this 'topical authority' system to rank news in health or finance, but the principle applies to any site aiming for credibility. The footgun is thinking it's only for news sites.
Customer Effort Score (CES): Measure Task Friction
Customer Effort Score (CES) measures how much work a customer expends to complete a task. It answers 'How easy was it?' right after a support interaction, purchase, or onboarding.
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.
WCAG Conformance Levels: A, AA, and AAA
WCAG levels are a tiered rating for web accessibility. Level A is the minimum, AA is the widely accepted standard, and AAA is the highest. This helps teams set clear, testable goals. The footgun: don't require AAA for an entire site, as it's often impossible.
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