Atomic Design | Techlist.io

figmaJun 20, 20233 min readCurated summary

AI: The Next Chapter in Design | Figma Blog

Figma argues that AI will become a core platform capability reshaping the entire product-development process, not merely another feature. It can accelerate ideation, design, and coding while allowing teams to focus more on problem-solving and creative judgment. Figma announced its acquisition of Diagram as part of this strategy, positioning AI as a force that will change how products are designed, what experiences are created, and who participates in the process. ## Figma’s AI strategy and Diagram acquisition - Figma acquired Diagram, founded by Jordan Singer, whose GPT-3-powered “Designer” plugin generated design concepts from simple prompts. - The acquisition brings Diagram’s team into Figma and builds on Figma’s existing investment in machine learning. - Figma’s open API has already enabled nearly 100 community-built AI plugins. - The company views AI as a platform underlying the entire product-development workflow. ## AI across the product-development process - During discovery, AI could: - Generate and synthesize early ideas from prompts. - Summarize discussions and concepts. - During design, AI could: - Use existing designs and design systems to provide recommendations. - Surface relevant components and patterns. - Help teams produce first drafts faster. - During development, AI could: - Infer design context more effectively. - Generate higher-quality, production-ready code. - The broader goal is to help teams do more work faster while moving their attention toward higher-level problem-solving. ## How design may evolve from pixels to patterns - Design systems already shifted designers away from repetitive details such as border radii and toward composition, direction, and judgment. - Atomic elements such as pixels became reusable components, enabling faster and more consistent workflows. - AI could extend this progression by generating higher-level structures and patterns. - Designers may focus less on assembling basic login components and more on inventing entirely new ways to authenticate. - AI might also recommend color palettes based on a project’s emotional tone or theme. - This could move design beyond familiar interfaces toward smoother, more intuitive, and more human experiences. ## What product teams may design - AI systems such as ChatGPT are shifting interaction away from navigating websites and apps toward asking questions and receiving answers. - AI can reduce the gap between a user’s intention and the actions required to achieve it. - For example, instead of opening a ride-hailing app, entering a destination, comparing options, and requesting a ride, a user could simply say, “Get me to JFK.” - Product builders will need to reconsider whether existing interfaces can deliver the same outcome with fewer steps and decisions. ## The changing role of designers - Technological change has historically transformed design without eliminating the need for thoughtful designers. - Designers have adapted to new platforms, collaborative workflows, and hybrid work. - Figma expects AI to change design roles and collaboration, but frames that shift as an opportunity to spend more time on creative direction, curation, and meaningful problem-solving. The practical recommendation is to treat AI as a foundational design and development capability rather than a standalone feature. Teams should explore how it can remove repetitive work while preserving human judgment, taste, and responsibility for the experiences they create.

Read original

Atomic Design AI Design Systems Machine Learning+4

figmaJan 27, 20202 min readCurated summary

Figma on Figma: How we built our website design system | Figma Blog

Figma built its website design system to address inconsistent pages, duplicated solutions, and a difficult maintenance process. By auditing existing patterns, consolidating visual styles, and creating reusable components in Figma and Contentful, the marketing team established a flexible system that supports consistency without limiting creativity. The result is faster production: teams can move from concept to a live page in as little as one day, often without writing new code. ## Taking Inventory - The team cataloged existing fonts, sizes, colors, layouts, column widths, and other visual patterns in a shared Figma file. - This revealed: - Repeated patterns that could be unified - One-off components that did not belong in the style guide - Large page elements that could be broken into smaller reusable parts - The team applied an atomic approach, combining small “atoms” and “molecules” into flexible page “organisms.” - Similar but inconsistent elements were standardized: - Twelve heading sizes became H1–H3 styles - Body and technical text received defined styles - Long-form content gained pull-quote and block-quote styles - The refined components were organized into a shared library so even people unfamiliar with Figma’s brand could create cohesive pages. ## A Simplified, Flexible Design System - In about a month, the team created a robust style guide and component library integrated with Contentful. - The system standardized: - Typography - Spacing and padding - Line heights - Colors - Grid behavior - Designers could assemble pages from ready-made building blocks rather than recreating common elements. - Frequently paired elements and complete sections were turned into larger reusable components called “FLEGOs,” combining Figma and LEGO. - These components were designed to work together in many combinations, supporting different content and page layouts. ## Faster Marketing Production - Most of Figma’s core marketing site now uses the design-system framework. - Contentful allows the team to build and publish pages without requiring new code for each page. - A product marketer and web producer created the “What’s New” page by: - Wireframing with FLEGOs - Collaborating on copy in Figma - Building the final page from CMS components - The page went from idea to launch in under 48 hours, demonstrating how reusable components accelerated the process. Figma’s experience shows that a website design system should be both standardized and flexible. Auditing existing work, consolidating repeated patterns, and making components accessible through design and content tools can improve consistency while significantly reducing production time.

