Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

Figma528 Design Systems246 User Experience140 Prototyping135 AI110 Figjam98 Product Design76 User Interface63 Generative AI47 Collaborative Design47 Accessibility41 React39+1265

figmaNov 19, 20192 min readCurated summary

Opening up the data behind your design systems | Figma Blog

Figma introduced Design System Analytics to help organizations understand how their libraries and components are used across teams. The feature provides usage trends, library comparisons, and component-level data so design system teams can improve what they maintain, guide migrations, and measure adoption without monitoring individual designers. Customer examples show analytics turning usage data into practical design system decisions. ## Improving Components Through Usage Data - Teams can identify components that are widely used, rarely used, or frequently detached. - Microsoft uses this information to determine which Fluent components need maintenance or may no longer be important. - Google found that its button component was detached more than any other component, revealing that the master component was too complex. - The Material Design team responded by creating a simpler button option while preserving flexibility for designers. ## Tracking Library Adoption and Migration - Design System Analytics compares usage trends between libraries over time. - Squarespace planned to replace an older shared library with a new version using Auto Layout. - Analytics helps the team: - Monitor adoption of the new library across teams - Identify which teams are using it - Ensure the old library is gradually deprecated - Reports include component insertions, active teams, total instances, and detachments. ## Understanding Component Usage Across Teams - Analytics allows teams to examine how individual shared components are being used. - Pluralsight planned to use the reports to understand how designers work with components from its design system. - Because reports are available to anyone within an organization, designers and managers can independently investigate usage patterns and learn from other teams’ examples. ## Measuring Design System Impact Earlier - Figma positions analytics as a way to measure design system adoption earlier in the product development process, rather than waiting until implementation. - The article introduces Bukalapak as an example of a company that had previously measured adoption during development, though the provided text ends before describing the full outcome. ## Expanded Capabilities - The original 2019 feature focused primarily on components and library usage. - As of February 2025, Figma Library Analytics also includes styles and variables for Organization and Enterprise customers. - Enterprise customers can access expanded functionality through the Library Analytics API. Design System Analytics is intended to provide feedback for improving and evolving design systems, not to police individual designers. Teams can use the data to prioritize maintenance, simplify components, track migrations, and make adoption measurable.

Figma Design Systems Auto Layout Component Libraries+1

figmaOct 29, 20192 min readCurated summary

Let’s create Figma’s first user conference together | Figma Blog

Figma announced its first user conference, scheduled for February 6, 2020, in San Francisco. The event was designed as an in-person extension of Figma’s growing online community, giving users opportunities to learn from one another, share practical experiences, and build connections. Figma invited the community to help shape the program through speaker proposals and attendee applications. ## A conference built around the Figma community - Figma’s user base had grown from a small beta community to hundreds of thousands of active users worldwide. - The company emphasized that users had always learned from one another through inspiration, knowledge-sharing, and collaboration. - Following the launch of Figma Community, the conference would provide an offline space for users to connect and exchange ideas. ## Community-led programming - The event would feature: - Lightning talks - Workshops - Roundtables - A limited number of keynotes - Sessions could range from 15 minutes to one hour. - Users could submit their own ideas or nominate someone else to speak. - Suggested topics included: - Interesting projects built with Figma - Lessons learned through difficult experiences - Peer discussions - Collaborative activities using Figma - Proposal submissions were due by November 20, 2019, at 11:59 p.m. PST. ## Small, diverse attendance - Figma planned to keep the conference relatively small to encourage meaningful conversations. - The company sought diversity across ability, age, education, ethnicity, gender, race, sexual orientation, and socioeconomic status. - Because capacity might be limited, Figma could use a lottery system to help create a representative attendee group. - Applicants would receive notification after the deadline and have one guaranteed week to purchase a pass. ## Cost and scholarships - Tickets cost $299. - Figma offered scholarships so that financial constraints would not prevent participation. - Attendee applications were also due November 20, 2019. Figma’s announcement positioned the conference as a collaborative event shaped by its users. Prospective speakers and attendees were encouraged to apply and help create an inclusive, community-driven gathering.

Figma Collaborative Design Figma Plugins Figma Community+1

figmaOct 21, 20192 min readCurated summary

Beyond multiplayer: Building community together in Figma | Figma Blog

