figmaJan 6, 2026

Issue No.14: Software Is Culture | Figma Blog (opens in new tab)

Software increasingly shapes how people communicate, play, create, eat, and connect. Figma’s January 2026 newsletter argues that as AI evolves from tool to teammate, software will become more responsive to human needs—and its cultural influence will grow. The issue explores this idea through design, language, gaming, food, and physical fabrication. ## Design Is Culture - Familiar interactions such as pinch-to-zoom, infinite scroll, and tap-to-like were once novel inventions. - These interface patterns have had a major influence on how an entire generation thinks and feels. - The newsletter highlights 10 iconic interactions to examine their broader cultural impact. ## Language Is Culture - Social media and recommendation algorithms help new slang spread rapidly, including expressions such as “6-7,” “aura,” and “rizz.” - Linguist Adam Aleksic explains that algorithms influence not only how people speak, but also how they think and relate to one another. - “Algospeak” has become a measure of virality and a distinctive feature of online communication. ## Gaming Is Culture - Video games have grown from simple experiences like Pong into a $184 billion industry built around expansive worlds, characters, game modes, and side quests. - Despite this complexity, players often navigate games through a small set of controller inputs. - Epic Games UX designer Aashrey Sharma examines how these simple controls enable rich interactions and what they suggest about the future of interfaces. ## Food Is Culture - British Columbia’s small farms are under pressure from factory farming and rising costs, with farmers reportedly leaving the industry at an alarming rate. - Entrepreneur Aaron Veale used Figma Make to build a marketplace connecting local growers with restaurants. - By prompting the AI tool, he produced a working minimum viable product in less than three weeks, demonstrating how AI can help individuals address urgent community problems. ## Fabrication Is Culture - Designer Kelsey Fairhurst combines digital design with hands-on manufacturing to create “softline brutalist” stainless-steel flatware. - Her Forks Plus project grew through years of research and work between a Brooklyn studio and a Cleveland fabrication shop. - The story presents software and design tools as companions to physical making rather than replacements for it. The newsletter’s central recommendation is implicit: treat software as a cultural force, not merely a productivity tool. Designers and builders should consider how the interfaces and AI systems they create will shape behavior, language, creativity, and everyday life.

user-interface-designfigmaaiversion-control+4

figmaOct 20, 2025

Design Systems: From the Basics to Big Things Ahead | Figma Blog (opens in new tab)

Design systems create consistency at scale while connecting design work to production. The post argues that as AI accelerates product development, organizations need a well-documented, shared foundation more than ever. It offers a progression from design-system fundamentals to adoption and measurement, alongside examples and resources for teams at different maturity levels. ## Design Systems 101 - Design systems evolved from: - Graphic-design and print-era style guides - Typographic standards and brand guidelines - Digital systems created by companies such as IBM, Microsoft, Apple, and Google - These systems translated visual and interaction standards from paper into digital interfaces. - The National Park Service’s adaptation of Massimo Vignelli’s 1977 design system illustrates how established systems can be carried into modern digital products. - Figma’s design-system series is intended for both teams starting their first system and organizations scaling existing ones. ## Documentation Drives Adoption - Documentation turns abstract principles into practical guidance for designers and developers. - It provides a shared reference point and helps users understand how to work with system tools and components. - Alaska Airlines prioritized documentation for its Auro design system, including guidance for Figma features such as auto layout and branch merging. - Documentation must serve different roles: - Some users need detailed specifications. - Others benefit from high-level explanations or visual examples. - As more roles participate in product design, documentation needs to remain clear, accessible, and relevant. ## Measuring Design-System ROI - Organizations can evaluate business impact through: - Component usage - Adoption rates - Consistency scores - Metrics can reveal not only whether a system is being used, but also where it needs improvement. - At athenahealth, increased detachments from a container component prompted investigation. - Detaching may indicate: - A component bug - Missing functionality - Unexpected combinations of existing elements - These signals help design-system teams prioritize fixes and enhancements. The practical recommendation is to treat a design system as an evolving product: establish strong foundations, document them for varied audiences, and use adoption and usage data to continually improve the system.

