techlist.io
KREN

Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

Figma528Design Systems246User Experience140Prototyping135AI110Figjam98Product Design76User Interface63Generative AI47Collaborative Design47Accessibility41React39+1265
figma3 min readCurated summary

Extend what’s possible with plugins for you and your team | Figma Blog

Figma’s post argues that plugins can turn repetitive, team-specific design tasks into fast, reusable workflows. Examples from GitHub, Atlassian, and Uber show how teams use plugins for component management, theming, realistic content, critique, and collaboration. The conclusion is that when no public plugin fits a specialized need, teams should build bespoke tools—and potentially combine them into a unified plugin. ## Building a Unified Plugin at GitHub Brian Lovin began creating plugins at GitHub after noticing how much time designers spent on repetitive operations. - A **borders utility** toggled the visibility of divider layers within list-item components. - This allowed GitHub to maintain one flexible component instead of multiple components for every divider size and placement. - A **color-theming plugin** helped designers manage light, dark, and high-contrast themes. - It searched functionally named styles and quickly switched entire designs between themes. - A **data population plugin** pulled live API data into designs. - It mapped avatars, usernames, and names to appropriately named component layers. - These tools were consolidated into a single “mono plugin,” giving the team one interface for several workflow improvements. ## Product-Specific Content at Atlassian Atlassian created the **ADG Data Generator** to prevent designers from using generic or misleading placeholder content. - Designers can generate data appropriate to specific products: - Jira projects and ticket numbers - Bitbucket branches and commit messages - The plugin keeps related content logically connected, such as matching project names with project descriptions. - For user imagery, it generates realistic but entirely artificial faces instead of using stock photos of real people. - Atlassian shared the generator’s source code with the broader community. ## Collaboration and Critique at Uber Uber’s design team developed more than four plugins to improve collaboration, consistency, and speed. - A **mobile design critique plugin** creates a QR code and URL for the selected Figma frame. - Critique participants can open the design on their own phones and experience it at the intended mobile scale. - This gives each reviewer a better sense of how the design feels in-hand than viewing it on a shared large screen. ## A Pattern for Identifying Plugin Opportunities The examples show that useful plugins often emerge from recurring friction rather than from abstract experimentation. - Look for repetitive tasks that require many clicks. - Target workflows tied to a company’s own products, components, data, or design system. - Automate tasks involving large sets of styles, layers, or content. - Combine related utilities into one accessible team tool when multiple plugins begin to accumulate. Teams should start by identifying a specific, repeated workflow problem and build the smallest tool that removes it. Over time, those focused tools can become a broader internal plugin tailored to the team’s design system and processes.

Read original(opens in new tab)
Design SystemsAccessibilityFigma PluginsApi Integration+3
figma2 min readCurated summary

Finding confidence in design decisions | Figma Blog

Design confidence is not an innate quality but something built through reflection, information, practice, and support from others. Designers must balance data, experience, taste, instinct, and stakeholder perspectives, which can create persistent self-doubt. The article argues that confidence grows by gathering relevant evidence and repeatedly confronting difficult situations. ## Reframing Early Fears - Reflecting on childhood or earlier experiences with insecurity can reveal how confidence was developed in the past. - Sharing these stories with peers encourages empathy and helps people see their struggles from a more generous perspective. - The suggested exercise is to: - Recall a skill or activity that once felt intimidating. - Identify the steps, support, or practice that helped build competence. - Discuss the experience in a small group. ## Building Confidence Through Data - A lack of confidence may indicate that there is not yet enough information to make a well-grounded decision. - Designers can gather confidence-building evidence through: - Research and validation - Conversations with peers and experts - Input from people experiencing the problem directly - Feedback from stakeholders - Collecting these perspectives helps designers understand more variables and make solutions feel increasingly clear. ## Building Confidence Through Experience - Confidence also comes from repeatedly practicing the difficult thing until it becomes familiar. - Experience is gradual and nonlinear; designers revisit similar problems over time and apply previous lessons in increasingly nuanced ways. - Both successes and failures create emotional connections that strongly influence future confidence. - Some challenges—such as giving difficult feedback or making decisions in unfamiliar situations—cannot be solved through more research alone and require courage and repetition. ## Applying the Exercises - Identify an area where confidence is currently lacking. - Decide whether the primary need is more data, more experience, or both. - Share the challenge with trusted peers and use their perspectives to clarify the next step. - Treat confidence as an ongoing practice rather than a feeling that must exist before taking action. Confidence grows when designers combine informed investigation with repeated action, supported by a community that can provide perspective and encouragement.

