Easy everything in Design & UX, page 8
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'.
Alt Text: Giving Images a Voice for Everyone
Alt text gives an image a voice when it can't be seen. It's read by screen readers for accessibility and displayed if an image breaks. The footgun is writing "image of..." or leaving it blank; instead, describe the image's content and purpose.
POUR: The Four Pillars of Web Accessibility
POUR is a mental model for web accessibility. It asks: can users Perceive content, Operate the interface, Understand the information, and use it with Robust tools? It applies to all UI design.
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 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.
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.
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.
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.
RGB vs. HSL: Two Ways to Tell a Computer 'Color'
RGB tells a computer how to mix light (Red, Green, Blue), while HSL describes color how humans perceive it (Hue, Saturation, Lightness). Use RGB for brand colors and HSL for intuitive variations. The footgun is creating low-contrast UIs that are unreadable.
Anatomy of a Typeface: Why Letters Lie to Your Eyes
Typeface anatomy is a system of optical illusions. Letters are drawn with inconsistent dimensions to appear uniform. This is why a circle must be taller than a square to look the same size. The footgun is trusting bounding boxes over your eyes for alignment.
Visual Hierarchy: Guiding the User's Eye
Visual hierarchy guides the user's eye by making important things look important. It uses contrast in size, color, and placement to create a path of importance, like a big headline versus small footer text.
Nielsen's 10 Heuristics: Rules of Thumb for UI Design
Nielsen's Heuristics are ten rules of thumb for evaluating if a design is user-friendly. Use them to spot usability issues in any interface, from apps to stovetops. The biggest mistake is treating them as strict laws, not flexible guidelines.
User-Centered Design: Build for Who, Not What
User-Centered Design (UCD) puts the user's goals, tasks, and environment at the core of development. This process shapes software and websites through user personas and real-world testing.
VUI Design: Making Computers Talk Like People
Think of VUI design as scripting a helpful human conversation, not just a command-line interface with a voice. It's key for voice assistants and smart speakers. The footgun is ignoring persona; if you don't design one, you'll get 'boring' by default.
Theme Object: Your Design System's Single Source of Truth
A theme object is a central dictionary for your UI's design tokens, like colors and font sizes. It ensures consistency across components by providing a single, shared source for styling values.
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