Sketch

18 posts

figmaApr 15, 20242 min readCurated summary

How Carvana Fuels Consistency and Scale | Figma Blog

Carvana scaled its design operations by moving from scattered tools to Figma as a centralized source of truth. Its design systems team uses Figma variables to enforce consistency, support rapid rebranding, and reduce design-development friction. The approach helped Carvana adapt quickly during rapid growth and integrate acquired businesses such as ADESA. ## Creating a Single Source of Truth - By 2019, Carvana’s design system was fragmented across a PDF UI kit, Principle, and Sketch. - Designers relied heavily on copying and pasting, causing small changes to diverge across repeated components. - Moving the system to Figma centralized libraries and connected design and engineering workflows. - The transition became especially valuable during the pandemic, when car sales surged and Carvana needed to scale quickly without adding process friction. ## Using Variables to Improve Consistency - Rapid growth introduced inconsistencies in: - Colors - Spacing - Typography - Corner radii - Figma variables let Carvana define reusable values for design properties. - Number variables standardized spacing and corner radii, while color variables helped maintain brand accuracy. - Although setting up variables required an initial learning period, the team achieved more polished designs and fewer revision cycles. ## Supporting New Brands and Business Lines - Variables allowed Carvana to create new themes without rebuilding its component library. - After acquiring ADESA, Carvana added an ADESA theme and applied the new branding to existing designs quickly. - The redesign took less than a week instead of the estimated month required to restyle the component library manually. - Themed components also enabled the team to create ADESA design comprehensives three times faster than usual. ## Connecting Design and Development - Figma’s shared libraries and variable-based system help designers and developers work from the same standards. - Centralized component structure and functionality make handoffs clearer and reduce inconsistencies between design files and implementation. - Carvana’s 40-person design systems team uses these practices to support consistency across a 10,000-person organization. Carvana’s experience suggests that a centralized design system, combined with reusable variables and themes, can make rapid growth more manageable. Investing in the system early reduces rework while making future products, brands, and acquisitions faster to integrate.

Sketch Figma Design Systems User Experience+4

figmaJul 6, 20213 min readCurated summary

How News UK developed a multi-brand design system | Figma Blog

News UK needed a unified design system for brands spanning print, digital, radio, and television, but its independently operated teams and fragmented tools made scaling difficult. By migrating to Figma, simplifying library management, and investing in education and advocacy, the company created a flexible system that supported brand differences while encouraging collaboration. The transition improved adoption substantially, including a 23-point increase in internal NPS during the first quarter. ## Fragmented Tools and Independent Brands - News UK’s brands, including *The Times* and *The Sun*, historically had separate design organizations, product teams, and workflows. - The team attempted to combine Sketch, Abstract, Zeplin, and InVision, but the result was difficult to maintain. - Design-system updates could take days or weeks, and accommodating brand variations created thousands of styles. - Existing theming features became rigid and overly complex as product requirements expanded. - The launch of *The Times* radio station exposed how much support the design-systems team needed to provide, making the approach unsustainable. - News UK chose Figma to consolidate tools, centralize library management, and increase participation. ## Building Adoption Through Education - The team recognized that successful adoption required cultural change, not just a new tool or library. - Design-system specialists personally configured designers’ Figma workspaces and provided onboarding. - Workshops and documentation covered: - Migrating files from Sketch - Structuring and managing files - Using components - Commenting and inspecting designs - Integrating tools such as Jira - Designers were encouraged to contribute component specifications and reusable patterns. - The team created Figma guidance tools to recommend components for common scenarios, such as onboarding users to a new product. - Designer advocates promoted best practices within product areas and acted as contacts between their teams and the design-systems group. ## Supporting Multiple Brands at Scale - News UK completed its migration to Figma in a few weeks. - Designers shifted from viewing the design system as a burden to seeing it as a productivity aid. - Shared components could be given different brand themes, allowing one system to support distinct visual identities. - A custom Themer plugin helped teams experiment with and build components that worked across multiple brands. - Earlier collaboration and feedback reduced duplicated work and discouraged teams from reinventing existing solutions. - The system was rolled out across all product and design teams. ## Measurable Results - Internal product teams increasingly adopted and contributed to the system. - News UK recorded a 23-point increase in its design-system NPS in the first quarter after introducing Figma. - Teams reported practical benefits while recognizing that the system would continue to evolve. News UK’s experience shows that a scalable multi-brand design system depends on both flexible technology and sustained organizational engagement. Consolidating tools, supporting brand-specific themes, educating users, and appointing internal advocates can turn a centralized system into a shared platform rather than a constraint.