Figma argues that design is becoming more open, collaborative, and community-driven beyond real-time multiplayer editing. It introduces the Figma Community, where people can publish live files for others to inspect, remix, and learn from, alongside a redesigned workspace focused on team collaboration. The beta is intended to evolve through feedback from companies, educators, governments, and independent designers. ## From Multiplayer Collaboration to Public Sharing - Figma’s multiplayer features helped normalize co-editing and involving non-designers in the design process. - The company now wants to make it easier for designers to share not only finished work, but also the underlying process and methods. - The Figma Community beta provides a public space for publishing files that anyone can inspect, remix, and learn from. ## A Community Built with Customers - Users choose which files to publish on their public profiles. - The initial licensing option is Creative Commons Attribution 4.0 International, with more restrictive licenses potentially added later. - Figma describes the release as a multi-month beta designed to gather feedback and discover how organizations will use the platform. ## Use Cases Across Organizations - **Slack:** Publishing UI kits to help partners build better Slack applications. - **Dropbox:** Sharing culture kits for design managers. - **Unsplash:** Providing avatars and visual assets for designers. - **VMware:** Making its Clarity public design system easier to use. - **City of Chicago:** Offering a public design system that citizens can remix with their own identity. - **Lambda School and Stanford d.school:** Publishing free educational templates. - **Independent designers:** Sharing presentation templates, portfolios, tutorials, and source files. - **Square Crypto:** Exploring transparent, cross-company design collaboration inspired by the openness of the Bitcoin community. ## Learning Through Inspectable Files - Designers can publish editable source files rather than only screenshots or finished exports. - David Kulakevich’s Figma artwork demonstrates how viewers can inspect individual layers and learn the techniques behind a finished piece. - This turns community sharing into both a portfolio platform and an educational resource. ## Communities Inside the Workspace - Figma is also redesigning workspaces around the people on a team. - The goal is to make important files and projects easier for team members to discover. - This reflects Figma’s broader view that design files should be organized around collaboration and community, not treated as isolated artifacts. Figma’s recommendation is effectively to treat design as an open, reusable medium: publish useful files, learn from others’ source material, and build shared systems across organizational boundaries.

Figma Design Systems Real Time Collaboration Plugins+2

figmaOct 15, 20193 min readCurated summary

How Figma’s multiplayer technology works | Figma Blog

Figma built a custom multiplayer system because traditional operational transformation (OT) was too complex for its document-editing needs. Its client/server architecture synchronizes document changes over WebSockets, supports offline editing, and separates document collaboration from other data such as comments and users. The system began as a prototype that enabled rapid experimentation before being integrated into production. ## Why Figma Built Its Own Multiplayer System - In 2015, no major design tool offered real-time collaborative editing. - Figma avoided OT, the algorithm used by tools such as Google Docs, because it considered OT unnecessarily complex for its problem space. - The custom approach was designed to be simpler and faster to implement. - Multiplayer eliminated the need to export, email, or manually synchronize design files. - It also allowed non-designers—such as copywriters and developers—to participate or view work without interrupting the designer. ## Figma’s Client/Server Architecture - Figma clients are web pages connected to a server cluster through WebSockets. - Each multiplayer document runs in a separate server process, with all editors connected to that process. - When a document opens, the client downloads an initial copy of the file. - Subsequent changes are synchronized in both directions over the WebSocket connection. - Server performance and scaling were important considerations, later addressed in part through the use of Rust. ## Offline Editing and Reconnection - Clients can continue editing while offline for an arbitrary period. - When reconnecting, the client: - Downloads a fresh version of the document. - Reapplies its locally stored offline edits to that latest state. - Resumes synchronization through a new WebSocket connection. - This keeps connection and reconnection logic relatively simple by concentrating multiplayer complexity on already-connected clients. ## Separate Systems for Different Data - Figma’s multiplayer system is used only for syncing document changes. - Comments, users, teams, projects, and similar information are stored in Postgres. - That data is synchronized through a separate system because it has different requirements involving: - Performance - Offline availability - Security ## Prototyping Before Production - Figma first created a standalone browser-based prototype rather than experimenting directly in the production codebase. - The prototype simulated three clients connected to a server and visualized the complete system state. - Engineers could test: - Offline clients - Bandwidth-limited connections - Different collaborative algorithms - Alternative data structures - Once the design was validated, the ideas were transferred into the main codebase. Figma’s experience demonstrates that collaborative systems do not always require the most established algorithm. A focused, custom protocol—validated through fast prototyping—can provide a simpler solution when its data model and product requirements differ from tools like document editors.

PostgreSQL Real Time Collaboration Rust Websockets+2

