# data[].attributes.attachment_link.title
Figma - Color Designer | The plugin generates shades, tints, and color harmonies b...

# data[].attributes.attachment_link.description
Figma Community plugin - The plugin generates shades, tints, and color harmonies based on select layers or local styles. You can also create a stepped gradient between two colors. Main Features: G...

# data[].attributes.attachment_link.title
Figma - A11y - Color Contrast Checker | Ensure your text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines)...

# data[].attributes.attachment_link.description
Figma Community plugin — Ensure your text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines) standards. This plugin checks the color contrast ratio of all visible text in a frame, and it provides feedback on whether it meets WCAG’s AA and/or AAA level compliance. It al…

# data[].attributes.attachment_link.title
Figma - LilGrid | LilGrid takes elements and arranges them into a grid automatically. Select elements to organize...

# data[].attributes.attachment_link.description
Figma Community plugin — LilGrid takes elements and arranges them into a grid automatically. Select elements to organize, or leave nothing selected to let it organize everything on your page. It only affects top-level elements on your page. For example it’s great to use on pages full of icons for…

# data[].attributes.attachment_link.title
Figma - Figmockups | Ever needed that one device mockup but you couldn’t find it or didn’t have enough time to create ...

# data[].attributes.attachment_link.description
Figma Community plugin — Ever needed that one device mockup but you couldn’t find it or didn’t have enough time to create it? We’ve got you covered! Just install our plugin and generate mockups for all your UI & presentation needs instantly. Get started in 3 simple steps:
Launch up our pluginP…

# data[].attributes.attachment_link.title
Figma - Fig3D | Instantly convert your shapes, icons, logos and UI designs to 3D models and get a good render. Al...

# data[].attributes.attachment_link.description
Figma Community plugin - Instantly convert your shapes, icons, logos and UI designs to 3D models and get a good render. All in Figma. Features: Convert shape and groups to 3D by extruding in Z - plane.Render realistic images with soft-shadows from the 3D models.Control view direction for the output render.Adjust height ...

# data[].attributes.attachment_link.title
Figma - Geenes | Geenes.app is a free app where you can easily create and maintain full colour palettes and their ...

# data[].attributes.attachment_link.description
Figma Community plugin — Geenes.app is a free app where you can easily create and maintain full colour palettes and their variations.
Seamlessly synch them as styles into Figma with this plugin. Do all the changes you need on Geenes.app and this plugin will automatically add, update or remove colou…

# data[].attributes.attachment_link.title
Figma - Stark | The suite of integrated accessibility tools for your product design and development team * Making...

# data[].attributes.attachment_link.description
Figma Community plugin - The suite of integrated accessibility tools for your product design and development team * Making the world's products accessible.

# data[].attributes.attachment_link.readable_text
Design layouts more efficiently by pulling text strings, images, and icons from one palette. Content Reel lets you create custom content and share it with other Figma users. Collaboration has never been easier! Content:
Browse or search content to find published collections of text strings, images, and icons. Having trouble finding what you need from existing content? You can create your own text and image content by using Add.
Add:
Create text categories and populate them with your own text strings. You can also upload up to 20 PNGs or JPEGs to create image content. As a creator, you may choose to share it publicly or keep it private. When you create content, it is automatically pinned to Home Screen for quick access (signed-in users only).
Customize Your Home screen:
Optimize your workflow by pinning the content that you use most to your home screen. Apply 1-click access to any content type with the switch of a toggle (signed-in users only). Drag and drop items on your home screen to suit your preferences.

How to use Content Reel:
Find content:
Access saved content from your Home Screen or navigate through the tabs to search or browse content. Pin it for ease of access to your Home screen.
Applying text content:
Select one or more text layers in your design to apply strings individually or apply them all. Use the original order provided or choose an order from the drop-down menu.
Applying image content:
Select one or more image layers or frames in your design, then apply the images individually or apply them all in random order.
Applying icon content:
Browse the collection or use the search bar to find an icon. Click on the icon or drag and drop it into your design. Change the format between glyph or SVG by clicking on the settings menu. You can also adjust the icon size to scale as needed. When using glyphs make sure the selected font is downloaded and installed in Figma.

Creating text and image content: Navigate to the Add tab, click Add, and select content type. Provide a Title that is relevant to your content. Set your content to Public or Private. See the terms and conditions regarding usage and rights.

-
Got more ideas?
Send them our way at  designtools@microsoft.com

Or join the Spectrum community at https://spectrum.chat/content-reel
www.contentreel.design Thanks:
This tool was created by the Design Tooling team for Microsoft Design. Thanks to Eugene Gavriloff, Wendy Hsu, Damien Aistrope, and Zann St Pierre.
Microsoft's Terms of Use Microsoft's Privacy Policy
-
© 2021 Microsoft. All rights are reserved. Use of this plug-in is subject to the Terms and Conditions.

# data[].attributes.attachment_link.title
Figma - Content Reel | Design layouts more efficiently by pulling text strings, images, and icons from one palette. Cont...

# data[].attributes.attachment_link.description
Figma Community plugin - Design layouts more efficiently by pulling text strings, images, and icons from one palette. Content Reel lets you create custom content and share it with other Figma users. Collaboration has never been easier! Content: Browse or search content to find published collections of text strings, imag...

# data[].attributes.attachment_link.title
Figma - Color Palettes | Find the best color palette from the huge list of best color palettes Fill beautiful color from ...

# data[].attributes.attachment_link.description
Figma Community plugin - 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 ...

# data[].attributes.attachment_link.title
Figma - Image Palette | Extracts a colour palette of 5 different colours from the selected images. Note: This uses a med...

# data[].attributes.attachment_link.description
Figma Community plugin - Extracts a colour palette of 5 different colours from the selected images. Note: This uses a median cut algorithm, which roughly approximates the most prominent different colours in the image. The algorithm is fast but can sometimes lead to unusual results, such as with low-colour images, images...

# data[].attributes.attachment_link.title
Figma - uiGradients | Adds gradients to groups, text and frames in single click. Simply select the element to apply gr...

# data[].attributes.attachment_link.description
Figma Community plugin - Adds gradients to groups, text and frames in single click. Simply select the element to apply gradient and run the plugin. Chose from 350+ gradients to add to frames, groups, and texts in a single click. Offical figma plugin for www.uigradients.com

# data[].attributes.attachment_link.description
Create tokens based themeable designs with Toolabs Design System Manager plugin, right from Figma!

# data[].attributes.attachment_link.title
Figma - Design Tokens | Export Figma styles and custom tokens to a style dictionary ready json or sync to github. Vote f...

# data[].attributes.attachment_link.description
Figma Community plugin - Export Figma styles and custom tokens to a style dictionary ready json or sync to github. Vote for us on ProductHunt Design Tokens You can create design tokens for the following properties: colorstypograhygridseffectssizesspacing (padding)radiibordersmotion Benefits ✅ Actively developed ✅ Compa...

# data[].attributes.attachment_link.title
Figma - Mockuuups Studio | Super-easy mockup generator with over 1000 various scenes. The plugin is packed with everything y...

# data[].attributes.attachment_link.description
Figma Community plugin - Super-easy mockup generator with over 1000 various scenes. The plugin is packed with everything you need to create product mockups, outstanding marketing materials, even visual content for social media or blog posts. Instant Preview Select a frame, and Mockuuups Studio takes care of the rest. T...

# data[].attributes.attachment_link.title
Figma - All Hands Mockup Generator | MetaLab x Nappy | Diversify your product mockups with the All Hands Mockups. This plugin allows you to drop your d...

# data[].attributes.attachment_link.description
Figma Community plugin - Diversify your product mockups with the All Hands Mockups. This plugin allows you to drop your designs into one of several hands in two easy steps. Simply choose your frame, choose a hand, and voilà, you have a beautiful (and inclusive) mockup to show off your work.

# data[].attributes.attachment_link.title
Figma - Figma to HTML, CSS, React & more! | Convert Figma designs to high quality, responsive HTML, CSS, React, Vue, and more * How does it...

# data[].attributes.attachment_link.description
Figma Community plugin - Convert Figma designs to high quality, responsive HTML, CSS, React, Vue, and more * How does it work * 1) Install the plugin 2) In Figma hit cmd+/ and search "html to figma" and hit enter 3) Select a layer you want to export, or enter a URL you want to import * Why?

# data[].attributes.attachment_link.title
Figma - Figma to HTML | Figma to html is a figma plugin that helps convert your figma design to code easily without loosi...

# data[].attributes.attachment_link.description
Figma Community plugin - Figma to html is a figma plugin that helps convert your figma design to code easily without loosing any bit of your design or colors. This is made possible using only the priniciples of good design and guide lines so as to get the so desired result of an exact replica of your design in code form....

# data[].attributes.attachment_link.title
Figma - HtmlGenerator | HtmlGenerator renders any selection into its HTML equivalent with its associated CSS, all indente...

# data[].attributes.attachment_link.description
Figma Community plugin - HtmlGenerator renders any selection into its HTML equivalent with its associated CSS, all indented and separated for you to copy and paste. Speeding up your conversion process much faster. Currently Featured NEW! In-app preview: Preview your selection in realtime HTML before exportingRevamped UI...

# data[].attributes.attachment_link.title
Figma - Anima - Figma to HTML, React & Vue code | Go from high fidelity prototypes to developer-friendly HTML, CSS, React and Vue. Create High fid...

# data[].attributes.attachment_link.description
Figma Community plugin - Go from high fidelity prototypes to developer-friendly HTML, CSS, React and Vue. Create High fidelity prototypes Responsive design: use breakpoints and pins to create a single prototype for all screen sizes.Live, interactive prototypes: add videos, animations, real input fields, hover effects, a...

# data[].attributes.attachment_link.title
GitHub - KlausSchaefers/figma-low-code: A repository to bootstrap Figma low code projects

# data[].attributes.attachment_link.description
Figma-Low-Code is an OpenSource project, that allows to use Figma designs directly in VUE.js applications. The low code approach reduces drastically the hand-off time between designers and developers, reduces front-end code and ensures that the Figma design stays the single source of truth.

# data[].attributes.attachment_link.readable_text
Now even though this article is related to design, I am not going to be talking about UI and UX design. This is more where I talk about the process we followed to design and ship beautiful-looking emails.
I was the sole designer on the project and handled everything from start to finish along with other people.

1. Product Managers: To understand the list of emails that had to be designed and the content of every email

2. Senior Designers and stakeholders: To get timely feedback on my designs and the design direction.

3. Engineers: To test if the emails end up looking exactly as intended on every device and breakpoint.

4. Illustrator: For the various illustrations that I used in all the emails.

This article is mainly for anyone, especially designers who want to create stunning-looking emails,