Sketch Figma Design Systems Jira+4

figmaJul 6, 20202 min readCurated summary

How BT continues to push the telecommunication industry forward | Figma Blog

BT, a telecommunications company founded in 1846, modernized its product development by reorganizing teams into cross-functional product squads. These squads adopted Figma to replace fragmented design tools and improve collaboration among designers, engineers, product owners, content designers, and stakeholders. The shift reduced costs, increased design visibility and consistency, accelerated delivery, and helped BT maintain collaboration during the move to remote work. ## The Evolution to Product Squads - BT created smaller teams responsible for end-to-end product delivery. - Designers began working directly with product owners, engineers, content designers, and other specialists. - The new structure encouraged collaboration but exposed workflow problems: - Too many disconnected tools, including Docs, Sketch, InVision, and Jira. - Time-consuming file transfers and handoffs. - Multiple feedback channels and communication barriers. - Difficulty maintaining cohesive design across product lines. ## Migrating to Figma - BT’s design operations team piloted Figma with one product squad for two months. - The pilot produced quick benefits: - Real-time collaboration became easier. - Design handoffs were simplified. - Teams could design, prototype, and present in one place. - Engineers and product owners gained earlier visibility into design work and could contribute before decisions were finalized. - Following the pilot, BT rolled Figma out across all product squads. - Stakeholders could review and comment on work through a link from any device. ## Business and Organizational Benefits - **50% lower design-tool costs:** Figma replaced Sketch and InVision. - **Greater influence for design:** Better visibility brought design into more business decisions and investment discussions. - **Improved consistency:** Figma created a foundation for a future centralized design system spanning BT’s brand, products, and business units. - **Business continuity:** During COVID-19, Figma provided a shared online workspace for remote teams to communicate and solve problems. - **Faster decision-making:** Teams began conducting live experience walkthroughs with executives instead of preparing polished presentation decks. - **Higher transparency and efficiency:** Cross-functional teams developed a shared understanding of work and goals. BT’s experience shows that adopting a collaborative design platform can support more than design efficiency. Combined with cross-functional product squads, it can reshape organizational workflows, reduce costs, strengthen stakeholder involvement, and help a large company continue innovating.

Sketch Figma Design Systems Prototyping+3

figmaMay 10, 20203 min readCurated summary

How to pair design (and convince your boss to invest in it) | Figma Blog