figmaOct 14, 20193 min readCurated summary

Bringing new life to Figma’s brand | Figma Blog

Figma’s 2019 brand refresh expanded an existing visual language rather than replacing it. The process centered on collaboration, using research and Figma itself to create a brand that could feel both professional and playful. The result emphasized curiosity, vibrancy, honesty, boldness, and the imperfect process of making. ## Evolving an Existing Brand Language - Figma found that its original brand foundations were strong but had been created when the company was much smaller. - The refresh expanded the limited brand guide with additional rules for areas such as blog imagery and illustration. - Existing elements, including geometric shapes, were given new applications while remaining recognizable. - The goal was continuity: the new identity should feel like an extension of Figma’s original character. ## Defining Figma’s Personality - The team treated Figma as a person to clarify how the brand should behave and communicate. - Four personality traits became the main guideposts: - **Curious:** clever, playful, imaginative, and eager to explore. - **Vibrant:** dynamic, confident, energetic, and enthusiastic. - **Honest:** inclusive, empathetic, approachable, and willing to learn. - **Bold:** powerful, unexpected, nonconforming, and authentic. - These traits were intended to let the brand shift between consumer and enterprise audiences, and between reserved and playful expressions. ## Shapes That Represent Collaboration - Figma’s new illustrations use shapes as characters that interact, cooperate, disagree, or simply coexist. - Their positioning creates different compositions and communicates collaboration. - Illustrations vary in complexity: - Simple visuals support learning and clarity. - More abstract arrangements are used when the context allows greater expression. - Basic shapes can combine into complex images, making the construction process visible. - The illustrations deliberately show work in progress, including edited or manipulated elements, rather than presenting only polished final results. - This imperfect quality reflects the messy, evolving nature of design and encourages people to share how they make things. ## A Typeface with Hidden Character - Figma selected **Whyte** by Swiss type foundry Dinamo as its new brand typeface. - The team preferred Whyte’s **inktrap** version, which contains notches historically used in metal type to control pooled ink. - These details are subtle at small sizes but become visible when enlarged, giving the typography an illustrative quality. - The typeface supports Figma’s desired balance between conventional clarity and nonconforming personality. ## Refreshing Figma with Figma - The team created the entire refresh in Figma rather than relying on Photoshop or Illustrator. - Working in its own product challenged the designers to develop new workflows and creative techniques. - Collaboration was central, and Figma’s capabilities sometimes pushed ideas further than initially planned. - The tool became both the subject of the rebrand and the medium through which the new identity was developed. The refresh demonstrates how a growing company can strengthen its brand by extending existing principles, defining a clear personality, and making the creative process itself part of the identity.

Figma Collaboration Typography Illustration+3

figmaOct 6, 20193 min readCurated summary

Customer journey mapping with Figma | Figma Blog

Customer journey maps help teams build a shared understanding of how people experience a process, including emotions, pain points, and opportunities for improvement. The article explains how Lextech uses Figma to research, create, refine, and validate these maps collaboratively. Figma’s component libraries, collaboration tools, version history, and comments make journey mapping more consistent and easier to share with clients and customers. ## When Customer Journey Maps Are Useful - Journey maps visually tell the story of a customer process, such as shopping for a car or purchasing a product online. - They combine process steps with customer emotions and pain points. - A shared map helps people with different perspectives understand research and identify improvement opportunities. - Journey maps are less suitable for highly nonlinear processes with many branches or dependencies; a two-dimensional user-flow diagram may work better. - They may also add limited value when a process is already well documented through other visual methods. ## Building a Journey Map Component Library - Teams can create reusable components and styles specifically for journey maps. - A shared library improves visual consistency and speeds up the creation of new maps. - Global style or component updates can be applied efficiently when the design changes. - Lextech provides a sample Figma file and component library as a starting point. ## Keeping Maps Organized with Tidy Up - Figma’s **Tidy Up** feature helps adjust spacing between journey steps. - It makes it easier to insert or reorder steps without rebuilding large portions of the map. ## Research and Real-Time Collaboration - Multiple designers can work on the same journey map simultaneously. - Lextech also records interview notes directly in Figma, keeping research and map development in one location rather than spreading information across multiple tools. ## Using Version History - Before sending a map to clients, the team manually timestamps a version in the file’s history. - This creates a reliable reference point if the team needs to revisit an earlier state. - Showing how a map evolved can help clients understand how research findings changed the team’s understanding of the customer. ## Gathering Feedback with Comments - Lextech shares rough journey maps with customers to validate research and uncover missing steps. - Comments provide a centralized feedback channel tied to precise locations on the map. - Teams can ask follow-up questions directly in comment threads. - For asynchronous reviews, the team duplicates the file, shares the map as a single-screen prototype, and invites users to comment. - During live reviews, a designer records participant feedback directly in the file. - Separate file copies can prevent earlier comments from biasing new reviewers and make it easier to compare feedback from customers, clients, and other groups. Figma is most effective when journey maps are treated as collaborative, evolving research artifacts rather than static deliverables. Start with reusable components, keep research and feedback in the same file, and validate the map with real users before using it to guide design decisions.