without compromising on design,

with a smooth workflow between designers and engineers,

without using paid and complex third-party tools.

Alright then, let's get started.

Unacademy is an online le arning platform where students in India can study for various competitive exams such as UPSE, IIT JEE, NEET, Banking, CA, and more.

The company hires educators who teach the classes LIVE and students can watch them at their own convenience. Students have to pay a subscription fee to access all the content the platform offers. Similar to Skillshare and Netflix.

So in my experience, there are two ways to go about designing and shipping emails to users.

Using an email builder like MailChimp or,

Manually coding it using a tool like MJML.

I'm not aware of any other ways. But these are the ones I am aware of.

Now we did not want to use a tool like MailChimp to create emails as we did not want to compromise on the design aspect. Email building tools are extremely limited when it comes to customization. Hence we decided not to go in that direction.

The other option was to code it. Sure we would ask the engineers to code it for us. But what we realized was that as the number of types of emails increased it would be very hard for the designers and developers to collaborate. We wanted a smooth workflow where neither the designers nor the developers would work too hard on a simple email.

So we started to look online for a few solutions and we came across one. We found this plugin for Figma called Marka Email Generator Plugin.

# data[].attributes.attachment_link.title
Designing Emails for Unacademy using Figma - Power of NoCode!

# data[].attributes.attachment_link.description
Now even though this article is related to design, I am not going to be talking about UI and UX design. This is more where I talk about the process we followed to design and ship beautiful-looking emails. I was the sole designer on the project and handled everything from start to finish along with other people.

# data[].attributes.attachment_link.title
Figma - Marka Email Generator | About the Plugin How to use: Create a framePlace content inside the frameSelect the frameRun plu...

# data[].attributes.attachment_link.description
Figma Community plugin - About the Plugin How to use: Create a framePlace content inside the frameSelect the frameRun pluginExport HTML template Plugin supports: Text objectsImagesButtonsRectanglesFrames with elements

# data[].attributes.attachment_link.title
Figma - Email Templates & Code 💌 | Responsive email templates and HTML code using auto layout and the Marka plugin, designed for you...

# data[].attributes.attachment_link.description
Figma Community file - Responsive email templates and HTML code using auto layout and the Marka plugin, designed for you 💌 Subscribe to my newsletter which uses the designs in this file ❤️ I wanted to improve my writing and decided to start a newsletter to share my monthly design snippets, instead of using existing t...

# data[].attributes.attachment_link.title
Figma - File structure best practice guide | Here’s my best practice advice on how to structure your Frames in your files to ensure handoff is...

# data[].attributes.attachment_link.description
Figma Community file — Here’s my best practice advice on how to structure your Frames in your files to ensure handoff is as smooth as butter. Let me know in the comments what you think 🎤

# data[].attributes.attachment_link.title
Figma - Font Preview | This plugin generates live previews for anything you type, right in the plugin window! Features:...

# data[].attributes.attachment_link.description
Figma Community plugin - This plugin generates live previews for anything you type, right in the plugin window! Features: Live preview in pluginSave favorite fonts in a separate tab, and they'll still be there when you reopen the pluginFilter & search for fonts so you don't have to scroll the giant listReactively lo...

# data[].attributes.attachment_link.title
Figma - Better Font Picker | Well... Like the name suggests, Better Font Picker helps you select fonts with a preview of how i...

# data[].attributes.attachment_link.description
Figma Community plugin - Well... Like the name suggests, Better Font Picker helps you select fonts with a preview of how it looks. Now you can skim through all those 1000s of fonts installed seamlessly as an alternative to the default font picker in figma!

# data[].attributes.attachment_link.title
Figma - A selection of Google Fonts | Selection of the best serif and sans-serif Google Fonts For your next WEB or PRINT project, you w...

# data[].attributes.attachment_link.description
Figma Community file - Selection of the best serif and sans-serif Google Fonts For your next WEB or PRINT project, you will find in this file nice selection of Google Fonts. Each of them with a tiny type specimen to get a good impression of the style and feeling of the typeface.

# data[].attributes.attachment_link.title
Figma - Icons8 Icons | Use one of the largest and most consistent icon collections around without ever needing to leave ...

# data[].attributes.attachment_link.description
Figma Community plugin - Use one of the largest and most consistent icon collections around without ever needing to leave Figma: 190,000 icons in 38 styles. Hand-crafted pixel-perfect PNG and SVG at your disposal. * We offer an extensive free tier. All we ask is for you to add a link back to icons8.com, crediting us in ...

# data[].attributes.attachment_link.title
Figma - Iconscout | Iconscout allows you to insert millions of high quality icons, illustrations and 3D right into Fi...

# data[].attributes.attachment_link.description
Figma Community plugin — Iconscout allows you to insert millions of high quality icons, illustrations and 3D right into Figma. It provides you an access to amazing features such as:
1. Get access to millions of high quality icons, illustrations and 3D from Iconscout.
2. Powerful search to find the…

# data[].attributes.attachment_link.title
Figma - Blush | Create and customize illustrations in your designs with Blush. Just choose a collection, pick a c...

# data[].attributes.attachment_link.description
Figma Community plugin - Create and customize illustrations in your designs with Blush. Just choose a collection, pick a composition, and place it on the canvas. You can keep playing with the variations in the illustration to create something unique that fits your brand. MIX-AND-MATCH Blush works with mixable elements, ...

# data[].attributes.attachment_link.title
Figma - Illustrations | Free Popular Illustration libraries for everyone, plugin allows you to insert high quality free i...

# data[].attributes.attachment_link.description
Figma Community plugin - Free Popular Illustration libraries for everyone, plugin allows you to insert high quality free illustrations right into Figma. Just drag and drop to add it on Figma. All the illustrations can be used freely under creative commons license, If you want more crazy stuff, just Follow us on Figma or ...

# data[].attributes.attachment_link.title
Figma - Humaaans for Figma | This plugin brings the amazing illustations library called Humaaans by Pablo Stanley to Figma. W...

# data[].attributes.attachment_link.description
Figma Community plugin - This plugin brings the amazing illustations library called Humaaans by Pablo Stanley to Figma. With Humaaans you can either use the already premade people illustrations or mix-&-match illustrations to create your own unique work. - Other plugins by @tkmadeit https://www.figma.com/c/plugin/7540...

# data[].attributes.attachment_link.title
Figma - Storyset by Freepik | Cool illustrations to power up your project! Storyset is the latest creation from Freepik, one of...

# data[].attributes.attachment_link.description
Figma Community plugin - Cool illustrations to power up your project! Storyset is the latest creation from Freepik, one of the main references in the free graphic resources market. Thousands of illustrated concepts, with editable colors and backgrounds, are available for download. All of them come in different styles, an...

# data[].attributes.attachment_link.title
Figma - Google Sheets Sync | Sync content from Google Sheets directly into your Figma file. This is not an official plugin cr...

# data[].attributes.attachment_link.description
Figma Community plugin - Sync content from Google Sheets directly into your Figma file. This is not an official plugin created by Google * It is simply created with ❤️ by David Williames If you want to support the continued development of this plugin, why not buy me a coffee at: buymeacoffee.com/davew STEP 1: Make sur...

# data[].attributes.attachment_link.title
Figma - Guide Mate | Guide Mate is a Figma plugin which helps you add complex guides to your design with ease. A great...

# data[].attributes.attachment_link.description
Figma Community plugin — Guide Mate is a Figma plugin which helps you add complex guides to your design with ease. A great companion for grid based design systems. Usage:
- Select a frame, group or shape.
- Open Guide Mate from the plugin menu.
- Click one of the icon in the shortcut panel on the…

# data[].attributes.attachment_link.title
Figma - Grids Generator | Apply any frame with grid styles configurations inspired from Google Chrome's element inspector. ...

# data[].attributes.attachment_link.description
Figma Community plugin - Apply any frame with grid styles configurations inspired from Google Chrome's element inspector. Each number is a multiplier of 4px.

# data[].attributes.attachment_link.title
Figma - Snap to Grid | Helper with which it is even easier to arrange elements on the grid! When the plugin works, the ...

# data[].attributes.attachment_link.description
Figma Community plugin - Helper with which it is even easier to arrange elements on the grid! When the plugin works, the canvas elements will snap to the grid when moving/scaling. How to use: 1. Launch the plugin and click on the launch icon (top, right). 2. Indicate the size of the grid.

# data[].attributes.attachment_link.title
Figma - Hero Patterns for Figma | This plugin brings the amazing collection of patterns called Hero patterns by Steve Schoger. They...

# data[].attributes.attachment_link.description
Figma Community plugin - This plugin brings the amazing collection of patterns called Hero patterns by Steve Schoger. They are a collection of repeatable SVG background patterns for you to use on your web or mobile projects. All you have to do is select a layer and customize the color of the patterns using the handy col...

# data[].attributes.attachment_link.title
Figma - Get Waves | Get Waves is a free SVG wave generator to make unique SVG waves for your next design. Choose a cu...

# data[].attributes.attachment_link.description
Figma Community plugin - Get Waves is a free SVG wave generator to make unique SVG waves for your next design. Choose a curve, adjust the complexity, randomize!

# data[].attributes.attachment_link.title
Figma - Wave & Сurve | With "Wave & Curve" you can easily create a variety of waves and interesting patterns! Four mode...

# data[].attributes.attachment_link.description
Figma Community plugin - With "Wave & Curve" you can easily create a variety of waves and interesting patterns! Four modes are supported*: - with two control points (cubic curve); - with one control point (quadratic curve). - Arc curve. - Square curve. You can choose the direction of the waves : Top and Bottom, Top, ...

# data[].attributes.attachment_link.title
Figma - To Path | ✨ 𝙋𝙪𝙩 𝙖𝙣𝙮 𝙤𝙗𝙟𝙚𝙘𝙩𝙨 𝙤𝙧 𝙩𝙚𝙭𝙩 𝙤𝙣 𝙖 𝙥𝙖𝙩𝙝!✨ 1. select a curve 2. select a shape, group, or text 3. hit...

# data[].attributes.attachment_link.description
Figma Community plugin - ✨ 𝙋𝙪𝙩 𝙖𝙣𝙮 𝙤𝙗𝙟𝙚𝙘𝙩𝙨 𝙤𝙧 𝙩𝙚𝙭𝙩 𝙤𝙣 𝙖 𝙥𝙖𝙩𝙝!✨ 1. select a curve 2. select a shape, group, or text 3. hit "link" and watch the magic* happen *Its janky code and its not actually magic ╭┈─────── ೄྀ࿐ ˊˎ- ╰┈➤ 𝙁𝙚𝙖𝙩𝙪𝙧𝙚𝙨 clone shapes to repeat along any path (eg circles)put text along any shape including cir...