Read original(opens in new tab)
Product DesignDesign ThinkingUser ResearchData Driven Design+2
figma2 min readCurated summary

The Dropbox guide to building creative culture | Figma Blog

Culture shapes team happiness, belonging, productivity, innovation, and business outcomes. The Dropbox design team argues that creative culture should be built intentionally rather than left to develop by accident. Its Team Values Toolkit turns abstract beliefs into shared values, observable behaviors, reinforcing habits, and an iterative process. ## Culture as Intentional Practice - Culture is how teams act on their beliefs. - It exists at company, organizational, team, and working-group levels. - Although culture forms inevitably, intentional design helps creative teams innovate and deliver stronger work. - Dropbox developed Culture Kits to help teams make culture concrete and actionable. ## Defining Beliefs and Shared Values - Team members share stories about meaningful work experiences to uncover their individual values. - Including everyone’s perspective helps prevent culture from reflecting only dominant viewpoints or top-down directives. - The team then identifies recurring themes and combines related ideas into shared values, such as grouping “teamwork,” “partnership,” and “clear goals” under “collaboration.” - Shared values should support the team’s goals and connect with broader company values where appropriate. ## Turning Values into Behaviors - Values become useful when translated into specific actions. - Teams should discuss how their values guide: - Decision-making - Conflict and tension - Collaboration - Feedback - Day-to-day working relationships - These behaviors make cultural principles visible in actual team practices. ## Establishing Reinforcing Habits - Teams should define communication styles, norms, and processes that encourage desired behaviors. - For collaboration, this might include cross-functional practices and regular feedback. - The relationship between values, behaviors, and reinforcement creates a shared social contract. - Consistent habits determine how culture is experienced and understood by the team. ## Evaluating and Iterating - Cultural change takes time, so teams should preserve practices that work and remove those that do not. - Teams should define ways to assess whether their culture supports both people and outcomes. - Regular events, such as quarterly offsites, provide opportunities to revisit and refine the framework. - Like a product, culture should be continuously tested and improved. A healthy creative culture requires more than choosing inspiring values; teams must practice and reinforce them consistently. The Team Values Toolkit offers a structured way to build that culture collaboratively and keep adapting it over time.

Read original(opens in new tab)
FigmaTeam CollaborationDesign ProcessDropbox+1
figma2 min readCurated summary

Reflections on Config, our first user conference | Figma Blog

Config, Figma’s first user conference, brought more than 1,000 participants together to learn, collaborate, and strengthen the design community. Rather than imposing a rigid agenda, Figma invited users to shape the event through workshops, talks, and roundtables. The conference highlighted open design, deeper community connection, and the importance of using technology to support—not replace—human relationships. ## A Conference Built by the Community - Figma created Config as a physical gathering where users and employees could exchange ideas directly. - Attendees discussed team culture, mentorship, design ethics, and other issues affecting the design industry. - Many sessions came from community submissions, encouraging participants to contribute rather than simply listen. - Sessions were also recorded for people who could not attend in person. ## Open Design and Shared Creativity - A central theme was “open design”: sharing, remixing, and building on one another’s work. - Devon Zuegel explored how open-source principles apply to urban planning and physical infrastructure. - Jason Kunesh described how Chicago students helped create a design system when the city’s design team lacked resources. - Miguel Solorio explained how Microsoft incorporated the broader community into its design process. ## Technology as a Tool for Connection - Craig Mod warned that technology can encourage isolation, even as it makes communication easier. - He argued that digital tools should help people connect more deeply with their surroundings rather than escape them. - May-Li Khoe discussed challenging established norms while supporting the communities she cares about. - Both talks encouraged attendees to consider their responsibility to build stronger, more inclusive communities. ## Continuing the Conversation - Figma presented Config as an ongoing community dialogue rather than a one-time event. - The company thanked attendees, speakers, and employees for making the conference possible. - Figma encouraged everyone to watch the recorded sessions and stay engaged with future discussions. Config’s main lesson was that design becomes more powerful when it is shared openly and grounded in community. Future conferences and design initiatives should prioritize participation, collaboration, and meaningful human connection.