Figma Prototyping Real Time Collaboration Component Library+2

figmaOct 2, 20192 min readCurated summary

Designing for top feature requests, like Smart Animate | Figma Blog

Figma introduced Smart Animate and Drag in 2019 to support more expressive, realistic prototypes. Smart Animate automatically animates matching objects between frames, while Drag lets users control transitions with finger movement. The features were shaped by customer feedback, recurring interaction patterns, and Figma’s effort to integrate advanced animation into its existing workflow. ## New Prototyping Features - **Smart Animate** automatically animates similar objects across frames. - It improves existing transitions and supports interactions such as: - Dropdowns and pop-ups - Button hover states - Tab changes - Moving or disappearing objects - **Drag** allows users to control a transition by dragging with a finger. - Figma provided a product tutorial and help article to explain how to use the features. ## Learning from User Pain - Figma used in-product NPS surveys as an ongoing source of qualitative feedback. - Rather than focusing only on NPS scores, the team categorized comments to identify recurring problems. - Customers wanted: - Simple, smooth animations for everyday interactions - A way to communicate advanced transitions to developers - Auto-animation and drag or slide transitions without relying on other tools - Several survey respondents became early beta customers. ## Identifying Broad Interaction Patterns - Figma collected animation examples from customer conversations and studied interactive interfaces in everyday products. - The team avoided designing Smart Animate around a single use case so the feature would remain broadly useful. - Two major patterns shaped the first release: - **Objects change while the user remains on the same screen:** for example, hover states, expanding menus, or content revealed after swiping. - **Some elements remain fixed while most content changes:** common in tabbed navigation, where content moves and the tab indicator shifts. - Focusing on these shared patterns helped Figma keep the initial scope manageable while addressing many different customer needs. ## Integrating Animation into Figma - Figma wanted Smart Animate and Drag to feel consistent with its existing prototyping tools rather than like separate systems. - Supporting automatic animation required revisiting fundamentals such as layer naming. - Figma updated how objects are automatically named and renamed during creation and duplication. - Layers can now match for animation based on hierarchy, naming, and order, allowing Smart Animate to work with minimal manual setup. Figma’s approach combined direct customer research with pattern-based product design. The practical recommendation is to start with real user pain, identify common behaviors across use cases, and integrate new capabilities into familiar workflows rather than building isolated features.

Figma Prototyping Interaction Design Smart Animate+2

figmaOct 1, 20192 min readCurated summary

An update on plugin security | Figma Blog

Figma disclosed vulnerabilities in the third-party Realms shim used to sandbox plugins. Although the vulnerabilities could have allowed plugins to escape their security boundaries, Figma found no evidence of exploitation after auditing published plugins. The company patched the issues, paused plugin publishing, and replaced the Realms shim with QuickJS running in WebAssembly. ## Plugin Security Boundaries Figma designed plugins so they can: - Run only after explicit user action. - Display UI in a plugin-specific dialog. - Read and modify data in the current Figma document. - Communicate with external internet services. Plugins should not be able to: - Run automatically or access data when inactive. - Obtain project or team information. - Read files other than the one in which they were launched. - Modify Figma’s interface outside their own dialog. Organization-tier administrators can also restrict plugin use through an allowlist. ## Response to the Vulnerabilities The Realms shim vulnerabilities could have allowed sandboxed code to bypass these restrictions. - Figma halted publication of new plugins and updates to existing plugins. - Existing plugin updates were disabled because live code changes propagate immediately to open clients. - Figma applied the publicly disclosed patch as soon as Agoric released it. - Privately disclosed vulnerabilities were fixed before the coordinated public disclosure. - Figma audited published plugins and found no evidence that the flaws had been exploited. Figma clarified that manual plugin review focuses primarily on user experience. Security is enforced through sandboxing rather than relying on human review, which can miss malicious behavior. ## Replacing the Realms Shim Figma permanently changed its plugin execution technology: - The Realms shim was removed entirely. - Plugins now run using QuickJS, a JavaScript virtual machine written in C and compiled to WebAssembly. - Figma’s architecture allowed the implementation to be swapped quickly because QuickJS had already been prepared as a backup. - The newly discovered Realms-specific vulnerability class no longer applies to the new implementation. Figma’s approach demonstrates the importance of defense-in-depth: sandboxing should enforce security boundaries, while rapid patching, controlled disclosure, plugin audits, and an interchangeable runtime architecture limit the impact of third-party vulnerabilities.