user-interface-designfigmaaidesign-systems+3

figmaAug 24, 2025

Version Control: How Figma Make Helped Us Figure Out Video Playback | Figma Blog (opens in new tab)

Figma’s team used Figma Make to rapidly prototype video playback for Figma Buzz under a two-month deadline. The tool helped translate complex interaction ideas into working code, clarify feasibility with engineers, and expose edge cases before implementation. Although the project began with support for one video, technical progress expanded the scope to multiple videos and required revisiting the original playback design. ## The Challenge of Video Playback - Figma Buzz lets teams create branded assets containing video, text, images, and other layered elements. - Playback controls could not simply be placed in the center of the canvas because they might obscure important design content. - The team needed to account for videos being: - Moved within or outside their parent frame - Partially visible or completely off-canvas - Enlarged and cropped - Used alongside other assets in grid view - Designer Natasha Tenggoro used Figma Make because the interaction logic was difficult to communicate with static Figma designs and would have taken too long to build in another tool. ## Version One: Single-Video Playback - The initial release focused on the common case: assets containing one video. - Natasha imported an existing Figma Design frame and prompted Figma Make to create: - A draggable media frame - Media that could extend beyond a fixed parent without clipping - Reduced opacity for media outside the parent - Playback controls pinned to the media’s top-right corner - Automatic repositioning of controls when they would leave the parent frame - Control fading when less than 20% of the video was visible - The working prototype gave engineers a concrete demonstration of the intended behavior. - This helped establish technical feasibility, clarify scope, and turn an uncertain idea into a prioritized feature. ## Expanding to Multiple Videos - Further engineering investigation showed that multiple videos could potentially be supported within the original release timeline. - The expanded capability forced the team to reconsider earlier decisions about playback controls. - For a collage containing several videos, the team chose a single overall playback control rather than separate controls for each video. - This approach reduced interface clutter, avoided covering design elements, and provided a more unified preview experience. ## Practical Conclusion Figma Make served as a bridge between design intent and engineering implementation, enabling fast exploration of complex motion and interaction behavior. The experience suggests that functional prototypes are especially valuable when requirements involve dynamic positioning, visibility rules, and changing technical scope.

user-interface-designprototypingfigma-makeinteraction-design+2

figmaJul 30, 2025

Figma’s IPO: Design Is Everyone’s Business | Figma Blog (opens in new tab)

Figma’s IPO marks a new phase for the company, but not a change in its founding mission: narrowing the gap between imagination and reality. CEO Dylan Field argues that AI will make design more accessible and important, while emphasizing that Figma will prioritize decades-long growth over short-term efficiency or share-price performance. He sees Figma as a collaborative platform where more people can shape products and ideas. ## Figma’s IPO and Long-Term Mission - Figma went public to improve corporate governance, increase brand awareness, provide liquidity, strengthen its acquisition currency, and access capital markets. - Field especially values public ownership because it allows the broader Figma community to share in the company’s success. - He cautions investors that public-market performance is unpredictable and does not promise share-price growth. - Figma will prioritize supporting designers’ evolving needs and pursuing long-term growth over maximizing quarterly efficiency. - The company expects to take significant risks, including large platform investments and mergers and acquisitions. ## AI as a Strategic Investment - Figma is investing heavily in AI and plans to increase that investment further. - This spending may reduce efficiency for several years, but Field considers AI central to the future of design workflows. - Existing capabilities, including Figma Make and other AI features, are presented as only the beginning. - AI could help designers work more effectively and bring more people into the design process. ## Design as a Competitive Advantage - Creating a minimum viable product is easier than ever, making design, craft, and distinctive perspective more important differentiators. - Design is no longer an afterthought focused only on form and function; it can determine whether a product succeeds or fails. - As design becomes more central, companies will involve more types of contributors and encourage greater experimentation and creativity. - Figma must balance accessibility with professional power while supporting collaboration and decision-making across large organizations. ## The Evolution of AI Interfaces - Field compares current AI interfaces, which rely heavily on prompts, to the MS-DOS era of computing. - He expects new, domain-specific design patterns to make AI capabilities easier and more intuitive to use. - Just as graphical user interfaces expanded access to computers, well-designed AI interfaces could make advanced capabilities available to everyday users. ## Figma’s Role in the Future - Field describes Figma as a “peaceful garden” where individuals and teams can develop ideas together. - He believes tools alone do not change the world; people use them to create meaningful change. - Figma’s long-term ambition is to help more people participate in design and turn ideas into reality. Figma’s direction is therefore one of patient, ambitious investment: accept near-term inefficiency, expand access to design, and build AI-powered tools for a much broader creative community.

