figmaMar 12, 2025

How eBay Built a Bridge Between Brand and Product with Figma | Figma Blog (opens in new tab)

eBay rebuilt its design-system documentation to unite brand, product, accessibility, and engineering guidance in one evolving experience. Its new Evo system is centered on the 300-plus-page Playbook, which replaces scattered, manually maintained files with a centralized source of truth. By making Figma the starting point for content and automating validation and publishing, eBay reduced documentation updates from days to minutes and encouraged teams to treat documentation as part of their normal workflow. ## Rebuilding from the Ground Up - Before Evo, documentation was spread across separate Figma files, developer resources, and accessibility guidelines. - Designers manually updated static files and submitted tickets for changes to be published. - eBay’s OneExperience team chose to rebuild the process internally rather than patch the old system or rely on an external agency. - The goal was a system integrated with everyday design and development work, rather than documentation maintained as a separate task. ## Bringing Brand and Product Together - The new Playbook combines brand guidance, design-system documentation, technology resources, and accessibility information in one destination. - It acts as a centralized source of truth for both internal teams and agency partners. - Component pages include design, development, and accessibility views. - Component availability and implementation status are updated from library metadata instead of manually maintained tables. ## Component Status Across Platforms - eBay created an internal Component Status API to track components across its libraries. - The API records component names, versions, availability, and implementation status across: - Published Figma libraries - Native platform libraries - Open-source web-component libraries - Figma components store relevant metadata in their descriptions. - Developers can verify whether a component exists in their framework, whether it matches the Figma version, and whether the Playbook documentation is current. ## Automating Documentation Updates - eBay built a custom Figma plugin and exporter that powers the documentation workflow. - Components, guidelines, and accessibility notes originate in Figma. - Updates are linted, validated, and published directly from Figma without manual CMS work. - Changes that previously took days can now appear on the Playbook site in under two minutes. - Faster publishing makes documentation easier to iterate on and helps teams view it as a living part of their workflow rather than an administrative burden.

figma-pluginsfigmadesign-systemsaccessibility+3

figmaMar 10, 2025

From Screen to Zine: Meet the Makers Using Figma for Digital DIY | Figma Blog (opens in new tab)

Figma is helping a new generation of creators revive zine culture by combining digital speed with the handmade spirit of print. The article highlights designers, musicians, and community organizers using Figma to document underground scenes, produce physical artifacts, and collaborate remotely. Its flexibility, plugins, and collaborative canvas make it especially useful for highly iterative, visually experimental work. ## Figma and the revival of zines - Zines have historically given fringe communities and subcultures a way to publish outside mainstream media. - The article profiles several creators using Figma for digital DIY projects: - Dance Data’s 97-page *Underground Fanzine*, created by Jesse Pimenta and Cheyce Batchelor. - Figma’s AAPI employee resource group, which created *AZINE*. - Dominique Saiegh, who designs cassette and CD packaging. - Sebastián Ortega, who creates assets for online radio station SutroFM. - Tara Ridgedell and Gonzalo Guerrero, who run remote risograph workshops through Secret Riso Club. - These projects use digital tools to build real-world connections and preserve ephemeral music and cultural communities. ## The history and spirit of zine culture - Modern zines began as science-fiction fan magazines in the 1930s and 1940s. - Their history continued through: - Beat-generation small presses in the 1950s and 1960s. - Punk music zines and copy-shop publishing in the 1970s and 1980s. - Riot Grrrl and broader zine culture in the 1990s. - E-zines, blogs, and websites in the 2000s. - A renewed interest in printed zines, festivals, and libraries from the 2010s onward. - Dance Data’s publication deliberately recreates the scrappy, Xerox-inspired aesthetic associated with punk-era zines. - Printing the zine gives readers a lasting physical record of an underground music scene whose parties and collectives are often temporary. ## Designing a 1990s-inspired publication in Figma - Pimenta and Batchelor produced the zine in approximately three months. - Figma’s canvas provided a broad overview of the publication, while Auto Layout helped organize and reorder content efficiently. - Figma’s speed supported an iterative process in which every interview spread could have a distinct visual identity. - Pimenta drew inspiration from rave flyers, computer newsletters, technology magazines, and Archive.org’s *The Magazine Rack*. - The desired aesthetic combined hacker culture, cyberpunk imagery, retro computer graphics, and old-school clip art. ## Plugins for a photocopied, experimental look - **Noise & Texture** added gritty, speckled effects resembling 1990s photocopies. - **Photopea** enabled image manipulation, including noise and threshold filters. - **Skew Skew** distorted typography into irregular shapes that suggested warped Xerox reproductions. - These tools, combined with retro rave references, helped the digital design resemble handmade print work. ## Preparing digital work for print - Pimenta had to export individual pages at four times their intended size, convert them into print-ready PDFs, and then resize the final document. - Exporting was slow because the publication contained thousands of small assets. - The project illustrates both Figma’s usefulness for complex editorial design and the practical challenges of converting a large digital file into a physical zine.