Read original

Atomic Design Figma Design Systems Component Library+2

figmaDec 18, 20183 min readCurated summary

State of Design Systems 2018 | Figma Blog

Figma’s 2018 survey of 499 practitioners shows that design systems were still developing, but were becoming a lasting part of digital product work. Most organizations lacked mature systems or dedicated teams, yet practitioners strongly aspired to more formal, public, and continuously maintained systems. The report also argues that design systems are processes and principles—not merely collections of reusable components. ## Design Systems Were Still in Their Infancy - Two-thirds of respondents described their systems as stage 1 or 2: - Undocumented - Lacking a dedicated maintenance team - 86% wanted to reach stages 3 or 4, involving full-time staff and publicly available systems such as Shopify Polaris. - Speakers at Clarity suggested that design systems would become standard practice, much like responsive design. ## A Dedicated Team Is Not Required - About half of respondents worked at companies with design-system teams, mostly organizations with more than 1,000 employees. - Only one-third believed a dedicated team was necessary. - Smaller teams and individuals can begin incrementally by solving one focused problem, such as establishing consistent line-height rules. - The recommendation was to start small and ship improvements rather than wait for a complete system. ## Systems Usually Follow Existing Products - Only 41% of respondents built a design system alongside a new product. - 52% created one from an existing product, while 7% had experience with both approaches. - Building from a real product can be advantageous because the system addresses actual use cases instead of creating isolated, hypothetical components. - Legacy design can therefore provide a practical foundation for system development. ## Common Design-System Artifacts - Component libraries appeared in 90% of respondents’ systems. - Style guides were included by 83%. - Other commonly mentioned elements included: - Design principles: 57% - Content guidelines: 47% - Code-related resources such as React components, mixin libraries, and design tokens - Only two respondents mentioned linters, highlighting the wide variation in what organizations consider part of a design system. ## A Design System Is More Than Its Artifacts - The most common misconception was treating a design system as a static collection of pattern libraries. - A complete system also includes: - Processes - Guidelines - Principles - Design philosophies - Documentation - Component libraries are outputs of the system, not the system itself. - Without documentation explaining the reasoning behind components and how to use them, even a technically strong system can fail. A practical approach is to begin with a small, real product problem, document the principles behind the solution, and grow the system iteratively rather than waiting for a dedicated team or a fully formed library.

Read original

Atomic Design Design Systems Component Libraries Material Design+2

figmaNov 13, 20182 min readCurated summary

How to set up your Pages in Figma | Figma Blog

Figma Pages can organize design files in ways that match a team’s product, process, or design-system needs. The article emphasizes that there is no single ideal workflow; Pages provide flexible separation for responsive designs, app features, process stages, and atomic design components. ## Platform or Screen Size - Create separate Pages for Android, iOS, desktop, or other responsive breakpoints. - Use frame presets and constraints to build platform-specific layouts. - Each Page can contain its own prototype, making platform-specific user testing easier. ## App Feature - Organize Pages around major product areas such as profiles, home screens, or other features. - Designers can work independently while still referencing the broader product. - Separate prototypes allow teams to test individual feature flows. ## Design Process Stage - Use Pages to show progress and distinguish exploratory work from finalized designs. - Possible structures include: - Thumbnail, wireframes, designs, and archive - Documentation, staging, and ready for review - Sitemap, wireframes, mockups, QA, and marketing screenshots - A “Done” Page helps developers identify which designs are ready to build. - Early ideation and brainstorming can remain separate from polished work. ## Atomic Design Method - Dedicate Pages to atomic design levels: - Atoms, such as typography and icons - Molecules, such as buttons - Organisms, such as complete pages - Consistent Page naming improves Team Library search. - Components can use simpler names like “selected” or “hovered,” since their Page already identifies them as buttons or other component types. Ultimately, teams should choose a Page structure that reflects how they design and collaborate, rather than follow a universal template.

Read original

Atomic Design Figma Design Systems Prototyping+2

