All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4247 bites
Page 32
Figma String Variables: Manage UI Text in One Place
A string variable is a single source of truth for UI text. Instead of typing text directly, you apply a variable. This is key for managing translations or different component states, like a button label changing from 'Submit' to 'Submitting...'.
Mathematical Expressions in Figma Prototypes
Use variable modes as contexts for math in Figma prototypes. Instead of creating one variable per item, a single number variable with multiple modes lets expressions calculate independent counts, like separate produce counters in a shopping cart.
Figma: Order Matters in Chained Actions
Think of Figma actions as a script running sequentially on one trigger. This lets you build complex logic, like updating a variable and navigating based on its new value. The footgun: order is critical, as actions execute top-to-bottom.
Automated Design Linting: Your Design System's Spellchecker
Design linting is like a spellchecker for your UI, automatically flagging inconsistencies against your design system. It catches missing styles or wrong colors before handoff, ensuring consistency. The footgun: a 'clean' file isn't necessarily a good design.
Tokens Studio: Git-Backed Design Tokens in Figma
Tokens Studio treats design tokens like code, using a Git repo as the single source of truth instead of a Figma file. It syncs tokens across files and bridges the gap to developer workflows, enabling a true single source of truth for your design system.
Figma Codegen: Turn Designs into Framework-Specific Code
Figma codegen plugins are custom translators for Dev Mode, turning designs into framework-specific code. Use them to generate React components or extract i18n strings.
Figma's Plugin API: Read and Write to the Canvas Tree
Think of a Figma file as a node tree. The Plugin API gives your JavaScript code read/write access to this tree to automate design tasks. Use it to batch-edit layers or generate content. The main footgun: files load dynamically, so you must use async APIs.
Building Custom Figma Widgets with the Widget API
Build interactive objects on the Figma canvas using a React-like API. The Widget API uses components, functions, and hooks to create tools like polls or timers. The footgun is forgetting useSyncedState, which breaks your widget in multiplayer sessions.
Information Architecture: The Blueprint for Your App
Think of Information Architecture (IA) as the blueprint for an app, defining its structure before visual design begins. It dictates navigation and content organization to make things findable.
Wireframing: The Blueprint for Your UI
A wireframe is a UI blueprint that shows a screen's structure, not its visual design. Use it early to agree on layout and function before getting lost in colors and fonts. The footgun is adding too much detail, which distracts from its core purpose.
Iterative Design: Build, Test, Learn, Repeat
Iterative design is a cycle of building, testing, and refining based on user feedback. It's standard for app development, where you ship a basic version and improve it with data. The footgun is mistaking any change for iteration; it requires real user testing.
Low-Fi vs. High-Fi Prototypes: Test Ideas Fast vs. Polish for Realism
Low-fi prototypes are quick sketches to test core ideas and flows. High-fi prototypes are detailed, interactive mockups that look and feel like the final product. Use low-fi early for brainstorming and high-fi late for usability testing.
Usability Testing: Watch Real Users, Not Just Experts
Usability testing evaluates a product by observing real, first-time users interact with it, revealing flaws that designers often miss. It's used to validate design intuitiveness before launch.
The Design Critique: Improving Work with Focused Feedback
A design critique is a structured conversation to measure a design against its goals, not a session for subjective opinions. It helps get early feedback on feasibility or catch inconsistencies.
Mental Models: Design for What Users Believe
A mental model is the user's internal story of how your UI works, based on past experiences, not your design spec. This is why users expect your site to work like others they've used. The footgun is assuming users share your expert model; they don't.
Heuristic Evaluation: An Expert UI Review on a Budget
Heuristic evaluation is like having an expert proofread your UI against a checklist of common usability flaws. It's a fast, cheap way to catch problems before writing code, but its value depends entirely on the evaluator's skill.
Card Sorting: Let Users Design Your Navigation
Card sorting reveals your users' mental models by having them group topics. Use this to design intuitive navigation menus and information architecture. The footgun is testing with internal teams instead of actual users or subject matter experts.
Layout Grids: Your Blueprint for Consistent UI
Layout grids are visual blueprints for frames, enforcing structure and alignment. Use them to create consistent, responsive layouts for web and mobile. A common footgun is using fixed-width columns instead of 'Stretch' columns, which breaks responsiveness.
The 8-Point Grid: A Shared Language for UI Spacing
The 8-point grid system stops spacing debates by making every dimension and gap a multiple of 8px. It's used in design systems like Google's to create consistent layouts that render cleanly across devices. The biggest mistake is breaking the rule for "feel."
Figma Constraints: Building Responsive Layouts
Constraints are rules for how layers react when their frame is resized. Use them to build responsive designs, like pinning a logo to the top-left or stretching a background. The footgun: Constraints don't work on groups or inside Auto Layout frames.