figma-pluginsfigmagraphic-designpdf+2

figmaFeb 25, 2025

Save Time on Building Decks—Without Sacrificing Design | Figma Blog (opens in new tab)

Figma’s Slides plugins extend the presentation tool with Figma’s design capabilities, helping teams create polished decks without sacrificing speed or visual quality. The post highlights plugins for finding assets, creating custom backgrounds, importing PDFs, and adding animation. Together, they support the full slide-building process, from initial content gathering through final presentation preparation. ## Populating Your Slides - **IconScout** provides millions of icons, illustrations, Lottie animations, and Unicons. - Users can customize assets with their own color palettes. - Reverse image search helps find visually similar graphics. - **Mesh Gradient** creates custom backgrounds and color fills. - Designers can edit grid vertices and edges. - Live previews and the ability to save or upload gradients support iterative design work. - **PDF.to.design** imports PDFs as editable designs. - Text and images can be extracted and reused in slides. - Files remain private on the user’s local machine, which helps protect sensitive information. ## Adding Power and Polish - **Jitter** is presented as a tool for animating slide designs, helping make presentations more dynamic and engaging. - The broader plugin ecosystem includes tools for visual refinement, color controls, and motion, allowing teams to tailor slides to their brand and narrative. ## Preparing to Present - The article’s final section focuses on tools for getting decks presentation-ready, continuing the workflow from asset creation and design polish to delivery. Figma recommends using Slides plugins as a practical way to speed up deck creation while preserving control over layout, branding, visuals, and storytelling.

figma-pluginsfigma-slideslottie-animationspdf-import+1

figmaFeb 26, 2024

Nicole Boettcher’s Figma-Designed Quilts | Figma Blog (opens in new tab)

Nicole Boettcher, a former product designer, uses Figma to design and plan her quilts. Her UX background leads her to carefully map patterns, colors, measurements, and sewing steps before cutting fabric. Figma helps her iterate quickly, reduce waste, and translate digital layouts into precise handmade pieces. ## From Product Design to Quilting - During the pandemic in 2021, Nicole left product design at Artsy and began learning to quilt. - She taught herself through online tutorials and beginner patterns. - As her projects grew more ambitious, she turned to Figma to create original designs. - She designs roughly 80% of each quilt digitally before cutting any fabric. ## Building Designs in Figma - Nicole often starts with a traditional quilt block and experiments with its shapes, colors, and proportions. - She maintains a Figma color library using swatches from fabric manufacturers. - Existing fabric supplies influence her palette and pattern choices. - Figma makes it easy to recolor sections, adjust layouts, and create many variations. - Plugins such as Random Colors Fill help her explore different palettes. - Auto layout allows her to move or modify entire rows of a quilt grid at once. ## Planning Fabric and Construction - Once a design is finalized, Nicole duplicates it and breaks it into individual pieces. - The Count Things plugin helps calculate quantities, such as the number of rectangles and squares required. - Pixels in her Figma files correspond to inches in the physical quilt. - She plans cuts carefully to minimize scraps and use fabric efficiently. - She adds a quarter-inch seam allowance to each side of every piece before estimating fabric requirements. - She also rearranges pieces digitally to determine an efficient sewing sequence and reduce unnecessary steps. ## Inspiration and Influences - Nicole draws inspiration from quilting books and artists on Instagram. - She recommends exploring Amish quilts and Gee’s Bend quilts. - Favorite sources include accounts focused on vintage quilts and contemporary textile artists. Figma gives Nicole a bridge between digital product design and physical craft: it lets her experiment freely while preserving the precision quilting requires. For complex, material-intensive projects, digitally planning patterns and construction can save both time and fabric.

figma-pluginsfigmaproduct-designux-design+2

figmaNov 7, 2023

Three Creator Fund projects to know and love | Figma Blog (opens in new tab)

