Helpful Figma Plugins And Instruments

No Comments

There are actually 1000’s of Figma plugins on the market. Which of them do you employ? How typically do you employ them? We’ve scouted for a number of the helpful ones, and we hope that those listed under will provide help to enhance your workflow. Whether or not you’re simply beginning out with Figma or have been utilizing it for a great whereas now, this publish provides you with simply sufficient tips to make your design course of quicker and smoother.

Desk of Contents

Under you’ll discover fast jumps to particular plugins and guides chances are you’ll want. Scroll down for a normal overview or skip the desk of contents.

3D views
auto renaming
model logos
clear up earlier than handoff
group in a grid
content material placeholders
colour palettes
curve your textual content
design tokens
design techniques
system mock-ups
exporting, exporting 2
file construction
fonts preview
Google Fonts
Google Sheets sync
HTML electronic mail templates
interactive elements
title conventions
take away backgrounds
responsive design and testing
reverse the order
shapes and SVG
slide deck
desk generator
wayfinding template
textual content alternative
tracing pictures
sort scale
add pictures from cellular
wireframing and prototyping

When you’re a developer, you should utilize this publish as a Wiki for Figma plugins. Additionally, please examine different round-ups we’ve revealed earlier:

Entrance-end boilerplates
CSS auditing instruments
CSS mills
Accessible Entrance-end Parts
VS code extensions
Velocity Up Your Workflow With Figma Plugins.

And if that’s not sufficient, you possibly can at all times subscribe to our publication so that you don’t miss the following ones.

3D Views and Views in Figma

Vectary 3D Components makes eveything just a bit bit extra spatial. It’s one of many simpler methods of including 3D mockups to your designs, in addition to add layers, wrapping and transforms. You may place your Figma design right into a most well-liked 3D mockup or create your {custom} 3D ingredient. You may take a better take a look at the thorough information and video concerning the plugin to get began.

Moreover, Figmockups and Clay Mockups 3D embody a bigger repository of 3D mock-ups, and Fig3D converts objects into 3D fashions, and you may even group shapes and transfer them to 3D fashions collectively.

Accessibility in Figma

All of us need to design higher and inclusive experiences, however generally we is perhaps forgetting about simply the proper colour distinction, or a correct tab order. Fortunately, there are many Figma plugins for accessibility.

Stark is a full powerhouse on every part accessibility. It consists of distinction checking and imaginative and prescient simulators, and it additionally permits you to reorder your sequences in focus order. It additionally shows the distinction ratio for any two objects that you choose. Alternatively, you may as well use Distinction as effectively.

For accessible colour palettes, is a dependable and complex device that permits you to create, preserve, sync and take a look at colour palettes and their variations. It’s actually tough to think about any Figma setup that doesn’t have this plugin put in!

If it’s essential take a look at how a unique font measurement will influence your structure, Textual content Resizer lets you see what precisely occurs with elevated or decreased font sizes.

Animation Editor in Figma

It shouldn’t be a giant revelation that creating animations in Figma doesn’t actually require refined exterior instruments like Adobe After Results. With Figmotion, you could have a complicated animation device proper at your fingertips. You choose a body, add an animation, after which navigate the timeframe by way of a time deal with — with the choice to replace easing, keyframes and anchor factors.

When you’d prefer to dive a bit deeper into animation with Figma, a information to including animation to your designs in Figma exhibits your complete workshop, and numerous choices you could have, step-by-step.

Annotations Made Simple in Figma

How do you normally deal with annotations when working with Figma? We got here throughout two annotation kits that make communication on a design so much smoother and fewer liable to misunderstandings.

Certainly one of them is Annotation Package 2.0: Quite a lot of sticky notes and measuring strains and instruments make it straightforward so as to add context and annotations on your group members as you’re working.

The A11y Annotation Package focuses on accessibility issues that designers may need to share with builders when handing off a design. Whether or not it’s including callouts for parts, indicating focus order, or specifying keyboard interactions, the equipment interprets a number of the typically cryptic WCAG wording into easy-to-use stickers that you should utilize to focus on key components of the web page. All elements are pre-filled with the proper CSS or HTML parts.

Annotations With Redlines in Figma