# data[].attributes.attachment_link.title
Figma - Table Generator | Table Generator plugin automates the addition of tabular data. Copy paste the data(currently in s...

# data[].attributes.attachment_link.description
Figma Community plugin — Table Generator plugin automates the addition of tabular data. Copy paste the data(currently in supported CSV format) and that’s all, the table is generated. The plugin provides the custom options that can be configured to pre-define the table cell styles. For updates to th…

# data[].attributes.attachment_link.title
Figma - Table Creator | Create custom-styled tables which can be easily resized, edited and automatically adjust to conte...

# data[].attributes.attachment_link.description
Figma Community plugin - Create custom-styled tables which can be easily resized, edited and automatically adjust to content. Control the design of your tables by modifying the components. Update all tables, anytime your design changes. Use the plugin commands to make selecting columns and rows easier. Creating a table ...

# data[].attributes.attachment_link.title
Figma - Table Paste | Paste data from a spreadsheet into styled Figma table rows. Usage
In Figma, create a table row c...

# data[].attributes.attachment_link.description
Figma Community plugin — Paste data from a spreadsheet into styled Figma table rows. Usage
In Figma, create a table row component with a text box for each cellCreate a table in your mockup composed of these table row components, and select the table rows where you want the data appliedIn Excel, sel…

# data[].attributes.attachment_link.title
Figma - Image tracer | 'Image tracer' traces black & white bitmap images, and turns them into a vector layer. When ...

# data[].attributes.attachment_link.description
Figma Community plugin - 'Image tracer' traces black & white bitmap images, and turns them into a vector layer. When you run Image tracer; it will take whatever layers you have selected and combine them together into one image (regardless of if they're already a vector or not) - then it will convert it to 'black &am...

# data[].attributes.attachment_link.title
Figma - Heading Helper | Quickly generate vertical rhythm by using a modular type scale, grid, and auto-layout. Preview AT...

# data[].attributes.attachment_link.description
Figma Community plugin - Quickly generate vertical rhythm by using a modular type scale, grid, and auto-layout. Preview ATX headings using "#" Like this: # Heading 1 Lorem Ipsum ##### Heading 5 It goes up to Heading 5 What is vertical rhythm Modular type scales Modular type scales in ty...

# data[].attributes.attachment_link.title
Figma - Textyles | Textyles speeds up your typographic workflow by generating Text Styles quickly. Features:
- Gene...

# data[].attributes.attachment_link.description
Figma Community plugin — Textyles speeds up your typographic workflow by generating Text Styles quickly. Features:
- Generate Text Styles based on a modular type scale using rounded or exact values
- Start with a selected text layer to base styles on its properties
- Nickname the font you use and n…

# data[].attributes.attachment_link.title
Figma - Font Scale | Font Scale is a quick tool to generate a harmonious and consistent typography hierarchy. This is...

# data[].attributes.attachment_link.description
Figma Community plugin — Font Scale is a quick tool to generate a harmonious and consistent typography hierarchy. This is especially useful when you want to keep the prroportions between your body text and headings the same, whether it’s on screen or paper. Usage 1. Select a base size. For deskto…

# data[].attributes.attachment_link.title
Figma - Autoflow | Autoflow makes it easy to draw flows. Simply select 2 objects and a line will be magically drawn ...

# data[].attributes.attachment_link.description
Figma Community plugin - Autoflow makes it easy to draw flows. Simply select 2 objects and a line will be magically drawn between them. Run AutoflowSelect any 2 shapes whille holding down ⇧SHIFT and a line will be drawnKeep selecting until you're all wired up!

# data[].attributes.attachment_link.title
Figma - Wire Box | With the advent of design systems its become easier and easier to work in hi-fi designs quickly a...

# data[].attributes.attachment_link.description
Figma Community plugin — With the advent of design systems its become easier and easier to work in hi-fi designs quickly and easily. Sometimes, however, you need to step back into lo-fi wireframes. Wire Box lets you convert your designs back to to wires with one click, helping you and your team mat…

# data[].attributes.attachment_link.title
Figma - Wireframe | Free Popular Wireframes library for everyone, Wireframe plugin is the best Figma plugin for creat...

# data[].attributes.attachment_link.description
Figma Community plugin — Free Popular Wireframes library for everyone, Wireframe plugin is the best Figma plugin for creating beautiful wireframes, user flow, prototypes and basic structures, so no other kits, files or skills required! just drag and drop to add it on Figma, All the Wireframe can be…

# data[].attributes.attachment_link.title
Figma - Typescales | Quickly generate a simple typescale/modular scale.
This is an very early version. # What is a mo...

# data[].attributes.attachment_link.description
Figma Community plugin — Quickly generate a simple typescale/modular scale.
This is an very early version. # What is a modular scale? A modular scale in Typography is used to generate a visual rhythm in font sizes. This plugin helps to generate those sizes. Starting with a base-value, font-size in…

# data[].attributes.attachment_link.title
Figma - Pitchdeck Presentation Studio | Magically turn your Figma designs into animated slide decks or export them to PowerPoint Feature...

# data[].attributes.attachment_link.description
Figma Community plugin - Magically turn your Figma designs into animated slide decks or export them to PowerPoint Features Super easy animations and real-time previews inside Figma.Add GIFs and video embeds to layers in your slides.Add slide links or website URL links to layers in your slides.Built-it GIPHY and Pixabay...

# data[].attributes.attachment_link.title
Figma - Reverse Layer Order | This plugin will reverse the order of the selected layers. Select 2 or more layers within the sa...

# data[].attributes.attachment_link.description
Figma Community plugin - This plugin will reverse the order of the selected layers. Select 2 or more layers within the same parent and run the plugin.

# data[].attributes.attachment_link.title
Figma - Confetti | Confetti for Figma lets anyone create gorgeous confetti patterns. 1. SELECT ONE OR MORE LAYERS T...

# data[].attributes.attachment_link.description
Figma Community plugin - Confetti for Figma lets anyone create gorgeous confetti patterns. 1. SELECT ONE OR MORE LAYERS The selected layer(s) will become your confetti particles. 2. CONFIGURE YOUR CONFETTI Play around with the settings to create your perfect confetti pattern. Confetti lets you adjust transparency, rota...

# data[].attributes.attachment_link.title
Figma - Geometric | Make math shapes and curves. Choose from Polar Rose, Trigonometric functions, Polygons, Spirals ...

# data[].attributes.attachment_link.description
Figma Community plugin - Make math shapes and curves. Choose from Polar Rose, Trigonometric functions, Polygons, Spirals of different kinds, Superellipse, Astroid and modify multiple parameters to get complex shapes with ease. - Make complex patterns with ease. - Control parameters to customize the math shape. - Many i...

# data[].attributes.attachment_link.title
Figma - Looper | A Figma plugin for creating trippy generated graphics. Works with any Vector, Shape or Text layer...

# data[].attributes.attachment_link.description
Figma Community plugin - A Figma plugin for creating trippy generated graphics. Works with any Vector, Shape or Text layer. Usage 1. Select a layer to multiply 2. Set the iteration count 3. Set the incremental changes for - position and rotation - scaling change - opacity - fill color - stroke width and color 4.

# data[].attributes.attachment_link.title
Figma - Dot Grid | Easily generate beautiful dot grids for your Figma designs. Dot grids can receive the following ...

# data[].attributes.attachment_link.description
Figma Community plugin - Easily generate beautiful dot grids for your Figma designs. Dot grids can receive the following configurations: grid width, grid height, dot size, gap, and dot colors. No need to create each individual dot and laying them out into a grid anymore!

# data[].attributes.attachment_link.title
Figma - Pattern Hero | Pattern Hero enables you to place selected elements or frames in a grid to create patterns. Thin...

# data[].attributes.attachment_link.description
Figma Community plugin - Pattern Hero enables you to place selected elements or frames in a grid to create patterns. Things you can do with Pattern Hero: ⦿ Re-organize all your elements in a NxM grid with optional padding ⦿ Shuffle and repeat elements to form a pattern ⦿ Create patterns by selecting any components an...

# data[].attributes.attachment_link.title
Figma - namespaces | Plugin for automating formatting of page names, frames, components, layers, etc. Enjoy it! Ignor...

# data[].attributes.attachment_link.description
Figma Community plugin - Plugin for automating formatting of page names, frames, components, layers, etc. Enjoy it! Ignores name patterns: [number]-[name]-[...] [name or number]-[name or number]-[...] > 01-name > 375-frame-name > layer-name

# data[].attributes.attachment_link.title
Figma - Figma Exporter | This exporter plugin let's you select the naming convention you want for your exported files. Th...

# data[].attributes.attachment_link.description
Figma Community plugin - This exporter plugin let's you select the naming convention you want for your exported files. The available conventions are, - kebab-case - snake_case - camelCase Or you can just export them as is if you prefer to keep your current filename structure. #How to use 1.

# data[].attributes.attachment_link.title
Figma - Notepad | Use Notepad to add a place for notes to your Figma documents. Jot down todos, ideas, research, me...

# data[].attributes.attachment_link.description
Figma Community plugin - Use Notepad to add a place for notes to your Figma documents. Jot down todos, ideas, research, meeting notes, and other bits of information relevant to your design work. Notes are automatically saved with your documents and accessible wherever you use Figma. And like your Figma documents, your N...

# data[].attributes.attachment_link.title
Figma - Clean Document | Automagically organize and clean up your Figma document. Fund my work on Figma plugins → Delete...

# data[].attributes.attachment_link.description
Figma Community plugin — Automagically organize and clean up your Figma document. Fund my work on Figma plugins → Delete Hidden Layers
Deletes all hidden layers within the selection or on the current page. Ungroup Single-Layer Groups
Ungroups single-layer groups within the selection or on the cur…

# data[].attributes.attachment_link.title
Figma - arc | One of the most desired text features has just come to Figma with our Arc plugin! Curve your text...

# data[].attributes.attachment_link.description
Figma Community plugin - One of the most desired text features has just come to Figma with our Arc plugin! Curve your text upward, downward or into a circle. Adjust the slider and preview the result. 1) Select a text layer 2) Run the Arc plugin 3) Adjust the slider & click apply NOTE: Once the curve is applied, you can...

# data[].attributes.attachment_link.title
Getting Started with the Figma WordPress Design Library

# data[].attributes.attachment_link.description
Get Started with the Figma WordPress Design Library!

# data[].attributes.attachment_link.embed_code
Getting Started with the Figma WordPress Design Library

# data[].attributes.attachment_link.readable_text
You got the hang of designing in Figma but are still intimidated by the complexities of developing a site based on it? What if we say there's a way to convert Figma to WordPress? There is one indeed! Out of the three potential options, we know the most efficient one. But first, why choosing Figma and WordPress at all?