The Figma Creator Fund supports creators building free plugins, widgets, templates, and educational resources for Figma Community. Since launching in March, it has awarded nearly $300,000 to 13 creators in nine countries, reaching almost a million users. The post highlights how these grants help creators solve difficult, practical problems while keeping their tools freely available. ## The Creator Fund’s Purpose - The program funds resources that expand what creators can do in Figma. - Supported projects include: - Mandarin-language design systems tutorials - Developer-platform education tools - Design-to-code plugins - Free templates and widgets - Figma prioritizes projects that: - Address challenging problems - Save users time - Offer practical value - Can remain free for the wider community - Applicants are encouraged to present a clear vision, invest effort in their application, prepare visuals, and pursue ideas they genuinely care about. ## Figma to Code by Bernardo Ferrari - Based in Curitiba, Brazil, Bernardo Ferrari created Figma to Code, a plugin that converts Figma designs into: - HTML - Tailwind CSS - Flutter - SwiftUI - The project began during the COVID-19 pandemic, when Bernardo helped rebuild a state-level virus-tracking website. - Although he had not worked extensively with web development since 2015, he used Figma as a bridge between design and implementation. ## Problems with Existing Design-to-Code Tools Bernardo found that existing plugins were limited because they were: - Too slow - Dependent on too many steps - Paywalled for full functionality - Incomplete in their support for Figma’s API - Missing important capabilities such as auto layout - Restricted to a single programming language or framework - Weak at handling responsive design and accessibility He spent two months building his own plugin, which launched in July 2020. ## Using the Grant to Modernize the Plugin - Figma and web frameworks evolved significantly after the plugin’s release, but the plugin had fallen behind. - Earlier limitations included: - Only horizontal and vertical padding - Auto layout support limited to “min” and “fixed” - The Creator Fund gave Bernardo the resources to update the plugin without introducing a paid tier. - The grant also enabled him to add support for Figma’s Dev Mode. - He completed the major update in roughly a month and launched it during Config 2023. - Bernardo describes the fund committee as supportive and encouraging toward creators with ambitious ideas. The post’s supplied excerpt ends during Bernardo’s account of launching the update at Config 2023, before the other Creator Fund projects are presented.

figma-pluginsfigmadesign-to-codehtml+3

figmaNov 10, 2021

Behind the build: a Q&A with developer Gavin McFarland | Figma Blog (opens in new tab)

Gavin McFarland, a freelance design consultant and developer, discusses building a FigJam table widget after first creating a popular Figma table plugin. The widget lets users manage tabular data without leaving FigJam, supporting columns, rows, data import, and sorting. His experimentation with the widget API evolved into broader questions about multiplayer collaboration, performance, and productivity. ## Gavin’s Path to Plugin Development - McFarland began by designing and building websites for friends and family. - As a freelance consultant focused on user-centered digital transformation, he regularly pushes himself to learn new tools. - After seeing someone ask for an easier way to create tables in Figma, he modified the Rectangle Creator example into his first plugin, **Table Creator**. - The plugin eventually gained tens of thousands of users. ## Building a Table Widget for FigJam - McFarland created a FigJam table widget for users who need to display and manage structured data during collaborative work. - The widget supports: - Adding rows and columns - Importing data - Sorting by columns - The goal is to keep users inside FigJam rather than requiring a separate tabular-data application. ## Learning the Widget API - He began with the FigJam notepad example and made incremental modifications to understand the API. - The project required learning JSX, which he had not previously used extensively. - After understanding the basics, he experimented with rendering rows, columns, and different visual designs. ## Collaboration and Multiplayer Challenges - What started as an API exercise became an exploration of how teams could work more effectively together. - McFarland considered: - How simultaneous editing should work when multiple people modify one table - How the interface could show that another collaborator is active - How to keep large datasets responsive during multiplayer interactions - These challenges appealed to him because they combine visual design with technical problem-solving. ## Finding Ideas Through the Community - McFarland looks for problems designers encounter in their everyday workflows. - He draws inspiration from the Friends of Figma Slack community and the broader developer community. - Conversations with other plugin creators help him exchange ideas and improve his own work. ## Focus on Practical Productivity - He hopes the widget helps people work more productively and collaborate more closely. - His broader motivation is creating tools that address real, everyday problems. - The article ends as he begins discussing another plugin, **Node Decoder**, so the remainder of that project description is not included.

figma-pluginsfigmafigjamreal-time-collaboration+3

figmaAug 23, 2021

Bringing the power of our open platform to FigJam | Figma Blog (opens in new tab)