Read original(opens in new tab)
FigmaDesign SystemsOpen SourceDesign Tools+2
figma2 min readCurated summary

New ways to create, collaborate, and share more openly | Figma Blog

Figma’s 2020 product direction centers on three priorities: faster creation, more inclusive collaboration, and a broader design community. At Config 2020, the company announced seven features aimed at reducing repetitive work, preserving context across teams, and making design knowledge easier to share. These updates build on Figma’s focus on a reliable, high-performing platform. ## Focus for 2020: Creation, Collaboration, and Community - **Creation:** Automate repetitive design tasks and help users work faster. - **Collaboration:** Include everyone involved in the product process. - **Community:** Give designers more opportunities to publish, learn, and share. - Platform reliability and performance remain foundational investments. ## Faster Design Workflows - **Auto Layout improvements** - Components can stretch to fill their containers. - Buttons resize automatically with their text. - Lists can be rearranged more easily. - These capabilities support responsive designs across device types. - **Redesigned Font Picker** - Prioritizes frequently used fonts, organization fonts, and favorites. - Provides faster font search. - Identifies fonts already used in a file to improve consistency. - **Selection Colors** - Allows fills, strokes, and text colors to be updated together in one action. - Also supports changing these color categories independently. - **Expanded prototype interactions** - Adds triggers for keyboards, gamepads, and accessibility controllers. - Enables prototypes for keyboard shortcuts, game menus, and other device-specific interactions. ## Collaboration Across Product Teams - **Text hyperlinks** - Text can link to external web pages, pages within a Figma file, or frames in the Editor. - Useful for linking requirements documents and building navigable tables of contents. - **Plugin Inspector API** - Lets plugins display important information in Figma’s properties panel. - Can surface action items or identify plugin-generated content, such as maps, for easier updating. - **Prototype-only sharing** - A new permission allows users to share a prototype without exposing the underlying design file. - The feature was planned for Figma Professional and Organization plans. ## Sharing with the Design Community - Figma continued developing its Community platform as a public space for publishing live files. - Community files can be inspected, remixed, and used for learning. - Within its first months, more than 400 creators had published over 1,000 files, including wireframes, icon sets, design systems, device frames, slide templates, and illustrations. Together, these updates position Figma as more than a design editor: it aims to become a faster creation tool, a shared workspace for product teams, and an open learning platform for the broader design community.

Read original(opens in new tab)
FigmaDesign SystemsPrototypingCollaboration+3
figma2 min readCurated summary

Test designs early and often with the new Maze integration | Figma Blog