user-interface-designfigmaaigen-ai+2

figmaMar 5, 2024

Behind the Feature: The Multiple Lives of Multi-Edit | Figma Blog (opens in new tab)

Multi-edit began as a way to reduce repetitive work when editing component variants, then evolved into a broader interaction model for editing matching objects across Figma designs. The feature addresses shortcomings in ordinary multi-selection, where selecting the right objects and applying certain edits—such as resizing or changing text—is difficult. After years of refinement, Figma launched multi-edit as a more natural, second-nature workflow. ## The Philosophy Behind Multi-Edit - The idea originated in 2019 during a design summit focused on Figma’s variants feature. - Designers noticed that editing variants required too much repetitive work. - The initial insight was to create a mode where one edit could apply simultaneously to all variants. - The team soon recognized that the same capability could help with many other design tasks. ### Why Existing Multi-Selection Wasn’t Enough - Figma already allowed users to select multiple objects, but the workflow had significant limitations: - Selecting exactly the objects users wanted to edit was difficult. - Some edits worked well across selections, while others did not. - Changing shared properties such as color, font, or font size was relatively easy. - More structural edits, including resizing multiple objects, were cumbersome. - Editing the actual text content of multiple text nodes was also difficult. ### A Long Period of Hibernation - Although the concept was sketched quickly, development did not begin immediately. - The team needed to resolve fundamental questions about how multi-edit should behave. - Early thinking treated it as a powerful, specialized mode similar to multi-select text editing in advanced text editors. - Refining the concept required reconciling that new mode with Figma’s existing selection model. ## Bringing Multi-Edit to Life - The finished feature lets users select and edit matching objects across frames and component sets. - Suggested interactions include: - `⌘ Command + ⌥ Option + A` to select all matching objects. - Shift-dragging to select specific matching objects. - Selecting multiple text objects and pressing Enter to edit their text together. - Selecting a component set and pressing `Q` to edit variants simultaneously. - Figma provides a playground file so users can experiment with these workflows. ## Knowing When It’s Ready - The article frames multi-edit as an example of a feature that required extensive iteration before feeling obvious. - Its goal was not merely to add a new command, but to make repetitive editing feel effortless and intuitive. - Figma’s broader product philosophy is to question established design-tool conventions when doing so can simplify everyday work. Figma’s experience suggests that seemingly simple, natural interactions often require substantial exploration. Multi-edit is most useful when users repeatedly update related objects, variants, or text, and its shortcuts can make those bulk edits significantly faster.

user-interface-designfigmadesign-toolscomponent-variants+1

figmaFeb 26, 2024

Behind the Feature: Inline Device Frames | Figma Blog (opens in new tab)

