techlist.io
KREN

Design Systems

252 posts

figma3 min readCurated summary

Introducing Figma Organization: Our first enterprise-grade offering | Figma Blog

Figma Organization was introduced as Figma’s first enterprise-grade offering, designed to help large companies manage design collaboratively on the web. It combines administrative controls such as unified billing and audit reports with designer-focused features including unlimited teams, Shared Fonts, and organization-wide design systems. The central argument is that web-based, centralized design enables companies to scale collaboration without losing team autonomy. ## From Startup Tool to Enterprise Platform - Figma describes a shift from serving primarily innovative startups to supporting organizations across industries and sizes. - Companies increasingly wanted to replace isolated design teams, local files, and fragmented workflows with an open, web-based process. - Figma Organization was developed with feedback from companies including Rakuten, Square, Volvo, and Uber. - The offering added: - Unified billing - Audit reports - Enhanced security and privacy controls - Unlimited teams - Shared Fonts - Organization-wide design systems ## Unlimited, Browsable Teams - Organizations can create or join unlimited teams, giving employees a central place to discover: - Prototypes - Design files - Exportable assets - Code handoff materials - Because Figma operates on the web, files remain current and accessible across teams. - Administrators can control team visibility with three privacy levels: - **Open:** Anyone can join. - **Closed:** Anyone can view the team, but joining or editing requires approval. - **Secret:** The team is visible only to invited members. - This structure allows organizations to preserve independent team workflows while maintaining a broader view of company-wide work. - Uber used the model to consolidate previously scattered files across products such as Uber Eats, Uber Freight, and its ridesharing service. After testing the beta, Uber moved most of its product design work to Figma. ## Organization-Wide Design Systems - Figma Organization allows teams to share Component and Style libraries across products and services. - Square used the platform to support more than 100 designers across over 25 products and maintain six design systems for iOS, Android, and the web. - Designers can browse another product’s design system, reuse established patterns, and adapt them to their own branding. - Shared libraries provide a single source of truth: teams work with the same component versions in the same tool. - Designers can update master components or styles centrally, and users of those assets are automatically notified when changes occur. Figma Organization’s practical value lies in combining centralized governance with decentralized team work. For large companies, adopting shared teams, controlled visibility, and reusable design systems can reduce fragmentation while keeping designs consistent and up to date.

Read original(opens in new tab)
Design SystemsFigmaPrototypingCollaborative Design+2
figma3 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(opens in new tab)
Design SystemsAtomic DesignComponent LibrariesMaterial Design+2
figma2 min readCurated summary

Deliveroo designs in the open with Figma | Figma Blog

Deliveroo adopted Figma to replace a fragmented design workflow that had become difficult to manage as the company and its design team grew. Shared files allowed product designers, content designers, researchers, engineers, and product managers to collaborate directly instead of exchanging screenshots, emails, and Slack messages. The result was a more open design culture, faster feedback, easier onboarding, and better alignment across teams. ## Collaboration Problems as Deliveroo Expanded - Deliveroo’s design organization grew to more than 40 people supporting consumers, riders, and restaurants. - Product groups became siloed as the company expanded rapidly. - Tools such as Sketch, Dropbox, Zeplin, and Abstract created disconnected workflows. - Teams struggled with: - File synchronization and version-control issues - Sending files back and forth by email - Maintaining consistency across app designs - Coordinating product and content design - Product and content designers effectively took turns working on the same file, leading to repeated screenshots, Slack messages, and manual checks. ## Moving to a Shared Figma Workflow - Deliveroo initially had concerns about changing tools but became interested in Figma’s collaborative editing. - A pilot demonstrated that multiple people could work in one document simultaneously. - Product and content designers could develop ideas together rather than maintaining separate files. - After adopting Figma, the team no longer needed to continually manage and synchronize disconnected design documents. ## Building a More Open Design Culture - Figma made the design process visible to a wider group of employees. - Product designers, researchers, engineers, and product managers could inspect work and understand the reasoning behind design decisions. - Engineers could identify edge cases earlier and discuss how to represent them in the product. - Non-design stakeholders felt more comfortable contributing because Figma was accessible beyond specialist design teams. - New designers could learn the organization’s work by exploring existing files instead of being trained across many separate tools. ## Faster Feedback and More Efficient Reviews - Comments and discussions remained attached to the relevant work in a single document. - Stakeholders could review projects without requiring a separate walkthrough. - Designers could ask and answer questions more quickly. - Centralized feedback reduced unnecessary back-and-forth and made team members feel more connected to the work. Deliveroo’s experience suggests that a shared, browser-based design workspace can reduce operational friction while encouraging broader participation. For rapidly growing design teams, consolidating files, feedback, and collaboration in one accessible tool can improve both speed and consistency.

