Advanced concepts in UI Design & Figma, page 2
Figma's Organization Plan: Structure and Permissions
Think of a Figma Org as a company-wide container for all design work, providing unlimited teams, SSO, and shared libraries. The main footgun: confusing paid seats with permissions. A seat grants product access, but permissions control a user's actions.
Figma Library Analytics: Measure Your Design System's Impact
Treat your design system like a product by measuring its adoption. Figma's Library Analytics shows which components and styles are actually used, guiding decisions on what to build, improve, or deprecate.
Private Plugins: Internal Tools, Not Public Apps
Private Figma plugins are internal tools, not public apps, built for your team's eyes only. Use them to connect to internal APIs or automate workflows with a private design system. The footgun is building one when a simpler script would suffice.
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.
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.
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.
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