Design pairing is a collaborative practice in which two designers synchronously solve the same problem, rather than splitting a project into separate tasks. One designer drives the design while thinking aloud, and the other navigates by observing, asking questions, and identifying edge cases. The approach can improve design quality, accelerate feedback and knowledge sharing, reduce meetings and documentation, and strengthen team morale. ## What Design Pairing Means - Two people work on the same design problem at the same time. - It differs from “divide and conquer,” where designers independently handle separate parts of a project. - Pairing can be applied to tasks such as designing a signup flow, exploring ideas, or refining a user experience. ## Common Pairing Styles - **Generator and synthesizer:** One designer produces many ideas while the other organizes them into a coherent UX flow. - **Lead and support:** A more experienced designer leads while another develops skills through participation. - **Screenshare pairing:** Adapted from pair programming, with designers collaborating directly in the same file. ## Structuring a Pairing Session - Set up shared access to the same design file; tools like Figma enable real-time multiplayer collaboration. - Assign two roles: - **Driver:** Controls the file and performs the design work while explaining decisions aloud. - **Navigator:** Observes without editing and asks constructive questions about patterns, user confusion, and potential edge cases. - The navigator should raise questions rather than criticize, bringing critique and future user feedback into the design process immediately. ## Practical Tips - Agree on the problem before starting, using sketching or inspiration gathering to establish shared context. - Decide who will drive and navigate. - Set a session length, whether it is 10 minutes, a day, or a week. - Take breaks because sustained collaboration can be tiring. - Switch roles so both designers practice driving and navigating. - Use supportive improv principles: build on ideas first and defer rejection when possible. - Normalize the vulnerability of having someone watch you work. - End with a brief retrospective about what worked and what felt uncomfortable. ## Making the Business Case Although pairing appears to use two designers on one task, it can make the overall process more efficient by: - Providing immediate, contextual feedback. - Reducing distractions and later critique cycles. - Sharing knowledge faster and reducing documentation and meetings. - Producing more ideas and uncovering more errors, bugs, and edge cases. - Keeping design files more organized. - Increasing confidence in design decisions. - Improving team morale, which can further improve the quality of the work. Teams should experiment with short pairing sessions, evaluate the results, and expand the practice where it improves speed, quality, and collaboration.

Sketch Figma User Experience Design Critique+2

figmaDec 12, 20182 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.

Sketch Figma Design Systems Product Design+4

figmaNov 27, 20183 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.

Sketch Figma Design Systems Prototyping+3

figmaOct 2, 20182 min readCurated summary

We made a mistake with our API Challenge, and we’re sorry | Figma Blog

Figma apologized for launching an API challenge that the design community viewed as unpaid “spec work.” The challenge aimed to encourage a Figma-to-Sketch export and support a more open design ecosystem, but Figma acknowledged that its enthusiasm overshadowed the risk of exploiting creative labor. The company paused the challenge and later decided not to pursue any version of it. ## The API Challenge and Its Goal - Figma launched a challenge focused on building a Figma-to-Sketch export. - Its stated purpose was to promote an open ecosystem and help fund tools for exporting data from Figma. - The initiative was intended to expand interoperability within the design toolchain. ## Community Criticism - Designers quickly criticized the challenge as “spec work”—unpaid creative work submitted with no guaranteed compensation. - The backlash reflected broader concerns about skilled workers being asked to produce valuable work without fair payment. - Figma recognized that the challenge conflicted with its stated belief that creatives should be paid. ## Figma’s Response - CEO Dylan Field acknowledged that the company had made a mistake. - Figma said it had been “swept away” by its enthusiasm for making the platform more open. - The company paused the challenge and considered alternative structures that would not require participants to work without guaranteed compensation. - In a later update dated November 19, 2018, Figma said it would not move forward with any version of the challenge at that time. Figma’s experience illustrates the importance of designing developer and creative programs around clear compensation and consent, especially when participants’ work could directly benefit a commercial product.

Sketch Figma API Design Tools+2

figmaOct 1, 20182 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.

Sketch Design Systems Open Source React+4

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.

Sketch Figma Design Systems Prototyping+3

figmaSep 4, 20182 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.

Sketch Figma Design Systems User Experience+2

figmaAug 28, 20183 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.

Sketch Figma Design Systems User Experience+2

figmaAug 21, 20182 min readCurated summary

#FigmaTip Roundup 10.0 | Figma Blog