Read original(opens in new tab)
Design SystemsFigmaProduct DesignCollaborative Design+4
figma3 min readCurated summary

Zoom Streamlines the Design Workflow with Figma | Figma Blog

Zoom adopted Figma to replace a fragmented design workflow built around Sketch, InVision or Framer, and Zeplin. Figma’s speed, real-time collaboration, contextual commenting, and shared libraries reduced manual file management while improving communication between designers, engineers, product managers, and other stakeholders. The case study concludes that Figma became a shared source of truth that made Zoom’s distributed design process faster and more collaborative. ## Speed Bumps in the Design Workflow - Zoom’s lean design team—about one designer for every ten engineers—needed efficient ways to communicate design decisions. - Designers worked across multiple countries and time zones, making collaboration especially important. - Their workflow relied on separate tools: - Sketch for design - InVision or Framer for prototypes - Zeplin for engineering handoff - Each iteration required files to be synchronized across tools. - Teams pushed revisions 10–20 times per project and had to manage multiple versions, reviews, and stakeholders. - Static screenshots often removed designs from their broader context, limiting the quality of feedback. ## Figma’s Collaborative Workflow - Designer Steven Crosby was initially attracted by Figma’s performance, particularly its smooth frame rate when moving objects. - Figma’s integrated commenting and real-time collaboration addressed Zoom’s workflow problems in one place. - Multiple designers could brainstorm and work on the same file simultaneously. - Anyone with access could comment directly on the design without downloading files or managing synchronization. - Feedback became more contextual because reviewers could see the full design flow rather than an isolated screenshot. - Figma brought designers together with engineers, project managers, product managers, and other teams, substantially improving the amount and quality of feedback. ## A Shared Design System - Figma became Zoom’s single source of truth for design work. - Team Libraries allowed designers in different locations and time zones to share components across projects. - Zoom created a master file containing an icon set and reusable components, with live updates available to the team. - Constraints helped designers create responsive components while keeping elements pinned to specific sides of a layout. - Using reusable components improved consistency and helped designers better understand scalable design-system construction. ## Brainstorming Across Teams - Zoom used Figma to include data scientists and an external design partner in product-message brainstorming. - Participants needed no prior Figma experience to contribute. - By sharing a link and inviting collaborators into the file, everyone could work simultaneously in separate areas of the canvas. - Participants quickly moved elements, modified messages, and reused ideas from one another. - The low learning curve enabled non-designers to participate directly rather than providing feedback indirectly. Zoom’s experience suggests that consolidating design, prototyping, feedback, and reusable components in a collaborative tool can eliminate workflow friction and make design a genuinely cross-functional activity.

Read original(opens in new tab)
Design SystemsFigmaPrototypingReal Time Collaboration+3
figma2 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(opens in new tab)
Design SystemsFigmaPrototypingUser Interface+2
figma3 min readCurated summary

Using constraints & magic numbers to build responsive layouts in Figma | Figma Blog