Annotating a design with detailed measurements and specs to assist the builders in cost make sense of all of it could be a time-consuming course of. Redlines is right here to alter that. The plugin helps you shortly measure and plot dimensions of any chosen object. All it’s essential do is choose a number of layers, customise the redline settings, and select a redline choice to plot.

Auto Rename Frames and Layers in Figma

In terms of organizing your design recordsdata, Rename it has received your again. You may batch rename your frames and layers. It’s also possible to rename a number of layers directly by making use of {custom} filters. If you wish to convert the layer title case from uppercase to lowercase and even camel case, you should utilize %* with a mix of letters to transform.

Avatars for Design Mockups in Figma

Generally we have to plug in a bit extra than simply textual content strings, and maybe we’d like a number of extra choices for our avatars. That’s the place UI Faces may also help.

All avatars are collected from numerous sources (they’re at all times supplied), and they are often filtered by age, gender and emotion, however after all it’s essential examine the supply and the license earlier than really utilizing it. Moreover, check out Person Profiles.

Model Logos Embedding in Figma

Maybe you’d prefer to show some model logos in critiques or testimonials, so how would you go round discovering all the proper logos? BrandFetch helps you simply insert model belongings into your design with out leaving your Figma window. The plugin has a big library of (actually) hundreds of thousands of logos out there at your fingertips. There may be additionally a searchable database so that you can discover what you might be in search of.

Charts Embedding in Figma

Your design course of simply received a bit much less nerve-racking. With Chart, you possibly can create numerous charts utilizing actual or random knowledge simply. The plugin helps copy and paste from Excel, Google sheet, Numbers and it can also sync with Google Sheets and distant JSON. Alternatively, you may as well import CSV and JSON recordsdata.

One other plugin with an analogous however barely totally different title is the Charts Figma plugin. With it, you possibly can create dashboards and displays or just about some other sort of knowledge visualization. The plugin generates editable charts in your Figma design from easy bar charts to extra complicated heatmaps. It’s also possible to discover an in depth information on learn how to use the plugin.

Clear Up A Messy Body in Figma

Maybe you’ve dropped a number of dozens of icons in a body, so how would you prepare them in a wise order? Clearly, we wouldn’t do such a process manually. That’s the place LilGrid may also help.

The little helper takes parts and arranges them right into a grid routinely. You simply want to pick out what you’d like to prepare, hit “Set up to Grid” and the device takes care of the remainder, rearranging solely top-level parts in your web page. Clearly, there’s a one-step undo if it’s essential restore the preliminary state.

Clear Figma Tasks Earlier than Handoff

Hidden layers, single-layer teams, X and Y positions that aren’t fairly pixel-perfect — the Clear Doc plugin takes care of little flaws like these so that you don’t must. An amazing little helper to shine up your Figma mission earlier than handoff.

Content material Placeholders in Figma

With the Content material Reel plugin, you possibly can design layouts shortly and simply through the use of textual content strings, pictures, icons and avatars from the identical device. You may search or flick thru the already supplied set of knowledge, then add them to your designs or create from scratch.

The plugin additionally allows you to create your individual textual content strings, add as much as 20 pictures, and make your workflow simpler and smoother by pinning your regularly used content material on your house display screen.

It’s also possible to run a Random Title Generator to populate random names into your mock-up.

Coloration Palettes in Figma

Understanding gradients, palettes, colour idea and psychology are important to creating nice visible designs. Figma has loads of plugins that take a bulk of this work off your shoulders.

Coloration Palette offers you with an ideal colour palette on your tasks. You may select from an enormous library of palettes or seek for a selected colour code, title or quantity to use to your design.

Palette by Dustin Mierau is beneficial while you need to generate a colour palette from pictures. This plugin makes use of machine studying that will help you generate a colour palette that can finest suit your mission. You may choose as much as 5 shapes and the plugin will assist fill within the shapes with colours becoming on your palette.

When designing round a picture, making the proper colour selection is less complicated with the Picture Palette plugin. It makes use of any picture that you choose and generates a colour palette from it by choosing the 5 most outstanding colours from the picture utilizing a median minimize algorithm with a excessive stage of accuracy.