Figma’s new Maze integration lets teams test interactive prototypes with real users before development, making research faster and less expensive than waiting for production A/B tests. By importing a Figma prototype link into Maze, teams can measure usability across individual tasks or complete user flows. The post also recommends practical research habits to ensure tests produce reliable, actionable insights. ## Earlier Testing with Figma and Maze - Maze provides quantitative UX insights from real users, supporting both small-scale interviews and tests involving thousands of participants. - Teams can copy and paste a Figma prototype link into Maze to begin testing during the design phase. - The integration helps product teams identify usability problems before committing to development. - At launch, Maze offered Figma users 30% off paid plans for three months with the code `MAZE_LOVES_FIGMA`. ## Define Measurable Goals - Establish what success means before building the prototype. - Use specific metrics, such as requiring 80% of participants to complete tasks successfully and fewer than 2% to misclick. - Tailor goals to the purpose and scope of each test. ## Pilot the Test First - Run the test internally with teammates, friends, or family before involving real users. - Confirm that tasks are understandable, the prototype works correctly, and the success criteria are meaningful. - A pilot functions like a beta release, revealing problems before testing at scale. ## Include Users and Non-Users - Existing customers can provide informed feedback and may be enthusiastic early adopters. - Target customer segments most likely to use the proposed feature. - Include people unfamiliar with the product to avoid bias and gain fresh perspectives. ## Write Neutral Tasks - Avoid leading instructions such as “click here,” “go to,” or “navigate to.” - Focus tasks on the outcome users should achieve rather than the specific interface steps. - Avoid internal product terminology so the test measures intuitiveness rather than participants’ ability to follow directions. ## Collaborate on Analysis - Reviewing results as a team helps build agreement around findings and next steps. - Maze supports collaboration through instantly generated reports and shareable URLs. - Involving the broader product team can make research insights easier to act on. Teams should use the Figma–Maze workflow to validate designs early, measure outcomes against clear goals, and involve collaborators in interpreting the results.

Read original(opens in new tab)
FigmaUser ExperiencePrototypingUser Testing+3
figma3 min readCurated summary

Postmortem: Service disruption on January 21-22, 2020 | Figma Blog

Figma’s January 21–22, 2020 outages were caused by separate database failures that compounded one another. A long-running query triggered the first incident and created a vacuuming backlog; the next day, PostgreSQL 9 produced a severely mis-planned query after database statistics changed, while aggressive autovacuuming increased write and lock pressure. Upgrading to PostgreSQL 11 restored stability and addressed both the query-planning and autovacuum performance issues. ## Incident Timeline ### January 21: Long-Running Query - Automated alerts reported elevated error rates at 6:11 AM PST. - Engineers found an expensive, long-running database query driving CPU usage. - Canceling the query at 6:54 AM restored normal performance. - The terminated query left behind a backlog of data requiring vacuuming. ### January 22: Database Saturation - Increased write IOPS and lock contention appeared, despite database CPU being below normal. - Queued API requests eventually made Figma unavailable to some users. - Engineers canceled nonessential queries and increased allocated IOPS, providing only temporary relief. - Performance deteriorated again in the afternoon. - Restarting the database temporarily disabled a suspected background process. - Figma performed an emergency upgrade from PostgreSQL 9 to PostgreSQL 11. - The service returned online at 8:15 PM, with metrics back to normal. ## Aggressive Autovacuuming - The vacuuming backlog crossed the threshold for PostgreSQL’s more aggressive transaction-ID wraparound protection. - This mode generated substantial locking and write activity, particularly in the PostgreSQL version Figma was using. - Canceling autovacuum operations on large tables temporarily improved metrics, but the operations resumed. - Fully suppressing the aggressive behavior required changing `autovacuum_freeze_max_age` and rebooting the database. - Autovacuum was a significant contributor, but disabling it did not eliminate all performance problems. ## PostgreSQL Query Planner Failure - A complex query repeatedly appeared in lock-contention reports. - PostgreSQL estimated that the query would return more than 20 million rows, while the actual result contained only three. - The incorrect plan used full table scans instead of expected indexes. - It also wrote large amounts of data to temporary buffers, matching the observed increases in write IOPS and temporary-byte metrics. - The issue was likely caused by inaccurate statistics or a PostgreSQL planner defect or limitation following a routine statistics change. ## Upgrade and Preventive Measures - PostgreSQL 11 generated a substantially better plan for the problematic query. - Newer PostgreSQL versions improve autovacuum performance and query planning. - PostgreSQL 10+ also provides more advanced performance-analysis tools through Amazon RDS. - Figma had already tested the PostgreSQL 11 upgrade in staging and prepared a detailed production rollout plan, allowing the emergency upgrade to succeed safely. - The company planned to improve monitoring for expensive queries and impose stricter limits on query execution time. Figma concluded that upgrading PostgreSQL, improving query monitoring, and enforcing tighter runtime limits were necessary to prevent similar database-driven outages.