LittleBits built a responsive design system to support four apps across mobile and tablet platforms with a small team and six-month deadline. They combined Figma constraints with an 8-pixel “magic number” and proportional scaling rules that were shared with their React implementation. This approach allowed one template per screen to adapt across devices with minimal redesign and engineering adjustments. ## Establishing an 8-Pixel Layout System - Existing designs were analyzed to identify recurring dimensions and spacing. - Most values were already close to multiples of 8, so 8 became the system’s base unit. - Common sizes included: - Buttons and form controls: 32, 48, 56, 64, and 96px - Text: 16, 24, 32, and 48px - Padding and gutters: 16, 24, and 32px - Larger cards: 240px high - Using a shared numeric scale helped harmonize typography, controls, margins, and padding. ## Combining Constraints with Scaling Rules - Figma constraints allowed elements to stretch, remain pinned to edges, or align with grid columns. - Constraints alone were not sufficient to make one layout work equally well on small phones, larger phones, and tablets. - The team compared screen dimensions, calculated proportional relationships, and rounded the ratios into practical whole-number scaling rules. - These rules were implemented in React alongside normal layout constraints. - Designers used Figma’s Scale tool and frame resizing to preview how a single template would appear on different devices. - Testing showed that tablet and small-phone layouts worked well without extensive device-specific adjustments. ## Designing Content for Different Aspect Ratios - To avoid maintaining separate video and animation files for each screen size, content was produced in a 4:3 format. - Important content was placed inside safe areas so it could be cropped cleanly for 16:9 displays. - This allowed the same media assets to support multiple screen dimensions. ## Handling Text and Internationalization - The 8-pixel system was treated as a guideline rather than an absolute rule. - Smaller text sizes sometimes used 4-pixel increments, such as 12px and 20px, because minor size changes had a significant visual impact. - The app was translated into six languages, including German, where longer words could exceed available space. - Code automatically reduced text to the next smaller heading size when it did not fit. - Additional heading sizes were introduced to support these adjustments while preserving smooth transitions between heading levels. ## Practical Scope of the System - The app mostly used straightforward layouts with centered elements and two- or three-column structures. - The team did not need complex responsive patterns beyond proportional scaling and basic constraints. - The combination of a consistent spacing scale, reusable templates, Figma constraints, and shared React rules provided an efficient foundation for responsive design.

Read original(opens in new tab)
Design SystemsFigmaReactResponsive Design+2
figma2 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(opens in new tab)
Design SystemsFigmaReact NativeAtomic Design+2
figma2 min readCurated summary

Figma year in review: 2018 | Figma Blog

Figma’s 2018 review describes a shift from building a collaborative design tool to building an open platform and global community around it. After launching publicly in 2016 and raising $25 million in Series B funding, Figma expanded its API, attracted businesses and developers, and grew adoption among large organizations. The company concludes that partnerships, integrations, and community initiatives will remain central to its growth. ## From Product to Community - Figma marked roughly two years since its public launch in September 2016. - In 2018, its focus expanded beyond the core product to include: - The Figma Platform - API-powered integrations - Community events and resources - Adoption across departments in major organizations - Microsoft used Figma’s API to automate parts of its developer handoff process. ## The Figma Platform - Figma launched what it called the first web API for a design tool. - Its web-based architecture enabled integrations that would have been difficult with isolated desktop software. - Companies such as Uber and GitHub used the API to customize their design workflows even before the public launch. - Seven months later, businesses were being built on the platform, including paid services. ### Community-built tools - PDF exporting - Style-guide generation - Find-and-replace tools for text and layer names - JavaScript libraries for working with the Figma API ### Commercial integrations - Avocode and Zeplin connected Figma designs to developer handoff workflows. - Principle added advanced animation capabilities. - Relay for Figma pushed designs directly into codebases. - Pagedraw converted Figma designs into React. - Overflow synchronized designs for user-flow diagrams. - Haiku converted designs into production-ready components. Figma expected partnerships and additional integrations to become an even larger focus in 2019. ## Building a Global Community - Figma hosted design-system meetups in cities around the world, initially covering eight cities and later reaching 17 countries. - Events connected designers and encouraged detailed discussions about systematic design. - Figma launched DesignSystems.com to share practices and stories from teams at companies including Airbnb, GitHub, Braintree, and Segment. - The company viewed community connections and shared knowledge as an extension of its open-platform strategy. Figma’s 2018 direction was clear: continue investing in an accessible web-based tool while enabling an ecosystem of integrations, businesses, and designers around it.

