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

figmaJun 20, 20182 min readCurated summary

Figma 3.0 (!) | Styles, prototyping++ and design at scale | Figma Blog

Figma 3.0 aims to replace fragmented, desktop-based design workflows with a unified web platform. Its major additions—more capable prototyping, shared styles and libraries, and an Organization tier—help teams keep designs, feedback, prototypes, and systems connected. The overall goal is to reduce tool switching, synchronization work, and redundant subscriptions. ## More Capable Prototyping Figma 3.0 expands prototyping so teams can create realistic interactive experiences directly from their designs: - **Device frames** provide context for designs across iPhones, Android devices, and Apple Watch. - **Fixed objects** keep headers, footers, status bars, and buttons attached to frame edges during scrolling. - **Scrollable areas** support nested frames, vertical lists, horizontal carousels, and scrolling in any direction. - **Transitions** such as dissolve, slide, and push make prototypes resemble native mobile applications. - Prototypes remain synchronized with the underlying design, eliminating screen exports and manual updating. - Comments stay linked to the design, while prototypes can be presented from a mobile browser. - Figma is also investing in an API for integrations with other prototyping tools and web applications. ## Styles and Team Libraries Figma Styles is now generally available, following extensive user research and a private beta. - Styles and Team Libraries allow companies to create and maintain shared design systems. - Teams can centralize reusable visual attributes and apply them consistently across projects. - The feature is intended to reduce inconsistencies and help organizations manage company-wide design standards. ## Organization Tier Figma is previewing a new Organization tier designed for larger companies. - It focuses on scaling design management across large organizations. - Together with shared components, commenting, developer handoff, and web-based collaboration, it is intended to support moving most of a team’s workflow into Figma. Figma 3.0’s practical recommendation is to consolidate design, prototyping, feedback, and design-system management in one web-based environment, while using Figma’s API when specialized integrations are still necessary.

Figma Design Systems Prototyping API+3

figmaJun 19, 20183 min readCurated summary

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

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

User Interface Accessibility Sketch Inclusive Design+3

figmaJun 12, 20182 min readCurated summary

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

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

Figma Design Systems Prototyping Real Time Collaboration+3

figmaJun 6, 20183 min readCurated summary

How one designer finds inspiration in rabble rousers like Bart Simpson | Figma Blog

Linda Eliasen, Head of Design at Help Scout, draws creative energy from unconventional figures who challenge social rules and expectations. Her inspirations—from Bart Simpson to SNL comedians and Carl Sagan—helped her question conformity, reject restrictive ideas about femininity, and bring greater imagination and technical curiosity to her design work. ## Inspiration as a Creative Force - Eliasen rejects the idea that inspiration is entirely controllable or predictable. - She humorously describes inspiration as an almost supernatural force that arrives when artists keep showing up and working. - This view separates personal ego from creative results: success belongs to inspiration, while failure does not define the artist. - Her creative development was shaped by discovering broader worlds beyond her conservative hometown in Fayetteville, Georgia. ## Bart Simpson: Questioning the Rules - Bart Simpson encouraged Eliasen to imagine life beyond obedience and conformity. - As a shy, anxious child, she identified with Bart’s willingness to challenge: - His parents - Authority figures such as Chief Wiggum - School bullies and social expectations - Bart represented the freedom to say and do things she privately wished she could. - Learning that Bart was voiced by Nancy Cartwright added another layer of appeal, suggesting a playful challenge to traditional ideas about masculinity and identity. ## The Women of *Saturday Night Live*: Rejecting the “Pretty Girl” Ideal - SNL performers showed Eliasen that women could be funny, strange, messy, imaginative, and publicly expressive. - Growing up, she had limited access to female role models who pursued unconventional ambitions such as sports, architecture, comedy, or space exploration. - Social expectations emphasized being attractive, polite, thin, charming, and non-confrontational. - Performers including Cheri Oteri, Molly Shannon, Maya Rudolph, Tina Fey, Kristen Wiig, and Amy Poehler challenged those expectations through: - Ridiculous costumes and physical comedy - Unattractive or exaggerated appearances - Absurd characters - Bold, unconventional humor - Their example helped Eliasen see that women did not need to fit a polished, traditionally feminine ideal to succeed or take center stage. ## Carl Sagan: Expanding Technical Curiosity - Sagan’s writing opened new intellectual directions for Eliasen. - His ideas influenced her to incorporate more technical qualities into her creative work. - She describes discovering his essays as a transformative experience that brought renewed energy and possibility to her design practice. - Sagan represents inspiration through science, wonder, and curiosity rather than conventional artistic sources. Eliasen’s examples suggest that creative inspiration can come from rebellious humor, unconventional role models, and scientific exploration. Designers can expand their work by seeking influences that challenge inherited assumptions and make room for more playful, curious, and individual perspectives.