Read original(opens in new tab)
PostgreSQLAmazon RdsDatabase MonitoringQuery Optimization+2
figma2 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(opens in new tab)
FigmaDesign SystemsComponent LibraryAtomic Design+2
figma2 min readCurated summary

Bringing the community together in Figma | Figma Blog

Figma’s 2020 priorities centered on strengthening its global community as the company and user base expanded. The company planned to connect users through in-person events, improved support, collaborative product features, and a richer platform for sharing design resources. Its broader goal was to make design more accessible and collaboration more effective for entire product teams. ## More Opportunities to Meet in Person - Figma launched Config, its first user conference, in San Francisco on February 6, 2020. - The event emphasized community-created programming, including talks on open-source design, developing future designers, design confidence, and redesigning Chicago.gov. - Figma also planned more local events and user groups in cities around the world. - Users were encouraged to participate either in person or online, and community leaders could help organize events in their cities. ## Expanded Global Customer Support - More than 80% of Figma’s active users were outside the United States, while its support team primarily covered North American and European business hours. - Figma moved its support technology to Zendesk to better serve customers globally. - Planned improvements included: - A new Help Center for self-service product information - Community forums for peer-to-peer support - Streamlined internal processes for faster responses ## Product Features for Entire Teams - After launching features such as Plugins, Auto Layout, Smart Animate, OpenType support, and Design System Analytics in 2019, Figma promised a larger 2020 product roadmap. - The company would continue reducing repetitive design work and improving creative productivity. - Figma also aimed to better support engineers, product managers, and other members of product teams—not just designers. - Files at larger organizations averaged six collaborators, highlighting the importance of team-based workflows. ## Building a More Open Design Community - Figma introduced the beta of Figma Community in October 2019 to let creators publish files for others to inspect, remix, and learn from. - More than 300 creators had already shared around 600 files, including templates, educational guides, and public libraries. - In 2020, Figma planned to expand the number of contributors and resources so both professional and aspiring designers could discover ideas and learn from shared work. Figma’s roadmap combined product development with community-building: expanding events, improving global support, enabling broader team collaboration, and making shared design resources easier to discover and reuse.

Read original(opens in new tab)
FigmaDesign SystemsAuto LayoutPlugins+4
figma2 min readCurated summary

Measuring the value of design systems | Figma Blog

Design systems can substantially reduce the time designers spend recreating assets, searching for references, and making repetitive visual decisions. Figma’s controlled experiment found that designers completed tasks **34% faster** when they had access to a relevant, up-to-date design system. The result represents an upper bound for real-world savings, since design systems are not always perfectly aligned with the work at hand. ## Why Design Systems Create Time Savings - Designers avoid recreating common elements from scratch. - Shared libraries reduce the need to search through old design files. - Predefined assets minimize small, repetitive decisions about: - Typography - Placement - Colors - Component structure - The accumulated savings can give designers more time for strategic and creative work. ## The Experiment - Designers were asked to complete two comparable tasks for a bank account aggregation app: - Designing a screen for viewing account transactions and trends. - Designing a flow for connecting a new account. - Each participant completed both tasks, but had access to a design system for only one. - For the task without the system, designers could reference older design files. - The tasks were balanced so each participant served as their own control. - Researchers alternated task order, allowed participants to familiarize themselves with the assets, and avoided prescribing specific design solutions. - Completion time was measured, while designers chose when their work was sufficiently complete. ## The 34% Improvement - Participants with access to the design system completed their objective **34% faster**. - The system was specifically relevant, current, and applicable to the assigned tasks. - Because of those ideal conditions, Figma considers 34% a likely maximum rather than an average real-world benefit. - Figma’s broader goal was to help design teams use analytics to keep libraries relevant and understand the value they provide. ## Maintaining the System’s Value - Design systems are most valuable when they reflect the work designers actually need to do. - Quantitative usage data can help teams identify which components are useful, compare libraries, and decide where maintenance is needed. - Figma introduced Design System Analytics to provide insight into library and component usage, supporting better decisions about shared assets. A design system should be treated as an actively maintained productivity tool, not merely a repository of reusable components. Teams can maximize its value by measuring adoption and keeping its assets current and relevant.