Read original(opens in new tab)
Design SystemsFigmaReactJavaScript+3
figma2 min readCurated summary

Introducing: Figma’s first API Challenge | Figma Blog

Figma announced a $15,000 API challenge to encourage developers to build an open-source Figma-to-Sketch converter. The contest reflected Figma’s goal of supporting an open design ecosystem, even when that meant exporting files to a competitor. However, after community concerns, Figma paused the challenge and ultimately cancelled it in November 2018. ## Open Design Platform and API Challenge - Figma wanted to make it easier for designers to move projects between tools. - The challenge focused on building a Figma-to-Sketch exporter using Figma’s read API. - Figma positioned this as a natural extension of its existing Sketch import support. - The company was also responding to community-built API projects, such as style-guide generators and Alexa integrations. - Future challenges were intended to reward developers who open-sourced useful Figma integrations. ## Evaluation Criteria - Submissions had to export two test files: - A basic file containing common Figma objects. - A more complex file involving typography, components, styles, and prototypes. - The basic file was expected to have clearer correctness criteria. - The advanced file required subjective judgment because Figma and Sketch do not always have equivalent one-to-one features. - Judges would consider: - Accuracy of the exported designs. - Ease of use. - Creativity in translating incompatible features. - Code quality and GitHub documentation. - Code quality and documentation accounted for 5% of the score. ## Rules, Prizes, and Submissions - First place would receive $10,000; second place would receive $5,000. - Teams could include up to three people. - Entrants generally had to be over 21 and located in an eligible country. - Projects were submitted through a Google Form. - Each project needed a GitHub repository containing a README and MIT License. - The planned contest period was October 2 through November 16, 2018. ## Judges and Community Focus - The judging panel combined design expertise with experience building tools and community resources. - Members included Emily Plummer, Raph D’Amico, Cat Noone, and Roy van Rooijen. - Their backgrounds covered design systems, interaction design, accessibility tools, plugins, and design-tool development. ## Cancellation - Figma initially announced that the challenge would be paused and potentially relaunched after community feedback. - On November 19, 2018, the company said it would not proceed with any version of the challenge at that time. The challenge demonstrated Figma’s ambition to promote interoperability and an open platform, but its eventual cancellation showed the importance of addressing community concerns before incentivizing integrations involving a direct competitor.

Read original(opens in new tab)
Design SystemsOpen SourceReactJavaScript+4
figma2 min readCurated summary

Multiplayer, IRL | Figma Blog

Figma launched Local Communities to help designers connect, learn, and collaborate in person after successful Design System Meetups across eight cities and four continents. The initiative began with groups in more than 20 cities, supported by regional Designer Advocates who gather feedback and help organize events. Figma’s goal is to build communities around members’ real local needs—not just product tips and workflows. ## From Meetups to Local Communities - Design System Meetups sparked deeper conversations about: - Running effective design critiques - Open design culture - Everyday challenges and successes - New professional partnerships - The events showed Figma that its community wanted more opportunities for in-person connection. - Local Communities launched in cities including Accra, Amsterdam, Berlin, Boston, Copenhagen, Lagos, London, New York, San Francisco, Seattle, and Tel Aviv. ## A Community Shaped by Local Needs - Cities were selected based on factors such as: - Existing Figma evangelists and meetup organizers - Concentrations of Figma users - Geographic diversity - Communities are intended to support learning, networking, and sharing beyond basic Figma instruction. - Members can suggest workshops, pitch events, or request a new community in their city through an online form. ## Regional Designer Advocates Figma created three Designer Advocate roles to support communities across different regions and time zones: - **Tom Lowry — North America** - Previously a senior UX designer at OpenText. - Created Figma tutorials, component architecture guidance, and the Material Design resource kit. - Also taught an online course about building design portfolios. - **Zach Grosser — Europe** - Former communications designer at Square, where he created executive presentations and the IPO roadshow deck. - Introduced Figma to Square’s design team in 2013. - Joined Figma to support design education after becoming an early product adviser and moving to Amsterdam. - **Namnso Ukpanah — Africa** - Organized a Lagos design systems meetup that attracted more than 300 designers and developers. - Helped onboard 21 Figma ambassadors across 11 cities and seven countries. - Continued this community work while serving as lead designer at Hotels.ng. ## Community Participation - Designer Advocates act as Figma’s local representatives and help turn community ideas into events. - Figma encouraged members to propose topics such as: - Hiring diverse design teams - Speed networking for freelancers and organizations - Workshops and other city-specific events - The program remained open-ended, with Figma relying on local participants to identify what their communities needed most. Figma’s recommendation is to participate actively: share ideas, propose events, or help establish a Local Community where one does not yet exist.