JavaScript Webassembly Sandboxing Plugin Security+2

figmaSep 9, 20192 min readCurated summary

How to make background patterns for your next design project | Figma Blog

Namika Hamasaki uses a daily pattern challenge to develop creativity through repetition without producing repetitive results. Her process combines observation, unconventional color palettes, layout grids, geometric experimentation, and Figma components to turn simple ideas into seamless patterns. The central lesson is that consistent practice and attention to everyday details can make creative work easier and more adventurous. ## Finding Daily Inspiration - Inspiration can come from ordinary surroundings, including: - Food - Architecture - Furniture - Nature - Landscapes encountered during a commute - Hamasaki photographs interesting shapes, colors, and compositions for later reference. - Maintaining an inspiration library helps prevent the blank-page problem and provides starting points for new designs. ## Building a Color Palette - The challenge allows her to experiment beyond the brand color restrictions common in professional work. - She often derives palettes from inspiring photographs. - Figma’s Image Palette plugin extracts colors from images and generates a usable palette. ## Setting Up a Grid - A grid helps organize pattern elements and ensures that the final design can repeat correctly. - Hamasaki uses Figma’s Layout grid to establish the structure before placing shapes. ## Experimenting with Geometric Shapes - Complex-looking patterns begin with basic forms such as circles, rectangles, and triangles. - She strategically places shapes on the grid, then experiments with: - Rotating circles or semicircles - Shifting elements - Varying rotation angles - Testing different color combinations - The process is intentionally exploratory, allowing unexpected visual results to emerge. ## Creating Seamless Patterns - Once a design feels successful, Hamasaki converts it into a component. - She turns off the component’s **Clip content** option. - She duplicates and arranges the component across a frame to create a repeating pattern. - Editing elements inside the master component lets her quickly test different layouts across all duplicated instances. The practical recommendation is to establish a regular creative exercise, document visual inspiration, and use simple, flexible systems—such as palettes, grids, and reusable components—to explore many possibilities efficiently.

Figma Graphic Design Design Components Color Palette+2

figmaSep 5, 20192 min readCurated summary

An in-depth sneak peak at what 5 plugin developers are cooking up | Figma Blog

Figma’s first Plugin Show & Tell highlighted the creativity and practical value emerging from its newly opened plugin ecosystem. The livestream featured five developers demonstrating tools for design-system quality checks, spell checking, icon management, documentation, typography, and even voice control. Figma encouraged developers to explore its Plugin API, build tools for their own workflows, and participate in future community events. ## Community Plugin Showcase - The event was created to: - Promote community-built plugins. - Encourage developers to experiment with the Figma Plugin API. - Give users an early look at upcoming tools and features. - The recorded livestream included live demos from five plugin developers. ## Design Quality and Productivity Tools - **Toybox Roller**, presented by Jono Kolnik, helps identify and correct design errors and inconsistencies against an organization’s design system. - **Tekeste Kidanu’s Spell Check plugin** brings spelling assistance into Figma. - Tekeste also demonstrated integrating **Cleanmock** directly into Figma. ## Icons, Documentation, and Object Management - **Iconify**, presented by Vjacheslav Trushkin, provides access to hundreds of icon sets for use in both design work and production workflows. - Jackie Chui demonstrated several utilities: - Improvements to **Find & Replace**. - A plugin for adding documentation links to components. - **Paste to Fill**, which converts pasted content into image fills. - A forthcoming tool for managing margins and object sizing within frames using configurable presets. ## Typography and Voice Control - Andrew Goodwin showed a plugin for selecting and applying typography rules. - He also demonstrated a voice interface for controlling Figma. - The project aimed to map the entire Figma Plugin API to voice commands, allowing users to operate many Figma features verbally. ## Resources for Plugin Developers Figma directed developers to several resources: - Setup guides explaining plugin architecture, canvas communication, browser APIs, and development workflows. - Official Plugin API documentation. - Figma Plugin DS, a dependency-free HTML, CSS, and JavaScript design system modeled after Figma’s interface. - Open-source plugin examples on GitHub. - FigPlug for TypeScript, React/JSX, asset bundling, and manifest generation. - A community Slack workspace for questions and collaboration. The event demonstrates that Figma plugins can automate repetitive work, connect external data and services, and tailor Figma to specialized team workflows. Developers interested in extending Figma should start with the API documentation and open-source examples, or build a private plugin for internal needs.

