You can create more custom patterns by mixing and matching , so you can get anything from confetti patterns to trippy generated graphics and geometric shapes.
If you need to set up some sort of a dot grid pattern in your mock-up,
Dot Grid will automate the task for you. With the tool, you can easily generate beautiful dot grids to serve as guides throughout your design process on Figma with customizable grid width, grid height, dot size, gap, and dot colors. Dot-Grid generates dot grids (how surprising!) based on your choice of grid width, height, dot size, gap and dot colors. Photos Embedding in Figma
You don’t have to leave Figma to get custom photographic assets for your project. Of course,
Unsplash is everyone’s go-to page for high-res images and now it is a plugin on Figma. ( Large preview) Remove Backgrounds in Figma Remove backgrounds allows you to pretty much do just that: remove backgrounds of images easily. No need to manually edit the background of images before adding them to your design. A caveat: you will need a remove.bg account to use the plugin. ( Large preview) Responsive Design And Testing in Figma
Not many people resize boxes for living, but as designers, that’s pretty much what we have to do every now and again. In Figma,
Breakpoints is one of the many plugins for testing responsive design. It provides a resizable instance of a frame, and works without the plugin window — so everyone on your team can explore the responsive behavior of the frame without having the plugin installed. Breakpoints is one of the many plugins that create a resizable instance of a frame.
Alternatively, you can also use
Responsify, which allows you to select any frame and set custom device sizes, so you can preview what the website or app will look in that particular view. Responsive is similar, and it allows you to test specific edge cases of your responsive layout by clicking on the input frames in the plugin. Nothing groundbreaking, but handy! Responsify allows you to select any frame and set custom device sizes. Reverse The Order Of Layers
Automating small, tedious actions is always a good thing to save you precious time and stay focused on what really matters. When it comes to reversing the order of multiple layers, the
Reverse Layer Order plugin could become your new best friend. Just as its name implies, it will reverse the order of two or more layers within the same parent. All you need to do is select them and run the plugin. ( Large preview) Shapes And SVG in Figma
Creating basic shapes is easy. However, creating complex shapes might take valuable time that you can’t really afford to lose when working on a project. Figma’s plugins all around shapes and SVG can make your work easier, with a variety of shapes to choose from.
Blobs helps you improve the aesthetics of your design. With blobs, you can create and add organic shapes into your Figma designs using two parameters: complexity and contrast. You can also control how unique a shape is as well as the number of points it has. Blobs generates organic shapes, and plugs them right into Figma.
Need waves? The
Get Waves plugin helps you generate SVG wave patterns for your designs. It can be quite useful when working with charts, graphs or designs with crests and troughs. You just have to choose a curve, adjust the complexity and randomize. Getting waves into your design with Get Waves Figma Plugin.
If you are trying to create a wave and curve pattern for your design, the
Wave & Curve plugin by Andreslav Kozlov can help you generate waves in various patterns. You can also choose the direction of the waves either
Wave & Curve generates waves in various patterns.
To Path helps you put things on a path and can work with texts, shapes, objects, and components. To curve text around a path (a circle, for example), you can install the plugin, then remove circle opacity, select text, and circle, and then use the plugin to link both objects and watch the magic happen. When you need to place objects on a path, To Path can feel quite magical.
Some other features of the plugin include repeating shapes along any path, editing the original shape or text and reflecting changes in real-time (while the plugin is open), and editing the path afterwards, and again, watch the linked objects change.
Turn Your Designs Into A Slide Deck
So you have a Figma design that you want to present to a client, your boss, or your team?
Pitchdeck is here to help you do just that. The plugin turns your design into animated slide decks or, if you prefer, exports it for PowerPoint, Keynote, or Google. PDF export is also supported, as well as a number of handy features like webcam overlay, video embeds, speaker notes, and more. It’s even possible to record your presentation as a video with microphone audio. ( Large preview) Table Generator in Figma
Although designing data tables can be quite time-consuming, the
Table Generator plugin makes this easier by helping you automate dealing with tabular data. All you need for table generation is to copy and paste the data (currently in CSV format). If you need to deal with table, Table Creator Plugin might be quite a helper.
Alternatively, you can also use
Table-Paste to paste data from an Excel spreadsheets into styled table rows, or Table-Creator to create resizabled custom-styled tables. A little bonus: you can also update all tables anytime your design changes. Templates For Wayfinding in Figma
First, there’s only one person on the Figma project board, then another one joins in, and soon you’ll see the cursors of designers, developers, project managers, content designers, researchers, and many others spread across the screen. You’ve probably experienced this scenario before. But did all of these people actually
find the information they needed? Did they have to dig around or was it easily discoverable?
The team at Shopify took these questions as an occasion to
rethink the structure of their Figma playground and ensure it meets the diverse needs of teams across the company. Apart from sharing the process in an article, they distilled their findings into a project index template that you can download and use right away. A handy little helper to give everyone involved in your project the context they need, when they need it. Text Replacement in Figma
Sometimes you’re in a situation where you need to replace a piece of text in your Figma mockup. No big deal — well, unless that piece of text appears in multiple instances across the design. A fantastic little time-saver for those occasions is
Content Buddy. ( Large preview)
Instead of having to look up all instances, components, frames, and groups one by one and changing the text manually, Content Buddy does the heavy lifting for you: It provides you with a list of each unique text content in your design so that you only need to select the items you want to replace and enter the new replacement text — once.
Tracing Images in Figma
Convert any white and black bitmap images to vectors using the
Image Tracer plugin. This plugin saves you the time you’d manually trace with the pen tool or use Illustrator to convert to vectors. On running the plugin, you will see a console on the window with options to help you make edits to your taste. ( Large preview) Typographic Scale in Figma
You’ve been there before. You need to look up the right values for a typographic scale of your design, but you don’t have them at hand? Marvin Bruns’
Typescales and Scaale allow you to generate harmonious, responsive typographic scales, based on your choice of ratio — without leaving Figma. As always, you start with a
base-value, font-size increments and decrements from that size, and a multiplier.
Better typography with reliable typographic scale: Typescale helps you out when you need it.
Ah, you need to be able to set a custom scale, too? Sam Smith’s
Typescale does that for you (yep, it’s a different plugin with a similar name). Also, Textyles generates text styles with a font preview, and if you need to generate vertical rhythm by using a modular type scale, grid, and auto-layout, Heading-Helper has got your back, too.
Font Scale is helpful when you want to keep the proportions between your body text and headings the same, whether it’s on-screen or paper. Jeremy Church’s Type-Scale is an inspiration for this plugin. ( Large preview) Upload Images From Mobile in Figma
We all have been in the situation before where you need to place something on Figma, perhaps just as a sketch or brainstorming session, so you would take a picture, send it to yourself via email, and then paste it in.
Mobile-Upload allows you to upload photos straight into Figma.
Mobile upload it’s no longer necessary. With the plugin, you can take a picture with your phone upload it directly to Figma. This is quite useful for notebook sketches and brainstorming sessions. Utility Plugins in Figma
Have you ever lost resolution when bringing a large image into Figma? Or been frustrated at not being able to input a
spacing value for your layers? Or maybe you’ve been unable to resize a frame independently of its contents? Yuan Qing Lim, product designer at Shopify, developed nine useful plugins that solve issues like these. Utility Plugins for more effective work in Figma.
With the plugins, you can move layers with pixel precision, reisze frames without also resizing their contents, copy a component, insert unblurred large images (beyond the 4096 pixels limitation) and make quick and precise selections.
And if you need a bit more guidance or inspiration, Louis Ouriach has created a
best practice advice on how to structure frames in your files to ensure handoff is as smooth as butter. Wireframing and Prototyping in Figma
When you are just planning your design, it might come in handy to use wireframing tools to just get a sense of what you are going to design in the first place.
For wireframing in Figma, no conversation will escape the mention of
AutoFlow. The plugin allows you to select objects and it will automatically draw an arrow to connect them. A great little helper to display and explain ideas! Autoflow makes it easy to draw user flows. Wireframe provides a large set of wireframes, for user flow, prototypes and basic structures. The wireframe components are divided into categories. All files are SVGs, so you can easily edit them for your needs. Everything for wireframing: Wireframe Figma plugin.
However, sometimes after creating a design, you might want to go back to the wireframe to iterate a bit more, or perhaps create a slightly different flow for your design.
Wire Box can be useful for these situtions. It converts your designs from high-fidelity mock-ups to low-fidelity mock-ups, so you can then focus on the overall architecture rather than the fine details of the UI. When you need to go back to the wireframing whiteboard: Wire-Box.
Finally, you can also use
oblique for creating quick shadows, 3D depth and visual perspective, and Wireframer Figma plugin to generate placeholder text for wireframes with just one click. Conclusion
In this article, we explored a myriad of Figma tools, plugins and resources that you can use to make your design process easier. There is still a lot that we have not covered but you can explore them on the Figma community
here or share your favorite ones in the comments below! Further Resources Other slots empire bonus codes
Wow, you’ve made it so far! Well, if you are looking for similar posts, please check other round-ups we’ve published earlier:
And if that’s not enough, you can always
subscribe to our newsletter so you don’t miss the next ones. Thanks for being… smashing, of course! ;-)
(vf, yk, il, cm)