Product Design Design Illustration Color Theory+1

figmaJun 5, 20182 min readCurated summary

#FigmaTip Roundup 8.0 | Figma Blog

This edition of Figma’s #FigmaTip Roundup collects quick workflow improvements from the design community. It focuses on making projects easier to identify visually and navigating layers and selections more efficiently. Together, the tips show how small organizational and keyboard-shortcut habits can speed up everyday Figma work. ## Customizing Project Thumbnails - Create a single frame on the first page of a project, sized approximately **620 × 320 pixels**. - Design a visually distinctive thumbnail inside the frame, using relatively large text. - Match the frame’s color with the canvas background so the thumbnail appears polished and cohesive. - This makes projects easier to recognize quickly in Figma’s project view. ## Navigating the Layers Panel - The roundup highlights keyboard shortcuts for moving through and managing layers. - The supplied article text does not include the details of this embedded tip, but its purpose is to reduce reliance on manually clicking through the layers panel. ## Speeding Up Selection and Layer Management - **Tab / Shift-Tab:** Select the next or previous sibling layer. - **Return / Shift-Return:** Enter or exit groups and frames while maintaining selection context. - **Command + ] / Command + [:** Move a layer up or down in the stacking order. - **Option + Command + ] / Option + Command + [:** Move a layer to the top or bottom of the stacking order. The practical recommendation is to combine a deliberately designed project thumbnail with regular use of selection and layer shortcuts. These simple techniques improve both project organization and editing speed without changing the underlying design process.

Figma User Experience User Interface Keyboard Shortcuts

figmaJun 4, 20182 min readCurated summary

With websites, what comes first: The copy or design? | Figma Blog

Website projects often become slow, repetitive exchanges between copywriters, designers, and stakeholders. The post argues that copy and design should be developed together rather than sequentially, using a shared, cloud-based workspace like Figma. Real-time collaboration reduces revisions, meetings, delays, and confusion while producing better web assets. ## The Problems with Separate Copy and Design Workflows - Copywriters may work in Google Docs while designers work in Sketch or another separate tool. - Teams repeatedly exchange drafts after discovering that text does not fit the design. - Design critiques, copy reviews, and stakeholder feedback can force additional redesigns. - Remote collaboration makes the process even more cumbersome; the author describes printing designs, writing edits by hand, scanning them, and sending them back. - Siloed tools make the project difficult to track, even for project managers. ## Developing Copy and Design Together in Figma - The author outlined the main copy points for each page in a Google Doc. - Designers created Figma frames representing the website pages. - Marketing and design worked simultaneously, progressing from high-fidelity wireframes to final designs. - Copy could be edited directly while viewing it in its intended visual context. - Designers spent less time handling communication and more time focusing on the design itself. ## A Shared Source of Truth - Stakeholders could access the latest copy and designs through a single project URL. - Team members could leave comments and review version history without exporting or emailing files. - The same designs could be used for user testing, allowing everyone to connect feedback with the current work. - Fewer meetings were needed, and the remaining meetings became more efficient. - Last-minute updates no longer required a separate scramble before milestone reviews. The practical recommendation is to replace sequential, tool-separated workflows with real-time collaboration between writers, designers, and stakeholders. Treating copy and design as interconnected parts of one process can make website projects faster, clearer, and less frustrating.

