![How to Use Figma Community Templates [2024 Tutorial]](https://assets.mockuuups.com/mo/image/upload/w_0.5/jnbk9ou3x034dv5aedkh)
Figma has fast become the UX / UI design tool of choice for forward thinking designers. So much so, Adobe just bought it for a whopping $20 Billion dollars.
Update: After getting worried about rules from the UK and EU, Adobe and Figma said that they have decided together to stop their plan to join together. Adobe had planned to buy Figma for $20 billion, but now this won't happen.
One of the biggest reasons for its success is down to its thriving community where designers can share Figma resources including; design templates, widgets, and plugins to save precious time.
In this post, I’ll walk you through how to use the Figma community followed by Figma community templates and files so you never have to start designing from scratch again.
Let’s jump in.
- What's inside the Figma community
- How to find the perfect Figma community resource
- What file format are Figma community resources in
- How to add Figma community resources to your projects
- How to customize Figma community resources with plugins
What you can find in the Figma community
The Figma community allows you to access a range of categorized resources to shortcut your design process from ideation to collaboration and hand-off.
They’re categorized into 3 main buckets:
- Figma plugins are made by independent developers to extend the functionality of Figma. You can read our complete guide on how to use them here.
- Figma widgets are custom objects your team can see and interact with to level up collaboration and the design process. (E.g. you might have a to-do widget, a calendar widget, or a project timeline widget to share with clients.)
- Figma community templates + files (Which we’ll dive into in a moment) are community-made files you can duplicate to shortcut your design process.
How to find specific Figma community resources
To search for specific Figma resources, head over to the Figma community page here.
Up top, you’ll see the search bar or you can choose from the Figma categories. Once you’ve searched for something like “iPhone Figma mockup,” or selected a category.
You can choose Files + templates, Widgets, Creators, or Plugins from the side menu to filter down to files you can duplicate.
And if you don’t know what you’re looking for…
Figma has a curated page formatted into several Figma resource categories like any good marketplace, including ones like:
- Classroom resources for educators
- Design process and handoff assets
- Presentation and pitch deck templates
- Widgets and UI elements
Check out the full collection here.
What format are Figma Community files in?
All Figma community files and templates are mini Figma or FigmaJam files that you can duplicate, customize, and add to existing projects.
To access the Figma community, you’ll need a Figma account.
And if you’re wondering who can publish to the Figma community? Know that anyone can as long as you have a community profile.
Let’s jump into how to use them.
How to use Figma templates in your own projects
I’ve touched briefly on how to navigate the Figma community resources. But let’s run you through how to duplicate and modify Figma community templates & files specifically, for your own projects.
1. Search the Figma community for the resource you need
Start by heading to the Figma community page and searching for the type of resource you need.
For this example, I’ll search for “iPhone mockup.”
Then, to filter by Figma community files and templates, I’ll choose the Files + Templates tab in the sidebar and choose one.
2. Click “Get a copy” to duplicate the Figma template into your workspace
Once you’ve found a Figma community template or file, click it, and you’ll be presented with the publisher's information page.
Click Get a copy to duplicate the Figma community file into your document.
3. Edit Figma community templates inside Figma
Once you’ve duplicated a Figma community template or file, it’ll open a Figma file. Often, you’ll get instructions left by its creator on how to customize the template.
But it doesn’t stop there...
For this example, you’ll notice I used a template from the Mockuuuups community profile — because the quality is great — and you can pair it with the Figma mockup plugin to regenerate hundreds of other mockups without having to search the community over again.
Let me show you how Figma plugins and templates work together…
How to customize Figma community mockups
After you’ve created a copy of one of the Figma mockup templates (Available here), you’ll be presented with the Figma iPhone mockup and artboard (known as ‘frames’ in Figma).
It’s here you can update the contents of the Figma community mockup frame and regenerate it with your design in 3 simple steps.
But first, we’ll need to grab the Figma mockup plugin.
From inside Figma, click Plugins from the left menu, click browse all plugins, search for Mockuuups Studio in the search bar, and click install to get the Figma mockup plugin.
Or, you can install it from the Figma community page here.
How to regenerate community mockup frames with the Figma mockup plugin
- Below the community mockup template, you’ll notice the frame that appears inside the mockup scene. Select it with the cursor, then customize or add your design.
- Then, click on the mockup itself and you’ll notice the Update mockup appears under Plugin on the right-hand panel of the Figma editor.
- Click Update mockup then from the Mockuuups Studio window click Update, and the mockup will regenerate with the contents of your frame.
How to edit mockup in Figma?
Sometimes, you might want more than a mockup template, and create your own mockup from scratch.
Thankfully, Mockuuups Studio lets you customize device colors, hands, backgrounds, and effects to create custom mockups from over 788+ million combinations.
All you need to do is open up the Mockuuups Studio plugin and click Open Studio from the top left of the mockups grid.
Here you can choose from dozens of smartphone, tablet, and computer mockups. Customize colors, hand interactions, effects, backgrounds, and more to make any mockup imaginable.
Here’s a quick Figma mockup tutorial we put together to run you through it:
Best Figma Community Mockups
I could go on about all the mockup possibilities within the Mockuuups Studio. And talk about how you can impress clients, stand out from competitors, and speed up your workflow.
But instead, let’s show you some of the favorite mockups you can create in as little as 3 minutes with Mockuuups Studio:
Like what you saw here? Check out this round-up of the best iPhone mockups for Figma designs.
What you should do now
Try our Figma mockups plugin for free and join over 135K designers like you using it to impress clients and speed up their workflow.
And if you’re already with us, here are more Figma tips to give you the edge:
