CSS | Techlist.io

discordFeb 18, 20263 min readCurated summary

Discord Patch Notes: February 4, 2026

Discord’s February 4, 2026 patch focuses on performance, streaming, permissions, mobile consistency, and bug fixes across desktop, iOS, and Android. The largest improvements include faster desktop rendering, zoomable screenshares, a new Slowmode bypass permission, and continued migration of Discord’s audio/video backend to Rust. The update also adds usability refinements and resolves numerous interface, profile, notification, and stability issues. ## Performance and Infrastructure - Desktop navigation and interaction are significantly faster, especially on systems with limited processing capacity. - The improvements were primarily achieved by replacing slow CSS selectors rather than optimizing APIs or components. - More than 80% of Discord’s audio/video traffic now runs through the Rust-based backend. - Stream previews load substantially faster during the start-stream process. ## Screensharing and Media - Users can zoom and pan screenshares and game streams with a mouse wheel or laptop trackpad. - Android now correctly plays videos containing multiple audio tracks, such as microphone and game audio. - Currently playing voice messages stop correctly when users log out. - Android Group DM notifications now show the group name instead of the sender’s name, matching iOS behavior. ## Server Permissions and Time Formatting - A new **Bypass Slowmode** permission lets server administrators trust selected members to bypass slowmode restrictions. - The permission can be integrated into existing roles through Role Settings until February 23. - Desktop now includes an `@time` command for generating localized Linux timestamps that automatically adapt to each viewer’s time zone. ## General Usability Improvements - Vibing Wumpus has been updated to version 2.0 and can be summoned with: - `Ctrl+Alt+Shift+W` on Windows/Linux - `Cmd+Option+Shift+W` on macOS - Pressing Escape while editing a desktop profile no longer closes the entire profile modal. - Copying with nothing selected no longer clears the clipboard. - Browse Channels on mobile has officially left beta. - Clicking role mentions now shows users assigned to that role for all stable users. - Invite Friends to Server supports both usernames and display names. - Ignoring a friend request correctly changes the action from “Accept Friend Request” to “Add Friend.” ## Profile, Themes, and Server Interface Fixes - Fixed cursor-jumping while editing the About Me section. - Avatar Decorations now render correctly in per-server profile editing. - Profile Theme gradients fill their modal correctly. - Server tags now appear accurately in desktop profile previews. - Fixed alignment and styling issues in Members, Emoji, Connections, and Display Name Styles interfaces. - iOS Client Themes no longer scroll at extremely high speed. - Channel categories on iOS no longer resemble unread channels. - Android no longer displays an extra bottom bar that blocks interaction. ## Stability and Bug Fixes - Fixed crashes involving related stickers in servers without text channels. - Prevented duplicate Checkpoint and gift-reception modals. - Emoji editing no longer creates duplicates when Finish is clicked twice quickly. - Desktop Inbox filtering works correctly again. - Fixed a desktop lockup that could occur after adding a game to a profile without saving. - Mobile Community setup now renders properly. - The Shop displays multiple columns correctly on affected Android devices. - Keybinds involving keys above F10 now persist correctly. - Event previews properly render Markdown. - On iOS, GIF avatars selected through the GIF picker remain animated instead of becoming static images. - Additional fixes address onboarding overlays, dangerous-download modal spacing, role selection transparency, event buttons, server uploads, and localized status text. Discord’s update is primarily a quality and performance release. Users should see the greatest immediate benefits from faster desktop interactions, improved streaming controls, better mobile behavior, and more precise server administration tools, although individual fixes may continue rolling out by platform.

Read original

CSS Android iOS Rust+2

metaJan 12, 2026Original article

CSS at Scale With StyleX (opens in new tab)

Scaling CSS within massive codebases presents unique challenges that traditional styling methods often struggle to solve effectively. Meta’s StyleX addresses these issues by offering a system that combines the intuitive ergonomics of CSS-in-JS with the runtime performance of static CSS. By prioritizing atomic styling and definition deduplication, StyleX minimizes bundle sizes and has become the primary styling standard across Meta's entire suite of applications. ### Performance-Driven Styling Architecture * Combines a CSS-in-JS developer experience with a compiler that outputs static CSS to ensure high performance and zero runtime overhead. * Utilizes atomic styling to break down CSS into small, reusable classes, which prevents style sheets from growing linearly with the size of the codebase. * Automatically deduplicates style definitions during the build process, significantly reducing the final bundle size delivered to the client. * Exposes a simple, consistent API that allows developers to manage complex styles and themes while maintaining type safety. ### Standardization and Industry Adoption * Serves as the foundational styling system for Meta’s most prominent platforms, including Facebook, Instagram, WhatsApp, Messenger, and Threads. * Gained significant industry traction beyond Meta, with large-scale organizations such as Figma and Snowflake adopting it for their own web applications. * Acts as an open-source force multiplier, allowing Meta engineers and the broader community to collaborate on solving CSS-at-scale problems. * Provides a mature ecosystem that bridges the gap between the flexibility of JavaScript-based styling and the efficiency of traditional CSS. For engineering teams managing large-scale web applications where bundle size and styling maintainability are critical, StyleX offers a battle-tested framework. Developers can leverage this tool to achieve the performance of static CSS without losing the expressive power of modern JavaScript tooling.

CSS Atomic Css Stylex Css In Js+2

figmaSep 24, 20252 min readCurated summary

Bringing Figma Make to the Canvas | Figma Blog

Figma is bringing its AI-generated Figma Make previews directly into the Figma Design canvas through a new “Copy design” feature. Users can copy previews as editable, structured layers rather than static screenshots, making it easier to refine ideas collaboratively and move from prompt to prototype to production. Figma views this as the first step toward making Make outputs fully native and integrated with Design. ## Copying Make previews as editable layers - “Copy design” lets users bring any design from a Figma Make preview into Figma Design. - Imported previews become editable layers that can be: - Edited and remixed - Refined by teams - Used as building blocks for further design work - The feature removes the need for extra exporting, naming, or switching between separate workflows. - A product manager, for example, can generate and refine a mockup in Make, then place it into the Design canvas for the team to develop further. ## From screenshots to collaborative building blocks - Figma emphasizes that Make outputs should be more than finished-looking images. - Structured layers preserve context and enable direct iteration on the canvas. - This creates a more flexible path from: - Natural-language prompt - Prototype - Collaborative design - Production-ready work - The canvas becomes a shared space where anyone can contribute to and evolve AI-generated ideas. ## Learning from html.to.design - Figma acquired the technology behind <div>RIOTS’ `html.to.design` plugin. - The plugin converts live prototypes and HTML into editable Figma frames. - Figma Make users had already adopted the plugin to reconnect generated prototypes with the Design canvas. - The technology was demonstrated at Config 2025 and has been developed over three years, reaching nearly two million users. - <div>RIOTS will continue independently building and maintaining `html.to.design` and its other tools. - The partnership is intended to accelerate future development and new plugin features. ## Figma’s broader vision for Make - Figma wants AI to accelerate existing creative workflows rather than create isolated outputs. - The company sees the canvas as a place where ideas from any source can be imported, explored, and transformed collaboratively. - Copy design is presented as an early step toward deeper integration between Figma Make and Figma Design. Figma’s recommendation is implicit: use Make for rapid idea generation, then bring those ideas into Design as editable layers for collaborative refinement and production work.

Read original

CSS AI Prototyping Figma Make+3

figmaMay 6, 20253 min readCurated summary

Publish Your Designs On The Web With Figma Sites | Figma Blog

Figma Sites is an all-in-one tool for designing, building, and publishing responsive websites directly within Figma. It replaces the traditional handoff-heavy workflow with an iterative process that combines design, prototyping, interaction, and production. The product is aimed at both designers and teams with limited development resources, while offering advanced customization through responsive layouts, animations, and upcoming AI-powered features. ## Design and Publish Directly in Figma - Users can create live websites without exporting designs or switching to separate development tools. - The workflow supports portfolios, event websites, landing pages, and other interactive web experiences. - Templates, responsive web elements, and ready-made interactions provide starting points for teams with limited design or development resources. - A planned chat-to-code feature, powered by Figma Make, will let users describe interactions or animations for Figma to generate. - Published design libraries can be connected through the inserts panel, allowing teams to reuse components and styles from their design systems. - Figma also provides common building blocks such as navigation, hero sections, and complete page layouts. ## Responsive Design and Prototyping - Figma Sites automatically adapts layouts, text, and designs across breakpoints. - Multi-edit enables simultaneous changes across multiple screen sizes. - Text styles can define different sizing and spacing for each breakpoint without relying on variables. - Designers can preview a fully responsive site rendered in HTML and CSS before publishing. - The preview supports resizing the browser window, observing layout reflow, and switching between breakpoints. - Interactive previews can be shared with collaborators for feedback. ## Built-In Interactions and Motion Figma Sites includes pre-built effects for creating more dynamic websites, including: - Mouse parallax - Lightboxes - Infinite spinning objects - Draggable elements - Typewriter text - Scrambled text reveals - Marquee, reveal, and scroll-based effects The product also introduces interactions not currently available in Figma Design, such as scroll parallax, scroll transforms, and hover or pressed states that do not require interactive components. ## Future Customization and AI Features - Upcoming code layers will allow designers to create interactive experiences without plugins or external tools. - AI chat will help turn static frames into interactive elements, such as draggable lists or geographically accurate clocks. - Code layers will eventually support reusable components and instances, similar to Figma Design libraries. - These features are intended to let designers create increasingly complex web experiences while staying within the Figma workflow. Figma Sites is best suited to teams that want a direct path from visual design to a published, responsive website. Its templates and built-in interactions simplify production, while code layers and AI features are intended to expand its capabilities for more advanced experiences.

Read original

CSS AI Design Systems Prototyping+4

figmaMay 6, 20252 min readCurated summary

Config 2025 Launches Deepen Figma's Design Capabilities As Its Platform Expands | Figma Blog

Figma’s Config 2025 announcements expand the platform from collaborative design into a broader product-development environment. New tools combine AI, code, visual design, websites, and marketing workflows, enabling teams to move from ideas to production within Figma. The company’s conclusion is that design and AI can help more people contribute throughout the development lifecycle. ## New Products - **Figma Make** turns written prompts or existing designs into working prototypes and applications. - **Figma Sites** lets designers build and publish dynamic websites with customizable interactions, code, and AI. - **Figma Draw** adds advanced vector editing and illustration tools to Figma Design. - **Figma Buzz** helps brand and marketing teams produce visual assets at scale while preserving brand consistency, with integrated AI features. ## Expanded AI Capabilities - New image-generation and image-editing tools support faster visual exploration. - Contextual auto-suggestions provide workflow guidance and help users work more efficiently. - FigJam receives additional AI features for brainstorming and collaboration. - Together with Figma Make, these tools are intended to make ideas easier to visualize and turn into functional outputs. ## Responsive Design and Developer Handoff - **Grid** introduces responsive layouts that adapt across screen sizes. - Grid can generate CSS code in Dev Mode, improving communication between designers and developers. - The feature supports Figma’s broader effort to connect design work more directly with implementation. ## Figma’s Expanding Platform - The new offerings join Figma Design, FigJam, Dev Mode, and Figma Slides. - About two-thirds of monthly active users in Q4 2024 worked outside traditional design roles, including roughly 30% who identified as developers. - The announcements reflect Figma’s shift from a design tool toward an integrated platform for ideation, design, development, publishing, and marketing. ## Global Growth - Figma announced full localization for Brazil, including Portuguese translation, culturally adapted interfaces, and dedicated language support. - Brazilian support joins existing Japanese, Spanish, and Korean localization. - Approximately 85% of Figma’s monthly active users were outside the United States in Q4 2024, while more than half of its 2024 revenue came from non-U.S. markets. - The company now employs more than 1,600 people worldwide. The new products and features will roll out over the following weeks. Overall, Figma is positioning itself as a unified environment where designers, developers, marketers, and other collaborators can take products from early concepts through launch.

Read original

CSS Figma Prototyping Generative AI+4

figmaApr 15, 20253 min readCurated summary

Version Control: Three Ways Figma Explored Horizontal Scrolling | Figma Blog

Figma’s request for horizontal scrolling in the Layers panel exposed significant design and engineering complexity. The panel contains interactive, virtualized layers whose names and nesting change dynamically, so scrolling could easily obscure hierarchy or disrupt users’ mental models. Through three unshipped prototypes, the team learned that preserving context and preventing accidental actions mattered more than applying seemingly simple scrolling behaviors. ## Why Horizontal Scrolling Was Difficult - Nested layers can extend beyond the panel, requiring users to move horizontally to see their full hierarchy. - Layers are interactive: users can hide, lock, collapse, and expand them while scrolling. - Virtualization renders only visible layers for performance, meaning newly visible rows may have different text lengths. - The design needed to communicate that more content existed without making the hierarchy harder to understand. - Code-based prototyping with JavaScript, HTML, CSS, and React helped the team test behavior across thousands of layers and complex interactions. ## Version One: Indicators at the Panel Edges - The team explored showing icons at the top-left and bottom-right edges when layers moved out of view. - This symmetrical treatment was intended to help users understand their position in the hierarchy. - Engineering challenges arose because edge icons needed opaque backgrounds that covered layer text while scrolling. - Layer rows did not have enough positional knowledge to determine which areas should be covered or revealed. - The design also created a ragged edge where partially visible layer names ended, introducing visual clutter. - The experiment demonstrated that a symmetrical solution could create new problems, particularly around unused white space. ## Version Two: Automatically Scrolling to Selected Layers - Another prototype automatically scrolled the Layers panel to center a layer selected on the canvas. - Although this made the selected layer easy to find, it often moved the panel both vertically and horizontally. - Testers found the behavior disorienting because parent layers and surrounding context disappeared. - Figma compared the experience to a map suddenly jumping to another location while driving. - The team concluded that users need to retain their mental model of a layer’s name, location, and relationship to parent components. ## Version Three: Renaming Layers While Scrolling - Horizontal scrolling created ambiguity when a user began editing a layer name and then scrolled to another layer. - One possible behavior was to save the edited text automatically when scrolling away. - The team rejected this because scrolling was not a strong enough signal that the user intended to confirm the rename. - The issue highlighted the need to avoid turning navigation actions into irreversible edits. Figma’s experiments show that horizontal scrolling in a dynamic hierarchy is not merely a visual or mechanical feature. The best solution must preserve orientation, context, and user control while handling virtualization and interactive layer states.

Read original

CSS Figma User Interface React+4

figmaApr 7, 20253 min readCurated summary

How to Streamline Your Design System Workflow in Figma | Figma Blog

Figma’s latest design-system updates reduce the repetitive work involved in organizing variables, styles, components, and documentation. The post combines nine quality-of-life improvements with a set of plugins covering the workflow from color and typography foundations through documentation, component specs, and code handoff. Together, these tools aim to make design systems faster to build, easier to maintain, and more useful to developers. ## Reordering Modes and Collections - Modes and variable collections can now be rearranged with drag and drop. - Existing modes and IDs remain intact, avoiding resets, broken dependencies, or out-of-sync designs. - Teams can: - Move frequently used collections to the top. - Group related modes. - Reorganize collections during rebrands or product-line updates. - The default mode can also be changed more easily. ## Nine Quality-of-Life Improvements Figma introduced several smaller improvements intended to remove workflow friction: - A shortcut for jumping directly to a component’s main source. - The ability to duplicate and copy styles. - Options to hide and reveal variable paints. - A clearer component-description interface. - A variable modal that can be dragged from anywhere in its header. - Automatic saving for variable changes. - Tooltips that provide context for component names. - Better alignment for the Edit button. - Improved text overflow handling for long style names. ## Building the Foundations The post recommends using community plugins to accelerate the foundational work of creating colors, typography, spacing, and other core design-system decisions. ### Creating Color Palettes The highlighted tools support different aspects of color-system creation: - **CSS color-mix()** helps create color palettes and gradients. - **Colorbox** generates complete color ramps. - **The Genome Color Tool** helps build color scales that meet WCAG accessibility requirements. ### Establishing Typography and Variables - **Peppercorn** assists with setting up an entire type system. - **Print Variables** creates sticker sheets for variable collections. - **Auto Documentation** generates visual documentation for variables. - **Variables and Styles List** presents variable sheets inside a Figma canvas widget. ## Documenting Components and Styles Documentation tools help teams make systems easier to understand and adopt: - **Propstar** maps component property and prop variations. - **Specs** generates component specifications. - **Similayer** filters for particular layers and properties. - **Style Finder** locates styles across pages. These tools can reduce the manual effort required to explain component behavior and find existing design decisions. ## Bridging Design and Development The recommended implementation tools connect Figma variables and styles with code: - **CTRL Var** supports variable renaming. - **Export Import Variables** moves variables into or out of Figma. - **Handoff** copies CSS variables quickly. - **Variables Converter** translates variables into code. - **Shaper** helps manage token architecture and generate CSS. ## Practical Recommendation Start with Figma’s built-in improvements for organizing collections, modes, styles, and variables, then add plugins selectively for color generation, documentation, component specification, and code handoff. The goal is not to use every tool, but to create a repeatable workflow that keeps design-system foundations consistent and makes implementation easier for developers.

Read original

CSS Figma Design Systems Design Tokens+4

figmaJan 8, 20252 min readCurated summary

Why Developers Should Embrace Creative Coding Again | Figma Blog

Creative coding once made websites distinctive, expressive, and technically ambitious, but templates and automation have made many sites predictable. The author argues that modern browsers now offer even more creative possibilities than before, yet designers and developers often remain constrained by outdated conventions. Reviving experimentation can help turn the web back into a medium for artistic expression rather than merely a container for information. ## From Handcrafted Websites to Templates - In the early 2010s, custom websites served as digital calling cards and demonstrated developers’ technical and creative skills. - Developers used emerging HTML5 capabilities such as: - Inline SVG - GSAP-powered animations - WebGL experiments - Complex CSS illustrations - Website builders and templates eventually made sophisticated features accessible to everyone. - This democratization was valuable, but it also encouraged predictable designs built around familiar patterns. ## The Browser’s Creative Evolution - Browsers now support capabilities that exceed those found in many design tools. - Important advances include: - Container queries - Advanced CSS scoping, inheritance, and responsive behavior - Dynamic units and sophisticated layouts - Improved typography, color handling, and animation - Adaptation to user preferences - Many newer designers and developers remain unaware of these features and continue working within older design paradigms. ## Modern Color and Design Possibilities - CSS supports color spaces beyond standard RGB, including: - HSL - OKLCH - These color spaces allow more vibrant and controlled gradients and transitions. - The author created a Figma plugin called **CSS color-mix()** to help connect modern CSS capabilities with design workflows. - As design and development converge, design tools can become places for experimentation rather than merely production and handoff. ## Creative Coders as Examples - Henry Desroches creates responsive websites with the precision and dimensionality of print design. - Sarah Drasner has demonstrated the expressive potential of SVG animation and illustration. - Tim Holman’s projects, including **Optical Toys** and **The Useless Web**, embrace playful experimentation. - Lynn Fisher treats viewport changes as part of the artwork, creating illustrations that transform with the browser’s width. - These creators show that templates can be starting points rather than limitations. The author encourages developers and designers to experiment with the browser’s full capabilities. By moving beyond templates and embracing creative coding, they can make websites that are more intentional, surprising, responsive, and expressive.

Read original

CSS Webgl Svg Creative Coding+4

figmaJan 8, 20252 min readCurated summary

When To Off-Road the Product Roadmap | Figma Blog

Product roadmaps provide direction, but they should not become rigid commitments. Figma’s experience building Dev Mode shows that rapidly changing technology and user feedback often require teams to abandon planned work, pivot, or restart entirely. The best products are shaped by these course corrections rather than harmed by them. ## Why Traditional Roadmaps Need Flexibility - AI tools, agents, and coding assistants are accelerating product development and raising user expectations. - Six-to-twelve-month plans can become outdated before execution is complete. - Prescriptive roadmaps risk keeping teams committed to assumptions that are no longer valid. - Modern product development requires more experimentation, iteration, and willingness to change direction. ## Dev Mode’s Pivot from Code Generation - Figma initially envisioned Dev Mode as a way to automate the conversion of designs into code. - User feedback revealed that many developers already had reusable code for their design systems. - Developers often needed help assembling existing components rather than generating new CSS or code. - Figma shifted its focus to **Code Connect**, which lets teams customize the code snippets shown in Dev Mode using their existing design-system code. - The change delayed launches and frustrated people who had invested months in the original plan, but it better addressed user needs. ## Course Correction as a Product Strength - Figma argues that great products are often defined by twists and pivots. - Loom and Slack are cited as examples of companies that began with very different product concepts before finding their current direction. - Figma avoids letting sunk costs dictate future decisions. - Teams may abandon or restart projects when research, internal testing, or beta feedback shows that the product is not working. ## Learning Through Real-World Feedback - After Dev Mode’s 2023 beta, user feedback became more important than following the original roadmap. - Figma released more than 200 fixes and new features in a single month. - Rapid iteration can be frustrating, but it helps teams move toward outcomes that genuinely work for users. - Valuable information can come from user research, internal dogfooding, rapid prototypes, and beta programs. Teams should treat roadmaps as adaptable guides rather than fixed contracts. When evidence challenges the plan, experiment quickly, revisit assumptions, and be willing to go “off-road” to build the product users actually need.

Read original

CSS Figma AI Design Systems+4

figmaNov 20, 20243 min readCurated summary

The Making of the Figma Pattern Library | Figma Blog

Figma rebuilt its internal design system during the UI3 redesign after years of growth had produced inconsistent components, detached instances, and a fragmented workflow. The resulting Figma Pattern Library (FPL) was created through close designer-engineer collaboration and uses variables, APIs, and shared standards to keep design intent aligned with shipped code. Its goal is to provide both a reliable source of truth and a flexible foundation for building consistent, accessible products across Figma’s product suite. ## Why Figma rebuilt its design system - Figma’s internal system had become increasingly fragmented as the company and product portfolio expanded. - Components that were intended to be identical had accumulated subtle but important differences. - Detached component instances made consistency difficult to maintain. - The upcoming UI3 rollout made these problems impossible to ignore. - The team needed a foundation that could support consistent, efficient development across all Figma products. ## A paired design-and-engineering approach - A five-person team of designers and engineers led the rebuild. - The team modeled its workflow on pair programming: - One discipline would actively build. - The other would review and provide immediate feedback. - This collaboration helped bridge the gap between design intent and technical implementation. - The system was designed to be both: - A source of truth for shared UI decisions. - A springboard for future product development. - The effort resulted in the new Figma Pattern Library, or FPL. ## Using variables as a shared language - The previous system relied on Figma styles for designers and a separate Google Sheet for engineers’ color tokens. - Because the spreadsheet often lagged behind product changes, designs and production code diverged. - FPL replaced this disconnected process with Figma variables and the Figma REST API. - Typography variables were introduced and aliased through existing typography styles. - Color styles were migrated to color variables as a centralized source of truth. - CSS definitions were added to color variables so Dev Mode could display the correct variable names during inspection. ## Primitive and semantic color systems - FPL organized colors into two main variable collections: - **Primitive variables:** Color ramps organized by hue and numbered from 100 to 1000. - **Semantic variables:** Contextual names based on Figma’s dark-mode schema. - Semantic variables support multiple themes and products, including: - Light and dark modes. - Figma Design. - FigJam. - Slides. - Dev Mode. - Semantic variables alias primitive variables, allowing colors to be changed across themes and products without manually updating every component. - This structure enables shared components to adapt to different contexts while preserving visual consistency. The practical lesson is that a scalable design system requires more than a component library: it needs shared ownership, synchronized design and engineering tokens, and variable-based foundations that can support multiple products and themes.

Read original

CSS Figma Design Systems Accessibility+4

figmaApr 7, 20242 min readCurated summary

How to Build a Design System | Design Systems 102 | Figma Blog

A design system creates a shared language and reusable components that improve product consistency, team efficiency, and collaboration. Figma recommends building one around the organization’s specific goals and challenges rather than following a universal formula. The process begins with understanding the problem, auditing existing work, involving cross-functional partners, and choosing an approach that can evolve over time. ## Lay the Groundwork - Define why the design system is needed: - What problems should it solve? - What goals should it support? - How will success be measured? - Recognize that systems vary in scope: - Small teams may need a simple component library. - Enterprise organizations may require a comprehensive system. - Design the system to grow as product and team needs change. ## Take Stock of Existing Design and Code - Collect screenshots and examples of the product across: - Platforms and devices - Interactive states - Alternate versions - Look for recurring patterns and consistent UI elements that can become system foundations. - Audit the codebase for existing reusable components, shared CSS variables, and repeated UI patterns. - Build on existing engineering work instead of creating disconnected design and development systems. ## Organize and Evaluate the Product Landscape - Categorize the collected examples to understand the current design language. - Identify: - Inconsistencies across products or platforms - Redundant solutions - Disconnected user experiences - Problems being solved differently by designers and developers - Use these findings to prioritize where a unified system can provide the greatest value. ## Find Cross-Functional Champions - Involve designers, developers, product managers, and other stakeholders. - Seek people who care about consistency and can advocate for the system internally. - Include developers early because they can assess: - Technical feasibility - Implementation requirements - Long-term maintenance - A design system can begin with a single dedicated contributor, but broader collaboration helps it serve the whole product team. ## Choose an Approach - Decide whether to: - Build a custom system from scratch - Adopt an existing framework and adapt it to the organization’s needs - The best choice depends on the team’s goals, existing assets, technical context, and available resources. A practical starting point is to define measurable goals, audit both design files and production code, and form a cross-functional group before creating components. This ensures the design system addresses real product problems and remains useful as the organization evolves.

Read original

CSS Figma Design Systems User Experience+3

figmaAug 21, 20233 min readCurated summary

Dev Mode fast follows: 200+ new features and fixes | Figma Blog

After two months of open beta, Figma released more than 200 Dev Mode features, improvements, and bug fixes based on over 5,000 pieces of community feedback. The updates improve design inspection, component workflows, code generation, file navigation, and integration with developer tools. Together, they make Dev Mode more practical for translating designs into implementation-ready code. ## New Dev Mode capabilities - Status labels can now be added to components, instances, and frames—not just sections—to indicate development readiness. - Layout grids, rulers, and outline mode are available through the View menu and familiar Design Mode shortcuts. - Detached components can be compared with their main components to identify differences. - Android XML and iOS UIKit have been restored as code-generation options. - The Inspect panel now supports the `UIColor` format. - Version history allows users to inspect previous design iterations. ## Usability and performance improvements - Components from external libraries display the library name. - Nested component properties and component modes, such as light and dark themes, are available in the component playground. - `rem` units can be applied specifically to text while other properties remain in pixels. - Multiple canvas objects can be selected and exported together using Shift-click. - Figma files and notifications can surface in VS Code through Figma’s VS Code integration. - Typography previews expose style name, font size, and line height, which can be copied directly. - Individual text portions can be inspected on the canvas. - The Layers panel can be resized vertically. - Figma suggests matching design-system variables when raw values resemble existing variables. - Values can be inspected as Figma properties as well as code snippets. - Source files such as images can be downloaded. - Alternative unit preferences are easier to find. - Section-level links are grouped by frame. ## Code-generation updates - Holding Shift copies all available code snippets at once. - CSS generation supports directional properties such as `padding-top` and `padding-left` when only one padding value is defined. - Snippets consistently include `font-style`, `line-height`, and `font-weight`. - Line height is shown in both percentage and pixel formats. - CSS codegen supports OpenType features including `font-feature-settings`, `font-variant-numeric`, and `font-kerning`. - Variables can be used for auto-layout constraints such as minimum and maximum dimensions and vertical gaps in wrapping layouts. - Text layers containing multiple styles generate separate CSS for each style. - The Figma Community now offers nearly 80 code-generation plugins, including tools for Tailwind, React, and Vue. ## Bug fixes and navigation - Users can switch between Design Mode and Dev Mode with tab navigation. - Alternative units now display correctly in hints and tooltips. - The release also includes additional fixes, including smoother handling of gradients in text. Figma’s fast-follow release shows that Dev Mode is being shaped around developer feedback. Teams using it should revisit their workflows and integrations to take advantage of improved inspection, code export, component exploration, and VS Code support.

Read original

CSS Figma React Dev Mode+4

figmaJul 12, 20232 min readCurated summary

How Thumbtack structures their design system | Figma Blog

Thumbtack structures its Thumbprint design system as three layers: design tokens, atomic CSS, and reusable UI components. Each layer trades some flexibility for greater productivity, consistency, accessibility, and quality. The approach lets developers choose the highest-level solution that fits their needs while retaining lower-level escape hatches for custom or native experiences. ## Three-Layer Architecture - **Thumbprint Tokens** - The foundation shared by web and native clients. - Defines granular properties such as colors, typography, spacing, sizing, radii, and shadows. - Offers the greatest flexibility but the least built-in structure. - **Thumbprint Atomic** - An atomic CSS library built on the tokens. - Enables developers to build interfaces without writing custom CSS. - Includes utilities such as aspect-ratio classes for maintaining proportions in responsive or embedded media. - **Thumbprint Components** - Provides accessible, prebuilt implementations of common patterns, including alerts, buttons, date pickers, and star ratings. - Improves development speed, consistency, and accessibility. - Developers can fall back to Atomic or Tokens when no suitable component exists. ## Layered Components and Tokens - Individual layers can contain their own sub-layers for added flexibility. - Thumbprint’s modal system separates: - `ModalCurtain`, which supplies core usability and behavior without visual styling. - `Modal`, which adds the standard visual design on top of `ModalCurtain`. - Developers generally use the more prescriptive `Modal`, but can use `ModalCurtain` for unusual requirements. - Tokens can also inherit from one another. For example, a semantic token such as `button-cta-background-color` may derive from a broader token like `cta-background-color`, which ultimately maps to a raw value such as `blue-400`. - Users are encouraged to select the highest abstraction appropriate for their use case. ## Why the Structure Helps - Higher layers reduce repeated work and improve consistency. - Lower layers preserve flexibility for custom product needs. - Components allow engineers to focus on product functionality instead of rebuilding common UI patterns. - Layered primitives provide a controlled way to support exceptions without abandoning the design system. - The architecture is intended to simplify maintenance and save time for both developers and end users. Thumbprint’s model demonstrates that a design system does not need to choose between standardization and flexibility. A layered structure provides strong defaults while preserving lower-level tools for cases that require customization.

Read original

CSS Design Systems React Accessibility+3

figmaJun 20, 20233 min readCurated summary

Introducing Figma’s New Dev Mode | Figma Blog

Dev Mode is Figma’s dedicated workspace for developers, designed to reduce friction between design and implementation. It provides familiar inspection tools, customizable code output, integrations with development workflows, and an extension for VS Code. Figma’s broader goal is to keep designers and developers working from the same, up-to-date source of truth. ## A Developer-Focused Workspace - Dev Mode works like a browser inspector for Figma files. - Developers can inspect layers and designs to find: - Measurements and implementation specs - Exportable assets - Design-system context - Connections between visual elements and code concepts - The interface is intended to feel familiar to developers who use tools such as Chrome DevTools. ## Faster, More Flexible Code Handoff - Dev Mode’s code panel includes: - A CSS box model - Modern syntax and tree views - Configurable dimension units - Customizable output for different languages and codebases - Generated code is positioned as a starting point that reduces repetitive translation from design to implementation. ## Connecting Design to the Development Toolchain - Figma’s GitHub integration links designs and components with files, issues, and pull requests. - Plugins connect Figma to tools including: - Jira, Linear, and GitHub for project tracking - Storybook for viewing coded components alongside designs - AWS Amplify Studio, Google Relay, and Anima for code generation - Teams can also build custom plugins to match their own workflows. - Design tokens and variables further improve consistency between design systems and code. ## Tracking Work Toward Production - Dev Mode is intended to support the increasingly blurred boundary between design and development. - It helps teams understand what is ready for implementation and maintain context while designs continue to evolve. - Figma emphasizes collaboration around work that remains in progress rather than waiting for designs to be fully polished. ## Bringing Dev Mode into VS Code - The Figma for VS Code extension lets developers: - Review designs - View comments and notifications - Track design changes - Inspect designs without leaving the editor - Use design-based code autocomplete - This keeps design context inside the developer’s primary coding environment. ## Availability and Pricing - Dev Mode and the VS Code extension were announced as beta features, free to all users through the end of 2023. - Beginning in 2024, Dev Mode requires a paid plan. - Dedicated Dev Mode-only access was planned at: - $25 per seat per month on Organization - $35 per seat per month on Enterprise Figma presents Dev Mode as an initial step toward tighter designer-developer collaboration. Teams should use it alongside integrations such as GitHub, Storybook, and VS Code to keep specifications, implementation context, and feedback in one continuously updated workflow.

Read original

CSS Figma Design Systems Github+4

datadogSep 29, 20223 min readCurated summary

DRUIDS, the design system that powers Datadog

Datadog created DRUIDS in 2018 to provide consistent UX patterns across its rapidly expanding observability platform. The system succeeds only if designers and developers trust and use it, so its documentation and tooling are designed to be easy to understand, implement, and contribute to. Datadog’s approach connects design, source code, documentation, and development workflows into a shared source of truth. ## Easy to Understand ### Fast Navigation and Discovery - The DRUIDS documentation supports Cmd+K (or Ctrl+K) quick navigation for finding components, patterns, icons, logos, and other resources. - The “DRUIDS Loupe” lets Datadog employees inspect components directly on product pages. - Hovering over an inspected component reveals links to its source code, Figma files, and documentation. ### Connected Documentation - Component pages link to GitHub, Figma, and VS Code. - JSDoc comments provide descriptions and links back to DRUIDS documentation inside VS Code. - Figma also links back to relevant components and guidance. - These connections minimize dead ends and keep supporting context close to where people are working. ## Easy to Implement ### Editable Playgrounds - DRUIDS treats React, TypeScript, and CSS implementation as the source of truth because code defines the actual browser experience. - Interactive playgrounds let users explore component props, test variations, and copy production-ready code. - A Code Sandbox page allows multiple components to be combined into live prototypes. - Stateful internal URLs make it easier to share ideas and reproduce bugs. - The tools also help teams without dedicated frontend specialists build internal applications using familiar Datadog patterns. ### Auto-Generated API Documentation - Each component includes an API table listing its props, allowed values, and descriptions. - The tables are generated directly from source code rather than maintained separately. - This prevents documentation from drifting away from the implementation across more than 150 components. - Clear, meaningful prop names improve predictability for both designers and developers. ## Easy to Contribute Back ### Contribution Guidelines - DRUIDS is intended to evolve as Datadog’s products and customer needs change. - Internal contribution guidelines define expectations for core design, structure, prop naming, documentation, styling, responsiveness, accessibility, and testing. - The guidelines aim to reinforce quality without making contributions burdensome or intimidating. ### CLI Tooling - A command-line wizard generates the standard structure for new components, including code, tests, and documentation examples. - For example, `yarn component button` creates the scaffolding for a button component. - Automating boilerplate lets contributors focus on design, user experience, and performance. Datadog’s central recommendation is to treat a design system as more than a component library: it should connect users, designers, and developers through consistent patterns, live examples, source-linked documentation, and lightweight contribution workflows.

Read original

CSS Figma User Experience React+4