Figma is extending its open plugin platform to FigJam, allowing builders to create plugins and interactive widgets. Plugins automate individual workflows, while widgets support collaborative experiences such as polls, voting, and games. The APIs are designed to be approachable for developers familiar with JavaScript, HTML, or React. ## An Open Platform for FigJam - Figma’s original plugin API aimed to make customization accessible: anyone who can build a website should be able to build a plugin. - FigJam extends this philosophy while emphasizing collaboration and shared interaction. - Plugins can connect workflows, import real data, and automate repetitive design or brainstorming tasks. ## Interactive Widgets for Collaboration - Widgets can be dragged directly onto FigJam boards and used by multiple participants. - Potential uses include: - Voting and polls - Games - Interactive team activities - The widget API is declarative and functional. - Developers define interfaces with components such as `Frame`, `Rectangle`, `Text`, and `SVG`. - Event listeners can execute code in response to actions such as clicks. - Widgets can include inline property menus similar to native FigJam objects. - Synced state allows interactions, such as a counter, to remain consistent for everyone in the file. - The API is modeled after React, with components whose properties resemble CSS, reducing the learning curve for React developers. ## Plugins for Workflow Automation - Plugins are intended to reduce repetitive work and help teams focus on collaboration. - Examples include converting CSV data into sticky-note grids or creating sticky notes from text. ### Organization and Synthesis - Sort sticky notes by color. - Add tags for categorization. - Extract themes with tools such as word clouds. - Count votes using stamp counters. ### Task Automation - Add features such as spell checking and find-and-replace. - Generate large groups of objects automatically, such as 100 colored sticky notes. - Existing Figma plugins, including SPELLL, can be republished for FigJam. ### Content Libraries - Import icons, emojis, logos, and other reusable assets. - Planned integrations include Icons8, Material Design icons, Iconify, and Brandfetch. ### Customization - Plugins can help users apply custom colors, fonts, and text styles, addressing requests for more personalization in FigJam. FigJam’s open platform combines workflow automation with collaborative interactivity, giving developers a straightforward way to build tools that make brainstorming more efficient and engaging.

figma-pluginsfigjamreactjavascript+4

figmaMay 16, 2021

Inside Maker Week: more than a hackathon | Figma Blog (opens in new tab)

Maker Week is Figma’s twice-yearly, company-wide alternative to a traditional hackathon. It gives employees across disciplines, teams, and time zones dedicated time to pursue creative projects without requiring technical expertise. The program has produced hundreds of ideas since 2018, many of which became product features, community tools, or cultural initiatives. ## A Maker Culture Open to Everyone - Figma defines “maker” broadly—not just as an artist, engineer, or craftsperson, but as anyone expressing creativity in an authentic way. - The company reinforces this culture during weekly All Hands meetings, where new employees explain how they are makers. - This inclusive definition allows people who see themselves as curators, organizers, educators, or collaborators to participate. ## Maker Week as a Cross-Functional Festival - Maker Week happens twice a year and pauses normal day-to-day work for a week of experimentation and connection. - Unlike many hackathons, which can favor engineering, product, and design teams, Maker Week invites employees from every function. - Projects have included: - Recruiter-created employee baseball cards for candidates. - An intern-built “Name That Figmate” game. - A chemistry lesson taught through baking by data scientists. - The format encourages cross-pollination, shared ownership, and a better understanding of how different teams contribute to Figma. ## From Experiments to Shipped Work - Figma has held five Maker Weeks since 2018, generating hundreds of projects. - Some projects have become externally released products or features, including: - Auto Layout. - Interactive components. - Figma plugins. - The company suggests that FigJam itself may represent the culmination of multiple Maker Week experiments. - Other projects, such as *Figma in Quarantine: The Musical*, have offered glimpses into Figma’s internal culture. ## Featured Maker Week Projects ### Empathy-Building Cards - Research, sales enablement, and brand design employees created cards combining user personas with different characteristics and situations. - The cards help Figmates better understand users’ perspectives and contextualize the challenges they face. - The project was shared with the broader Figma community. ### Figma in 3D - An engineer and product support employee collaborated to create an extension that projects layers off the canvas. - Users can orbit around the design with a mouse, making Figma feel more like a 3D mapping application. - The project explored new possibilities for spatial software. ### User Collaboration Data Visualization - A data scientist and enterprise sales employee built a Mode-based map showing collaboration between users in different countries within the same domain. - The visualization helps organizations understand how teams collaborate across regions and time zones. Maker Week demonstrates that innovation does not have to come only from formal product teams. Figma’s approach recommends creating structured time for broad participation, experimentation, and cross-functional collaboration—while allowing the most promising ideas to evolve into real products or cultural initiatives.

figma-pluginsfigmafigjamdata-visualization+1

figmaApr 8, 2020

Building on our open platform: Design in Figma, prototype with Framer | Figma Blog (opens in new tab)