Inline device frames bring interactive phone, tablet, and watch mockups directly into the Figma editor, making prototypes feel closer to real-world use without switching to presentation view. The feature evolved from Figma’s inline preview and was designed to make devices tangible, movable, and resizable. Its development balanced realistic device representation with intuitive interactions and collaborative input from Figma’s community and cross-functional teams. ## Prototyping in the Editor - Figma introduced inline device frames as part of broader prototyping improvements. - Designers can preview their work within representations of mobile, tablet, and watch devices. - The goal is to help teams identify usability gaps and opportunities earlier by experiencing how designs actually behave. - Other announced prototyping updates included: - Copying and pasting interaction “noodles” - Faster flow deletion - Importing elements with local variables into new files - A 22% reduction in loading-spinner time in key use cases ## A Collaborative Foundation - Figma previously offered device presets in presentation view, but the team wanted to make them available beside designs in the editor. - The intended experience was for devices to feel tangible: - Users should be able to grab, move, and resize them. - Frames needed to be dynamic and responsive rather than static images. - Development combined community research with feedback from engineering, design, product management, and marketing teams. - Three guiding principles shaped the feature: - Seamless integration into the design process - Realistic representation of diverse devices - Intuitive interactions through clearly defined hit targets ## Representing Different Devices - The inline preview’s space constraints led the team to prioritize phones, tablets, and watches rather than larger personal-computer interfaces. - Supporting many device shapes and sizes created significant design and engineering challenges. - The team had to account for details such as smartphone notches, which house front-facing cameras and sensors. - Watch frames raised additional questions about where users should be able to interact and resize the device. Inline device frames are intended to make prototyping more immediate and realistic while preserving the flexibility of the Figma editor. Designers can use them to evaluate designs in context without leaving their working file.

user-interface-designfigmaprototypingresponsive-design+2

figmaJan 25, 2024

Six Myths Holding You Back from Embracing Design Systems | Figma Blog (opens in new tab)

Design systems are not reserved for large companies or teams with advanced design practices. Figma argues that the best system is practical, goal-oriented, and tailored to an organization’s brand, users, and needs—not copied from industry trends or famous examples. By challenging common assumptions, teams can adopt design systems more confidently and incrementally. ## Design Systems Benefit Teams of All Sizes - Small organizations can use design systems to improve efficiency, consistency, and collaboration. - The system’s scale and appearance may vary, but its core purpose remains the same. - Mixpanel’s redesign is cited as an example of using a design system to reduce costs, improve consistency, and make analytics more accessible. ## A Design System Does Not Need Every New Technique - Design trends change constantly, and no single approach is universally correct. - Teams should learn from industry practices without becoming distracted by building a “perfect” or fashionable system. - A useful design system should serve clear organizational goals rather than imitate the latest trends. ## Material Design Is Not a Universal Solution - Google’s Material Design is influential, but it is not automatically suitable for every organization. - Design systems should reflect a company’s brand identity, user needs, and business objectives. - Teams should balance established standards with solutions appropriate to their current context. - Examples such as Uber Base, Spotify Backstage, Pipedrive, Microsoft Teams, and Salesforce Lightning demonstrate that successful systems can differ significantly. ## You Do Not Have to Build Everything From Scratch - The article begins addressing the misconception that every design system must be created internally from the ground up. - Open-source design-system resources and existing UI kits can provide a starting point. - Reusing proven foundations can help teams move faster while adapting components to their own requirements. The practical recommendation is to start with the problems your team needs to solve, then adopt or create only the structure necessary to address them.

user-interface-designdesign-systemsopen-sourcedesign-thinking+3

figmaNov 15, 2023

The Figma + Adobe Deal, Explained | Figma Blog (opens in new tab)

Figma’s post explains why it believed its proposed acquisition by Adobe would benefit users and withstand regulatory scrutiny. It presents Figma as a collaborative tool for building digital products, distinct from Adobe’s traditional creative software, and emphasizes a broad, fast-changing competitive landscape. However, the deal was ultimately abandoned on December 18, 2023, after the companies concluded that regulatory approval was unlikely. ## Figma’s Role in Digital Product Development - Figma describes itself as a web-based platform for teams building apps and websites. - Its tools support multiple stages of development: - **FigJam** for brainstorming and concepting - **Figma** for interface design and prototyping - **Dev Mode** for helping developers translate designs into code - The company says it spent thousands of hours explaining its products and market to competition regulators. ## Product Design vs. Traditional Graphic Design - Figma focuses on creating interactive digital products rather than static advertisements, illustrations, or posters. - Building an app or website requires collaboration among designers, developers, product managers, and other specialists. - This broader, team-oriented workflow has contributed to the growth of the product development software market. ## A Broad and Competitive Market - Figma portrays its market as highly dynamic, with both comprehensive platforms and specialized tools. - Competitors and adjacent products mentioned include: - Sketch, Penpot, and Figma - Miro, Flinto, Anima, ProtoPie, and Zeplin - Salesforce’s low-code development tools - The company argues that new startups and products enter the market frequently, while AI is accelerating innovation. - Figma says its competitive landscape slide became outdated only three weeks after it was created. ## Adobe’s Position - Adobe XD had previously competed with Figma but was placed into maintenance mode after Adobe stopped developing new features. - Photoshop and Illustrator serve different purposes, such as photo editing and advanced illustration. - Figma argues that those tools are not designed for collaborative website and application development. ## The Proposed Benefits of Combining Figma and Adobe - Figma contributes collaborative product design and development expertise. - Adobe contributes widely used creative tools and access to hundreds of millions of users. - Figma argued that the companies’ complementary strengths could create new consumer benefits, including closer connections between design, creativity, and product development. - The proposed acquisition was announced on September 15, 2022, as a major collaboration between the companies. ## Regulatory Outcome - Despite Figma’s efforts to demonstrate that the deal would benefit users and occur in a competitive market, regulatory concerns continued for fifteen months. - On December 18, 2023, Figma and Adobe abandoned the proposed acquisition because they no longer saw a path to regulatory approval.