#FigmaTip Roundup 10.0 highlights practical features that make everyday design work faster and cleaner. Inspired by Charli Marie’s independent review of Figma, the post shows how shortcuts, automatic cleanup, selective property copying, flexible image fills, and vector networks reduce friction compared with tools such as Sketch and Illustrator. ## Faster Layer Arrangement - **Command + Left Bracket** moves layers backward, while the corresponding bracket shortcut moves them forward. - The shortcut mirrors Photoshop’s controls and avoids manually rearranging items in the layers panel. - Figma’s menus display keyboard shortcuts, making them easier to remember. ## Automatic Cleanup of Groups - Figma automatically deletes a group when all of its contents are removed. - This prevents empty groups from accumulating and keeps design files organized. - The behavior addresses a common source of clutter in Sketch documents. ## Selective Property Copying - Designers can copy all properties from one object or transfer only specific attributes. - Individual properties include fills, fonts, and strokes. - This makes it easy to reuse a successful style without overwriting unrelated settings on the target shape. ## Image Fills Instead of Masks - Imported images are placed as fills inside rectangular shapes. - Cropping, tiling, and positioning can be adjusted through the fill settings. - This avoids creating multiple masks merely to size or manipulate images. ## Complex Shapes with Vector Networks - Figma’s vector networks allow a point to connect to more than two paths. - This differs from traditional vector tools and supports more complex shapes. - The feature can reduce the need to switch to Illustrator for advanced vector work. The roundup presents these small workflow improvements as evidence that learning Figma’s built-in behaviors can make design work quicker, cleaner, and less dependent on other applications.

Sketch Figma User Experience Vector Graphics+2

figmaJul 31, 20182 min readCurated summary

How Kiwi.com handles project structure, versioning & components in Figma | Figma Blog

Kiwi.com’s small mobile design team uses Figma to bring design collaboration, prototyping, versioning, and handoff into one shared environment. Their previous Sketch workflow depended on Sketch, Zeplin, Abstract, Marvel, and Dropbox Paper, creating frequent synchronization problems. Figma became attractive because it could centralize these activities and support contributions from around twenty collaborators. ## A Small Team with Many Contributors - Kiwi.com’s mobile design team consists of only two people. - Around twenty others contribute through: - Commenting on design iterations - Correcting copy - Designing cross-platform features - The broader front end and Orbit design system were built in Sketch. - Because Orbit’s mobile components differ visually, the team decided to explore building the mobile system in Figma. ## Problems with a Multi-tool Sketch Workflow - Sketch was used alongside: - Zeplin for developer handoff - Abstract for version control - Marvel for static prototypes - Dropbox Paper for embedded PNGs - These tools frequently fell out of sync: - Prototypes could reflect older tested versions. - Designers might forget to commit changes to Abstract. - Zeplin might not contain the latest approved visuals. - Documentation images could be weeks out of date. - The workflow required constant manual coordination between separate sources of truth. ## Why the Team Chose Figma - Figma offered a way to consolidate design work, collaboration, prototyping, and version history. - Its value became clearer in a team where many people needed access to current designs. - The author initially resisted Figma, preferring a native design application over a browser-based tool. - As Kiwi.com’s collaborative needs grew, the advantages of a shared, synchronized workspace outweighed that hesitation.

Sketch Figma Design Systems Prototyping+2

figmaJun 19, 20183 min readCurated summary

How one designer motivates others to build more ethical products | Figma Blog

