Figma Plugins | Techlist.io

figmaJul 31, 20193 min readCurated summary

Automate work. Bring in data. Extend what’s possible with Figma Plugins. | Figma Blog

Figma introduced plugins to make the platform more extensible, reliable, and accessible to both designers and developers. The goal was to let anyone with basic HTML and JavaScript skills build tools that automate repetitive work, bring real-world content into designs, and address needs such as accessibility. After six weeks of beta testing, more than 40 community plugins were publicly available, with private distribution also supported for organization customers. ## Why Figma Built a Plugin Platform - Designers already depended on plugins, but many were unreliable or insecure because they used unsupported APIs. - Designers without coding skills had to wait for someone else—or for engineering resources—to build the tools they needed. - Figma designed its plugin architecture to be: - Secure - Stable - Performant - Familiar to web developers - The company’s guiding idea was that anyone who could build a basic webpage should be able to create a Figma plugin. - Building a plugin system for a web-based design tool required significant architectural investment, intended to encourage more creators and experimentation. ## Plugin Availability and Distribution - Plugins became available to the entire Figma community after the beta. - Users could browse plugins within Figma and install them with one click. - Plugins could be launched from a design file’s right-click menu. - Figma Organization customers could: - Build private plugins - Distribute them across their company - Curate approved plugins - Install plugins on behalf of users ## Utility Plugins for Repetitive Tasks - **Similayer**, created by David Williames, selects layers with similar properties so designers can edit them in batches. - **Super Tidy**, created by Ismael González-Nicolás, renames frames and reorganizes them in the layers list. - These tools reduce manual “pixel-pushing” and help designers keep files organized. ## Generative Plugins for Content and Visuals - **Unsplash** lets designers insert Unsplash images directly into Figma files. - **Content Reel**, created by Microsoft, populates designs with searchable text, avatars, and icons. - These plugins help designers work with more realistic and contextual content instead of placeholders. ## Accessibility Plugins - **Contrast Checker**, from Stark, checks whether colors, visuals, and typography have sufficient contrast and readability. - **Color Blind**, created by Sam Mason de Caires, previews designs through eight types of color vision deficiency. - Together, these plugins help designers identify accessibility problems that may otherwise be difficult to notice. Figma’s plugin launch positioned extensibility as a core part of the product: designers could automate workflows, use realistic content, improve accessibility, and create custom tools instead of waiting for platform features or engineering support.

Read original

Figma Plugins Design Systems Accessibility JavaScript+3

figmaJul 28, 20192 min readCurated summary

Behind the Plugins: Matt DesLauriers, Generative Artist & Creative Coder | Figma Blog

Matt DesLauriers combines programming and visual art to create generative systems that produce evolving, often unexpected imagery. He sees code as a creative tool that collaborates with the artist, expanding what humans can imagine and execute. His Figma plugins aim to make generative art and creative coding more accessible while encouraging designers and developers to cross traditional boundaries. ## Discovering Generative Art - DesLauriers developed an interest in both art and programming during childhood, often modifying and redesigning games instead of simply playing them. - In 2014, he began creating JavaScript demos in the browser. - These demos generated images that changed over time, introducing him to emergence—the idea that complex artwork can arise from simple rules and parameters. ## Building Interactive Works - One of his proudest projects is **LUMOS**, an interactive light sculpture created with Jean-Michel Gariepy and Steven Mengin. - The sculpture was displayed in Toronto during Ontario Place Park’s 2018 Winter Light Exhibition. - The project reflects his interest in combining code, physical environments, and public art. ## Code as a Creative Medium - DesLauriers compares code to a brush or pen: a tool for communicating ideas to a machine. - Computers can execute instructions and repeat processes millions of times without tiring. - This collaboration can overcome human limitations and produce surprising results, including unexpected ideas caused by coding errors. - His workshops and writing help others explore the connection between artistic expression and programming. ## Figma Plugins for Creative Exploration - DesLauriers is developing plugins for animation, image palette generation, and parametric design. - He hopes the tools will help designers experiment with code and developers explore design. - His broader goal is to make creative coding and generative art approachable for both programmers and non-programmers. - He particularly appreciates small usability features in Figma, such as evaluating mathematical expressions like `25 / 2` directly in numeric fields. ## A More Open Design Industry - DesLauriers advocates for tools that are open, hackable, and experimental. - He believes the boundaries between designers, coders, artists, and other creative professionals should become less rigid. - His plugins represent that philosophy by bringing computational experimentation into a familiar design environment. His work suggests that creative tools should encourage experimentation rather than separate design from technology. By making generative techniques easier to use, plugins can help more people treat code as a medium for visual expression.