user-interface-designfigmaaiprototyping+4

figmaOct 5, 2022

Behind the feature: find and replace | Figma Blog (opens in new tab)

Find and replace in Figma and FigJam proved far more complex than adding a search bar. The team had to design an intuitive experience for navigating a multidimensional canvas, develop reliable result-ordering logic, and adapt the feature across two different products. They combined prototyping, experimentation, internal testing, and lessons from an earlier plugin to create a native tool. ## Building an Intuitive Search Experience - The team began with a brainstorm involving design, engineering, product management, UX writing, and product marketing. - They studied search experiences in other applications and established three principles: - Fast and lightweight - Smooth when navigating across the canvas - Familiar, like search in a browser - Jackie Chui built an early prototype based on her 2019 Find and Replace plugin. - Engineers continuously iterated on working designs, while Figma employees tested the feature in daily work, participated in bug bashes, and provided feedback. ## Establishing the Core Experience in FigJam - The team launched the work in FigJam first to focus on the fundamentals: - Finding text - Highlighting matches - Navigating through results - FigJam provided a simpler starting point before tackling Figma’s broader range of objects and file structures. ## The Challenge of Sorting Search Results - Unlike web pages or documents, Figma and FigJam canvases are multidirectional and multidimensional. - Search results needed a predictable order so navigation would feel coherent rather than jumping randomly across the canvas. - The team had to account for the user-defined spatial structure of each file. ### Reusing Existing Sorting Logic - The first solution reused row-by-row sorting from Figma’s prototyping engine. - This worked for orderly layouts such as presentation slides. - It was less effective for FigJam boards, where stickies, shapes, and other objects may be scattered across the canvas. ### Using Sections and Spatial Grouping - The introduction of FigJam sections gave files clearer structure. - Results could be sorted within each section, producing an order that better matched visual groupings. - The team observed that users commonly clustered stickies around themes, next steps, or threaded discussions. - To handle groups outside sections, an engineer created a spatial-sorting algorithm that groups nearby elements together. ### Developing Heuristics - The team mapped heuristics for determining how section shapes should influence sorting direction. - These rules helped the system infer a natural reading and navigation order from the canvas layout. The broader lesson is that seemingly simple productivity features often require product-specific interaction models. Building prototypes early, testing with real files, and combining existing logic with new spatial heuristics helped Figma create find and replace that felt natural across both structured and free-form canvases.

user-interface-designfigmafigjamfind-and-replace+2

figmaMay 10, 2022

Figma Community Awards 2022 | Figma Blog (opens in new tab)

