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 33
Visual Balance: Arranging UI Elements for Stability
Think of visual balance like a seesaw for your UI. Elements have "visual weight" from their size and color, and a balanced design distributes this weight so the layout feels stable.
The Figma Interface: Your Digital Design Workshop
Figma's interface is a digital workshop: a central canvas for your work, a left sidebar for layers and assets, and a right sidebar for properties. It's the hub for UI/UX design, prototyping, and developer handoff.
Figma Vector Networks: Graphs, Not Just Chains
Vector networks are graphs, not just chains. Unlike traditional paths where a point connects only two lines, a vector network allows multiple lines to meet at a single vertex. This is Figma's engine for complex shapes.
Boolean Operations: Non-Destructive Shape Math
Boolean operations are non-destructive shape math, combining layers into complex forms while keeping the original pieces editable. Use them for icons and illustrations. The footgun: intersecting non-overlapping shapes makes them disappear until they touch.
Figma Prototypes: Build Interactive Flows, Not Just Screens
Figma prototypes turn static designs into interactive user journeys by connecting frames. Use them to test user flows, present to stakeholders, or get feedback before writing code. The footgun: a single top-level frame can only be one flow's starting point.
Figma's Smart Animate: Motion Without Keyframes
Figma's Smart Animate creates fluid animations by tweening layers between frames. It's perfect for prototypes with expanding cards, sliding toggles, or parallax effects.
Figma Instance Overrides: Local Changes, Global Components
Instance overrides let you customize a component copy without breaking its link to the main. Use them to change a button's text or swap an icon for a specific context. The footgun: Overrides are lost when swapping variants if layer names don't match.
Base Component Pattern: Your Design System's Template
Think of a base component as a master template for UI elements. Changes to the master instantly update every copy, ensuring consistency. Use it for repeated elements like buttons or icons that need slight variations.
Figma Prototype Flows: Isolate User Journeys
Prototype Flows are named entry points for testing distinct user journeys in one file. Instead of separate pages for 'Sign Up' and 'Checkout,' create a flow for each. This keeps complex designs organized.
Prototype Triggers: Defining How Users Interact
A prototype trigger is the 'if' in an 'if-then' UI interaction, defining the user input that causes a change. It's used in design tools to simulate app behavior, from clicks to drags.
Prototype Animations: Guiding Users Between States
Think of prototype animations as visual storytelling, showing the relationship between a user's action and the resulting UI state. Use them to show menus expanding or pages sliding in.
Design System Governance: Preventing UI Drift
Design system governance is the constitution for your UI, defining how components evolve, not just what they are. It prevents the slow drift where production code diverges from the Figma library as teams make local exceptions.
Versioning a Design System with Semantic Versioning
Use Semantic Versioning (MAJOR.MINOR.PATCH) to signal the impact of design system changes. This tells teams if an update is a breaking change (MAJOR), a new feature (MINOR), or a bug fix (PATCH).
Drive Design System Adoption, Don't Just Build It
Treat your design system like an internal product, not a one-off project. To drive adoption, show quick, measurable wins and offer tiered onboarding for different roles.
Design System Docs: The Product, Not the Afterthought
Treat your design system documentation as a product, not a cleanup task. It's the instruction manual that prevents your component library from being misused. It's essential for scaling a design system to ensure consistency and speed up onboarding.
Figma Comments: Annotate Designs for Better Handoff
Figma comments are the inline documentation for your designs, bridging the gap between a static screen and its intended behavior. Use them to clarify interactions and edge cases directly on the canvas. The footgun is assuming the design speaks for itself.
Real-time Collaboration: Figma's 'Multiplayer' Model
Real-time collaboration uses a central server as the single source of truth for a file. Instead of passing copies, users connect to the same live document, enabling simultaneous editing in tools like Figma.
Figma Comments: Your Team's Built-in Critique Layer
Think of Figma comments as a critique layer on your design. They tie feedback directly to specific elements for asynchronous review, letting you iterate faster without constant meetings. The footgun: Over-mentioning creates notification fatigue.
Figma Pages: The Folders Inside Your Files
Think of Figma pages as folders within a single file. They let you organize complex projects by giving you separate canvases for different design stages, user flows, or component libraries. The main footgun: free plans limit you to only three pages per file.
Figma Permissions Cascade Downward
Figma permissions flow downward: team access opens every project and file inside it. Use share links for quick reviews, but direct invites gate specific files. Inviting someone to a team exposes every project, while a file invite keeps the rest hidden.