With UI Gradients and Internet Gradients, you don’t have to create or choose gradients one after the other, however as a substitute, you possibly can add a number of gradients to teams, texts and frames with only a single click on.

Curve Your Textual content in Figma

With the Arc plugin, you possibly can curve your textual content upwards, downwards, and even right into a circle. The plugin provides a further toolbar for controlling the bending — it’s one other query although how builders would implement it.

Design Tokens in Figma

One other Figma plugin you may need to add to your toolkit comes from Lukas Oppermann. When you’re uninterested in the trouble that working with design tokens normally brings alongside, the Design Token plugin does the job for you: kinds and tokens are exported and despatched to a GitHub repository and tokens are routinely transformed utilizing type dictionary. No want so that you can go away Figma. An actual timesaver.

Design Programs With Figma

Think about you’re making a change in your mission’s design system, and it’s instantly cascading by your Figma mission. The Design System Supervisor plugin for Figma makes it doable.

The plugin allows you to outline or replace themeable design tokens in a single single panel, handle chosen layers grouped by type, and populate a design with actual textual content or picture content material. To convey your mission to life, you possibly can programatically entry the design tokens from the GraphQL API otherwise you export them within the format of your selection (CSS, Much less, Sass, JSON, YAML, Js, Swift, and Android are supported). A wise answer that makes coping with design techniques much more sensible.

Machine Mockups in Figma

The standard of your presentation as a designer is nearly as essential because the design itself. With over 700 system mock-ups scenes, Mockuuups Studio helps you create mockups for merchandise, visible content material, or advertising supplies with ease and effectivity. You may watch an intensive walkthrough video on learn how to use it.

Normally mock-ups solely look nicer when a tool is displayed in a human’s hand, and that is the place All palms mockup generator may also help. It consists of a big and numerous assortment of palms of all shades, sizes and styles. Choose a body, select a hand and your designs shall be imported into the mockup, all inside Figma. You may evaluation the full assortment of palms as effectively.

Exporting Figma to HTML, CSS, React

HTML <> Figma permits you to export your Figma designs to an HTML prototype. You may choose particular person layers, or enter an URL you’d prefer to import, and the plugin will import precise kinds instantly. There’s additionally a Chrome extension that captures an online web page and imports it as editable Figma layers. Within the background, it generates a web page.builder.json file which has all of the CSS properties of the present web page.

There are some limitations although as not all ingredient varieties and CSS properties are supported. Additionally, it is price holding in thoughts that every one fonts must be uploaded to Figma or fallback fonts shall be used. Nonetheless, the plugin is open-source, has a big group round it, and the creators are actively sustaining it.

Alternatively, there may be additionally an HTML Generator that helps Google Fonts, has devoted export choices and generates HTML, CSS, picture belongings and SCSS code and Figma To HTML. And when you want one thing extra refined, Anima creates prototypes and converts them to HTML, CSS and React code — with none dependencies. In actual fact, you possibly can create interactive prototypes, responsive designs and reusable React elements out of the field. (The plugin has a free tier, however you will have to join the $31 tier to export the code).

Exporting Figma to Vue.js

If you wish to take away a number of the friction that turning a Figma prototype right into a working software can convey alongside, Klaus Schaefer’s open-source plugin Figma-Low-Code is for you. It allows you to use Figma designs instantly in Vue.js purposes.

This low-code strategy doesn’t solely cut back the hand-off time between designers and builders in addition to the quantity of front-end code, but additionally ensures that the Figma design stays the one supply of fact. The thought is that you just design the prototype in Figma, then use the plugin so as to add knowledge and methodology binding. When you’ve performed that, you should utilize your favourite code editor to implement enterprise logic, and — ta-daa! — your software is prepared for deployment. Adjustments you make to the Figma file are routinely propagated to the net app.

E mail Templates in Figma

There aren’t many people who find themselves very keen on constructing HTML Emails, however when designing one, we higher use some helpful little plugins to make the developer’s work slightly bit simpler. In actual fact, there’s a detailed information on designing emails in Figma that covers your complete workflow of transport model new electronic mail designs from scratch.

In case you are in search of responsive, production-ready HTML emails for Figma, Emailify provides you with dozens of configurable content material modules, help you customise your textual content, pictures, kinds and auto-layout settings amongst different options, with no different APIs, apps, or web sites required.