Figma User Experience Web Design Sketch+4

figmaMay 30, 20183 min readCurated summary

How one Figma engineer plays to her strengths | Figma Blog

Kathryn Salant’s interests in music, programming, and cycling all reflect her belief in experimentation, iteration, and measurable progress. Her career shows how creative disciplines can reinforce one another, leading her from trumpet performance and interactive media to software engineering at Figma. Across each field, she values collaboration, meaningful expression, and the process more than perfection. ## Figma’s “3 Things” Tradition - New employees present three experiences or interests that shaped them. - Kathryn’s three things—music, programming, and cycling—illustrate the connections between her creative and technical life. - Figma presents these stories to highlight the diverse backgrounds of its employees. ## Music and Creative Expression - Kathryn began playing trumpet in fifth grade and studied at the University of Wisconsin-Madison and the London College of Music. - She became dissatisfied with classical music’s emphasis on technical precision over inspiration and meaning. - In San Francisco, she joined the avant-garde Extra Action Marching Band in 2003. - The band performed with David Byrne and experimented with unconventional material, including Beyoncé and Black Sabbath covers. - These experiences deepened her interest in creativity beyond strict tradition. ## Programming as a Creative Tool - Kathryn first encountered programming in sixth grade on Apple IIe computers, learning Logo and creating a convincing Super Mario demo. - She continued experimenting by taking apart and sometimes breaking her mother’s work computer. - While studying music, she discovered Flash 4 and became fascinated by its combination of motion graphics, interactivity, and web technology. - Flash showed her that programming could enable artists, musicians, and designers to express ideas. - She pursued software engineering so she could help other people bring creative visions to life. - Her respect for design and emphasis on communication between engineers and designers align closely with Figma’s collaborative mission. ## Cycling and Community - Kathryn became an avid cyclist after completing the seven-day AIDS/LifeCycle ride from San Francisco to Los Angeles. - In 2006, she founded Butterlap, a weekly San Francisco bike ride centered on community and inclusiveness. - She later took part in CycloCross, a muddy, social form of bicycle racing. - Her participation in the 2008 Single Speed CycloCross World Championships was as much about encouraging others as competing. - Cycling reinforced her preference for shared experiences, perseverance, and not taking competition too seriously. Together, these three interests show Kathryn’s consistent approach: improve through iteration, stay open to unconventional ideas, and create alongside other people. Her story suggests that technical work can be strongest when it preserves the curiosity, collaboration, and expressive freedom found in the arts.

Collaborative Design Design Tools Motion Graphics Programming+3

figmaMay 29, 20183 min readCurated summary

How Virta Health uses Figma to help patients reverse type 2 diabetes | Figma Blog