Figma and WordPress - Two greatest tools

With the introduction of Figma, designing websites grew into a much more effective process. This tool is especially loved by those who design in teams. Their editor allows the collaboration of multiple people at the same time: a huge pro when it comes to teamwork.

Even single players of the web design market switch to Figma due to its popularity and full-blast functionality of the editor. You can create prototypes, comment on specific elements or areas of the project and do many exciting things. However, figuring out how to make a fully functioning website out of it is a whole other story.

WordPress is a trouble-free start in development if you're a beginner. At the same time, it has so much to offer above this level: there are new things you can learn every day. As far as our team's experience stretch, the feeling of first-time-user confusion to it will always be fresh in our memories.

We know Figma to WordPress conversion may be too complicated if you are not a developer. Mastering both could become a task of a lifetime. And, to add to it all, manual recreation would mean redoing work that's already done.

If you ever faced the necessity of transferring your designs from Figma to the website, you definitely wished that this process caused less stress and trouble.

What's the deal with the conversion?

If, on the other hand, you never had to perform the conversion, you are a lucky one.

Right now, there's no easy method for the direct export of Figma design as a WordPress website template or theme. Even the not-so-straightforward ways are confusing and require background knowledge and experience.

You wouldn't be able to carry out the transition without meddling in raw code. This is where we once again warn you: avoid editing code if you're unsure about the consequences. And in case you go for it, remember to backup your site and consider trying out the changes in a staging environment first.

"Why try at all? Why can't we just start right off in WordPress and avoid the pesky conversion?"

Well, because using WordPress alone for the whole process is far from being efficient (or pleasant). Right, we said it.

WordPress is a great CMS: many beginners, as well as professionals, use it as a platform for building websites. We love it, too. But it is no designer software. This would be a place to implement your ideas, not to sketch them.

Figma is the software made specifically for designing. As some developers say about it, it is a whole new level of web design: a graphical editor with all the advantages of cloud collaboration.

The reasons to use it are multiple: user-friendly interface, awesome built-in tools, work process convenience - you name it. It all boils down to a broad range of Figma capabilities and an enhanced experience for the collaborators. Important stuff!

That's why it is best to work with both tools - each for its purpose. The only obstacle in this process is the transition between the two.

If you search for scripts or plugins that will help you with exporting this or that specific detail, you may come across some automated solutions of debatable quality. Look for the feedback: those things don't do their job the way they're supposed to. As of now, they're not more than inventive ideas that give no practical result.

But the work is done, and you can't wait to see your magnificent design project being a dynamic website. What next?

Options

Based on what's available now (spoiler: not much), you would need to develop your website completely from scratch (the geek way) or select the most similar-looking theme in WordPress and tune and tweak every detail to bring it closer to the desired result.

Both ways are no small feat.

Option 1

The first one is web development in its pure form. Your steps would be:

Create the fundamentals of your future website. You need the files for structure, style and interactive features, or, in other words,

index.php

style.css

main.js

Build the basics in those files. This would be your headers and footers, all the buttons and search bars (with interactivity ensured and styles maintained!) - and they all need to be interrelated, of course.

NB: Doing this requires some solid understanding of PHP, HTML, CSS, and JavaScript. And while there is an option for exporting CSS from Figma (element by element, one at a time), it is not going to be so simple with the other two. Figma confirms there's no possible way to export any logic whatsoever.

Export the images from your Figma project and locate them in your future site directory.

Call them where necessary.

*Oh, and don't forget to check the results after every step - meddling in the core data can cause all sorts of issues.*

...

There will be many other steps. Even though you'll be able to switch to a more visualized type of work than code editing at some point, this will be a long process.

Option 2

The WordPress theme way is the way for the patient.