Read original(opens in new tab)
FigmaDesign SystemsData ScienceDesign System Analytics+1
figma2 min readCurated summary

Made in Figma, 2019: Design by the numbers | Figma Blog

Figma’s 2019 usage data shows design becoming more collaborative, measurable, and broadly practiced. Anonymized data reveals strong preferences for cool colors, widely available sans-serif fonts, bold typography, and desktop and mobile frame presets. It also shows that design files increasingly serve as shared spaces for cross-functional teams rather than isolated work by individual designers. ## Color and Typography Trends - The most popular non-gray color was teal `#009688`, followed by dark blue-gray `#455A64` and `#263238`. - These cool tones contrasted with Pantone’s 2019 Color of the Year, Living Coral (`#FF6F61`). - Montserrat, Open Sans, and Lato were the three most-used fonts. - Google Fonts accounted for six of the top ten fonts, largely because they are readily available in Figma. - SF Pro Text, SF Pro Display, Proxima Nova, and Arial also ranked highly; notably, Arial surpassed Helvetica among system fonts. - Roboto, Figma’s default font, was excluded from the rankings. - Font usage was highly concentrated: 90% of usage came from the top 11 fonts, including Roboto. - Font Awesome ranked 31st, while Times New Roman ranked 55th. The first serif font, Playfair Display, appeared at number 22. - Designers were 13 times more likely to adjust font weight than italicize text, and one-third of files used bold or heavy styles. ## Frame and Device Preferences - Figma offered 36 preset frame options, and 33% of files began with one of them. - The 1440 × 1024 desktop frame was the most popular preset. - iPhone X and iPhone 8 frames followed closely, showing strong interest in both desktop and mobile design. - The ordering was notable given that Windows has much greater global usage than macOS. ## Collaboration Across Teams - Figma’s data reflects its goal of making design an open, collaborative process. - In larger organizations, files averaged six collaborators. - Collaborators could include designers, developers, product managers, writers, and other stakeholders. - A file typically began with one person working independently. - After an average of 19 days, the first collaborator was invited to review, comment, or contribute. ## Overall Direction The data suggests that 2019 design work was shaped by accessible tools, reusable conventions, and increasing teamwork. While designers favored familiar fonts, cool color palettes, and strong type weights, Figma files were also becoming shared product-development spaces involving people beyond design.

Read original(opens in new tab)
FigmaDesign SystemsPrototypingCollaborative Design+2
figma2 min readCurated summary

"The Decade of Design”: How 10 years transformed design’s role in tech | Figma Blog