React TypeScript JavaScript CSS+4

figmaSep 4, 20192 min readCurated summary

An ode to OpenType: Fall in love with the secret world of fonts | Figma Blog

OpenType features reveal that fonts often contain far more than their default bold, italic, and character shapes. The post describes how these hidden options—such as alternate digits, ligatures, small caps, swashes, and ornaments—can solve practical typography problems while expanding creative possibilities. Figma’s support for OpenType features makes these capabilities accessible across local, Google, and organization-shared fonts. ## Discovering the Hidden Capabilities of Fonts - The author first encountered OpenType features while studying Warnock Pro. - The font included: - Old-style and tabular figures for better integration with text and tables - Small caps for introductions and emphasis - Alternate letterforms with decorative flourishes - Fractions, ordinals, and the numero sign - Stylistic alternates and ornamental symbols - These options were traditionally hidden in technical menus, making them difficult to discover. - The author initially used them enthusiastically and indiscriminately, comparing OpenType features to spices that could transform otherwise ordinary typography. ## Learning When Features Are Useful - Over time, font PDFs were increasingly replaced by online type specimen pages documenting available features. - Fonts vary widely: - Some offer only a single alternate character. - Others provide dozens of features that can make the typeface appear substantially different. - The author gradually learned to use features intentionally rather than simply enabling them because they were available. - Technical terminology became meaningful in context, including: - Tabular figures for tables - Discretionary ligatures for optional letter combinations - Alternate glyphs and stylistic sets for different visual treatments ## Applying OpenType to Design Problems - At Medium, the team selected different numeral styles for different contexts: - Subdued figures for body text - More expressive, headline-like figures and a flamboyant ampersand for pull quotes - Many fonts also include punctuation and symbol variants optimized for all-caps text. - These adjusted glyphs help uppercase designs feel more balanced and cohesive. ## OpenType Features in Figma - Figma now supports OpenType features for: - Local fonts - Google Fonts - Fonts shared within organizations - Users can access additional ligatures, numeral styles, alternate letterforms, and other font-specific adjustments through Figma’s interface. - The feature is intended not only to expose advanced typography controls, but also to make discovering and experimenting with them approachable. Figma’s OpenType support encourages designers to look beyond a font’s default appearance. The practical recommendation is to treat these features as purposeful tools: choose them according to the context, hierarchy, and visual problem being solved rather than applying them indiscriminately.

Figma Typography Opentype Font Features+2

figmaSep 3, 20194 min readCurated summary

How we do design critiques at Figma | Figma Blog