figmaNov 7, 20182 min readCurated summary

Creating atomic components for an atomic design system in Figma | Figma Blog

littleBits built an atomic design system in Figma to support four mobile and tablet apps across iOS and Android within a six-month roadmap. Drawing on Atomic Design and Bootstrap, the team organized reusable styles and components while adapting the structure to their actual workflow. They concluded that a simplified system aligned with React Native components was more practical than rigidly preserving separate “molecule” and “organism” categories. ## Atoms: Styles, colors, and icons - Text styles and colors were defined with Figma Styles. - A customized icon set based on Modern Pictograms was imported and converted into components. - Colors used semantic names inspired by Bootstrap, including categories for: - UI states - Grayscale values - Brand colors - Backgrounds - Overlays - Outlines - Semantic naming made future theme changes safer. For example, `bg-light` could consistently represent backgrounds while `ui-dark` represented foreground elements. ## Simplifying molecules and organisms - The team found that complex molecules and organisms were rarely reused across multiple templates. - Instead, both categories were grouped under the simpler name “Components.” - This structure mapped more naturally to the React Native components being developed in parallel. - Components included cards, tooltips, and foundational controls such as buttons. ## Combining styles without unnecessary components - Figma Styles enabled designers to combine text styles and color swatches directly. - Rather than creating separate components for every color-and-text combination, the team documented combinations in a style guide and applied styles as needed. - Mixing text styles within a single text box also supported copy with variable lengths. - This approach reduced document complexity and improved usability and performance. ## Reusable button components - Buttons were treated differently because they appeared frequently and included styling details such as outlines that were harder to manage centrally in Figma. - The team created nested components for: - Primary buttons - Secondary buttons - Tertiary buttons - Other frequently repeated custom buttons - These reusable button components provided a consistent foundation for the broader design system. The resulting system balanced atomic design principles with the team’s real reuse patterns, creating a practical Figma library that supported both design work and React Native implementation. The next step was applying these components to responsive layout templates.

Read original

Atomic Design Figma Design Systems React Native+2

figmaSep 20, 20183 min readCurated summary

Aisle Rocket Studios, the agency behind Whirlpool, masters collaboration | Figma Blog

Aisle Rocket Studios (ARS), a multi-office agency serving brands such as Whirlpool and Maytag, adopted Figma to solve the challenges of remote collaboration and fragmented workflows. By making Figma the shared source of truth, ARS brought designers, writers, developers, and clients into the same browser-based workspace. The result was faster iteration, more inclusive collaboration, and a more efficient creative process. ## Fragmented Files and Remote Collaboration - ARS had more than 250 employees, four offices, and remote associates supporting over 25 brands. - Creative work was scattered across native files in Sketch, Photoshop, and other tools. - When Creative Director Matt Carson joined the Whirlpool account remotely under a tight deadline, the lack of a centralized process became especially apparent. - Figma’s multiplayer functionality offered a real-time workspace for collaboration across locations and time zones. ## Figma as the Shared Source of Truth - The Whirlpool team quickly replaced disconnected workflows with a centralized Figma process. - Team members designed and iterated together in a single file. - They used Figma for internal meetings, stakeholder feedback, and client prototypes. - Clients could review interactive concepts without logging in or waiting for developers to build the experience, shortening review cycles. ## More Inclusive Creative Work - Figma enabled ARS to conduct roughly 80% of its creative process in the browser. - Writers could edit copy directly within designs instead of working separately and handing it off later. - This made copy an active design element and gave non-designers more influence over the final product. - Developers could review designs early, helping identify technical constraints before handoff and reducing back-and-forth. ## A Leaner, More Effective Team - The Whirlpool account team became faster and more collaborative after consolidating its tools and files. - Its success attracted attention across ARS, prompting other teams to adopt the same workflow. - Both ARS and Whirlpool reported savings in time and money without sacrificing creativity. - Open, collaborative design became a standard the agency wanted to apply more broadly. ## Building a Shared Design System - ARS’s next step was to create greater consistency across Whirlpool’s digital brand. - Following atomic design principles, the team planned to build standardized “atoms” in Figma. - These components would be stored in a team library as a central source of truth. ARS’s experience suggests that browser-based collaborative tools can unify distributed teams and make the creative process more democratic. Centralizing design, copy, development input, prototypes, and reusable components in one shared workspace can improve speed, communication, and consistency.

Read original

Atomic Design Figma Design Systems Prototyping+3

figmaNov 29, 20172 min readCurated summary