The 2010s transformed design from a secondary concern into a central function of technology companies. The smartphone, especially the iPhone, made products more complex, generated vast amounts of behavioral data, and raised consumer expectations for polished experiences. As a result, companies began hiring designers at scale and treating design as a driver of product strategy and growth. ## The Mobile Wave ### More Complex Interactions - Smartphones introduced smaller, varied screens and touch-based gestures such as swiping, tapping, and holding. - Users interacted with devices in many contexts—while walking, commuting, or multitasking—forcing teams to design for real-world conditions. - Designers became essential to prioritizing functionality and simplifying complex technical systems. - Mobile effectively made the phone the primary computer people used throughout the day. ### The Rise of Data-Driven Design - Smartphones produced unprecedented volumes of behavioral data. - Product teams began continuously A/B testing interface details, including button colors, wording, and layouts. - These experiments measured outcomes such as sign-ups, purchases, and sharing. - “Growth design” emerged as a distinct discipline, with designers increasingly focused on optimizing user behavior and business metrics. - Smartphone ownership among U.S. adults rose from 35% in 2011 to 81% in 2019. ### Apple Raised the Standard - The iPhone changed expectations for how technology should look and feel, replacing the perception of software as merely functional and bland. - Apple’s design became a benchmark that competitors sought to imitate. - The iPhone’s broader mainstream appeal made high-quality industrial and interface design visible to ordinary consumers, not just creative professionals. - Products such as Tinder adopted mobile-first design conventions influenced by Apple’s operating system. - Even Google reportedly discarded an Android device it had been developing after reassessing its design direction. ## Design’s Expanding Role in Technology - The rapid growth of mobile products exposed the limitations of engineering-only approaches to product development. - Designers were particularly valuable for translating complicated systems into simple, intuitive interactions. - Technology companies that had previously operated with minimal design resources began hiring designers and acquiring design agencies. - Silicon Valley gradually shifted from primarily celebrating engineering expertise to recognizing design as a competitive advantage. The decade’s central lesson is that design became indispensable because technology moved into people’s pockets and daily lives. Companies that want to compete should treat designers as strategic product partners, not merely as people responsible for visual polish.

Read original(opens in new tab)
User ExperienceA B TestingMobile DesignUx Ui Design+2
figma2 min readCurated summary

Design more, resize less, with Auto Layout | Figma Blog

Figma’s Auto Layout brings structural concepts from CSS flexbox into a free-form design environment. It reduces repetitive resizing and repositioning by making frames respond automatically to their content, while preserving designers’ ability to explore layouts freely. The result is a workflow that feels closer to production code without sacrificing visual experimentation. ## Bridging Design and Development - Traditional Figma designs require manual updates when content changes, such as resizing a button and repositioning neighboring elements. - HTML/CSS and SwiftUI handle these relationships automatically, but are less suited to rapid, free-form design exploration. - Auto Layout combines both approaches by adding flexible, code-inspired layout behavior as a property of any Figma frame. ## How Auto Layout Works - Items inside an Auto Layout frame are arranged vertically or horizontally. - The frame automatically sizes itself based on its contents. - Frames can include padding, fills, strokes, and corner radii, allowing designers to create buttons without extra layers. - Changing button text automatically resizes the button and adjusts surrounding elements. - Spacing is controlled at the container level rather than independently between every pair of items. ## Lists, Menus, and Design Systems - Auto Layout simplifies repeated interface elements such as lists and menus. - Items can be reordered through drag and drop instead of manually repositioning them. - Existing components and design-system elements can be converted using **Shift + A** or the Option menu. - The feature supports more generic components that adapt to different content instead of requiring separate variants. ## Nested Frames and Safeguards - Auto Layout frames can be nested to build complex interfaces, similar to nested HTML `div` elements. - Designers can edit content or move elements in and out of layout frames. - Figma includes safeguards against unintended actions, such as placing a large image inside a button. - Holding **Command** on macOS or **Ctrl** on Windows overrides these safeguards when needed. Figma recommends trying Auto Layout through its playground file, video, and documentation. The initial release was presented as a starting point, with further improvements expected based on user feedback.

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

Humanity at work: Gusto brings a new brand to life with Figma | Figma Blog