Read original(opens in new tab)
Design SystemsFigmaUser ExperienceMaterial Design+1
figma2 min readCurated summary

Microsoft automates design handoff with Figma’s API [Video] | Figma Blog

Microsoft Dynamics 365 for Talent’s design team used Figma’s API to automate the slow handoff between designers and engineers. By connecting Figma webhooks to their development workflow, saving a new design version automatically generates a pull request for review and approval. The team reported reducing the handoff process by about 70%, allowing designers and engineers to focus on their primary work. ## The Design Handoff Problem - After adopting Microsoft’s Fluent Design System, the team focused heavily on scaling visual design elements. - Even minor design updates required negotiation and prioritization between designers and engineers. - With a large enterprise workload, engineers could take a week or more to move a single design element into production. - The team needed a workflow that could support a high designer-to-engineer ratio while reducing manual coordination. ## Automating the Workflow with Figma’s API - During Microsoft’s OneWeek hackathon, the Dynamics 365 for Talent team built an automation around Figma’s web-based API. - A Figma webhook detects when a designer saves a new version of a file. - That event automatically creates a pull request containing the design change. - Designers and engineers can review, approve, and commit the update through the existing development process. ## Reported Benefits - The automated workflow reduced the overall handoff process by approximately 70%. - Designers gained more time to create and refine designs. - Engineers spent less time processing design requests and more time developing features. - The approach made design-system updates faster and easier to scale. The example demonstrates how integrating design tools directly with engineering workflows can eliminate repetitive coordination and accelerate production changes. Teams facing similar handoff bottlenecks can consider webhook- and API-driven automation to connect design revisions with code review and deployment.

Read original(opens in new tab)
Design SystemsPull RequestsFigma ApiWebhooks+2
figma3 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(opens in new tab)
Design SystemsFigmaPrototypingSketch+3
figma2 min readCurated summary

Figma Feature Highlight: Component Overrides | Figma Blog

Figma’s component overrides let designers balance consistency with contextual flexibility. Designers can customize individual instances—such as changing text, colors, effects, or visibility—without detaching them from the original component. This means updates to the parent component continue to propagate while preserving each instance’s unique changes. ## Balancing Consistency and Flexibility - Design systems rely on reusable components such as lists, avatars, buttons, and status bars. - Real interfaces still require variations based on context, including different text, colors, and interaction states. - Overrides avoid rebuilding these variations from scratch or breaking instances away from their shared component. ## How Component Overrides Work - An instance remains connected to its parent component after properties are changed. - Parent-component updates continue to flow into the instance. - Customized properties remain distinct in that particular instance. - Overridable properties include: - Colors, fills, opacity, and blend modes - Text and type alignment - Strokes and styles - Effects such as shadows and blurs - Visibility ## Practical Design Examples - **Information lists:** Create one cell component, then override the text in each instance with unique data. - **Button states:** Use one button component and alter its background, opacity, shadow, or other properties for hover, pressed, or inactive states. - **Address books:** Reuse a circular avatar component while overriding its fill with different profile photographs. - **Creative compositions:** Multiple flipped and duplicated instances can be combined into effects such as a kaleidoscope. ## Creating a Kaleidoscope - Convert an illustrated frame into a component. - Duplicate instances to the right and below, flipping them horizontally or vertically. - Place a final duplicate in the remaining space to form a 2×2 arrangement. - Edit the original component and watch the changes appear across the connected instances. Component overrides are most useful when a design system needs reusable foundations without eliminating meaningful variation. Use shared components for structure, then apply overrides for content, states, and context-specific styling.

