How to use Exemplar - Free Avatar Library?🤩
Tags: tutorial, design, opensource, html
Published: 2021-02-17 10:58:11

### What is an Avatar?🧐

![Free Avatar Library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dd6zmppifdabhihnlqkn.jpg)

Well, In computing, an **avatar** 🧑(also known as a profile picture or user-pic) is a graphical representation of a user or the user’s character or persona. It can be a two-dimensional form as an icon in Internet forums and other online communities or a three-dimensional form. We can also define an avatar as something visual used to represent non-visual concepts or ideas or is an image that represents a person in the virtual world of the Internet and computers.

An example of an **avatar** is an icon you use to represent you on an Internet forum. Avatars are used widely on websites and in online role-playing games. They are an integral part of Internet chat, Internet messaging systems, blogs, and artificial intelligence, particularly.

### How does Exemplar- Free Avatar Library help?🤔

-   Avatar helps to give a unique and interactive look.🤩
-   Gives visitors a good first impression.😎
-   Interactive appearance🎨
-   Helps to keep visitors onboard⏰

**Exemplar** — [**free Avatar library**](https://themeselection.com/products/exemplar-free-avatar-library-for-figma-and-sketch/) comes with **20 Avatars**. You can use them for your application by customizing colors and shapes..!! It is a hand-picked style library of user-profiles. While working on a project involving a lot of profiles we realized that a styles library is much faster to use than a plugin, so to save time and make it easy, we have prepared this free avatar library.

**Features:**

-   Figma components
-   Sketch symbols
-   20 Free Avatar
-   Resizable, High Resolution & Customisable
-   Suitable for Web & Apps

{% youtube PFdHrSmLcZQ %}

Now, let’s check what this highly customizable Free Avatar library For Figma and Sketch offers..!!🔥

### Choose Avatar and background-color

With this feature, you can choose an Avatar image with sketch and Figma override. All you have to do is select the background color using a color palette. Besides, you can easily create your own Avatar library using our avatar components.🤠

**How to use:**

-   **Avatar Swatch🧑👧:** You can swap avatar using the Components Popover in the Symbol panel in the Inspector. Choose a Symbol from the list or search for the Symbol you’re looking for and click to swap it with the currently selected Symbol.

![Exemplar free avatar library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ets3r6c6uk8rderak55.png)

-   **Color Swatch🎨:** In the properties panel, click the color icon and select the color.

![Exemplar free avatar library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cod9mbd6c4lydws8xss.png)

### Scale Avtar and Change Shape Easily

Use high resolution and scalable Avatar, according to your design recommendation. Besides, this feature allows you to change the Avatar shape like a pro in just one click. Furthermore, you can create your own custom shape easily for your avatar library.

**How to use:**

-   **Scale Avatar🛠:** You can scale the object the Image fills. After that, you will scale and position the Image based on the Fill mode you’ve selected.

![free avatar library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3msoc19v6qaq41bflud.png)

**Change Avatar Shape:** Once you select the main component select any shape from the design panel and you’ll be able to change the shape.

![Free avatar library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g04jfhculr939jrutcu9.png)

### Multipurpose Initials and Avatar State

Well, Solid and label side initials make your application more interactive. Thus, this feature is important. Besides, you can change the initial text according to name using sketch and Figma override. Thus, by using this free avatar library, choose user states like active, away, offline, do not disturb.

**How to use:**

-   **Initials Text Change🔠:** You can change the content inside an individual initials instance without changing the Source or affecting any other instance of it.

![Free avatar library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdi7u49bqxr1kyew89q2.png)

-   **Select Avatar State🟨:** Click on the avatar component then go to the properties panel and select the color of the state.

![Free avatar library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0ggz1y0k5h41mi69h32.png)

#### Example:

Here is an example of how you can use these features in your project.

![Free avatar library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psly6v340gfbkxlzm3kk.jpg)

### Conclusion:

So, these were the amazing features of our highly customizable Free Avatar Library for Sketch And Figma offers😎. We hope that you enjoy this amazing library. Do share your experience using this tool. Feedbacks and suggestions are highly appreciated.🙂

Also, don’t forget to share this tool with your colleagues, because sharing is caring..!!🤘

Credit: [**Unsplash**](https://unsplash.com/)