When you aren’t fearful of the concept of HTML E mail code being generated for you, E mail Templates & Code works with the Marka plugin to really produce HTML code. You may have customizable emails with designs for newsletters, advertising electronic mail and blog-style templates. Additionally, there are many customizable designs there as effectively.

Excellent File Construction in Figma

Everyone knows that it may be onerous to consider Figma file construction while you’re fully absorbed in getting all these little UI particulars proper within the design you’re at present engaged on. Nevertheless, when you hold file construction in thoughts proper from the very starting, you possibly can be certain that handoff shall be buttery easy. And also you’ll save your self a number of cleansing up work as soon as the deadline comes nearer. Luis Ouriach revealed a useful best-practice information for structuring your frames in Figma — with constant naming conventions, descriptive elements, and constant spacing.

Fonts Preview in Figma

Switching between typefaces manually could be a little bit tiring, so clearly there are Figma helpers for that. Higher Font Picker and Font Preview assist you choose fonts with a preview.

Google Fonts Pairings for Figma

When you use Google Fonts, Google Font Pairings can come in useful, too. You will get began at Figma’s Google Fonts web page. Every of the fonts comes with a tiny sort specimen to get an honest preview of the type and really feel of the typefaces used.

Icons Embedding in Figma

Having a large assortment of each doable icon on the market in a single place is arguably probably the greatest plugin concepts ever. Figma has plugins that comprise icon units in a number of kinds for any sort of design mission.

Icons8 offers you with a big assortment of constant icons with out having to go away your Figma board. It has a library of 120,000+ icons with over 32 well-liked design kinds, searchable and categorized assortment, all out there in PNG or SVG.

Iconscout permits you to insert hundreds of thousands of high-quality icons, illustrations, and 3D into Figma. In a designer mode, you possibly can choose your favourite designer and photographer and entry their sources instantly with out looking in your complete library.

Illustrations Embedding in Figma

Illustrate with a vector software program, then import it into your design, proper? You don’t must do it on a regular basis as Figma comes with loads of illustration plugins.

With Blush, you possibly can create or mix-and-match illustrations custom-made to your tasks. It’s also possible to generate random compositions; plus, new illustrations are being added each week. SVGs and high-resolution pictures can be found on a paid plan.

For beautiful icons and illustrations, take a better take a look at the Free Common Illustration library, which incorporates top quality free illustrations launched beneath a Inventive Commons license.

If you wish to add a human illustration to your web site, Humaaans offers you with already pre-made illustrations of funky and hip individuals. You may browse from a gallery or seek for a selected area of interest or class.

Moreover, you should utilize Storyset with 100s of illustrated ideas out there as off-the-shelf illustrations. It’s also possible to edit the kinds, colours, and background. Plus, you may as well animate the illustrations.

Copy-Paste And Sync Google Sheets in Figma

Very often, copy-pasting knowledge from Google Docs into Figma is sort of time-consuming and irritating. Google Sheet is a helpful plugin that quickens the import of your Google Sheets to Figma. As soon as you put in it, you possibly can fetch and sync knowledge out of your Google Sheets. There may be additionally a documentation with all of the wonderful particulars on learn how to arrange a correct sheet construction and the way Figma layers must be named to keep away from additional work — in addition to some examples so that you can get began.

Interactive Parts And Variants in Figma

A number of weeks in the past, Figma launched a beta model of their Interactive Parts characteristic that permits you to create interactive parts that routinely change between variants (a button altering from hover to a pressed state, for instance). What may look like slightly element, seems to cut back the quantity of frames and connections you normally must prototype enter fields like checkboxes or toggles tremendously.

To dive in deeper into the brand new characteristic, Steve Ruiz summarized what it’s able to and what may be achieved with it when you assume exterior the field (a Minesweeper or Battleship recreation working in Figma, anybody?). One other nice learn: Rodrigo Osornio explored the benefits and prospects which Interactive Parts brings alongside for micro interactions corresponding to enter fields, loaders, totally different sorts of buttons, dropdowns, and subscribe elements.