Figma argues that design tools should remain open, allowing users to move their data across products rather than becoming locked into one platform. Its new Framer Web integration lets teams design collaboratively in Figma and import files into Framer for more advanced, expressive prototypes. The announcement reinforces Figma’s broader strategy of building an ecosystem around APIs, plugins, and integrations. ## An Open Platform for Flexible Workflows - Figma has prioritized data portability since its founding. - Its web-based platform and APIs allow developers to access and use Figma data in external tools. - Customers have used the API to build internal tooling, create plugins, and even use Figma as a content management system. - Figma also launched an API challenge to encourage a Sketch exporter, but withdrew it after community feedback that it resembled unpaid “spec work.” ## Supporting Specialized Design Tools - Figma recognizes that although some teams use it for the entire design process, others prefer specialized tools. - Partners such as Zeplin provide alternative approaches to developer handoff. - Figma’s position is that no single product should try to serve every workflow; an ecosystem of complementary tools can fill specialized needs. ## Importing Figma Designs into Framer - The new Framer Web integration allows users to import Figma files directly into Framer Web. - Teams can collaborate on design in Figma, then use Framer to build richer and more expressive prototypes. - Framer Web was in beta at the time, with access available through a waitlist and setup instructions provided in Figma’s documentation. ## Broader Integrations - Figma planned to launch additional integrations throughout the year. - Prototyping and user testing: Flinto, Principle, ProtoPie, and Maze. - Developer handoff: Avocode, Storybook, ZeroHeight, and Zeplin. - Collaboration and project workflows: Coda, Dribbble, Dropbox, Jira, Notion, Slack, and Trello. Figma’s recommendation is implicit: use Figma as a collaborative design foundation while choosing the best external tools for prototyping, testing, handoff, and project management.

figma-pluginsfigmaprototypingdesign-collaboration+3

figmaMar 10, 2020

Extend what’s possible with plugins for you and your team | Figma Blog (opens in new tab)

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

figma-pluginsdesign-systemsaccessibilityapi-integration+3

figmaOct 29, 2019

Let’s create Figma’s first user conference together | Figma Blog (opens in new tab)

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-pluginsfigmacollaborative-designfigma-community+1

figmaSep 5, 2019

An in-depth sneak peak at what 5 plugin developers are cooking up | Figma Blog (opens in new tab)

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.

figma-pluginsreacttypescriptjavascript+4

figmaAug 27, 2019

How Microsoft built plugins to improve their workflow | Figma Blog (opens in new tab)

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-pluginsfigmadesign-systemsaccessibility+2

figmaAug 22, 2019

Bring real content into your designs in seconds | Figma Blog (opens in new tab)

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.

figma-pluginsprototypinggoogle-sheetsunsplash+2

figmaAug 8, 2019

5 utility Figma plugins to speed up your workflow | Figma Blog (opens in new tab)

Figma highlights five utility plugins designed to eliminate repetitive design tasks and make workflows more efficient. They support responsive frame testing, component duplication, text manipulation, bulk replacement, and selection of similar layers. A keyboard shortcut tip further speeds up plugin access. ## Viewports - Resizes frames to common device dimensions. - Requires constraints to be configured on elements beforehand. - Displays estimated global market share for each device viewport. - Future versions were expected to include desktop sizes. ## Component Cloner - Duplicates master components, selected instances, or both. - Useful for testing variations such as icon colors and building icon sprites. - Removes the manual work of recreating components and their instances. ## Nisa Text Splitter - Converts lines in a text box into separate text objects. - Supports reordering, including alphabetical or reverse order. - Can also merge multiple text boxes into one. ## Find and Replace - Finds and replaces text throughout a Figma document. - Can also search and rename layers by name. - Supports case sensitivity and matching anywhere, at the beginning, at the end, or across the entire string. - Particularly useful for large copy or content revisions. ## Similayer - Selects layers based on chosen matching properties. - Can match attributes such as fill, stroke, border radius, and drop shadow. - Extends Figma’s native “Select all with same…” functionality while reducing repetitive clicks. ## Faster Plugin Access - Press `⌘ + /` on Mac or `Ctrl + /` on Windows to search the menu and launch a plugin by name. - Press `⌘ + ⌥ + P` on Mac or `Ctrl + Alt + P` on Windows to run the previous plugin. These plugins are practical additions for reducing repetitive work in Figma. Designers can adopt them immediately, while developers interested in creating similar tools can consult Figma’s Plugin API documentation.

figma-pluginsfigmaux-designfrontend-development+1