Virta Health uses Figma as a collaborative foundation for designing healthcare experiences aimed at reversing type 2 diabetes. The company’s transparent, shared design process helps teams create consistent patient interfaces, involve non-designers, and move from ideas to implementation quickly. Figma’s real-time collaboration and reusable components have become central to Virta’s design culture and operational speed. ## Designing for High-Stakes Healthcare - Virta provides treatment for type 2 diabetes and other chronic metabolic diseases without medication or surgery. - Its mission is to reverse diabetes for 100 million people by 2025. - Reported results after one year include: - 94% of insulin users reducing or eliminating insulin use. - 60% of patients reversing type 2 diabetes. - Because healthcare products directly affect patients’ lives, interfaces must be intuitive, predictable, and reliable. ## Real-Time Collaboration Across Teams - Virta’s 11-person design team operates as a transparent internal hub for designers, developers, marketers, and physicians. - Since the company adopted Figma early, its designs have been accessible and current from anywhere and on any machine. - Designers share files in Slack, where teammates can immediately open the canvas, comment, duplicate work, and suggest improvements. - New team members can get productive quickly because the latest designs and decisions live in Figma. ## Consistency Through Components - Virta treats consistency as essential: patient and physician workflows should behave predictably across the app. - Figma components let designers reuse interface elements instead of recreating them manually. - The team developed a component library based on structural components and nested components. - Components support responsive desktop and mobile versions within a shared system. - Virta is applying the same structural principles to its codebase to reinforce consistency between design and implementation. ## Empowering Non-Designers - Figma allows marketing, product, leadership, developers, and physicians to participate directly in design work. - During the VirtaHealth.com relaunch, the entire process—from ideation through developer handoff—took place in Figma. - Shared visibility enabled faster feedback and helped the first page launch within a month. - Marketing teams use templated Figma files for social graphics, landing pages, and other collateral. - Non-designers can create assets independently, then tag designers for targeted reviews or illustration requests. - This self-service approach eliminated multiple design cycles and reduced the process by weeks. Virta’s experience suggests that collaborative design tools are most valuable when they become part of the company’s operating model, not merely a place to create mockups. Shared files, reusable components, and broad participation helped the company deliver faster while maintaining the consistency and clarity required in healthcare.

Figma Design Systems Prototyping User Interface+2

figmaMay 23, 20183 min readCurated summary

How you can design end to end on a Chromebook | Figma Blog

Chromebooks, once considered too limited for professional design, can now support an end-to-end design workflow when paired with cloud-based tools. The author’s year of using Chrome OS professionally shows that Figma, web apps, and cloud storage can replace most desktop software, although custom fonts, internet access, and specialized audio/video work remain limitations. ## Why Switch to a Chromebook? - The author moved from a Mac at Square because Chromebooks offered: - Stronger security - Lower cost - Automatic file backup and synchronization - Using a Chromebook helped the author understand coworkers who used Chrome OS. - Because Figma already ran in the browser, the transition was easier than expected. ## Six Things Designers Should Know About Chrome OS - **Figma is essential:** It is the author’s preferred cloud-based design tool and works natively in the browser. - **Keyboard shortcuts differ:** The Control key replaces Command, while the Search key can act as a modifier. Figma’s shortcut menu displays Chrome OS-specific commands. - **Performance is sufficient:** Figma performed well across three different Chromebooks. - **Most supporting tools are web-based:** Slack, Grammarly, Funkify, and G Suite worked without major issues. - **Font installation is limited:** Chrome OS does not currently support custom typefaces, though Google Fonts provides many alternatives. - **Internet access matters:** Offline functionality exists, but cloud-based workflows are strongest when connected. Touchscreens are useful for scrolling and navigating canvases. ## Choosing Chromebook Hardware - The author tested an HP Chromebook, the touchscreen-and-stylus Samsung Pro, and eventually chose the Google Pixelbook. - The Pixelbook’s keyboard and trackpad were the deciding factors. - Although it started at $999, it cost less than one-third of the author’s previous MacBook Pro. - Cheaper devices, including the $85 Chromebit, could also support lightweight workflows. ## Cloud-Based Tools for a Complete Workflow - **Creating:** Figma, SuperHi, Google Slides, Paste, Grammarly, Google Docs, and Dropbox Paper. - **Organizing:** Asana, Google Tasks, Bonsai, Notion, and 1Password X. - **Messaging and meetings:** Signal, Telegram, Slack, and Google Meet. - **Media:** Spotify and Pocket Casts. - The author still used a Mac for Final Cut Pro and Logic Pro, since video and audio editing remained desktop-focused. ## The Web as a Design Platform - Cloud software eliminates much of the burden of saving and backing up files. - Files are accessible from any browser rather than being tied to a particular device. - Advancements such as WebGL demonstrate that browsers can handle sophisticated, real-time applications. - The web’s openness and accessibility make it an increasingly viable platform for professional software. Overall, designers who primarily use cloud-based tools can confidently consider a Chromebook, especially if affordability, portability, and synchronized files are priorities. Those dependent on custom fonts or advanced media-production software may still need a traditional computer.