Talking of elements: Luke Cardoni exhibits how he managed to create a single, content-adaptable, totally customizable, and simply maintainable part with 3,360 variants that serves each doable mixture of settings for textual content enter. A mammoth mission that illustrates the advantages of Figma’s Variants characteristic.

Format Grid in Figma

We regularly depend on grids to create design techniques the place each single interface part is correctly aligned. So it shouldn’t come as a giant shock that there isn’t any scarcity in structure grid plugins for Figma. Grids Generator permits you to apply a household of varied grid type configurations to layouts. Information Mate is barely extra versatile: it offers shortcuts for generally used grids and a manner so as to add a {custom} grid do you have to want it.

Upon getting a grid in place, you may need to snap your elements to it. Snap to Grid not solely creates a {custom} grid, but additionally arranges parts on the grid by organizing every object routinely. When the plugin is working, the canvas parts will snap to the grid when shifting and scaling. Andreslav Koslov exhibits how this plugin works in a 3-min video. It’s also possible to use keyboard shortcuts Alt + Cmd + P to snap all objects to grid when Figma is on-line.

Maps Embedding in Figma

Downloading maps on your mission doesn’t must be a protracted course of as a result of Mapsicle by Chris Arvin may also help you to simply insert maps into your Figma designs. The plugin permits you to set your map to a selected location, latitude and longitude which you need on your designs, and voilà, it provides simply the proper snapshot into your design.

Nevertheless, when you wanted a SVG map of a selected nation or area on your design, the Vector Maps Plugin can become very useful. You may actually browse for international locations or areas and insert them instantly into your Figma design with single click on. The maps may also be downloaded as SVG or PDF by way of

Title Conventions in Figma

We’ve all been there: If you’re in a rush, naming conventions are a element that usually doesn’t get the eye it deserves. And earlier than you discover it, you find yourself with a large number of various formatting kinds on your web page, body, part, and layer names.

The Namespaces plugin places an finish to the chaos and neatly names your belongings following a scheme that is smart. Additionally nice to unify totally different naming conventions when engaged on a shared file along with others.

In fact all of us need to be well-organized, however generally we is perhaps just a bit bit distracting when naming our frames. That is when Figma Exporter may also help. It lets you choose the naming conference you need on your exported recordsdata: kebab-case, snake_case or camelCase. The remainder shall be performed routinely!

Notepad for Fast Notes in Figma

When you ever needed to have a devoted house in Figma to take notes, concepts and feedback whereas working, Notepad by Dustin Mierau might be what you had been in search of. Notes are routinely saved along with your paperwork and can be found to different editors. In a manner, you should utilize Notepad as a shared house for documenting your mission along with your group. As a facet word, it’s essential reopen Notes to see modifications made by different editors if you’re working collaboratively.

Patterns In Your Figma Designs

All the pieces is barely higher with patterns! Whereas creating fundamental patterns is normally fairly simple, creating {custom} patterns is perhaps a difficult and intense course of, and that’s the place Figma’s patterns plug-ins save the day.

The Sample Hero plugin makes inserts your {custom} parts right into a grid and repeats them to kind a sample. You may repeat or shuffle the patterns, create situations and likewise work with a number of templates. If it’s essential make a sample, this can be a good possibility to make use of.

Alternatively, Hero Patterns is a group of SVG background patterns. To create a novel set for your self, you possibly can combine and match totally different patterns to provide you with a fascinating sample.

There are far more patterns plugins in Figma, so you may get something from confetti patterns to trippy generated graphics and geometric shapes.

If it’s essential arrange some form of a dot grid sample in your mock-up, Dot Grid will automate the duty for you. With the device, you possibly can simply generate stunning dot grids to function guides all through your design course of on Figma with customizable grid width, grid top, dot measurement, hole, and dot colours.

Images Embedding in Figma

You don’t have to go away Figma to get {custom} photographic belongings on your mission. In fact, Unsplash is everybody’s go-to web page for high-res pictures and now it’s a plugin on Figma.

Take away Backgrounds in Figma

Take away backgrounds permits you to just about do exactly that: take away backgrounds of pictures simply. No must manually edit the background of pictures earlier than including them to your design. A caveat: you will have a take account to make use of the plugin.

Responsive Design And Testing in Figma

