Usability Testing

Design tokens are the smallest units of a design system — named values representing colors, spacing, typography, border radii, and other visual properties. They act as a single source of truth that can be translated into platform-specific formats (CSS variables, Swift constants, XML resources). By changing token values in one place, you can update the look and feel of an entire application across multiple platforms simultaneously.

Atomic Design is a methodology by Brad Frost for creating design systems by breaking interfaces into five hierarchical levels: atoms (basic HTML elements), molecules (simple component groups), organisms (complex UI sections), templates (page-level layouts), and pages (specific instances with real content). This approach provides a consistent mental model for organizing component libraries in React, React Native, or Flutter projects and ensures systematic scalability of the UI.

Dark mode is a UI color scheme that uses light-colored text and elements on a dark background. It reduces eye strain in low-light environments, can save battery on OLED screens, and has become an expected feature in modern applications. Implementation typically involves CSS custom properties or design tokens that switch between light and dark theme values, often respecting the user's system-level preference via the `prefers-color-scheme` media query.

A modal (or modal dialog) is a UI element that overlays the main content to demand user attention and interaction before they can return to the underlying page. Modals are used for confirmations, forms, alerts, and content previews. Proper implementation requires focus trapping, keyboard accessibility (Escape to close), and preventing background scroll — making accessible modals more complex than they appear.

A skeleton screen is a placeholder UI that mimics the page layout with simple shapes and animated gradients while content is loading. Unlike spinners, skeletons give users an immediate sense of the page structure, reducing perceived loading time. They are widely used in apps like Facebook, YouTube, and LinkedIn to create a smoother transition from loading to loaded state.

Figma is a browser-based collaborative design tool used for creating UI designs, prototypes, and design systems. Its real-time multiplayer editing, component system, auto layout, and dev mode have made it the industry standard for product design. Developers use Figma to inspect designs, extract CSS values, export assets, and — through plugins and APIs — automate the design-to-code workflow.