Use Figma Community Files To Save Time As A Developer.

Let's go over two scenarios you might be able to relate to...

First, You have a sweet idea for a project, you visualize the entire project from UI to functionality and you're excited to start building.

You open up your laptop and... you blank out... You can't think of a UI beautiful enough to capture your idea.

Or...

You start building a UI, however with each line of CSS you write. You feel like you're doing your idea a disservice. To you, it looks so ugly. You feel like no one's going to appreciate your work.

If you can relate to either or both of these scenarios. Keep reading. This article will show you where to get UI inspirations for your next project for free.

After reading this article you will save yourself from a lot of stress and time associated with design and have more time to implement functionality in your project.

What are Figma community files?

It's just as the name implies, a collection of files for and from the Figma community.

You could think of this as a public library of UI design uploaded by members of the Figma community for free use by anyone who needs it.

These files range from design kits to wireframes etc. These files are available for you to use as inspiration for your projects.

"Your job is to collect good ideas. The more good ideas you collect, the more you can choose from to be influenced by"

- Austin Kleon

How to use Figma community files

Now let's get to why you're here, you want to save yourself time (maybe the embarrassment of getting roasted for your UI too? I understand, I've been there).

If you don't know what Figma is then I'd recommend going to check the Figma website first. If you do know what Figma is, read on.

For this activity, you may or may not have the Figma software installed on your computer, however, you need to have an account with Figma. I'll recommend having the Figma software installed on your laptop, this ensures you can always access your Figma files offline and make modifications.

if you're using the web version of Figma, navigate to the website. Sign up/Sign in if you already haven't. If you're signing up and using it for the first time, after signing up you can skip all the suggested steps.

This tutorial is the same for web and app users so you can follow along on whichever platform you use.

Once you're done signing up or opening up the app, your screen should look like the image below.

If your screen looks like the image above, you're halfway there. If it doesn't look like it, you might want to tinker around a bit till you get it.

Now you need to click the explore community option in the top right corner of your screen. Once you do, you should get the screen below.

Click on the search bar, type in "website UI kit" and search. Your search results should look similar to mine below.

You can pick an option from the numerous ones here. Some are free and some are not. Be sure to go through the list to get one you want, either free or paid. After selecting an option you'll see a button labelled "Get a copy" at the top right. Click it and this should open up Figma's web editor or redirect you to the Figma app.

If you already know how to use Figma, then you can pick it up from there. If you don't, check out Figma's resources to get started. It might seem like a bit of extra work but I promise you that learning Figma is completely worth it, especially as a front-end developer. Learning how to use Figma has several advantages, some of them are:

• Easily visualize, prototype and design your project ideas before execution.

• Easy collaboration with designers or other developers.

• It's a wonderful source of inspiration for your projects.

Important points to note

Now that you've seen how to get the files, there are a few important things to note:

1. Figma files are not a substitute for basic design skills. Know your CSS well. Make sure you hone your CSS skills by recreating the UI of popular sites on your own or taking challenges from sites like frontendmentor.

2. You're not supposed to just copy the files and start writing the code for the functionality, add your style to the design. Change a few things, use different colours, redesign the layout etc.

3. If you use a resource from the Figma community files be sure to appreciate the creator. Even if you do add your twist to the design, give a shoutout to the creator. Do not commit intellectual theft!

4. Be sure to check Figma's rules and guidelines before using any Figma file. The few minutes you'll spend doing this will save you from the consequences of violating the rules

Conclusion

Having to design your projects from scratch as a front-end developer can be a pain, especially when you have a lot of functionality to implement. As you've seen from this article you can save yourself a lot of time and stress by utilizing free resources provided by Figma's community. So why not give it a try, you'll be happy with the results.

If you have any comments or questions please feel free to drop them below or reach out to me on Twitter where I'm most active.