Not many individuals resize packing containers for dwelling, however as designers, that’s just about what we have now to do each once in a while. In Figma, Breakpoints is among the many plugins for testing responsive design. It offers a resizable occasion of a body, and works with out the plugin window — so everybody in your group can discover the responsive habits of the body with out having the plugin put in.

Alternatively, you may as well use Responsify, which lets you choose any body and set {custom} system sizes, so you possibly can preview what the web site or app will look in that exact view. Responsive is analogous, and it permits you to take a look at particular edge instances of your responsive structure by clicking on the enter frames within the plugin. Nothing groundbreaking, however helpful!

Reverse The Order Of Layers

Automating small, tedious actions is at all times a great factor to save lots of you treasured time and keep targeted on what actually issues. In terms of reversing the order of a number of layers, the Reverse Layer Order plugin may develop into your new finest good friend. Simply as its title implies, it’ll reverse the order of two or extra layers throughout the identical dad or mum. All it’s essential do is choose them and run the plugin.

Shapes And SVG in Figma

Creating fundamental shapes is straightforward. Nevertheless, creating complicated shapes may take beneficial time you could’t actually afford to lose when engaged on a mission. Figma’s plugins throughout shapes and SVG could make your work simpler, with a wide range of shapes to select from.

Blobs helps you enhance the aesthetics of your design. With blobs, you possibly can create and add natural shapes into your Figma designs utilizing two parameters: complexity and distinction. It’s also possible to management how distinctive a form is in addition to the variety of factors it has.

Want waves? The Get Waves plugin helps you generate SVG wave patterns on your designs. It may be fairly helpful when working with charts, graphs or designs with crests and troughs. You simply have to decide on a curve, alter the complexity and randomize.

In case you are attempting to create a wave and curve sample on your design, the Wave & Curve plugin by Andreslav Kozlov may also help you generate waves in numerous patterns. It’s also possible to select the route of the waves both Prime and Backside, Prime, or Backside.

Lastly, To Path helps you place issues on a path and might work with texts, shapes, objects, and elements. To curve textual content round a path (a circle, for instance), you possibly can set up the plugin, then take away circle opacity, choose textual content, and circle, after which use the plugin to hyperlink each objects and watch the magic occur.

Another options of the plugin embody repeating shapes alongside any path, enhancing the unique form or textual content and reflecting modifications in real-time (whereas the plugin is open), and enhancing the trail afterwards, and once more, watch the linked objects change.

Flip Your Designs Into A Slide Deck

So you could have a Figma design that you just need to current to a shopper, your boss, or your group? Pitchdeck is right here that will help you do exactly that. The plugin turns your design into animated slide decks or, when you favor, exports it for PowerPoint, Keynote, or Google. PDF export can be supported, in addition to a variety of helpful options like webcam overlay, video embeds, speaker notes, and extra. It’s even doable to document your presentation as a video with microphone audio.

Desk Generator in Figma

Though designing knowledge tables may be fairly time-consuming, the Desk Generator plugin makes this simpler by serving to you automate coping with tabular knowledge. All you want for desk era is to repeat and paste the info (at present in CSV format).

Alternatively, you may as well use Desk-Paste to stick knowledge from an Excel spreadsheets into styled desk rows, or Desk-Creator to create resizabled custom-styled tables. Somewhat bonus: you may as well replace all tables anytime your design modifications.

Templates For Wayfinding in Figma

First, there’s just one particular person on the Figma mission board, then one other one joins in, and shortly you’ll see the cursors of designers, builders, mission managers, content material designers, researchers, and plenty of others unfold throughout the display screen. You’ve in all probability skilled this situation earlier than. However did all of those individuals really discover the data they wanted? Did they must dig round or was it simply discoverable?

The group at Shopify took these questions as an event to rethink the construction of their Figma playground and guarantee it meets the various wants of groups throughout the corporate. Other than sharing the method in an article, they distilled their findings right into a mission index template you could obtain and use straight away. A helpful little helper to offer everybody concerned in your mission the context they want, once they want it.

Textual content Alternative in Figma

Generally you’re in a state of affairs the place it’s essential substitute a chunk of textual content in your Figma mockup. No huge deal — effectively, except that piece of textual content seems in a number of situations throughout the design. A improbable little time-saver for these events is Content material Buddy.