Figma introduced its first-ever Community Awards to recognize the plugins, widgets, templates, UI kits, and other resources that help designers collaborate and work more efficiently. With more than 1,600 resources published daily, the awards highlight how the community builds practical and creative tools for Figma and FigJam. Winners were selected through community nominations and voting, then announced at Config. ## Purpose of the Awards - The awards celebrate community members who “imagine, design, and build” together. - Recognized resources support workflows ranging from accessibility and UI design to workshops, ideation, and team bonding. - The program included ten award categories. ## 2022 Award Winners - **Plugin for extending Figma’s utility:** *Similayer* by Dave Williames, for selecting similar layers using multiple properties. - **Plugin for adding content:** *Content Reel* by Eugene Gavriloff and Microsoft, offering reusable text, images, and icons. - **Widget for teams:** *FigJenda* by PG Gonni, an interactive workshop and meeting agenda compatible with the FigJam timer. - **Widget for utility or fun:** *Rock Paper Scissors* by Alex Einarsson. - **Team bonding template:** *Remote Design Sprint* by Miranda Mazzara, Danila Gallardo, and Aerolab. - **Ideation template:** *Customer Journey Map* by Fuad Aslan. - **UI kit:** *Ant Design Open Source* by Mr Biscuit and Vinh Bui, an open-source design system. - **Icon set:** *css.gg* by Lona and Astrit, containing more than 700 CSS, SVG, and Figma icons. - **Educational resource:** *Micro interactions - Prototyping* by Rusmir Arnautovic. - **Graphic resource:** *Sketch Elements Brushes Set* by Streamline. ## How the Awards Worked - Community members could nominate resources through Figma Community profiles. - Nominations were open from April 14–22, followed by finalist announcements on May 2. - Voting took place from May 2–10. - Each resource could be nominated only once, but users could nominate as many different files, plugins, or widgets as they wished. - Nomination totals were kept private to preserve fairness. ## Recognition for Creators - Winners were honored during the awards ceremony at Config on May 11. - They received a physical Figma Community Award and Figma merchandise. - Creators were encouraged to promote their resources and use **#FigmaCommunityAwards**. The awards demonstrate how central community-created resources are to the Figma ecosystem. Designers were encouraged both to recognize tools that improve their work and to publish their own resources for others to discover and use.

user-interface-designfigmadesign-systemsprototyping+4

figmaMay 26, 2021

Q&A with Dantley Davis | Figma Blog (opens in new tab)

Dantley Davis’s Config 2021 Q&A presents design as intentional problem-solving shaped by curiosity, collaboration, and diverse perspectives. He emphasizes using adversity and data to create meaningful impact, while staying humble and avoiding ego-driven design culture. His answers also highlight the importance of cross-disciplinary knowledge, personal creativity, and building inclusive teams. ## Design Philosophy and Creative Practice - Davis describes his creative process as “intentional.” - The best design solves an unrecognized problem so effectively that people cannot imagine life without it. - He defines design as problem-solving through form and function. - His greatest design fear is producing work that receives no reaction. - He dislikes designing primarily for oneself. - He values data as an underused tool for informing design decisions. - His favorite UI font is Montserrat; he prefers Akzidenz-Grotesk for type, hex colors, and specifically `#000000`. ## Collaboration and Team Culture - Good teammates are curious and ego-free. - Teams feel cohesive when members: - Seek feedback because they trust one another. - Inspire each other through their work and perspectives. - Set aside personal ego. - Davis considers building the most diverse team in tech his greatest career accomplishment. - He views mentorship as an important part of his role in the Design Twitter community. ## Leadership and Professional Growth - Davis is skeptical of the emphasis placed on being a “thought leader.” - He encourages young designers to study business, engineering, and finance to become more well-rounded thinkers. - He admires Issa Rae for combining writing, producing, and acting while remaining authentic to her story. - He credits personal time and side projects with helping him do his best creative work. - He regrets that one shipped product remained available too long after it stopped meaningfully benefiting users. ## Design Inspirations and Future Ambitions - Davis would like to design a car interface and would love to shape Porsche’s entire ecosystem, from driving to its app. - He admires designer Clement Mok and would invite him to critique his team’s work. - He praises Roblox for enabling children to play, socialize, and build rather than merely consume content. - He enjoyed Afrotech’s virtual conference, especially its combination of online access and a feeling of presence. - His favorite Figma feature is Observation Mode. Ultimately, Davis advocates for intentional, user-centered design supported by data, interdisciplinary learning, honest feedback, and inclusive collaboration.