Cat Noone’s work argues that accessibility should be treated as a product requirement, not a limitation added at the end of development. Through three apps— Iris Health, Stark, and Lyra—she designs for people often excluded by “typical user” assumptions. Her conclusion is that ethical, inclusive products emerge when teams understand diverse users and build accessibility directly into their workflows. ## Accessibility as a Product Priority - The article cites an estimate of 57 million disabled Americans, with 54% active online—roughly 9.3% of the population. - Noone challenges the idea that accessibility makes interfaces worse, asking whether excluding an entire population is itself poor design. - She recommends considering accessibility from the beginning rather than treating it as a later constraint. ## Iris Health: Emergency Medical Information - Iris Health was inspired by the risk of being unable to communicate medical information during an emergency, especially while traveling or living abroad. - If the app detects that a user is at a hospital and receives no response within ten minutes, it alerts emergency contacts by text. - A medical profile appears on the iPhone lock screen, allowing professionals to quickly view the user’s name, medications, allergies, and organ-donor status. - **Lesson:** Analyze potential users from every angle and adapt the interface to different medical and personal circumstances. ## Stark: Accessibility Within the Design Workflow - While developing Iris Health, Noone noticed that designers lacked sufficient tools for accessibility testing. - Stark provides color-blindness simulations and contrast-ratio checks directly within Sketch. - It enables designers to test different types of color blindness and verify typography against background colors. - The tool was already being used by teams at companies including Twitter, ESPN, Palantir, Dropbox, and Microsoft. - **Lesson:** Make accessibility checks part of the default workflow, using tools such as Stark, Contrast, and W3C accessibility resources. ## Lyra: Communication for Autistic Children - Lyra grew from Noone’s experience working with autistic children and others with special needs. - The app modernizes symbol-to-speech communication methods that traditionally relied on laminated cards and Velcro tabs. - Its goal is to help non-verbal autistic children communicate in a digital environment. - **Lesson:** Educate yourself about accessible design and learn to recognize common barriers before building a product. Inclusive design is most effective when it is built into research, design, and development from the outset. Teams should study the needs of underrepresented users and use accessibility tools continuously rather than relying on a final compliance check.

Sketch User Interface Accessibility Inclusive Design+3

figmaJun 12, 20182 min readCurated summary

A Sketch user's perspective on switching to Figma | Figma Blog

After using Figma for a month, Marco Pacifico argues that Sketch teams—especially distributed product teams—could gain substantially by switching. Figma combines Sketch-like design capabilities with prototyping, collaboration, developer handoff, version control, and cloud storage in one web-based tool. Its central advantage is reducing the syncing, uploading, and coordination overhead that slows design iteration. ## Web-Based Design and Real-Time Collaboration - Figma runs in browsers, with native apps available for offline work. - Work is automatically saved to a shared cloud space, eliminating manual file organization and updates. - A single URL serves as the source of truth for designers, developers, and stakeholders. - Teams no longer need to repeatedly upload screens, sync files, or distribute PNGs. - The author reports that Figma feels at least as performant as Sketch, including with large files. ## A Replacement for the Sketch Ecosystem The article presents Figma as combining the capabilities of several tools traditionally used alongside Sketch: - Sketch-like drawing tools and interface. - Clickable prototyping comparable to Craft and InVision. - Built-in comments, tagging, resolution tracking, and Slack integration. - Developer handoff with dimensions, styles, and downloadable assets. - Version history that allows users to restore or fork earlier designs. - Multiplayer editing with visible cursors and real-time drawing. - Live viewing of another collaborator’s screen and cursor. - Flexible components, intuitive constraints, and shared team libraries. - Dropbox Paper embedding. ## Faster Design Iteration - Designers can conduct reviews, make changes, and receive immediate feedback in the same file. - Iteration can shrink from days to minutes because teams avoid: - Re-uploading screens to InVision. - Reordering prototype screens after synchronization. - Waiting for teammates in other time zones to commit or upload work. - Recovering from broken third-party plugins after software updates. - Changes are visible immediately, so there is no separate synchronization step between the design file and prototype. ## A More Inclusive Design Process - The design file becomes a shared space where team members and stakeholders can discuss work directly. - Anyone with the link can participate through comments and collaborative review. - Real-time access makes design discussions more seamless and reduces barriers between distributed teammates. ## Practical Recommendation For teams currently assembling Sketch, Abstract, InVision, Craft, Zeplin, and collaboration tools into one workflow, the author recommends evaluating Figma as a unified alternative—particularly when rapid iteration and distributed collaboration are priorities.

Sketch Figma Design Systems Prototyping+3