Figma argues that design critiques should be motivating, useful, and psychologically safe—not intimidating or discouraging. After identifying problems in its own critique process, the team redesigned critiques around clear goals and several formats suited to different stages of design work. The result is a more flexible practice focused on unblocking designers, improving quality, sharing context, and encouraging collaboration. ## Improving the Critique Process Figma began by “critiquing critiques” and gathering feedback from its design team. Common problems included: - Overcrowded meetings - Shallow or unactionable feedback - Complex problems squeezed into short time limits - Groupthink, excessive agreement, and reluctance to be honest - Critiques that failed to help designers move forward The team documented issues in a shared Figma file, identified the productive and creative energy in that workshop, and continued iterating through a dedicated Slack channel. ## Goals of Design Critique The team aligned on four primary purposes: - **Unblocking problems and generating ideas:** Helping designers overcome difficult problems or explore early possibilities. - **Elevating quality:** Improving visual design, interaction details, and broader product direction. - **Encouraging consistency:** Reusing established patterns and identifying when new patterns are needed. - **Sharing context:** Keeping the design team informed about company, product, and project developments. ## Standard Critiques Standard critiques are structured sessions in which a designer presents work and receives feedback from peers. They are most useful when the presenter explains the project’s context, goals, and specific questions before discussion begins. - The facilitator keeps the discussion focused and balanced. - Feedback should be concrete, honest, and actionable. - Participants should critique the work rather than the person. - The format works best when the group size and scope are limited. ## Jams and Workshops Jams and workshops are collaborative formats for situations that need ideas rather than evaluation. - Designers work together actively instead of simply commenting on a presentation. - They are useful for early-stage exploration, brainstorming, and complex problems. - The shared activity reduces the pressure placed on one presenter. - Their informal, energetic quality can produce the kind of creative collaboration Figma wanted in regular critiques. ## Pair Design Pair design places two designers together to solve a problem collaboratively. - One designer can explain their thinking while the other contributes ideas and challenges assumptions. - The format encourages deeper discussion and immediate iteration. - It is particularly useful for focused problems that benefit from sustained attention. - Pairing can produce more actionable feedback than a large-group discussion. ## Silent Critiques In a silent critique, participants review work and write feedback before discussing it aloud. - Everyone has time to inspect the work carefully. - Written comments reduce the influence of the most vocal participants. - The approach helps limit groupthink and “+1” feedback. - Discussion can focus on patterns and themes that emerge from the individual responses. ## Paper (“Print-Out”) Critiques Paper critiques use printed screens or designs placed around a room for participants to annotate. - Designers can review work at their own pace. - Feedback is often more detailed and specific than verbal comments. - The physical format encourages participants to engage directly with the work. - It is useful for reviewing multiple screens or flows without a presentation dominating the session. ## FYI Critiques FYI critiques are informational rather than feedback-driven. - A designer shares work mainly to provide context or visibility. - Participants are not expected to solve the problem or offer extensive critique. - This format avoids turning every design review into a decision-making meeting. - It helps the team stay informed while preserving critique time for work that needs active input. ## Principles for Effective Critiques Figma’s recommendations emphasize adapting the format to the work and creating a constructive environment: - Define the purpose of the session in advance. - Invite only people who can contribute relevant perspective. - Share context and specific questions before asking for feedback. - Match the critique format to the project’s stage and needs. - Use a facilitator to manage time, participation, and focus. - Encourage direct, respectful, actionable feedback. - Avoid groupthink and uncritical agreement. - Separate critique from final decision-making when appropriate. - Keep sessions focused enough that participants can engage deeply. - Treat the process as something to continually evaluate and improve. The practical recommendation is to stop treating critique as a single meeting format. Teams should establish clear goals, experiment with methods such as workshops, pair design, silent reviews, and FYI updates, and regularly assess whether critiques are genuinely helping designers feel inspired, challenged, and empowered.

Figma Product Design Slack Collaboration+1

figmaAug 27, 20192 min readCurated summary

How Microsoft built plugins to improve their workflow | Figma Blog

Microsoft uses private and community Figma plugins to integrate its Fluent design system into everyday design work. These tools reduce repetitive tasks, provide approved content, and make it easier to manage hundreds of product-specific libraries. The broader conclusion is that customized tooling helps large design organizations improve consistency, accessibility, and efficiency while giving designers more time for creative work. ## Integrating Approved Design Content - Microsoft created an internal version of **Content Reel**, a plugin that inserts approved text strings, avatars, and icons into designs. - This replaces generic placeholder content and reduces the need for designers to search for or request approval of assets. - The approach can be adapted by other organizations to provide company-specific, reusable content. ## Switching Between Product Libraries - Microsoft maintains hundreds of Figma libraries, with different products requiring distinct themes and styles. - Jackie Chui built **Themer** to let designers quickly switch between product themes such as Work and Outlook. - The publicly available version swaps published styles from different libraries, reducing the manual effort required to adapt designs across products. ## Automating Repetitive Design Tasks Microsoft designers built plugins to eliminate routine work and support more creative problem-solving: - **Find and Replace** searches for text on a page and replaces it like a standard text editor. - **Paste to Fill** turns a copied image or image URL into a fill for selected layers. - **Button Resizer** adjusts button dimensions to fit their labels. - These tools reflect Microsoft’s broader investment in the Figma platform as a foundation for extending its design workflow. ## Making Accessibility Part of the Workflow - Tiffany Chen, part of Microsoft’s Modern Input and Accessibility team, develops tools intended to make accessibility more visible during design. - Her work challenges the common practice of treating accessibility as a final-stage addition. - Embedding accessibility support into design tooling can help teams identify and address inclusive-design concerns earlier. Microsoft’s example shows that plugins are most valuable when they are tailored to an organization’s real processes. Teams can improve consistency and productivity by connecting Figma to approved assets, design systems, automation, and accessibility checks.