We won't try to imagine how much time it takes to find the theme that looks like your design. Let's suppose you were lucky and found something close enough (because if you didn't, you would need to create those template files in PHP, CSS and many others). Now, here goes:

You probably will have to mess a lot with CSS. It will involve copying and pasting the exported .css of your design elements to your WordPress theme style.css and comparing the outcome with the goal - that sort of fun.

Adding the elements and functionality will also take time. For each of them, you need to make sure everything is in place (and in the right place, too) and does the thing it's supposed to do.

And, having all that done (regardless of the way you've chosen), you should test the website under all potential circumstances. Several times. Preferably with several dozens of people.

Thus, you end up either customizing a theme in its every detail or creating a completely new one. For those who enjoy the process, that can be the way to go. But there are substantial drawbacks associated with it:

it is incredibly time-consuming and

it makes using Figma meaningless.

If you use Figma because of how convenient it is, you wouldn't be happy about going back to designing with other tools. The deeper you get involved in the process, the more you feel like you go through the same stuff you already had with Figma, just much less conveniently and with much more extra complications. Most likely, you will have to work on both the frontend and backend parts of the task.

Your creativity is a resource you need to use right. The more of it you put in figuring out the complexities of coding, the less you have left for what you truly love about web design. Don't let that happen!

This option is where things get easier. Much easier.

Since the process is so much pain in the neck, especially for the non-developer community, we couldn't leave it like that. We keep up with your needs and provide a quick and efficient Figma to WordPress conversion service - WordPress development done smart.

Yes, that's right: we convert your Figma projects into neat and healthy WordPress websites.

What that means to you is that the painful ordeal of doing twice the amount of work is no longer the case. Believe it or not, we can help you jump from a project in Figma to a site on WordPress quickly and with zero coding needed from you. At all. Sounds like a great value for the price, doesn't it?

As we mentioned, the WordPress site structure requires certain files to exist and function. Those are PHP templates to load page information; CSS to know what looks how; JavaScript to make it all dynamic - many of them under each category. But this would be nothing you need to worry about: it's all our job. We build all the necessary bearing constructions and fill them with all the beautiful content you have in the design.

You show us your project, we estimate the work to be done and, just a little while after, hand you back an appropriately coded website with all the necessary core files and no issues to fix - 30-day warranty. You can estimate the approximate price of your conversion in our Project Calculator - it takes into account the key factors such as size, urgency and complexity.

With Figma2wp conversion, everything will work the way you've always seen it on WordPress sites. Your dashboard will look the same - customize it if you wish; you'll be able to install any plugins; things will run smoothly as they should.

Why we offer Figma to WordPress conversion

In short: because of everything we described above.

Or, if you let us expand a bit on that,

We believe in delegating tasks.

There are great talents in so many various fields! It would be a waste of everyone's time to work on things out of your scope. If we distribute the work according to the main competencies of those who take part in it, we'll get a key to success.

WordPress is our passion.

Everything that has 'WordPress' mentioned in it is automatically within our field of interest. With how long we've developed sites on WordPress, we simply couldn't resist the desire to find a solution to this new problem. Our team is always happy to put our top skills to use.

We know it's a common concern.

WordPress accounts for the majority of sites with an identifiable CMS.

On top of that, more and more people switch to Figma. As a result, we get a growing crowd of people who fall in both categories: they like designing sites in Figma and building them in WordPress. And they encounter the difficulty of converting their projects from one to another.

This is where we come to the rescue.

How we do it

For you, the entire process will be no more than these 5 steps:

We get acquainted with your Figma project. You tell us the details of what your goal is.

We agree on the specificities, determne the price and get the ball rolling.

Our web development experts do their magic.

Our team tests and checks the website and just in general is being fussy about the perfection of it.

You get your WordPress website with your design and all the functionality - lively and looking good.

And yes, your site is now ready for the outer world of the internet.

Your benefits are immense, while the effort required is minuscule. You just shake your work right off your shoulders and save yourself some time.

In case you worry about how you'll manage to run the website later on, fear not. We care about the safety of your site. Apart from the 30 days we guarantee, you can get a special offer for a year of our support. Stay with us, and things will be just fine.

Order your conversion at https://figma2wp.com/.

If you have any questions, write us in the chat down below or send us your contact info - we'll get back to you ASAP.

# data[].attributes.attachment_link.title
How To Convert Figma Designs to WordPress Sites - Belov Digital Agency Blog

# data[].attributes.attachment_link.description
You got the hang of designing in Figma but are still intimidated by the complexities of developing a site based on it? What if we say there's a way to convert Figma to WordPress? There is one indeed! Out of the three potential options, we know the most efficient one.

# data[].attributes.attachment_link.provider_name
Figma2WP - Figma to WordPress Conversion Service

# data[].attributes.attachment_link.readable_text
We Make It Effective

Wish to convert your Figma designs into live websites? We can do that for you - fast and pixel-perfect. With us, your project is in good hands: we've successfully completed 2500+ WordPress projects and have hundreds of happy returning clients. Our top-ranked professionals from the US and Europe will ensure no smallest detail is lost in translation. Every bit of your design will be transferred to a website of second-to-nothing quality in virtually no time.

# data[].attributes.attachment_link.title
Figma To WordPress - The Best Design-To-Site Conversion Service | Figma2WP

# data[].attributes.attachment_link.description
Wish to convert your Figma designs into live websites? We can do that for you - fast and pixel-perfect. With us, your project is in good hands: we've successfully completed 2500+ WordPress projects and have hundreds of happy returning clients. Our top-ranked professionals from the US and Europe will ensure no smallest detail is lost in translation.

# data[].attributes.attachment_link.readable_text
Themer enables you to create and swap themes from your *published* styles in your team library. Use it for color, text and effect styles.

How does it work?

Themer associates published styles with a theme name. When you have multiple themes, Themer will swap styles that match across themes: which means you need two styles with the same names in each theme.

In order for Themer to be used across your team, generic information about your styles is shared on a external service ( jsonbin.io). You will need an account with an API key to get started (You can easily sign in with Google, GutHub or Twitter).

Watch the setup video on YouTube:
https://www.youtube.com/watch?v=aM8SkksBy3Y&feature=youtu.be
1. Insert your API key from JSONbin

2. Create your first theme, giving it a unique name, and then choose where you want to pull the styles from (all local styles, styles used on the page, or a selection).

*Tip*: If all of your styles exist within one document, you can also prefix your style names with 'theme1/' or 'theme2/' and set Themer to generate multiuple themes at once.

3. With your themes created, you can now apply them to a selection or the entire page. Remember, your design must make use of the same styles from one of the themes to work.

Privacy:

Themer stores information about your styles at a service external to Figma. For each theme, we store the name of the theme, the name of the style, the type of style (color, text, effect), and a unique key required to import your styles into a document from your team library. No other data from your file is sent to Jsonbin. Your unique API key is storred locally as well, so if you use Themer across devices, between team members, or between Figma Desktop and Figma in the browser, you will need to re-enter your API key and your Bin URL so that everyone/everywhere has access to the same list of Themes.

Remember to publish your styles before creating a Theme :)

Roadmap:

* Currently Themer does not yet work text boxes which contan multiple text styles, the plan is to enable this in the near future

# data[].attributes.attachment_link.title
Figma - Themer | Themer enables you to create and swap themes from your *published* styles in your team library. U...

# data[].attributes.attachment_link.description
Figma Community plugin - Themer enables you to create and swap themes from your *published* styles in your team library. Use it for color, text and effect styles. How does it work? Themer associates published styles with a theme name. When you have multiple themes, Themer will swap styles that match across themes: which...

# data[].attributes.attachment_link.title
Figma - Mapsicle | Never take a screenshot of a map again! With Mapsicle, you can quickly and seamlessly place maps ...

# data[].attributes.attachment_link.description
Figma Community plugin - Never take a screenshot of a map again! With Mapsicle, you can quickly and seamlessly place maps in your mockups. An interactive map lets you pan to the perfect location, or you can search for a place anywhere in the world.

# data[].attributes.attachment_link.title
Figma - Brands Colors | Find the best color from the world's best brands and cool apps Fill beautiful colors from "Brand...

# data[].attributes.attachment_link.description
Figma Community plugin - 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 The Brands C...

# data[].attributes.attachment_link.title
Figma - Chart | Chart is a plugin for Figma that uses real or random data to create the most popular charts. Char...

# data[].attributes.attachment_link.description
Figma Community plugin - Chart is a plugin for Figma that uses real or random data to create the most popular charts. Chart supports copy-paste from editors like Excel, Numbers, Google Sheets, live connection with Google Sheets and remote JSON (REST API), local CSV and JSON files.

# data[].attributes.attachment_link.title
Figma - Brandfetch | Instant access to any company’s brand assets. Search from millions of logos, colors, fonts, and m...

# data[].attributes.attachment_link.description
Figma Community plugin — Instant access to any company’s brand assets. Search from millions of logos, colors, fonts, and more. How does it work? Type a company name.Fetch its brand assets.Click to insert into your designs.
What is Brandfetch? Brandfetch is the go-to-place to source digital assets…

# data[].attributes.attachment_link.title
Figma - UI Faces | UI Faces aggregates thousands of avatars which you can carefully filter to create your perfect pe...

# data[].attributes.attachment_link.description
Figma Community plugin - UI Faces aggregates thousands of avatars which you can carefully filter to create your perfect personas or just generate random avatars. The avatars are aggregated from various sources. You can filter by age, gender, emotion, etc. Check source license before you decide to use avatar in a live pr...

# data[].attributes.attachment_link.title
Figma - 📝Annotation Kit 2.0 | Annotation Kit has been totally revamped! Since the original kit came out, new versions of Auto L...

# data[].attributes.attachment_link.description
Figma Community file — Annotation Kit has been totally revamped! Since the original kit came out, new versions of Auto Layout shipped, and Variants also shipped with Figma. This made us want to redo this buddy and make it more useful than ever. If you’re looking for a quick overview check this vide…

# data[].attributes.attachment_link.title
Figma - Rename It | Keep your Figma files organized, batch rename layers and frames. * Mutiple Layers Rename Multipl...

# data[].attributes.attachment_link.description
Figma Community plugin - Keep your Figma files organized, batch rename layers and frames. * Mutiple Layers Rename Multiple layers at once. * Sequence Sequentially rename layers in either ascending or descending order. → Keyword %n - Ascending numbered sequence → Keyword %N - Descending numbered sequence → Keyword %A - ...

# data[].attributes.attachment_link.title
Figma - Vectary 3D Elements | Vectary 3D plugin for Figma is adding the missing third dimension to your 2D designs. Place your ...

# data[].attributes.attachment_link.description
Figma Community plugin - Vectary 3D plugin for Figma is adding the missing third dimension to your 2D designs. Place your Figma design into a predefined 3D mockup or your custom 3D element. Set your desired perspective in 3D and place the result into the scene with one click.

# data[].attributes.attachment_link.readable_text
Quick summary ↬ Useful Figma plugins that will help you fix all the little slowdowns and boost your productivity. From color management and image assets to SVG shapes and animation. That's our new guide to Figma.

There are literally thousands of Figma plugins out there. Which ones do you use? How often do you use them? We've scouted for some of the useful ones, and we hope that the ones listed below will help you improve your workflow. Whether you're just starting out with Figma or have been using it for a good while now, this post will give you just enough pointers to make your design process faster and smoother.

Table of Contents

Below you'll find quick jumps to specific plugins and guides you may need. Scroll down for a general overview or skip the table of contents. Also, take a look at the other

3D Views and Perspectives in Figma

Vectary 3D Elements makes eveything just a little bit more spatial. It's one of the easier ways of adding 3D mockups to your designs, as well as add layers, wrapping and transforms. You can place your Figma design into a preferred 3D mockup or create your custom 3D element. You can take a closer look at the thorough guide and video about the plugin to get started.

Additionally, Figmockups and Clay Mockups 3D include a larger repository of 3D mock-ups, and Fig3D converts objects into 3D models, and you can even group shapes and move them to 3D models together.

Accessibility in Figma

We all want to design better and inclusive experiences, but sometimes we might be forgetting about just the right color contrast, or a proper tab order. Luckily, there are plenty of Figma plugins for accessibility.

Stark is a full powerhouse on everything accessibility. It includes contrast checking and vision simulators, and it also allows you to reorder your sequences in focus order. It also displays the contrast ratio for any two objects that you select. Alternatively, you can also use Contrast as well.

For accessible color palettes, Geenes.app is a reliable and sophisticated tool that allows you to create, maintain, sync and test color palettes and their variations. It's really difficult to imagine any Figma setup that doesn't have this plugin installed!

If you need to test how a different font size will impact your layout, Text Resizer helps you to see what exactly happens with increased or decreased font sizes.

Animation Editor in Figma

It shouldn't be a big revelation that creating animations in Figma doesn't really require sophisticated external tools like Adobe After Effects. With Figmotion, you have an advanced animation tool right at your fingertips. You select a frame, add an animation, and then navigate the timeframe via a time handle - with the option to update easing, keyframes and anchor points.

If you'd like to dive a bit deeper into animation with Figma, a guide to adding animation to your designs in Figma shows the entire workshop, and various options you have, step-by-step.

Annotations Made Easy in Figma

How do you usually handle annotations when working with Figma? We came across two annotation kits that make communication on a design a lot smoother and less prone to misunderstandings.

One of them is Annotation Kit 2.0: A variety of sticky notes and measuring lines and tools make it easy to add context and annotations for your team members as you're working.

The A11y Annotation Kit focuses on accessibility considerations that designers might want to share with developers when handing off a design. Whether it's adding callouts for elements, indicating focus order, or specifying keyboard interactions, the kit translates some of the often cryptic WCAG wording into easy-to-use stickers that you can use to highlight key parts of the page. All components are pre-filled with the correct CSS or HTML elements.

Annotations With Redlines in Figma

Annotating a design with detailed measurements and specs to help the developers in charge make sense of it all can be a time-consuming process. Redlines is here to change that. The plugin helps you quickly measure and plot dimensions of any selected object. All you need to do is select one or more layers, customize the redline settings, and choose a redline option to plot.

Auto Rename Frames and Layers in Figma

When it comes to organizing your design files, Rename it has got your back. You can batch rename your frames and layers. You can also rename multiple layers at once by applying custom filters. If you want to convert the layer name case from uppercase to lowercase or even camel case, you can use %* with a combination of letters to convert.

Avatars for Design Mockups in Figma

Sometimes we need to plug in a bit more than just text strings, and perhaps we need a few more options for our avatars. That's where UI Faces can help.

All avatars are collected from various sources (they are always provided), and they can be filtered by age, gender and emotion, but of course you need to check the source and the license before actually using it. Additionally, take a look at User Profiles.

Brand Logos Embedding in Figma

Perhaps you'd like to display some brand logos in reviews or testimonials, so how would you go around finding all the right logos? BrandFetch helps you easily insert brand assets into your design without leaving your Figma window. The plugin has a large library of (literally) millions of logos available at your fingertips. There is also a searchable database for you to find what you are looking for.

Charts Embedding in Figma

Your design process just got a bit less stressful. With Chart, you can create various charts using real or random data easily. The plugin supports copy and paste from Excel, Google sheet, Numbers and it also can sync with Google Sheets and remote JSON. Alternatively, you can also import CSV and JSON files.

Another plugin with a similar but slightly different title is the Charts Figma plugin. With it, you can create dashboards and presentations or pretty much any other type of data visualization. The plugin generates editable charts in your Figma design from simple bar charts to more complex heatmaps. You can also find a detailed guide on how to use the plugin.

Clean Up A Messy Frame in Figma

Perhaps you've dropped a few dozens of icons in a frame, so how would you arrange them in a sensible order? Obviously, we wouldn't do such a task manually. That's where LilGrid can help.

The little helper takes elements and arranges them into a grid automatically. You just need to select what you'd like to organize, hit "Organize to Grid" and the tool takes care of the rest, rearranging only top-level elements on your page. Obviously, there is a one-step undo if you need to restore the initial state.

Clean Figma Projects Before Handoff

Hidden layers, single-layer groups, X and Y positions that aren't quite pixel-perfect - the Clean Document plugin takes care of little flaws like these so you don't have to. A great little helper to polish up your Figma project before handoff.

Content Placeholders in Figma

With the Content Reel plugin, you can design layouts quickly and easily by using text strings, images, icons and avatars from the same tool. You can search or browse through the already provided set of data, then add them to your designs or create from scratch.

The plugin also lets you create your own text strings, upload up to 20 images, and make your workflow easier and smoother by pinning your frequently used content on your home screen.

You can also run a Random Name Generator to populate random names into your mock-up.

Color Palettes in Figma

Understanding gradients, palettes, color theory and psychology are essential to creating pleasant visual designs. Figma has plenty of plugins that take a bulk of this work off your shoulders.

Color Palette provides you with a perfect color palette for your projects. You can choose from a huge library of palettes or search for a specific color code, name or number to apply to your design.

Palette by Dustin Mierau is useful when you want to generate a color palette from images. This plugin uses machine learning to help you generate a color palette that will best fit your project. You can select up to five shapes and the plugin will help fill in the shapes with colors fitting for your palette.

When designing around an image, making the right color choice is easier with the Image Palette plugin. It uses any image that you select and generates a color palette from it by selecting the five most prominent colors from the image using a median cut algorithm with a high level of accuracy.

With UI Gradients and Web Gradients, you do not have to create or select gradients one at a time, but instead, you can add several gradients to groups, texts and frames with just a single click.

Curve Your Text in Figma

With the Arc plugin, you can curve your text upwards, downwards, or even into a circle. The plugin adds an additional toolbar for controlling the bending - it's another question though how developers would implement it.

Design Tokens in Figma

Another Figma plugin you might want to add to your toolkit comes from Lukas Oppermann. If you're tired of the hassle that working with design tokens usually brings along, the Design Token plugin does the job for you: styles and tokens are exported and sent to a GitHub repository and tokens are automatically converted using style dictionary. No need for you to leave Figma. A real timesaver.

Design Systems With Figma

Imagine you're making a change in your project's design system, and it's immediately cascading through your Figma project. The Design System Manager plugin for Figma makes it possible.

The plugin lets you define or update themeable design tokens in one single panel, manage selected layers grouped by style, and populate a design with real text or image content. To bring your project to life, you can programatically access the design tokens from the GraphQL API or you export them in the format of your choice (CSS, Less, Sass, JSON, YAML, Js, Swift, and Android are supported). A smart solution that makes dealing with design systems a lot more practical.

Device Mockups in Figma

The quality of your presentation as a designer is almost as important as the design itself. With over 700 device mock-ups scenes, Mockuuups Studio helps you create mockups for products, visual content, or marketing materials with ease and efficiency. You can watch a thorough walkthrough video on how to use it.

Usually mock-ups only look nicer when a device is displayed in a human's hand, and that's where All hands mockup generator can help. It includes a large and diverse collection of hands of all shades, shapes and sizes. Select a frame, choose a hand and your designs will be imported into the mockup, all within Figma. You can review the full collection of hands as well.

Exporting Figma to HTML, CSS, React

HTML <> Figma allows you to export your Figma designs to an HTML prototype. You can select individual layers, or enter an URL you'd like to import, and the plugin will import actual styles immediately. There's also a Chrome extension that captures a web page and imports it as editable Figma layers. In the background, it generates a page.builder.json file which has all the CSS properties of the current page.

There are some limitations though as not all element types and CSS properties are supported. Also, it's worth keeping in mind that all fonts have to be uploaded to Figma or fallback fonts will be used. Still, the plugin is open-source, has a large community around it, and the creators are actively maintaining it.

Alternatively, there is also an HTML Generator that supports Google Fonts, has dedicated export options and generates HTML, CSS, image assets and SCSS code and Figma To HTML. And if you need something more sophisticated, Anima creates prototypes and converts them to HTML, CSS and React code - without any dependencies. In fact, you can create interactive prototypes, responsive designs and reusable React components out of the box. (The plugin has a free tier, but you will need to sign up for the $31 tier to export the code).

More after jump! Continue reading below ↓

Meet Smashing Email Newsletter with useful tips on front-end, design & UX. Subscribe and get "Smart Interface Design Checklists" - a free PDF deck with 150+ questions to ask yourself when designing and building almost anything.

Exporting Figma to Vue.js

If you want to remove some of the friction that turning a Figma prototype into a working application can bring along, Klaus Schaefer's open-source plugin Figma-Low-Code is for you. It lets you use Figma designs directly in Vue.js applications.

This low-code approach does not only reduce the hand-off time between designers and developers as well as the amount of front-end code, but also ensures that the Figma design stays the single source of truth. The idea is that you design the prototype in Figma, then use the plugin to add data and method binding. Once you've done that, you can use your favorite code editor to implement business logic, and - ta-daa! - your application is ready for deployment. Changes you make to the Figma file are automatically propagated to the web app.

Email Templates in Figma

There aren't many people who are very fond of building HTML Emails, but when designing one, we better use some handy little plugins to make the developer's work a little bit easier. In fact, there is a detailed guide on designing emails in Figma that covers the entire workflow of shipping brand new email designs from scratch.

If you are looking for responsive, production-ready HTML emails for Figma, Emailify will give you dozens of configurable content modules, allow you to customize your text, images, styles and auto-layout settings amongst other features, with no other APIs, apps, or websites required.

If you aren't frightened of the idea of HTML Email code being generated for you, Email Templates & Code works with the Marka plugin to actually produce HTML code. You can have customizable emails with designs for newsletters, marketing email and blog-style templates. Also, there are plenty of customizable designs there as well.

Perfect File Structure in Figma

We all know that it can be hard to think of Figma file structure when you're completely absorbed in getting all those little UI details right in the design you're currently working on. However, if you keep file structure in mind right from the very beginning, you can ensure that handoff will be buttery smooth. And you'll save yourself a lot of cleaning up work once the deadline comes closer. Luis Ouriach published a helpful best-practice guide for structuring your frames in Figma - with consistent naming conventions, descriptive components, and consistent spacing.

Fonts Preview in Figma

Switching between typefaces manually can be a little bit tiring, so obviously there are Figma helpers for that. Better Font Picker and Font Preview help you select fonts with a preview.

Google Fonts Pairings for Figma

If you use Google Fonts, Google Font Pairings can come in handy, too. You can get started at Figma's Google Fonts page. Each of the fonts comes with a tiny type specimen to get a decent preview of the style and feel of the typefaces used.

Icons Embedding in Figma

Having a wide collection of every possible icon out there in one place is arguably one of the best plugin ideas ever. Figma has plugins that contain icon sets in several styles for any type of design project.

Icons8 provides you with a large collection of consistent icons without having to leave your Figma board. It has a library of 120,000+ icons with over 32 popular design styles, searchable and categorized collection, all available in PNG or SVG.

Iconscout allows you to insert millions of high-quality icons, illustrations, and 3D into Figma. In a designer mode, you can pick your favorite designer and photographer and access their resources directly without searching in the entire library.

Illustrations Embedding in Figma

Illustrate with a vector software, then import it into your design, right? You don't have to do it all the time as Figma comes with plenty of illustration plugins.

With Blush, you can create or mix-and-match illustrations customized to your projects. You can also generate random compositions; plus, new illustrations are being added every week. SVGs and high-resolution images are available on a paid plan.

For lovely icons and illustrations, take a closer look at the Free Popular Illustration library, which includes high quality free illustrations released under a Creative Commons license.

If you want to add a human illustration to your website, Humaaans provides you with already pre-made illustrations of funky and hip people. You can browse from a gallery or search for a specific niche or category.

Additionally, you can use Storyset with 100s of illustrated concepts available as off-the-shelf illustrations. You can also edit the styles, colors, and background. Plus, you can also animate the illustrations.

Copy-Paste And Sync Google Sheets in Figma

Quite often, copy-pasting data from Google Docs into Figma is quite time-consuming and frustrating. Google Sheet is a handy plugin that speeds up the import of your Google Sheets to Figma. Once you install it, you can fetch and sync data from your Google Sheets. There is also a documentation with all the fine details on how to set up a proper sheet structure and how Figma layers should be named to avoid extra work - as well as some examples for you to get started.

Interactive Components And Variants in Figma

A few weeks ago, Figma launched a beta version of their Interactive Components feature that allows you to create interactive elements that automatically switch between variants (a button changing from hover to a pressed state, for example). What might seem like a little detail, turns out to reduce the amount of frames and connections you usually need to prototype input fields like checkboxes or toggles tremendously.

To dive in deeper into the new feature, Steve Ruiz summarized what it is capable of and what can be achieved with it if you think outside the box (a Minesweeper or Battleship game running in Figma, anyone?). Another great read: Rodrigo Osornio explored the advantages and possibilities which Interactive Components brings along for micro interactions such as input fields, loaders, different kinds of buttons, dropdowns, and subscribe components.

Speaking of components: Luke Cardoni shows how he managed to create a single, content-adaptable, fully customizable, and easily maintainable component with 3,360 variants that serves every possible combination of settings for text input. A mammoth project that illustrates the benefits of Figma's Variants feature.

Layout Grid in Figma

We often rely on grids to create design systems where every single interface component is properly aligned. So it shouldn't come as a big surprise that there is no shortage in layout grid plugins for Figma. Grids Generator allows you to apply a family of various grid style configurations to layouts. Guide Mate is slightly more flexible: it provides shortcuts for commonly used grids and a way to add a custom grid should you need it.

Once you have a grid in place, you might want to snap your components to it. Snap to Grid not only creates a custom grid, but also arranges elements on the grid by organizing each object automatically. When the plugin is running, the canvas elements will snap to the grid when moving and scaling. Andreslav Koslov shows how this plugin works in a 3-min video. You can also use keyboard shortcuts Alt + Cmd + P to snap all objects to grid when Figma is online.

Maps Embedding in Figma

Downloading maps for your project does not have to be a long process because Mapsicle by Chris Arvin can help you to easily insert maps into your Figma designs. The plugin allows you to set your map to a particular location, latitude and longitude which you want for your designs, and voilà, it adds just the right snapshot into your design.

However, if you needed a SVG map of a particular country or region for your design, the Vector Maps Plugin can turn out to be very helpful. You can literally browse for countries or regions and insert them directly into your Figma design with single click. The maps can also be downloaded as SVG or PDF via https://vector.mapcraft.biz/constructor/.

Name Conventions in Figma

We've all been there: When you're in a rush, naming conventions are a detail that often doesn't get the attention it deserves. And before you notice it, you end up with a mess of different formatting styles for your page, frame, component, and layer names.

The Namespaces plugin puts an end to the chaos and neatly names your assets following a scheme that makes sense. Also great to unify different naming conventions when working on a shared file together with others.

Of course we all want to be well-organized, but sometimes we might be just a little bit distracting when naming our frames. That's when Figma Exporter can help. It lets you select the naming convention you want for your exported files: kebab-case, snake_case or camelCase. The rest will be done automatically!

Notepad for Quick Notes in Figma

If you ever wanted to have a dedicated space in Figma to take notes, ideas and comments while working, Notepad by Dustin Mierau is probably what you were looking for. Notes are automatically saved with your documents and are available to other editors. In a way, you can use Notepad as a shared space for documenting your project with your team. As a side note, you need to reopen Notes to see changes made by other editors if you are working collaboratively.

Patterns In Your Figma Designs

Everything is slightly better with patterns! While creating basic patterns is usually quite straightforward, creating custom patterns might be a tricky and intense process, and that's where Figma's patterns plug-ins save the day.

The Pattern Hero plugin makes inserts your custom elements into a grid and repeats them to form a pattern. You can repeat or shuffle the patterns, create instances and also work with several templates. If you need to make a pattern, this is a good option to use.

Alternatively, Hero Patterns is a collection of SVG background patterns. To create a unique set for yourself, you can mix and match different patterns to come up with a desirable pattern.

There are way more patterns plugins in Figma, 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.

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.

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.

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.

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!

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.

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.

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.

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 Top and Bottom, Top, or Bottom.

Finally, 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.

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.

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).

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.

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.

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.

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.