Figma Slack Webgl Chromebook+4

figmaMay 21, 20182 min readCurated summary

5 ways to use Figma that you probably never thought of | Figma Blog

Figma’s real-time collaboration makes it useful for far more than traditional interface design. The post highlights five applications that use shared editing to organize information, make decisions, divide repetitive work, encourage creative collaboration, and have fun. Its central conclusion is that Figma’s multiplayer capabilities can support nearly any activity involving visual thinking and teamwork. ## Affinity Diagrams for Organizing Ideas - Teams can collect large amounts of research or brainstormed ideas in one shared file. - Participants add concepts simultaneously, then group related items into themes. - This process helps clarify priorities and create structure for complex projects, even when collaborators work remotely. ## Real-Time Voting for Design Decisions - Teams can review multiple design options together and mark their preferences directly in Figma. - Instead of printing designs and using physical stickers, participants place circles or other markers beside favored concepts. - Seeing votes accumulate in real time makes individual preferences clearer and helps teams reach decisions faster. ## Design Assembly Lines for Repetitive Work - Large, repetitive tasks can be divided among several people working in parallel. - ClassPass used this approach to create more than 30 custom maps, with designers placing location pins for gyms and studios in different cities. - Multiplayer collaboration allows teams to complete simple production tasks quickly through coordinated effort. ## Collaborative Comic Creation - Figma can serve as a shared illustration environment where friends or colleagues draw and develop ideas together. - USC students Louis Harboe and Parker Malachowsky used it to turn a presentation about AI and healthcare into an accessible comic. - Reusable components such as speech balloons, caption boxes, and image panels helped organize the longer project. - Figma’s vector networks provided flexibility for drawing and editing illustrations. ## Games for Team Connection - Figma’s multiplayer features can also be used for recreational games and playful activities. - Collaborative play offers a way to lighten the mood and strengthen relationships when teams are not working. - This reflects the influence of cooperative multiplayer video games on Figma’s collaboration model. Figma’s shared canvas is valuable wherever people need to think visually together. Teams can use it not only for design production, but also for research synthesis, group decisions, repetitive workflows, creative projects, and informal team-building.

Figma Real Time Collaboration Vector Graphics Design Sprints+1

figmaMay 9, 20183 min readCurated summary

Material Design + Figma Styles = 🔥 | Figma Blog

Figma’s Styles feature makes Material Design easier to customize for different brands while preserving a shared, systematic foundation. The article presents a Material UI kit that uses global styles and nested components to theme colors, typography, elevation, grids, shapes, and icons across an entire design system. This approach helps teams move beyond generic stock interfaces toward consistent but distinctive branded experiences. ## The Challenge of Theming Material Design - Material Design improves usability and consistency across Google and Android applications. - Using the same components everywhere can make products feel generic and less connected to their brands. - Material’s broad component library creates a challenge: designers need an efficient way to customize an entire system rather than editing components individually. - Themed Material Design aims to preserve the system’s strengths while enabling more memorable brand expression. ## Figma Styles for Global Customization - Figma Styles define reusable global text, fill, stroke, effect, and grid settings. - Updating a style automatically changes every instance across the document. - Styles can be shared through team libraries and reused across projects. - This makes Styles well suited to theming large UI kits and design systems. ## Material Colors, Typography, Elevation, and Grids - **Colors:** Fill styles control primary and secondary colors, typography emphasis levels, and surface swatches. Changing a brand palette can update many components at once. - **Typography:** Text styles cover Material’s type specifications, using Roboto by default but allowing teams to substitute their own typeface. Font changes may require adjustments to size and spacing. - **Elevation:** Preset shadow styles represent Material’s elevation levels, simplifying shadows that may otherwise require combinations of up to three drop shadows. - **Grid:** A reusable 4dp baseline grid can be applied to frames and components, alongside custom desktop, tablet, or mobile grids. ## Combining Styles with Components - Nested components allow teams to globally control the shape of buttons, floating action buttons, and cards. - Designers can switch between sharp corners, cut corners, and rounded corners by toggling nested component visibility. - Changes propagate throughout the system, though updates across hundreds of components may take several seconds. - Individual component instances can still override shared settings when specialized styling is needed. ## Icon Libraries - Material offers five icon styles. - To keep the main kit manageable, each icon style was organized into a separate sticker-sheet document. - Teams can copy icons directly or publish the sheets as shared libraries for use across projects. Figma Styles combined with components provide a practical way to build Material-based systems that are globally consistent, easily maintained, and adaptable to individual brands.

