Today, we’re introducing new prototyping features that will open the door to new transition possibilities in Figma. They’ll help bring more of your interaction design ideas to life:
Smart Animate, a new transition type that automatically animates similar objects and improves existing transitions
Drag, a new interaction type that lets users control a transition with a drag of their finger
Features to help achieve advanced transitions like Smart Animate and Drag have been on our minds for a while. They’ve been on our customers’ minds for even longer. If you’re a fellow designer or someone who works closely with design teams, you’re probably all too familiar with the challenges of designing for a highly requested customer feature, one where users may have pre-existing expectations for how it might work. Click ahead to dig into the features and see real examples of Smart Animate in action. Or continue reading to see how we designed Smart Animate…
As we kicked off design discovery for our first release of Smart Animate, we began to look for answers starting from a familiar place—our users.
When working on a hard design problem, talking to users is always a great start and you don’t have to be a big company to set up systematic ways to do qualitative user research. One of the ways we continuously gather feedback is through in-product NPS surveys. (Surprise! We do read the comments and take action.) Our support team replies to many responses directly, but we also categorize the NPS comments into meaningful groupings. This makes it easy to keep a pulse on specific topics and can serve as a starting point for user feedback when we’re ready to kickstart design for a new feature.
Here are some things we heard about prototyping in Figma…
Speaking of animations, I would love simple things like dropdown lists, buttons hovers, varied and smooth appearance of pop-ups, switching tabs, and so on. It is not about complex animation…”
“When I am designing screens where animation plays a big part in the experience, we need other tools to show what we want from our developers. E.g. a click shows an advanced transition from one screen to another. I would like to not use another tool for my creations.”
“I was wondering if you plan to add more prototype transitions? It would be nice to have an auto-animate as well as a drag/slide transition.
The value of the NPS surveys does not lie in the score. For us, it’s in having an open feedback channel where we can hear from customers who are experiencing “pain”. We’re able to talk to them directly to get ideas on what features they’re looking for and understand what they like and don’t like about how they animate prototypes today inside and outside of Figma.
Fun fact: Many of these NPS survey respondents became our first beta customers. Special shoutout and thank you to all of them!
Because a feature like Smart Animate needs to support a variety of use cases, we can’t just design Smart Animate with one specific use case in mind. Otherwise, it’ll be too limiting and not useful for the majority of our users. To make sure that what we design can scale for a multitude of use cases, we had to zoom out and search for common design patterns.
We gathered all the animation examples we could find through our conversations with customers. We also did our own research into interactive interfaces we use in our daily lives. Then we explored how someone would prototype this in Figma and what challenges they would face when doing so.
This process led us to two major patterns that you’ll see in today’s first release of Smart Animate.
Pattern #1: An object appears, disappears, or changes while the user stays on the same screen You probably see this pattern everyday, like when you hover over a video and the playbar appears, when you hover over a navigation item and a dropdown expands, or when you swipe an object away and new content emerges from underneath.
Pattern #2: Several UI elements stay fixed while the majority of the content on the user’s screen changes You’ll find this common pattern in a tabbed navigation. This slightly more complex animation appears when you drag content left or right and the tab bar indicator moves in the opposite direction.
Upleveling beyond individual use cases allowed us to focus on common denominators. Pinning down these two patterns helped us keep the feature scope focused while still addressing many of our customers’ use cases.
We’re not the only ones trying to solve these design challenges for our customers. However, we wanted our implementation of the solution to ‘feel’ like Figma. That meant making sure Smart Animate and Drag felt well-integrated with existing prototyping features. Sometimes, building new features requires a re-examination of what’s currently there.
First at the most fundamental level, we wanted the auto-animation of layers to work out-of-the-box as best as possible. So we revisited the basics, like layer naming. We didn’t want to completely reinvent the wheel, but this seemingly small update took countless hours to get right. I’ll spare you all the details, but essentially we updated how we automatically name and rename objects on creation or duplication, so layers that match up based on hierarchy, naming, and order will auto-animate. Additionally, in cases where something wouldn’t work, we wanted to make debugging of that situation a lot easier! That’s why you’ll get visual feedback on hover and selection to quickly check if layers match up correctly. Now when you hover over the layer you’re trying to animate, you’ll see every matching counterpart on other frames.
The other thing we wanted to make sure we got right is enabling users to combine the new Smart Animate transition with existing transitions. For transitions you already use today like Push, Move, or Slide, you’ll now see an additional setting called “Smart Animate Matching Layers”. This automatically detects matching layers between two screens and animates them separately from the other objects. This little checkbox enables you to build more complex animations, faster, while minimizing the number of duplicative layers you previously needed to create to express such an animation.
For us, designing new features also means making sure the new additions work seamlessly alongside existing features and doesn’t add unnecessary product complexity. It’s not just about building more new stuff; it’s also about making sure the stuff that’s already there still works great and continues to support new capabilities.
Now to help inspire ideas and give you a few real examples, our team got together to create a bunch of new animated prototypes you can view and duplicate. Check out some examples of what you can create with Smart Animate and Drag. And get the source file to see how our team built it.
Simple card expansion
Page transition with Material Design
Tab transition with multiple animating elements
Swipe to remove animation
Prototype for your favorite devices, like Apple Watch and TV
We can’t wait to see what you create in Figma prototypes! Tweet @figmadesign with your prototype examples, and email me at niko@figma.com for thoughts on how we can continue to improve prototyping in Figma. There’s so much more that we want to do!
It’s been a while since beta but Figma Plugins is finally here. While Sketch is catching up with their cloud capabilities, Figma has also been working on proper third party support.
Figma has become my main design tool over the past year. I have been using it for interface and website design on a daily basis. Our social media and marketing assets are also created in Figma for easy collaboration and bilingual support. (I’m writing another piece to elaborate our process, stay tuned.)
After a few weeks of us, I can conclude the best part of Figma Plugins is automation. With Figma Plugins, tedious steps become one simple click. Inputting data can also be set up without any coding effort. Tidying up components finally feel not stupid. I felt motivated to re-organize my artboards again. I started to think it is not a time-consuming process as it was before.
Getting Started
If you have updated Figma to the latest version, you can find it on the main page. Installing plugins are slightly easier than Sketch as everything is distributed through Plugins page. Simply click install the plugin will be downloaded in no time.
Here is a pro tip that you must try. You can speed up the workflow by learning the quick-search shortcut Command .. Essential it is a shortcut to search for any functions and execute them. (Like Sketch Walker). All you need is to remember the keyword and go for it. It is way faster than clicking “Right Click” – “Plugins” – “Plugin that you want to open” with your mouse. (FYI Figma’s keyboard shortcut is the role model every app should adopt. This is how users can pick up the learning curve, click “Help & Account” to enable the shortcut panel)
Here are 4 plugins that I found the most useful and interesting that can speed up your design workflow.
Google Sheets Sync – Designing with custom real data
I wrote about my expectation of being able to design with real data a year ago.
With Figma Plugins, it is now possible to write a custom plugin to fetch data from API, take the most realistic approach on design. After trying out Google Sheets Sync, I realized it was an even better way. Here’s why:
Zero coding effort, that’s the dream. Export any data in csv and upload it, or just create your own using Google Sheets.
You can collaborate on the data with your team. Make sure to include edge cases (like long text, different languages, empty state) in your data set.
All data will be updated accordingly when it was synchronized. You can also try formulas like IF / ELSE in Google Sheets to achieve so much more.
Set up the spreadsheet with all data and map first column name with Figma’s layer name, by adding a “#” hash in front. Make sure you have duplicated the components and paste the link in the plugin. All components with matching name will apply with Google Sheets data. The plugin for sure will saves tons of time comparing to inputting fields one by one. The end result may not be pretty but it will allow me to foresee design flaws ahead.
Sorter – Re-order layers in one click
A part of my design time includes preparation for developer handoff. The process includes cleaning up layers, grouping up and re-naming them. Sorting layers visually from top to bottom enables developers to understand the visual hierarchy. These tasks are useful but can also be menial. But those days are over with Sorter.
Sorter is able to sort all selected layers automatically according to the rules you set. This is pretty amazing by speeding up your workflow 10x.
For example, in the previous demo, the movie card components are sorted randomly. Select all layers within the component and open Sorter, it will allow you to pick different sorting rules. For me “Position (Top Left to Bottom Right)” is the most useful for HTML or any component structures. It’s just one simple click.
Stark – Make a habit to check color contrast all the time
There are plenty of color contrast checkers online, but either you have to input the color hex code or you have to capture the screen and upload it.
Stark simplified the process by selecting two layers in Figma. It also can simulate 4-8 colorblind situations.
Let’s check the color contrast of the movie card’s director field. For normal size text, the recommended standard is to meet W3C’s minimum AA rating, a contrast ratio of at least 4.5:1 (AA). The current color does not match the rating, so we have to increase to contrast. I have changed the color from #848BAF to #636B94, now we have passed the contrast checker.
Stark also offers a PRO subscription that includes more colorblind situations as well as rapid contrast checking. Check out their website for more details.
Similayer – Selecting similar layers all at once
As you can tell from the name, Similayer allows you to select all layers that share the same properties. I found it extremely useful when you have created a bunch of components and want to edit some of the instances. All the properties from the design panel can be used as select criteria.
Conclusion: Just the beginning
These 4 plugins that I recommend are highlights that can speed up your design workflow. I hope you found this helpful, I have shared the Figma project if you need it for references.
During my selection process, I skipped some popular ones (Like Unsplash, Mapsicle and Autoflow and those from big design teams ( Did you know Microsoft Design team has already published 5 plugins!).
Opening up third party developer support surely will speed up the maturity of the platform. I have no regret switching over from Sketch in first place.
Figma plugins are a recent addition to what’s becoming the go-to collaborative tool for UI designers everywhere. Plugins are built by the community (you can even build one yourself if you wish) and provide an easy way to extend your capabilities with Figma. Through this helpful update, designers can automate repetitive tasks, add accessibility features, and add helpful content into mockups.
“Figma plugins make it easy to advocate for myself and others by giving me the ability to create the design tools we need, rather than crossing our fingers and hoping someone else will make them for us.” – Tiffany Chen, UX Designer at Microsoft
Top Figma Plugins
Here are some of the best Figma plugins which I recommend you check out, along with information on how to get started using them.
Content Reel helps you pull text strings, avatars, and icons into your designs easily. First, select one or more layers in your design file, then choose from avatar images, icons, names, companies, phone numbers, numbers, date & time details and more, to replace standard dummy content.
This is a perfect way of developing a solid color palette across your UI design. Image Palette extracts a color palette of five different colors from the selected images in Figma.
Alignment is really important in design. Or rather, misalignment is absolutely something to be avoided! Super Tidy is a Figma plugin to easily align, rename, and reorder your frames based in their canvas position.
Super Tidy also renames your frames and reorders them in the layers list by their position in the canvas.
Collaboration is definitely the name of the game with design applications nowadays. With Figma Chat you can interact inside your files with other people by sending texts and sharing actual frames or other elements.
Add considerations for color contrast and visual impairment to your workflow by automatically comparing the contrast between two selected layers.
Learn more about how to design for visually impaired users with this tutorial by Graeme Fulton:
With 4.5% of the global population experiencing color blindness, 4% suffering from low vision, and another 0.6% being blind, visual difficulties with using…
How to Install and Use a Figma Plugin
Let’s use the first in our list; the Unsplash plugin. It’s dead easy.
Begin by signing in at figma.com (create an account if you haven’t already). Then from the main downloads page, find the plugin you want to download. Hit Install to the right of the list.
Open a design file or start a new one. Create an object to act as a placeholder on the canvas, then with it selected go to Menu > Plugins > Unsplash.
From the Unsplash panel which appears you can insert a random image, search for a specific image, or choose an image from a category:
The image is then applied to your object as a second fill:
That’s just one example of the many Figma plugins which are already available for free. They all work in a similar way; login, install, and you’ll find your plugin ready for use under the plugins menu.
Conclusion
I hope this sparks ideas for plugins you can try out today or even inspires you to create your own plugins. You can learn more about recent plugins and how to create your own from the links below.
Failing to thoroughly address accessibility in your design means a large demographic of users may be excluded from being able to use your product. Just specifying the right colors so that text has enough contrast, or providing a way for users to navigate your site with a keyboard can make all the difference in enabling them to use your product too. WCAG (Web Content AccessibilityGuidelines) publishes and maintains standards for creating accessible on-screen experiences and is a great resource to learn more. To meet these needs while working in Figma, there is a growing collection of accessibility-focused plugins to help you tackle these challenges in your own designs. In this weeks plugin-round up, we’ll take a closer look at some helpful plugins to help you make your designs better for everyone.
Let’s start with color contrast. An important part of choosing the right color parings between text and the surfaces/backgrounds they reside on, is ensuring there is enough contrast so that the text is legible and readable by users with varying levels of vision. These plugins will help you identify if particular color combinations meet WCAG AA or AAA standards. Each of these has their own unique features and user-interface, so feel free try them both to see which one works best for you.
Able is plugin designed to check color contrast—it will analyze the color of any two objects that you have selected. One feature that I like most about this plugin is that it updates as you change your selection. The plugin also takes your colors and gives you a text/background preview and an option that enables you to simulate what those colors will look like through the lens of different types of color blindnesses. And, you can swap the colors between the text and background color. As a bonus, in the menu to select a type of color blindness to simulate, you’ll see a data point by each that indicates what percentage of the population is affected by each type of color deficiency.
If you’re coming from Sketch, you may already recognize this one. Stark displays the contrast ratio for any two objects that you select. It also gives you a contextual preview depending on whether or not one of your layers is a text layer or not. The plugin also displays a breakdown of your selected colors at both AA/AA and AAA/AAA ratings to show different levels of contrast ratios and a rating for if the font size used is over 18pts.
Color Blind is a plugin designed to help you understand how your colors will look from the perspective of different types of color blindness. One of the unique things about this plugin is that it doesn’t just give you a preview of the colors you have chosen, but actually generates visuals on canvas based on whatever elements you have selected. The plugin will create duplicates of your design and change the colors to reflect each type of vision in an appropriately named group.
Shifting gears from colors, let’s move on to Focus Orderer. Focus Ordered lets designers annotate their designs to indicate where and what order the browser should change the focus to. With this plugin, you can select an element and use the plugin to create a focal point. If you need to change the order of the focus, you can do it all in the plugin UI by dragging to change their order and Focus Orderer will take care of renumbering them all on canvas. You can also use the plugin to test and tab through all the elements as well. This is a great way to treat accessibility as a first-class citizen during your design to implementation process.
We hope that these accessibility plugins find a place in your Figma workflow. Stay tuned next week for another round up of useful plugins, and if you missed last weeks, be sure to check out our post on 5 helpful utility plugins.
P.S: If you’re thinking of developing your own plugin, be sure to check out our Plugin API documentation to learn how to get started. There is also an online Slack community of plugin developers to connect with, too! If developing your own plugin feels intimidating, remember you can launch the console in Figma and try a few commands to get a feel for how it works. If you’ve ever used Javascript to interact with the DOM on a website, interacting with the Figma canvas works almost the same.
Bringing over 1 million images from Unsplash right into Figma ?
We’re huge fans of Figma at Unsplash. Earlier this year, our team migrated over to Figma from Sketch for most of our designing needs — and we haven’t looked back since. We’re happy to say it has simplified our workflow, helped us collaborate between teams, and just generally made sense for us.
Truth be told, while our love for Figma is unconditional, we did miss a few things about our ex. The ability to easily fill our canvas with beautiful images from Unsplash was one of them. As a result, we’d end up with mockups that looked liked like so:
We do try to work with real data as much as possible. In our case, real data consists of actual images from Unsplash. So we know the frustration of having to manually download and insert images into Figma.
While our need is very specific, turns out we weren’t alone…
Figma plugins beta
Luckily for us, in June, Figma introduced the Figma plugins beta — and called-out for anyone to apply to be among the first creators, as one of their first moves to open up their platform. They’ve even built their APIs with this idea in mind — making sure third parties can create plugins without fear that all of their hard work will break or malfunction whenever there’s a new update or feature introduced in Figma. To read all about Figma’s newest plugins, check out their blog post here.
Proof of concept
As soon as Figma’s plugin application went live, it didn’t take long for Liam Martens—a developer and Unsplash contributor—to reach out to me in our members Slack and demo an already working proof of concept using the Unsplash API.
After playing with demo plugin locally, the ability to easily insert Unsplash images into Figma put a huge smile on my face and put all frustrations to an end.
I was so excited about seeing this integration come to life that I decided to team up with Liam and help him polish it up—turning it into the official Unsplash for Figma plugin.
Real time design made easy with Unsplash
Now, you can search and insert Unsplash images without ever leaving Figma. So whether you’re mocking something up for your latest project, or your designing something in-need of beautiful imagery, Unsplash images are dropped right into Figma, ready to use for any design project.
How it works:
In Figma, navigate to Plugins and install Unsplash.
Once installed, select a shape (or multiple shapes) that you’d like to fill.
In the Random panel, insert a completely random image, by pressing the Insert random button.
To insert a random image relating to a specific topic, select the preset of your choice in the Presets section.
To search for a specific image, use the search bar in the Search panel.
Helping you simplify your design flow even further, Unsplash for Figma allows you to focus on what counts: creating. So go make something awesome — we can’t wait to see what you come up with.
When I saw the Figma Plugin launch event, I completely feel grateful for the Figma design team and Figma growing insanely great as an amazing collaborative platform for the designers so after that I stared explore the plugin area and I built my own list of plugins and these plugins made my design workflow faster and better. I just love that and I wanted to share with you so you can make your workflow faster and design better interface and experience.
Autoflow
Autoflow makes it easy to draw flows. Simply select 2 objects, hit a hotkey, and a line will be magically drawn between them.
To use 1. Select 2 objects 2. Right-click, find Autoflow in Plugin menu 3. Wire up all your screens by hitting ⌥⌘P to run the last plugin
2.Able — Friction-free accessibility
We made Able to help designers add accessibility to their workflow with as little effort as possible. Open the plugin and Able will automatically compare the contrast between the two layers you select. This way, you can keep Able open, and casually select layers to compare without re-running or updating the plugin!
3. Remove BG
Remove the background of images automatically with just a single click — using the remove.bg API. Note: You will need a remove.bg account for this plugin.
4.Figmotion
Figmotion is an animation tool built right in Figma. This makes the entry into animation easier and more convenient as there is no need to switch to a completely separate motion tool such as Principle, Haiku or After Effects. Figmotion makes the animation hand-off to developers more manageable as well as it is built with web technologies in mind.
5.Isometric
isometric allows you to create isometric layers without manually having to set them up. How to Use Isometric: 1. Choose Your Layer 2. Right Click > Isometric 3. Select Your Perspective This project is open source and MIT licensed.
6. Content Reel
Need content for your layouts? Content Reel helps you easily pull text strings, avatars and icons into your designs. First, select one or more layers in your design file, then choose from the Content Reel palette to apply.
7.Rename It
Keep your Figma files organized, batch rename layers and frames.
7.Color Palettes
Find the best color palette from the huge list of best color palettes Fill beautiful color from “Color Palettes plugin” straight into your design. With Color Palettes for Figma, you can search for your favorite color code, palette number or name that you remember from Color Palettes plugin and apply it on your design and make it awesome
8.Component Cloner
Ever wanted to iterate upon an idea made with components without messing with existing ones and copy variations between its instances? With component cloner, you can select component instances you want to copy and they’ll be assigned to a new copy of their original master component. You can also just make a clone of a component.
9.Unsplash
Insert beautiful images from Unsplash straight into your designs. With Unsplash for Figma, you can insert a random image or search for something specific. The Unsplash License allows images to be used freely for both commercial and personal projects.
10.Brands Colors
Find the best color from the world’s best brands and cool apps Fill beautiful colors from “Brands Colors plugin” straight into your design. With Brands Colors for Figma, you can search for your favorite brand’s colors or app’s colors and apply it on your design and make it awesome
11.Datavizer
Create a bar chart, scatter plot, or line chart easily with your own data! Or use a random set of data to quickly create shapes or dummy data (for example, sparklines for a dashboard mockup). When you upload your own data (CSV or JSON file), we’ll grab any numeric keys and allow you to choose one for each relevant dimensions.
12. Icon Resizer
Resize icons into a standard size and bounding box on your design. It’s much easier to work when all your icons are the same size and have a square bounding box. Select one or more frames, and set the icon and bounding box size. That’s it!
13. Image Palette
Extracts a color palette of 5 different colors from the selected images. Note: This uses a median cut algorithm, which roughly approximates the most prominent different colors in the image. The algorithm is fast but can sometimes lead to unusual results, such as with low-color images, images of vector graphics, and so on. The extracted colors may not exactly match the hex codes in the image.
14. Viewports
Make sure that your mobile designs are covering a reasonable share of the market! Select one or more frames and Viewports will let you change their sizes to your preferred device. Simple! Currently supported: Apple iPhones Google devices Next up: Samsung devices Desktop devices
15. Interplay
Interplay connects with your design system code repository to let you access and use your design system code components right within Figma. From the plugin, you can browse code components, edit properties, change content, and drag the configured component onto the Figma canvas. Interplay generates a Figma component on the fly and keeps it connected with the related code component so that your design is always in sync with your production code.
This was my list for now. I am so excited about new cool plugins! Hope you guys find useful ?
I’m excited to introduce plugins to the entire Figma community, alongside hundreds of creators who’ve built and published plugins during our beta. Today, the gates are open for anyone to use these plugins built by our community and build your own plugins tailored to your workflow.
I’ve spent the majority of my professional career working on tools that allow other people to create things. Empowering other people to be creative is fun for me, and working on extensibility architectures is an even more fun version of that.
Plugins were always in our future at Figma, but we wanted to do things differently with our platform architecture. Plugins are critical components to a designer’s workflow that can serve as little power-ups and help extend Figma’s product functionality. However, as important as they are, design plugins to date have not yet met the call of duty. We saw two primary problems:
Although designers rely on plugins, design plugins are not always reliable or secure. This is because they’re often built on not fully-supported APIs.
Designers are at the mercy of others to build plugins for them, unless they themselves know how to code. And getting engineering resources is never easy.
Fortunately, I got to work with super talented engineers and powerhouse plugin developers from our community to help figure out these challenges. We wanted our plugins to be secure, stable, and performant, of course. But we also wanted Figma plugin programming to feel like web programming. Our internal motto is: “If you can code a webpage with basic HTML and JavaScript, you can build a Figma plugin.”
It turns out that there were a lot of technical challenges to make this happen (which we will cover in a later engineering blog post). We also had to figure out—for the first time in the design tooling space—what a plugin architecture looked like for a web-based platform. But in architecting our plugins platform in this manner, our hope was that these upfront investments would allow more plugin creators to build more creative, interesting plugins
After just 6 weeks in beta, we now have over 40 public plugins available to the Figma community—with more added every day. You can browse all plugins right in the Figma product. Installing a plugin takes one click. In your design file, just right click to pull up all the available plugins.
For customers on the Figma Organization plan, you can also build and distribute private plugins to all the users at your company. Admins can even curate a list of plugins their users have access to and install plugins on their behalf.
So, let’s meet some of these plugins, shall we? (It was nearly impossible to select the plugins to feature in this post. We will continue to feature more over the coming weeks!)
Creator: David Williames, Senior Product Designer for the Australia Post app
With five Figma plugins published and more in the works, David Williames is building useful tools to give back to the design community, as he himself received a lot of support and encouragement early on in his career. His plugin, Similayer, selects all layers with similar properties, allowing you to easily batch edit them.
Creator: Ismael González-Nicolás, Product Designer at Cabify
Ismael González-Nicolás has built two incredibly useful plugins for the community—Super Tidy and Content Buddy. Super Tidy renames your frames and reorders them in the layers list, so everything stays organized.
Creator: Liam Martens, in collaboration with Kirill Zakharov at Unsplash
If you love Unsplash and Figma, this is the plugin for you. Now, you can insert Unsplash images right into your Figma files. Make sure to check out Unsplash’s blog post about how they’re simplifying their design workflow with plugins.
Every design needs relevant content and visuals. Built by Microsoft (shout out to Eugene Gavriloff), Content Reel lets you search for relevant assets and populates your designs with texts, avatars, and icons.
The very popular contrast checker is now available in Figma, thanks to Michael Fouquet. Stark ensures your colors, visuals, and typography are readable, legible, and have enough contrast.
Creator: Sam Mason de Caires, UX Engineer at Cloudflare
Color Blind is a plugin that lets a designer see their design through the lens of the 8 different types of color vision deficiencies. Sam’s a big proponent of fostering more empathy between designers and the users they design for. Color Blind certainly does just that.
You won’t be able to find Theme Switcher available as a public Figma plugin because this is built just for Microsoft. Theme Switcher is a private Microsoft plugin that allows their designers to switch between their multiple product themes. Any Figma customer on the Organization plan can also build private plugins, too.
Built by Figma’s very own Tom Lowry, Themer is a plugin that enables designers to swap between multiple published styles easily. For example, you can swap between dark mode and light mode in a click.
If you’re like Chris, you work with maps every day. Maps are often a critical part of your product or website, but constantly grabbing screenshots of maps is no fun. Now with Mapsicle you can insert relevant maps into Figma designs and edit in-line.
How many times have you googled a company logo? Brandfetch now eliminates that step. With this plugin, you can search and insert the logo you’re looking for all without leaving Figma.
Creator: Carlo Jörges, Lead Product Designer at Facebook
Turning 2D shapes into 3D objects can get tricky. Roto can help. Built using three.js, an open source 3D JavaScript library, Roto lets you manipulate the angle, depth, or perspective distortion of a shape.
None of this would be possible without our beta customers. So a special heartfelt thanks to all the creators who’ve built and published plugins for the Figma community:
Ahamad Al Haddad, Coinbase, Gleb, Brandfetch, Jenil Gogari, Pavel Kuligin, Sam Mason de Caires, David Williames, Kate Miller, Ismael Gonzalez, Microsoft, Zeh Fernandes, Liam Martens, Kazushi Kawamura, Nitin, Tiffany Chen, Vjacheslav Trushkin, Matt DesLauriers, Pavel Laptev, Chris Arvin, Maxime De Greve, Canva Design, Rodrigo Soares, Carlo Jörges, Michael Fouquet, Ismael Gonzalez, Tom Lowry, Jordan Singer, Denis Rojčyk