Finally, 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.

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.

With 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.

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!

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.

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.

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 Smashing Guides

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! ;-)

# data[].attributes.attachment_link.title
Useful Figma Plugins And Tools - Smashing Magazine

# data[].attributes.attachment_link.description
Quick summary ↬ Useful Figma plugins that will help you fix all the little slowdowns and boost your productivity. From color management and image assets to SVG shapes and animation. That's our new guide to Figma. There are literally thousands of Figma plugins out there. Which ones do you use?

# data[].attributes.attachment_link.readable_text
Quick summary ↬ In this article, Emiliano explains why Figma Interactive Components (now in beta) will improve how we create prototypes. The new feature reduces the time and effort needed to create interactions by bringing down the cost of design exploration. There's no need for previous Figma knowledge and experience - all you'll need is a free Figma account if you'd like to try it out for yourself.

Recently, Figma rolled out the beta for the newest interactive components feature that allows defining interactions and animations directly into the variants and propagates them to every component instance. This means that it is now possible to create a component with states (hover, active, clicked, focus) and make it interactive so that every copy of the component will inherit those same interactions by default, helping a lot in the prototyping phase.

Here's a comparison example of how the workflow will change:

As you can see in the example above, it requires four screens and eight interactions to make the prototype work as a real product. And if I wanted to use three switches, I would have to add even more screens and interactions.