Figma Design Systems Design Tokens Responsive Design+2

figmaMay 8, 20182 min readCurated summary

Figma Styles beta: A new way to apply text and layer attributes | Figma Blog

Figma’s 2018 Styles beta introduced a modular system for applying text and layer attributes consistently across documents. Instead of bundling typography, color, and alignment into complex combinations, Styles separated them so each could be managed and updated independently. The feature also allowed different styles within a single text field, making design systems easier to maintain for both individuals and teams. ## Modular Text and Layer Styles - Styles could be created separately for: - Text properties - Fills and colors - Layout grids - Effects - Strokes - Styles were available through team libraries, helping teams share current versions. - Team members could enable shared Styles and receive notifications when they changed. ## Reducing Text Style Complexity - Traditional tools combined font, color, and alignment into a single text style. - A project with three text formats and three colors could require nine separate styles, even before accounting for alignment. - Changing a color—such as an inaccessible light-gray link color—required manually updating every affected style. - Figma separated form, color, and alignment so each attribute could be edited independently. - Updating a source fill style automatically propagated the change throughout the design. ## Applying Multiple Styles Within Text Fields - Other design tools often restricted a text field to one style. - Formatting part of a sentence as a link or section heading could break its connection to the original style. - Figma allowed users to highlight portions of text and apply different text or fill styles. - These partial styles retained their links to the source styles and updated when those styles changed. ## Beta Rollout - The private beta was intended to reduce daily styling problems and support scalable team design systems. - Migration was planned to begin with smaller teams before larger ones. - The migration was one-way, so teams needed to consider the change before participating. Figma recommended Styles as a more flexible foundation for consistent design systems, especially for teams managing shared typography and visual attributes at scale.

Figma Design Systems User Experience Accessibility+2

figmaMay 1, 20183 min readCurated summary

How Mozilla’s Rust dramatically improved our server-side performance | Figma Blog

Figma rewrote the performance-critical part of its multiplayer synchronization server from TypeScript to Rust to eliminate latency spikes and improve scalability. Rust’s low memory usage, lack of garbage collection, and high performance enabled Figma to isolate every document in its own process and make serialization more than ten times faster. However, Rust’s immaturity led Figma to abandon a full-server rewrite and use it selectively where performance mattered most. ## Scaling the Multiplayer Service - Figma’s server ran a fixed number of workers, with each document assigned exclusively to one worker. - The TypeScript server was single-threaded, so one slow operation could block synchronization for every document handled by that worker. - Encoding large documents was a frequent source of unpredictable delays. - Adding hardware or creating a Node.js process per document was impractical because of JavaScript VM memory overhead. - Figma temporarily isolated problematic “heavy” documents onto a separate worker pool, but this required manual monitoring and reassignment. ## Rust-Based Architecture - Figma moved performance-sensitive multiplayer logic into a separate Rust child process. - The Rust process communicates with its host through standard input and output. - Rust’s low memory usage made it feasible to run one process per document, fully parallelizing document operations. - Serialization became more than ten times faster, including for very large documents. - This architecture removed the worst-case blocking behavior of the original worker model. ## Server-Side Performance Improvements - Progressive rollout graphs showed a dramatic reduction in server performance problems after the Rust implementation reached full deployment. - The improvements primarily affected server stability and responsiveness, rather than directly making the client UI faster. - Users were less likely to experience synchronization hiccups caused by unusually large or expensive documents. - Figma reported substantial improvements in peak performance metrics compared with the old server. ## Benefits and Drawbacks of Rust - Rust provided: - Very low memory usage due to fine-grained memory control, no garbage collector, and a minimal standard library. - High performance comparable to lower-level languages such as C++. - Strong compile-time safety that prevents many classes of bugs common in C++. - The language was less mature than conventional server-side languages and still had significant rough edges. - Because of these limitations, Figma abandoned plans to rewrite the entire server in Rust. - Instead, it adopted Rust selectively for the most performance-sensitive components. Figma’s experience suggests that Rust can deliver major production benefits when applied to isolated, resource-intensive workloads, while a gradual or hybrid adoption strategy may be more practical than a complete rewrite.