user-interface-designfigmadesign-systemsweb-design+2

figmaDec 17, 2019

Made in Figma, 2019: Design by the numbers | Figma Blog (opens in new tab)

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.

user-interface-designfigmadesign-systemsprototyping+2

figmaNov 21, 2019

Humanity at work: Gusto brings a new brand to life with Figma | Figma Blog (opens in new tab)

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.

user-interface-designfigmadesign-systemscollaborative-design+2

figmaJan 10, 2019

Organize photo galleries, slides and more with Smart Selection 2D | Figma Blog (opens in new tab)

Figma’s Smart Selection 2D extends the original Smart Selection feature from simple lists to both horizontal and vertical layouts. It lets designers quickly tidy, reorder, and adjust spacing in grids and lists, reducing tedious manual repositioning. The feature is especially useful for photo galleries, presentation slides, and other repeated layouts. ## Extending Smart Selection - The original Smart Selection launched three months earlier and helped users rearrange lists with the **Tidy Up** button. - Designers reported saving significant time by avoiding manual alignment and spacing adjustments. - Based on the positive response, Figma expanded the feature into Smart Selection 2D. ## Organizing Lists and Grids - Smart Selection 2D works in two dimensions: - Horizontally for rows and lists - Vertically for columns and grids - Users can adjust spacing and reorganize multiple elements more efficiently. - The feature supports layouts such as: - Photo galleries - Presentation slides - Other collections of repeated design elements ## Example Use Cases - Photo galleries can be quickly reordered into a preferred arrangement. - Presentation slides can be rearranged without manually repositioning every slide. - Designers can spend more time on content and less time maintaining layout consistency. - Figma shared demonstrations on Twitter to show how the feature could streamline common design tasks. Smart Selection 2D is recommended for any Figma workflow involving repeated elements or structured layouts, as it automates much of the spacing, alignment, and reordering work.

user-interface-designfigmasmart-selectionlayout-design+1

figmaOct 9, 2018

Figma's New Finger Tips | Figma Blog (opens in new tab)

Figma’s redesigned keyboard shortcut panel is inspired by Douglas Engelbart’s 1968 demonstration of fluid, two-handed computer interaction. The post argues that combining mouse control with practiced keyboard shortcuts lets designers work through motor memory and enter a state of flow. Figma’s new panel aims to make shortcuts easier and more enjoyable to discover and learn. ## Engelbart’s Two-Handed Computing - Douglas Engelbart’s landmark demo presented computers as tools for personal work and collaboration, not merely corporate calculation. - He used a mouse in one hand and a chorded “keyset” in the other: - The mouse selected objects. - The keyset issued commands, such as deleting a word while moving toward it. - This combination made his interaction appear remarkably fluid—like “dealing lightning with both hands.” - The effect depended on motor memory: repeated physical actions become instinctive, allowing users to focus on their goals rather than the mechanics of the tool. ## Keyboard Shortcuts and Creative Flow - Skilled Figma users similarly move across the canvas, restyle objects, and create designs without looking at their hands. - A mouse is relatively easy for beginners to learn, while keyboard shortcuts require deliberate practice before becoming automatic. - Mastering both devices can help designers work faster and maintain focus on the problems they are solving. ## Figma’s Redesigned Shortcut Panel - The old shortcut panel was difficult to scan and occupied much of the screen, interfering with learning through experimentation. - The new panel appears beneath the canvas and can be opened through the help menu or with **Ctrl+Shift+?**. - Shortcuts are organized into categories based on the user’s work: - Shape and vector tools - Typography - Two-handed mouse-and-keyboard combinations - Beginner-friendly shortcuts - Examples include using **Alt** while moving the mouse to measure objects and **⌘+\\** to hide interface chrome. - The panel highlights shortcuts as they are pressed and remembers them, encouraging users to reflect on and expand their shortcut habits. Figma’s approach treats shortcut learning as a gradual path toward fluency: provide relevant suggestions, reinforce what users already use, and reveal powerful combinations that can eventually become second nature.

user-interface-designfigmakeyboard-shortcutsinput-devices+2