Read original

Figma Plugins JavaScript Creative Coding Generative Art+2

figmaJul 23, 20192 min readCurated summary

Behind the Plugins: Tiffany Chen, UX Designer @ Microsoft | Figma Blog

Tiffany Chen, a Microsoft UX designer, is developing an accessibility-focused Figma plugin that automates the manual work of annotating designs for accessibility. She sees plugins as a way to fill gaps in design tools, make inclusive design more accessible, and encourage people from diverse backgrounds to enter the design field. Her broader work combines technical feasibility with creative experimentation. ## Accessibility-Focused Plugin - Chen’s plugin is an “accessibility-focused order annotator.” - It automates much of the manual process involved in creating accessibility annotations for designs. - The plugin was planned for release to the Figma community on August 1, 2019. ## Why Chen Builds for Figma - Figma’s plugin system and APIs are easy to use, allowing her to focus on creating rather than debugging setup issues. - Plugins let designers build missing features themselves instead of waiting for design-tool companies to add them. - She describes the Figma community as supportive and enjoyable. ## Expanding Access to Design - Chen wants to help people begin nontraditional design careers, including those from psychology, anthropology, international relations, and computer science. - She believes diverse professional backgrounds bring valuable perspectives and knowledge to design. - Her computer science background influences her designs by balancing technical feasibility with novelty. - She views accessible, powerful tools such as Figma as a way to lower barriers to becoming a designer. ## Combining Technical and Creative Work - Chen’s proudest project began by asking people unusual questions, such as what lies they were told as children. - She transformed their responses into illustrated stories for an art-directed website. - Layering and parallax effects helped her combine storytelling, visual design, and technology. ## Designing with Broader Impact in Mind - Chen admires the principles of B Corporations, which require companies to consider effects on workers, customers, suppliers, and the environment. - She believes the design industry needs both greater awareness of inclusive product experiences and more accessible paths into the profession. Chen’s work demonstrates how plugins can support accessibility while also empowering designers to customize their tools. Her recommendation in practice is clear: use approachable, flexible design technology to make inclusive design easier and broaden participation in the field.

Read original

Figma Plugins Figma User Experience Accessibility+3

figmaJul 21, 20192 min readCurated summary

Behind the Plugins: Sam Mason de Caires, UX Engineer at Cloudflare | Figma Blog

Figma’s early plugin beta highlighted how community-built tools could expand the possibilities of design software. Sam Mason de Caires, a UX Engineer at Cloudflare, sees plugins as a way to automate repetitive work and give designers more time for meaningful creative decisions. He also anticipates a future where generative design tools create many variations from data, with designers refining the best results. ## Sam’s Background and Motivation - Sam became a developer because he enjoys building things from scratch and seeing people use them. - His interest in design overlaps with his development experience, allowing him to contribute to design projects at Cloudflare. - He believes developers can support the design community by creating tools that improve speed and confidence. ## Plugins Sam Is Building - Sam had already created four Figma community plugins. - His projects include: - Translation tools - Data replacement - Theme UI generation - Graph creation - Color references designed to support color-blind users - He is particularly interested in using Figma’s API to automate tasks normally completed manually. ## The Role of Automation in Design - Figma’s plugin API gives creators access to the underlying tool and enables custom workflows. - Automating tedious tasks allows designers to focus on higher-value parts of the process. - Sam views plugins as a bridge between development and design, helping users work more efficiently without leaving their design environment. ## The Future of Design Tools - Sam expects major advances in generative design over the next five years. - Instead of designing every possible state individually, designers may provide data describing the desired output. - Design tools could then generate multiple variations, leaving designers to select and refine the strongest elements. - He recommends Adam Morse’s writing on “Chaos Design” for deeper thinking about the evolution of design tools. ## Contribution to the Design Community - Sam plans to continue creating tools and processes that help designers work faster and with greater confidence. - He is inspired by Stripe, praising both its visual quality and its success in making payment processing feel like a desirable product. - He also admires Stripe’s efforts to support broader communities through initiatives such as Stripe Press. Sam’s plugins were scheduled to become publicly available in Figma on August 1, 2019, reflecting Figma’s broader effort to build its plugin ecosystem around community innovation.