TypeScript Rust Node.Js Garbage Collection+3

figmaApr 25, 20182 min readCurated summary

Introducing: Figma to React | Figma Blog

Figma introduced an open-source Figma-to-React converter that uses the Figma API to turn designs into React components. The project aims to keep visual design in Figma while preserving application functionality in separate code, allowing designers to update interfaces without overwriting custom logic. It also seeks to make functional code reusable across multiple designs, much like reusable React components. ## Motivation and Goals - The converter builds on growing interest in automatically transforming Figma documents into React code. - Figma identified two main objectives: - Keep component design primarily in Figma so design updates can be synchronized to a website or app. - Separate generated visual code from custom functional code, preventing design updates from overwriting application behavior. - Existing functional code should be attachable to new designs, enabling reuse across different UI layouts. - Figma open-sourced the implementation in its `figma-api-demo` GitHub repository. ## From Figma to CSS - The first technical challenge is accurately reproducing the appearance of Figma designs in React components. - The example used is a sortable list interface with multiple list items, icons, and a dark visual style. - The converter must translate Figma’s visual properties into CSS and React structure. - The article notes that there are multiple possible strategies for reproducing a design, setting up a discussion of the implementation choices that follow.

React JavaScript CSS Design To Code+2

figmaApr 18, 20182 min readCurated summary

Want Figma API inspiration? Here’s 8 community-powered projects | Figma Blog

Figma’s 2018 Web API launch quickly inspired developers and designers to build integrations beyond the core product. The projects showcased range from no-code utilities, such as PDF export and style-guide generation, to developer tools for GraphQL, React rendering, and design-to-code workflows. Together, they demonstrate the API’s potential to connect Figma with everyday design and engineering processes. ## Integrations for Designers - **PDF exporter:** Gweltaz Calori created a website that exports selected Figma frames as PDFs from a pasted file URL. The project is open source on GitHub. - **Style-guide generator:** Freighter’s tool analyzes a Figma document and generates a style-guide page containing its fonts, colors, and other styles. - **Alexa integration:** Jon Gold built a voice interface capable of reading Figma comments through Alexa, illustrating unconventional uses of the API. ## Tools for Developers - **Figma.js:** Jon Gold also released an unofficial JavaScript wrapper to simplify building Figma API integrations. - **GraphQL connector:** Bernardo Raposo, with Sara Vieira, used the JavaScript library to create an open-source connector that lets developers query Figma through GraphQL. - **Figma-to-React workflows:** PageDraw introduced a React integration, while Sara Vieira demonstrated rendering React components directly from Figma through the GraphQL connector. - **Additional converter:** Florian Nagel built another Figma-to-React converter, with plans to open-source it. ## Broader Implications - The API makes design-to-development handoff easier to automate. - Community projects show potential for exporting Figma designs into other formats and frameworks. - Open-source libraries and integrations allow others to build on early experiments rather than starting from scratch. - These are third-party projects, so users must consider their permissions, reliability, and ongoing maintenance. Figma’s early API ecosystem suggests strong potential for automated design workflows, especially integrations that translate Figma files into documentation, code, and developer-ready assets.

React JavaScript Design To Code GraphQL+2