Gusto used Figma to turn a brand refresh into a company-wide effort centered on the human experience of work. The collaboration brought marketing, brand, product, and non-design teams into the same workspace, helping them align on the new identity and apply it consistently across Gusto’s platform. Figma’s real-time collaboration, commenting, libraries, and components helped translate the brand into a scalable product system. ## Why Gusto Rebranded - Formerly ZenPayroll, Gusto serves more than 100,000 small businesses with payroll, benefits, and HR tools. - Although customers valued the product, Gusto felt its existing brand did not reflect the human way it served them. - The refresh aimed to unify brand awareness, product development, and customer experience. - Gusto viewed its brand as the sum of every user interaction, not something owned solely by marketing or brand design. ## Bringing the Whole Company Into the Process - A major challenge was aligning roughly 1,000 employees around the new brand. - Gusto chose Figma as a shared workspace where employees could: - See work develop in real time - Communicate and share ideas - Comment directly on designs - Take ownership of the rebrand - Figma also helped non-designers understand the design process and appreciate design decisions. ## Connecting Brand and Product Teams - Brand and product design teams worked as equal partners through brainstorming sessions and workshops. - They jointly developed: - Color palettes - Typography - Brand starter templates - Product applications of the new identity - In collaborative sessions such as “Refresca,” designers applied the new brand to different product areas together in Figma. - Early collaboration made it easier to carry the brand consistently through the entire product experience while highlighting meaningful moments in distinctive ways. ## Building a Scalable Design System - Gusto wanted a reliable “system of record” for how its products should look. - The product design team created a UI kit using Figma libraries and components. - The kit was based on the brand team’s guidelines and provided reusable foundations for multiple products. - This system helped designers work consistently and scale the new brand as Gusto grew. Gusto’s experience shows that a successful rebrand requires more than new visual guidelines. Shared tools and close collaboration can align an entire company, connect brand strategy to product design, and create a cohesive customer experience.

Read original(opens in new tab)
FigmaDesign SystemsCollaborative DesignUser Interface Design+2
figma3 min readCurated summary

Figma’s infrastructure: What goes into powering a web-based design tool | Figma Blog

Figma’s infrastructure team is focused on making a web-based design tool feel as fast and reliable as a desktop application. Its cloud-based, collaborative model creates demanding networking, storage, and scaling challenges, especially as organizations grow. The company is therefore evolving from a simple but operationally intensive backend toward a more mature, horizontally scalable architecture. ## Figma’s Collaborative Design Model - Figma stores designs in the cloud, giving each file a unique URL and making it a shared source of truth. - Users can collaborate, comment, prototype, and support developer handoff without exporting files or managing separate versions. - Its multiplayer functionality allows multiple people to view and edit files simultaneously. - Files may contain complex shapes and large images, creating significant data-transfer demands. - Users accustomed to desktop design tools expect fast interaction despite Figma running in a browser. ## Limits of the Original Infrastructure - Figma’s early backend favored simple strategies that worked well for smaller teams. - The application initially loaded all shared components available to a user when opening a file. - This approach became increasingly inefficient as organizations accumulated nearly 10,000 shared design elements. - Growth among large customers and the broader user base exposed the limits of the original design. ## Reducing Interaction Latency - Figma still preloads more data than users immediately need, increasing backend load and slowing startup. - Fixing this requires more than backend optimization: the client-server interaction model must be redesigned. - The client should request information incrementally, only when it is needed. - This change also requires coordination with product teams because existing user experiences depend on preloaded data. ## Building a Horizontally Scalable Database - At the time of the article, Figma relied on a single powerful AWS database instance. - The simple architecture reflected the company’s preference for the KISS principle and had supported substantial growth. - As usage increased, the database approached its capacity limits. - Figma planned to replace it with a database layer capable of scaling horizontally, a difficult transition because nearly every system depends on the database. ## Improving International Performance - More than 80% of Figma’s weekly active users were located outside the United States. - Their latency was affected by the round-trip distance to Figma’s Oregon datacenter. - Figma planned to move selected infrastructure components closer to users around the world. - The initial step was to deploy strategically placed remote proxies globally. Figma’s broader infrastructure strategy is to preserve the simplicity that helped it move quickly while introducing selective caching, better data loading, geographic distribution, and horizontal scaling where growth demands it.

Read original(opens in new tab)
AWSReal Time CollaborationDistributed SystemsPerformance Optimization+2