Read original

Figma Plugins Figma Cloudflare Plugin Api+2

figmaJun 25, 20192 min readCurated summary

What's new in Figma recap | Figma Blog

Figma’s spring 2019 updates focused on making everyday design work faster and more scalable. The biggest improvements expanded component workflows and introduced the public beta of the plugin API, enabling the community to build custom tools. The company also highlighted bug fixes and broader product refinements released over the previous three months. ## Component Improvements for Design Systems - Users can select multiple objects and convert them into Components in a single action. - Right-clicking a component instance now reveals related Components in the context menu, making swaps easier. - The **Return to Instance** button lets designers jump to a master component for reference or editing, then return to the instance they were working on. - For local components, instance overrides can be pushed back to the master component, supporting faster iteration and maintenance. ## Public Beta of the Plugin API - Figma launched the public beta of its plugin API after extensive development. - Early community experiments demonstrated how plugins could extend Figma beyond its built-in features. - Examples included: - Generative design tools that repeat text elements radially. - Image-analysis plugins that extract color palettes from selected images. - The strong early response suggested that plugins could support highly specialized creative workflows. ## Quality and Workflow Improvements - Figma dedicated a “quality week” to addressing and fixing a large number of bugs. - The spring release cycle also included rapid improvements to features such as Smart Selection and other frequently used tools. Figma’s spring updates strengthened its core component system while opening the platform to community-built extensions. Designers working with reusable systems could benefit from the component workflow improvements immediately, while the plugin beta offered a foundation for more customized and experimental processes.

Read original

Figma Plugins Figma Design Systems Components+2

figmaJun 10, 20192 min readCurated summary

Plugins are coming to Figma | Figma Blog

Figma announced the beta of its plugin platform, inviting developers to build tools that extend and improve design workflows. The initiative follows the success of Figma’s HTTP API and aims to make plugins powerful while preserving platform stability, security, performance, and compatibility. Figma initially planned a limited beta, with broader access and community-created plugins to follow. ## Opening the Figma Platform - Figma had previously launched an HTTP-based API for exporting design data and connecting Figma with other tools. - Customers used the API to: - Export icons through custom Slack commands. - Push design updates into development environments. - Maintain and distribute GitHub’s Octicons SVG library. - Independent designers and developers had also begun creating spaces for sharing Figma-related functionality. ## Designing a Stable Plugin System Figma recognized that plugins can create compatibility, security, and performance challenges. Rather than exposing internal APIs—which may change frequently—it designed dedicated third-party APIs intended to remain stable as Figma evolves. The company established several principles: - Plugins should be intuitive for all designers. - Anyone capable of building a website should be able to create a plugin. - Developers should be able to use popular programming languages. - Plugins should not harm Figma’s performance or user experience. - Figma would fully support and maintain the APIs used by plugins. ## What Plugins Could Do During the beta, developers could create plugins to: - Automate repetitive design tasks. - Speed up design workflows. - Import real-world data into Figma files. - Share plugins with teammates. Because Figma is web-based, the company expected plugins to be relatively easy to build and maintain for developers familiar with HTML and JavaScript. ## Beta Access and Future Availability - The beta was limited to a selected group of users. - Applicants were prioritized based on the ideas they wanted to build. - Figma intended to use the beta to stress-test and refine its plugin APIs. - Broader access was planned for the future. - Non-coders would eventually be able to use community-built plugins. Developers with basic web-development skills and a plugin idea were encouraged to apply for the beta.

Read original

Figma Plugins JavaScript Web Development HTML+2