In the next example, it only requires one screen and one component with two variants for the interactions, and the switch is the same so it can be duplicated as many times as needed:

Using Interactive Components simplifies not only the final prototype but also the logic behind it, making it easier to learn how to build, maintain and update the prototypes.

Now, before we start:

Interactive Components (Beta Access)

You need to sign up for the Interactive Components Beta program to start experimenting with this new feature as it is not yet available in the current stable release. Joining the Beta is free and once you submit the form, it should not take more than two or three days before you see Interactive Components appear in your Figma design tool.

Freebie

I have created a Figma design file with the examples from this article. Once you join the Beta, you can duplicate my design and follow along more easily.

Before Starting

It's necessary to understand some key Figma elements that we are going to use, if you're already familiar with them you can skip this part and start directly with the first tutorial (section: "Create your first Interactive Component").

Components

Think of these as items that, when duplicated, create a connection with its copy (called instance) and when the component is changed, the instance receives the same changes. You can also apply overrides to instances (which are basically style changes to the component properties which allow for some customization).

Variants

These are the different styles a component can have and are usually used to apply different properties such as size or states.

Interaction Details Panel

It's important to understand the Interaction Details panel because it allows us to define the different interactions and animations for our interactive components. Figma has a lot of information on their site so I will include links for those of you that want to dig deeper.

Hotspot

Even though this is not inside the panel, the hotspot is the element where the interaction will happen, in our case, each variant will be an interactive hotspot for which you can define triggers and actions.

Triggers

These are known in development as Events and are the different ways we the user can activate an interaction.

Actions

In this setting, you can define what will happen when the interaction is activated; for interactive components, we will use Change To which allows swapping the variants inside a component.

Destination

This is the final target of the action. In my examples, I will use a variant as the destination to swap it from Switch OFF to Switch ON.

Animations

Figma comes with a set of pre-defined transitions that can be useful for some cases (move in, push, slide-in) but I always prefer to go with Smart Animate and define my own transitions as it's really easy to use - it basically checks the layer names and if there are changes between the selected frame and the destination frame, it will animate those layers.

Easing

Easing refers to the way the animation moves, it's basically how the element accelerates and decelerates. I'm going to use two settings for this tutorial: Ease In and Out for the switch, and Linear for the loops, but have in mind that it's also possible to define a custom easing so you might want to learn more about Easing.

More after jump! Continue reading below ↓

Creating Your First Interactive Component

Now that you have all the information you can start making your first interactive component. I'll show you a very common case by creating a simple switch that has two states (Off and On) and use the variants to replicate those states.

We'll start by creating a simple switch.

Create A Component

The first step is to create a component.

Using the Rectangle tool (R), create a grey rectangle (#A7A9BC) 56x32 pixels in size and apply a corner radius of 16 px.

Using the Ellipse tool (O) create a white circle (#FFF) 24x24 pixels in size and place it over the rectangle in the left part, leaving 4 px of spacing. This is how it should look:

Combine these two elements into a single component using Ctrl/Cmd + Alt + K (or using the Component icon from the top bar in Figma):

Note: Here and in other places, I will use the Windows/Mac universal key notation, where the Ctrl key in Windows corresponds to the Cmd key on the Mac; Alt in Windows is the equivalent of Alt/Option on the Mac, so I'll use Alt for short, and Shift is the same on both platforms.

Add A Variant

Select the component you've just created and, in the right panel (inside the Design tab), click on the plus button near Variants:

It will generate a purple frame with a dashed border that represents the group of variants you have.

You should have two variants by now, use the first one for the Off state and the second one for the On state.

Apply a different style to the On state to make it the active option, I recommend using a blue background (#0B5FFF) and move the circle to the right.

These are the states of the switch that are going to change from Off to On (and vice-versa) when the user clicks on the switch.

Useful tip: For this case it is not necessary but if you need to add more variants you can select a component inside the box and click the purple plus button, it will add a copy of the selected component and resize the box automatically. (It's also possible to resize the box manually as if it was a frame and freely duplicate and arrange the variants inside it.)

Alternative approach

As you've seen, we've created these components by duplicating them inside the variant group but it's also possible to create them individually and combine them as variants, the final result will be exactly the same. If you want to try this method just create and select two components, the right panel will then have another action called "Combine as variants," click it and done - you will now have the same two variants.

This alternative is really useful when you already have different components and only need to define the variants, if you're working on a library it will help you update it without having to recreate everything from scratch.

Name Your Variants

Naming the variants won't have a direct effect over the final result (unless you use the same name more than once), but defining the names and hierarchies will help you have everything better organized and understandable for other colleagues that might need to use the prototype for other projects.

By default the main group of variants is named "Property 1", you can change this from the sidebar when selecting the entire group. I suggest renaming this to "State" since we're going to use Off and On states.

Renaming a single variant is done by using the same process but you need to select the single variant inside the group and in the same panel you'll find the names "Default" and "Variant 2" that you can overwrite, for the switch name these should be "Off" and "On".

As a result, the layer names of the variants will be automatically changed to "State=Off" and "State=On".

Fun fact: If your component only has two variants and you use the names "Off" and "On", it will show a switch instead of a dropdown in the destination!

Let's Make It Interactive!

Now that you have the component and the variants it's time to apply the interactions.

Click on the Prototype tab (at the top-right side of the screen) to open the Prototype panel and activate its features.

Select the Off variant (it should have a blue dot) and drag it over the On variant to connect it.

Double-check that you have selected the whole variant and not just the background layer, this will make the interaction work even when the user clicks on the circle element.

In the Interaction Details panel set the trigger to On Click.

Make sure the action is set to Change To.

Change the animation to Smart Animate and use Ease In And Out for a natural feeling.

I'll translate these settings into a single sentence to explain what will happen: when the user Clicks on State then Change to State using Smart Animate with Ease In And Out at 300 milliseconds.

Apply the same settings to the On State variant so that when clicked again it, will turn off the switch. (Note: Figma will remember the interaction settings applied to the elements inside the group and will apply the same settings when dragging a new interaction so in this case, you would only need to double-check.)

Done! If you want to check if it works you need to include one of the variants into a frame, select the frame and then click on the presentation button (represented by the play icon) that is placed over the tabs.

It should allow you to turn On/Off every switch individually.

However, if you want to see the real power of this feature, duplicate the component in the frame multiple times (at least three or more) and activate them individually in the presentation.

The switch interactive components in action.

Using More Than Two Variants

This feature becomes very powerful when you add multiple variants and connect them individually to make a realistic component. Here is an example where I've connected a total of six variants with small changes to the background color to recreate the multiple states of a button, a classic in the web design industry nowadays.

Component States

This is the list of the different states for this component, including also the triggers we're going to use to change from one variant to another.

1. Default - Default,

2. Hover - WhileHover,

3. Pressed - MouseDown,

4. Active - MouseUp (It could be possible to use On Click for the same result),

5. Hover while Active - WhileHover,

6. Pressed while Active - MouseDown.

Useful tip: It's possible to use MouseDown to simulate the button being pressed but not released and then use MouseUp to activate a transition, it's a nice interaction detail that makes the button feel more real.

Use the MouseDown trigger before the Click trigger.

Nested Interactive Components

As for the regular components, you can also create nested interactive components.

Using the same example of the dropdown it would be possible to create a single interactive component called Dropdown with two interactive components inside it: the Dropdown Button and the Dropdown Menu. This will help you control how the button and the menu interact with each other, allowing you to define which variant of the button will trigger the opening of the menu.

Note: It would be possible to create another nested component for the dropdown menu options and use the override to change the different texts.

The main benefit of using nested interactive components is the new level of modularity that it provides for prototypes, you could define the interactions individually and mix them into infinite interactive components. The Dropdown Menu could be included in other components (a card, for example) without having to prototype how it works every single time.

We can go even further, it's also possible to navigate from a variant to an external frame, you can connect the single variant to the frame by using the On Click trigger and Navigate To action. In this example I've connected each one of the actions from the Dropdown Menu component to an external frame with a grey rectangle in the same position as the menu (Right, Top, Left, Bottom).

When one of these actions is clicked, it will navigate to the connected frame as it happens with regular prototypes, the real magic happens when you need to reuse the Dropdown Menu for another component, it will have all the interactions inside already done, so you don't have to connect it over and over again.

This workflow and the features of the nested components are amazing for product design cases where you have tons of frames to connect as they will reduce the amount of work required to create a high-fidelity prototype for testing, or even if you want to create a components library for prototypes.

Special Effects

That was all for the introduction to Figma interactive components. As you can see, it's pretty easy to use this feature to create and connect interactions inside a prototype. But it's also possible to create various kinds of special effects using variants.

In the following section, I will take a close look at these!

Loops

It's finally possible to make infinity loops inside Figma without too much effort and also you can create various spinners and loading indicators.

To create a loop, use the After Delay trigger set to 1 ms to swap the variants automatically and connect at least two of them.

Note: 1 ms is the minimum amount of time we can set in Figma to change from a variant to another and make it an almost instantaneous change; and, thanks to the AfterDelay trigger, it will happen automatically. It's possible to use a higher delay time if you need the loop to look like it has a pause between the variants.

Rotation

Let me start the next part of the article with a note about how strangely Figma handles rotation.

Figma has a weird way to rotate elements, it seems to be limited from -179º to a maximum of 180º and does not allow to go further than these values. In addition, there is no way to define a rotation direction so if you try to rotate from 0º to 180º and vice-versa, instead of doing a 360º turn, it will first rotate to 180º and then come back to 0 º (like a swing).

So, to let the system identify correctly the rotation you will need to use at least three variants.

Here's how you can do it:

Create a component with three variants: VariantA, VariantB, VariantC (for this example I modified an ellipse to make the triangle shape).

Apply the following rotation to the elements inside the variants (not the variants themselves).

VariantA: set the element to 0º and connect the variant to VariantB.

VariantB: set the element to -120º and connect the variant to VariantC.

VariantC: set the element to 120º and connect the variant to VariantA to complete the loop.

All the interactions should have After Delay (1ms) as a trigger and a Linear easing.

The result will be a neutral spinner that will have three small pauses of 1 ms each because of the variant swap, not perfect but fast and for a prototype, it's good enough - and you will be probably the only one that will notice the pauses anyway.

Useful tip: You can either use the same animation time for each variant to make a linear loop, or you can play with the animation using a faster time for some variants and a slower time for others, this will simulate a curved easing.

Complex Spinners

I wouldn't suggest using Figma interactive components for complex spinners, for such cases it might be better to create the spinner with a dedicated animation app (such as After Effects) and import it into the prototype as a GIF.

Micro Interactions

Interactive components allow you to include more delightful details into prototypes. I'll go back to the switch example to show you how to add micro-interactions to this component using MouseDown and On Click.

Do you want to turn a simple switch into an amazing switch?

Component

To recreate this example you need to apply some changes to the structure of the switch:

Apply 32 px of border-radius to the Union layer, this will create the distortion effect you can see in the example.

Variants and Prototype

You'll need a total of four variants to make this work: OffState, OffStatePressed, OnState, and OnStatePressed.

Use the Mouse Down trigger to simulate the mouse being pressed and activate the distortion by moving the bigger ellipse 8 px to the other side.

Use the On Click trigger to change states from Off to On.

3D Animation With A Sequence Of Images

Before we continue, I want to thank Andrea Cau, the author of this cool 3D sequence that I'm going to use as an example.

This is more of a hack to integrate 3D animations into a Figma prototype, you could also use GIFs but this way you gain full control over the images, not just play/stop, allowing you to create a prototype that simulates an interface to rotate objects, commonly seen in car websites where you can rotate the car.

In this case, I've used nine images (you could use more, or less, depending on the rotation you need), the important steps to reproduce this interaction are:

Create one variant per image (in this case 9 variants will be needed) and include one image in each one, following the sequence order.

Create the arrow button, it will be the Hotspot.

Connect the right arrow to the next variant (repeat for every variant).

Connect the left arrow to the previous variant (repeat for every variant).

Use the Instant animation instead of Smart Animate to avoid the fade in/out effect and create the illusion of movement.

Conclusion

The more I use this feature the more I think it will be a game-changer for companies working in the areas of web and product design. Mastering interactive components and variants will allow designers to produce better, more advanced, and realistic prototypes with less effort, giving you the freedom to work on the actual designs and focus less on the design tool itself.

As mentioned earlier, I've created a Figma community file with the examples from this article (and a few more experiments that I've been doing during the testing of the new feature). Once you join the Beta, feel free to duplicate my design, follow along or start experimenting, and share your results! Play with the animation times, change the easing, try to rotate, scale elements, try to nest different interactive components.

If you have questions or something is not entirely clear, leave a question in the Comments section below, or ping me on Twitter (@emi_cicero) - I'd be glad to help! :)

Further Reading

# data[].attributes.attachment_link.title
An Introduction To Figma Interactive Components - Smashing Magazine

# data[].attributes.attachment_link.description
Interactive Components in Figma allows designers to create a component with states (hover, active, clicked, focus) and make it interactive so that every copy of the component will inherit those same interactions by default. Let's explore how it can reduce the time and effort needed to create interactions for your mock-ups.

# data[].attributes.attachment_link.title
GitHub - thomas-lowry/figma-plugins-on-github: A list of Figma Plugins that have been shared on Github.

# data[].attributes.attachment_link.description
A list of Figma Plugins that have been shared on Github. - GitHub - thomas-lowry/figma-plugins-on-github: A list of Figma Plugins that have been shared on Github.

# data[].attributes.attachment_link.title
Figma - Prototype a Drag and Drop Interaction in Figma | A simple drag and drop interaction using the mouse down and drag triggers. Preview to see how it ...

# data[].attributes.attachment_link.description
Figma Community file - A simple drag and drop interaction using the mouse down and drag triggers. Preview to see how it works.

# data[].attributes.attachment_link.title
Figma - Essential UI - Figma Ui Kit | Essential Ui is a Figma components library with +100 ready to use ui components. Find +100 Free ...

# data[].attributes.attachment_link.description
Figma Community file - Essential Ui is a Figma components library with +100 ready to use ui components. Find +100 Free Figma + HTML Landing Page Templates +100 Figma Ui Components 4 Button styles We have created four button styles with three main sizes, small, medium, and large.

# data[].attributes.attachment_link.title
FlowBite Figma - Figma UI kit built for integration with Tailwind CSS | Product Hunt

# data[].attributes.attachment_link.description
Build UI interfaces and simplify the process of integrating into live websites with Tailwind CSS

# data[].attributes.attachment_link.title
Figma - Figmotion | Figmotion is an animation tool built right in Figma. This makes the entry into animation easier a...

# data[].attributes.attachment_link.description
Figma Community plugin - 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...

# data[].attributes.attachment_link.title
Figma - Contrast | Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Con...

# data[].attributes.attachment_link.description
Figma Community plugin - Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG).

# data[].attributes.attachment_link.title
Figma - Logo Creator | Looking for the logo inspiration for your next awesome project on Figma no need to go out and roa...

# data[].attributes.attachment_link.description
Figma Community plugin - Looking for the logo inspiration for your next awesome project on Figma no need to go out and roam here and there for getting logo or inspiration we got you right here in Figma, Logo Creator plugin with prebuild collections of logo browse the plugin and select the best logo or craft one using dif...

# data[].attributes.attachment_link.title
Figma - Site Map | Plan out website architecture, content and user flows with your entire team

# data[].attributes.attachment_link.description
Figma Community file - Plan out website architecture, content and user flows with your entire team

# data[].attributes.attachment_link.title
Figma - Nikuu 3d Illustration Pack by Paperpillar

# data[].attributes.attachment_link.title
Figma - SALY - 3D Illustration Pack | Collection of high-quality 3D illustrations, hand-crafted and full of personalities. FREE to use ...

# data[].attributes.attachment_link.description
Figma Community file - Collection of high-quality 3D illustrations, hand-crafted and full of personalities. FREE to use for your exploration or personal project. Over 30 illustrations and will keep updated in the future. Enjoy! Work Inquiry: talk@hellozea.com ------------------------------ Changelog: v1.7.3 (23 Se...

# data[].attributes.attachment_link.title
Figma - SmoothShadow | As seen on https://brumm.af/shadows and Twitter: SmoothShadow is now a Figma plugin! To recap: -...

# data[].attributes.attachment_link.description
Figma Community plugin - As seen on https://brumm.af/shadows and Twitter: SmoothShadow is now a Figma plugin! To recap: - Create really smooth, layered shadows - Tweak alpha, offset and blur with individual easing curves, giving you unmatched control over the appearance of your shadow Hey friend, if this plugin helps ...

# data[].attributes.attachment_link.title
Figma - Responsify ⚡️ | A Figma plugin to quickly test your designs across multiple device sizes. 1. Select any frame, c...

# data[].attributes.attachment_link.description
Figma Community plugin - A Figma plugin to quickly test your designs across multiple device sizes. 1. Select any frame, component, or instance 2. Menu > Responsify️️ ⚡️ > Select device sizes to test 3. Command + Shift + P to re-run This code is open source: https://github.com/brianlovin/figma-responsify - contrib...

# data[].attributes.attachment_link.title
Beautiful Free Images & Pictures | Unsplash

# data[].attributes.attachment_link.description
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

# data[].attributes.attachment_link.title
Figma - Figmotion | Figmotion is an animation tool built right in Figma. This makes the entry into animation easier a...

# data[].attributes.attachment_link.description
Figma Community plugin - 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...

# data[].attributes.attachment_link.title
Figma - Remove BG | Remove the background of images automatically with just a single click - using the remove.bg API....

# data[].attributes.attachment_link.description
Figma Community plugin - 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.

# data[].attributes.attachment_link.title
Figma - Product Planner | Product Planner makes the process more comfortable to get started, product planning, product insi...

# data[].attributes.attachment_link.description
Figma Community plugin - Product Planner makes the process more comfortable to get started, product planning, product insights, identifying risks, setting goals and identifying and solving problems. Use the prebuilt template relevant to your tasks. Figma believes in collaboration without constraints as well as the power...

# data[].attributes.attachment_link.title
Figma - Autoflow | Autoflow makes it easy to draw flows. Simply select 2 objects and a line will be magically drawn ...

# data[].attributes.attachment_link.description
Figma Community plugin - Autoflow makes it easy to draw flows. Simply select 2 objects and a line will be magically drawn between them. Run AutoflowSelect any 2 shapes whille holding down ⇧SHIFT and a line will be drawnKeep selecting until you're all wired up!

# data[].attributes.attachment_link.title
Figma - Content Buddy | Edit the text content in multiple layers, instances and components in Figma and FigJam files. Co...

# data[].attributes.attachment_link.description
Figma Community plugin - Edit the text content in multiple layers, instances and components in Figma and FigJam files. Content Buddy searches for text content in your selection and displays a list with each unique text content, then you can select each item individually and set a replacement text for all the layers wher...

# data[].attributes.attachment_link.title
Figma - Clay Mockups 3D | Create mockups with 3D clay-style device models. Customize the color, camera angle, and device mo...

# data[].attributes.attachment_link.description
Figma Community plugin - Create mockups with 3D clay-style device models. Customize the color, camera angle, and device model for your mockups. Includes models for the iPhone 11, Pixel 4, and Macbook Pro. How to use: Run Clay Mockups 3D from the plugin menuChoose a device modelSelect any layer to render it on the devic...

# data[].attributes.attachment_link.title
Figma - Blobs | Create organic blob shapes with the click of a button. Every shape that is generated is unique to...

# data[].attributes.attachment_link.description
Figma Community plugin - Create organic blob shapes with the click of a button. Every shape that is generated is unique to the last. You can control how unique a shape is along with how many points it has. Shapes are created using SVG, so you get those oh-so-sweet bézier curves.