How to build your design system in Figma | Figma Blog

Figma’s 2017 post argues that design systems can begin with simple, practical building blocks and grow into sophisticated libraries of reusable components. Rather than prescribing one method, it showcases how teams use Figma’s constraints, components, and Team Library to support different organizational needs. The examples suggest that design systems improve consistency while also strengthening collaboration among designers, engineers, product managers, and non-designers. ## Starting with Simple Building Blocks: Gusto - Gusto’s experience addresses the common challenge of deciding where to begin. - The team used basic, reusable elements as the foundation for its component library. - The approach demonstrates that a design system does not need to be comprehensive at launch; it can develop incrementally. ## Creating Marketing and Communications Assets: Square - Square’s marketing team built an internal system for communications design. - The system included reusable assets such as: - Color palettes - Logo sets - Other brand and communication resources - Figma helped the team organize and share these assets across its internal workflows. ## Empowering Non-Designers: Virta Health - Virta Health documented the process from auditing existing components to producing final mockups. - Designers used reusable components that allowed non-designers to assemble designs through drag-and-drop workflows. - The design system improved communication between designers, engineers, and product managers by giving teams a shared visual language for discussing ideas. ## Using Nested Components: OpenText - OpenText explored nested components to create more flexible and powerful UI patterns. - Components could be combined into more complex structures, including controls with multiple button states. - This approach supports scalable systems in which changes to foundational components can flow through larger interface patterns. ## Applying Atomic Design Principles: SetProduct.com - SetProduct.com used atomic design as the organizing framework for its system. - The hierarchy progresses from small elements to complete interfaces: - Words and icons - Buttons and other phrases - Cards and other sentences - Full screens or chapters - Figma components support both local editing and broader, reusable design-system updates. Figma’s examples show that teams should begin with the problems and workflows specific to their organization, then gradually build a reusable system around them. Features such as constraints, nested components, and Team Library can support systems ranging from simple asset collections to highly structured component architectures.

Read original

Atomic Design Figma Design Systems Component Library+2

figmaFeb 14, 20173 min readCurated summary

Team Libraries in Figma | Figma Blog

Team Libraries bring shared, synchronized components to Figma, addressing the difficulty of maintaining design systems across separate files. The feature builds on Figma’s components, constraints, and web-based collaboration to create a single source of truth that teams can reuse and update efficiently. Its workflow—Publish, Insert, and Update—combines engineering-style structure with an accessible design workflow. ## The Problems with Traditional Design Tools - Many design tools were modeled on print and illustration software rather than interactive applications. - They lack meaningful support for application behavior, platform constraints, and reusable interface structures. - Copying symbols between files creates disconnected versions that must be updated manually. - Large organizations such as Facebook, Google, and Airbnb have had to build custom tools and dedicate staff to maintaining design systems. - Designers need synchronized, compounding component structures to create scalable systems. ## Bridging Design and Dynamic Interfaces - Figma’s earlier features established the foundation for reusable design systems: - Reliable vector editing - Constraints that reflect system behavior - Dynamic, reusable components - Team Libraries extend these capabilities across files and team members. - Because Figma operates online, shared components have effectively no synchronization delay. - Teams can reuse structured components across devices, platforms, layouts, and user flows. ## An Engineering-Inspired Design Workflow - Figma draws on software concepts such as modular composition and frameworks like React. - Structuring interfaces from discrete, clearly defined parts makes products easier to maintain. - The feature adapts engineering principles for designers rather than copying programming workflows directly. ## Publishing Components - Designers select components and choose **Add to Library** in the inspector sidebar. - Multiple components can be collected and reviewed before being published. - Permissions separate the source of truth from its consumers: - Editors of the source file can modify the original components. - Anyone with view access can use the published components. - This lets specialized teams control assets such as icons, colors, or brand guidelines while others reuse them without changing the rules. ## Inserting and Nesting Components - Published components are available in any file for users who can view the source file. - Users insert them through Figma’s components tool. - Components can be nested inside larger components or modules. - Nested structures allow teams to build complex views from reusable source elements while preserving a predictable single source of truth. ## Updating Shared Components - Changes are made to the original component and published again. - Figma provides a confirmation step and a visual diff showing what changed. - Deleting a component from the source file and publishing removes it from the team library. - The update process includes an additional safeguard because changes may affect multiple design explorations and could otherwise cause users to lose work.

Read original

Atomic Design Figma Design Systems User Interface+3