Read original(opens in new tab)
Design SystemsFigmaPrototypingUser Interface+1
figma2 min readCurated summary

Figma Feature Highlight: Sketch Import | Figma Blog

Figma’s Sketch Import feature helps designers move from Sketch to Figma without rebuilding existing work. The post argues that it supports migration, cross-platform collaboration, and hybrid workflows while preserving much of a Sketch file’s structure and fidelity. Users can import files through drag-and-drop, the toolbar, or keyboard shortcuts. ## Why Sketch Import Matters - **Eases the transition to Figma** - Designers switching from Sketch can bring over previous projects instead of recreating them. - This lowers the cost and friction of adopting Figma. - **Supports cross-platform teams** - Sketch is Mac-only, while Figma works across platforms. - Developers and teammates on Windows or Linux can import Sketch files to review designs and specs. - **Enables flexible workflows** - Designers can continue working independently in Sketch and move files into Figma for critiques, comments, and collaboration with remote stakeholders. ## Fidelity and Design-System Support - The importer preserves: - Pages - Resizing constraints - Vectors and other design elements - Sketch symbols are converted into Figma components. - This is particularly useful for teams creating or maintaining shared design systems. - Figma presents the importer as highly accurate, while recommending in-app support if a file does not import correctly. ## How to Import a Sketch File Users can import Sketch files in three ways: - Drag and drop the file into Figma. - Use the import option in the toolbar. - Use: - **Command + Shift + K** on Mac - **Control + Shift + K** on Windows Figma automatically creates a new Figma file containing the imported content. Sketch Import is a practical bridge for teams adopting Figma: it preserves existing work while making collaboration and cross-platform access easier.

Read original(opens in new tab)
Design SystemsFigmaUser ExperienceSketch+2
figma3 min readCurated summary

The University of the Arts London’s Accidental Path to a Design System | Figma Blog

UAL’s fragmented history across six colleges created inconsistent digital experiences and made collaboration difficult. Midway through a website redesign, the UX team switched from Sketch to Figma, gaining real-time collaboration and a shared source of truth. That change unexpectedly led to a flexible design system that aligned designers, developers, stakeholders, and external agencies while accelerating delivery. ## A Fragmented Digital Identity - UAL consists of six colleges, each with its own history, identity, and website practices. - Individual teams preferred implementing their own styles, resulting in inconsistent digital experiences. - As part of a 2017 Digital Transformation Program, UAL began redesigning its core website to become more user-centric. - Although a design system was not initially the main objective, it emerged naturally during the project. ## Switching from Sketch to Figma - The team struggled with Sketch’s siloed files, versioning problems, syncing delays, and limited collaboration. - These issues were especially difficult because stakeholders and agencies were distributed across 14 campuses. - Figma enabled browser-based, real-time collaboration and allowed the team to import Sketch files easily. - Designers, developers, executives, and other stakeholders could work from one centralized source of truth. - The shared workspace improved transparency and helped repair the disconnect between design and development. ## Building the Design System - Since the website had to be built largely from scratch, the team prioritized creating reusable design-system foundations. - The design system was intended to unify not only the website but also UAL’s broader digital channels. - Workshops with students and business partners helped identify essential features, components, and inconsistencies. - The system had to support UAL’s complex brand, including variations in color, typography, and visual personality. - Figma’s team libraries created a living, accessible version of the brand guidelines. - Figma Styles allowed color, text, and effect styles to be managed independently, providing additional flexibility. ## Faster Delivery Through Reusable Components - The team used components to create base pages that served as templates for future pages. - Developers could build new pages more quickly and see how designs translated into code. - Designers and developers worked from the same system, reducing communication gaps and improving coordination. - The design system became both a visual foundation and a practical workflow for speeding up website production. UAL’s experience shows that a design system can emerge from solving everyday collaboration and consistency problems. Centralized tools, reusable components, shared libraries, and close designer-developer collaboration helped transform an unwieldy redesign into a faster and more unified digital process.

Read original(opens in new tab)
Design SystemsFigmaUser ExperienceWeb Development+2