Figma Design Systems Accessibility Figma Plugins+2

figmaAug 26, 20192 min readCurated summary

Keeping your data in Figma safe and secure: SOC 2 Type 2, SSO, and more | Figma Blog

Figma presents security as a core part of its infrastructure and product development, emphasizing protection of customer data and design intellectual property. Its efforts include SOC 2 certification, privacy compliance for European customers, secure plugin architecture, and enterprise SAML single sign-on. An update later confirmed that Figma completed SOC 2 Type 2 certification and obtained a SOC 3 report. ## SOC 2 Certification - Figma initially achieved SOC 2 Type 1 certification after auditing its infrastructure, software, HR processes, and customer-data policies. - Type 1 evaluates controls at a specific point in time. - Type 2 provides stronger assurance by examining whether those controls operate effectively over an extended period. - By January 2020, Figma had completed SOC 2 Type 2 certification and secured a publicly downloadable SOC 3 report. ## European Data Protection - Figma highlights its readiness for growing European usage. - It complies with relevant data-protection requirements and was certified under: - The EU–U.S. Privacy Shield Framework - The Swiss–U.S. Privacy Shield Framework ## Security-First Product Development - Security is considered during the design of new features, not added afterward. - Figma’s plugin system deliberately limits access: - A plugin can access only one design file at a time. - Plugins cannot access a user’s entire account. - Plugins are isolated from one another’s data. - Plugins cannot modify Figma’s user interface, reducing phishing and user-misdirection risks. - These restrictions sometimes reduced available capabilities, but Figma prioritized security, stability, and performance. ## SAML Single Sign-On - SAML integrations help organizations deploy Figma securely and manage user access centrally. - Figma supported Okta and Microsoft Azure Active Directory, and added OneLogin. - Enterprise administrators can simplify authentication while maintaining organizational access controls. Figma’s overall approach is to combine independent compliance audits, privacy frameworks, careful product architecture, and centralized enterprise authentication. Organizations evaluating Figma should review its security and privacy documentation and consider enterprise SSO controls for managing access.

Cloud Security Saml Security Compliance Soc 2+2

figmaAug 22, 20192 min readCurated summary

Bring real content into your designs in seconds | Figma Blog

Designing with realistic content helps teams stress-test layouts and better predict how interfaces will look in production. This 2019 Figma article highlights plugins that populate designs with text, images, maps, and custom data, reducing the need for manual entry. It concludes that real or organization-specific data can improve accuracy, while private plugins support sensitive internal information. ## Google Sheets Sync - Syncs spreadsheet data directly into Figma layers. - Uses unique column headers such as `Name` or `Address`. - Layers reference columns with names like `#Name` and `#Address`. - Supports formulas and future spreadsheet updates. - Can use image URLs to populate image fills. ## Unsplash - Provides access to more than one million free, high-resolution photographs. - Users can browse categories, select random images, or search the collection. - Images can be inserted directly onto the canvas or applied as image fills to selected elements. ## Data Lab - Populates text using customizable variables such as `{NAME}`, `{EMAIL}`, and `{DATE}`. - Variables can be combined into formatted strings, for example `{NAME} · {EMAIL}`. - Supports names, numbers, dates, phone numbers, emails, and comma-separated lists. ## Content Reel - Includes names, phone numbers, addresses, numbers, emails, URLs, companies, usernames, and countries. - Offers drag-and-drop customization for formatting data, including address fields and comma placement. - Provides access to the Segoe MDL2 icon library. - Its compact mode keeps the plugin available without taking up much workspace. - Planned image-content support would extend it to profile pictures and similar assets. ## Mapsicle - Adds Mapbox maps as image fills inside selected design elements. - Supports custom Mapbox themes and presets such as Light, Dark, Satellite, and Streets. - Allows control over zoom, pitch, and camera rotation. - Existing maps can be refreshed for new dimensions while preserving zoom settings. - Maps placed inside scrolling frames can support horizontal and vertical panning in prototypes. - A Mapbox access token is especially useful for custom themes. Using realistic content makes mockups more credible and exposes layout problems earlier. For sensitive or proprietary data, teams on Figma’s Organization plan can create private plugins connected to internal APIs.

Prototyping Figma Plugins Google Sheets Unsplash+2