As an alternative of getting to search for all situations, elements, frames, and teams one after the other and altering the textual content manually, Content material Buddy does the heavy lifting for you: It offers you with a listing of every distinctive textual content content material in your design so that you just solely want to pick out the gadgets you need to substitute and enter the brand new alternative textual content — as soon as.

Tracing Photos in Figma

Convert any white and black bitmap pictures to vectors utilizing the Picture Tracer plugin. This plugin saves you the time you’d manually hint with the pen device or use Illustrator to transform to vectors. On working the plugin, you will notice a console on the window with choices that will help you make edits to your style.

Typographic Scale in Figma

You’ve been there earlier than. You might want to search for the proper values for a typographic scale of your design, however you do not have them at hand? Marvin Bruns’ Typescales and Scaale help you generate harmonious, responsive typographic scales, based mostly in your selection of ratio — with out leaving Figma. As at all times, you begin with a base-value, font-size increments and decrements from that measurement, and a multiplier.

Ah, you want to have the ability to set a {custom} scale, too? Sam Smith’s Typescale does that for you (yep, it’s a unique plugin with an analogous title). Additionally, Textyles generates textual content kinds with a font preview, and if it’s essential generate vertical rhythm through the use of a modular sort scale, grid, and auto-layout, Heading-Helper has received your again, too.

Lastly, Font Scale is useful while you need to hold the proportions between your physique textual content and headings the identical, whether or not it’s on-screen or paper. Jeremy Church’s Sort-Scale is an inspiration for this plugin.

Add Photos From Cellular in Figma

All of us have been within the state of affairs earlier than the place it’s essential place one thing on Figma, maybe simply as a sketch or brainstorming session, so you’ll take an image, ship it to your self by way of electronic mail, after which paste it in.

With Cellular add it’s now not mandatory. With the plugin, you possibly can take an image along with your telephone add it on to Figma. That is fairly helpful for pocket book sketches and brainstorming classes.

Utility Plugins in Figma

Have you ever ever misplaced decision when bringing a big picture into Figma? Or been annoyed at not having the ability to enter a spacing worth on your layers? Or possibly you’ve been unable to resize a body independently of its contents? Yuan Qing Lim, product designer at Shopify, developed 9 helpful plugins that resolve points like these.

With the plugins, you possibly can transfer layers with pixel precision, reisze frames with out additionally resizing their contents, copy a part, insert unblurred giant pictures (past the 4096 pixels limitation) and make fast and exact alternatives.

And when you want a bit extra steering or inspiration, Louis Ouriach has created a finest observe recommendation on learn how to construction frames in your recordsdata to make sure handoff is as easy as butter.

Wireframing and Prototyping in Figma

If you end up simply planning your design, it’d come in useful to make use of wireframing instruments to only get a way of what you’re going to design within the first place.

For wireframing in Figma, no dialog will escape the point out of AutoFlow. The plugin permits you to choose objects and it’ll routinely draw an arrow to attach them. An amazing little helper to show and clarify concepts!

Wireframe offers a big set of wireframes, for consumer move, prototypes and fundamental buildings. The wireframe elements are divided into classes. All recordsdata are SVGs, so you possibly can simply edit them on your wants.

Nevertheless, generally after making a design, you may need to return to the wireframe to iterate a bit extra, or maybe create a barely totally different move on your design. Wire Field may be helpful for these situtions. It converts your designs from high-fidelity mock-ups to low-fidelity mock-ups, so you possibly can then concentrate on the general structure quite than the wonderful particulars of the UI.

Lastly, you may as well use indirect for creating fast shadows, 3D depth and visible perspective, and Wireframer Figma plugin to generate placeholder textual content for wireframes with only one click on.


On this article, we explored a myriad of Figma instruments, plugins and sources that you should utilize to make your design course of simpler. There may be nonetheless so much that we have now not coated however you possibly can discover them on the Figma group right here or share your favourite ones within the feedback under!

Additional Sources

Free Figma Sources, Instruments and Templates
Velocity Up Workflow With Figma Plugins
Neighborhood suggestions for Figma Plugins

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment