A responsive template, perfect for business directory websites, crafted with Next.js and Tailwind CSS. It includes essential frontend components like search functionality, user authentication, and customizable listings. Ideal for building a sleek, modern directory website, but please note that the user authentication and customizable listings are frontend only.

dir-1.webm

main.png

dir-5.png

dir-1.png

dir-4.png

dir-2.png

dir-3.png

dir-8.png

dir-7.png

dir-6.png

Effortlessly build and customize a responsive, SEO-friendly website with Next.js and Tailwind CSS—complete with search, user authentication, dark/light mode, and lifetime updates.

## 💻 Getting Started

Setting up Avatars is straightforward:

### Install Dependencies

- Ensure you have [Node.js](https://nodejs.org/en/download/) installed, as it includes NPM (Node Package Manager).
- Run `npm install` to install the necessary packages.

### Start Developing

- Use `npm run dev` to start the development server. This command watches your TypeScript files for changes and automatically compiles them to JavaScript.


To run the plugin in figma, you'll need to download the [Figma desktop application](https://www.figma.com/downloads/).

After downloading, navigate to the Files menu > `Plugins` > `Development` > `Import plugin from manifest.json file`, then navigate to the project folder and select the `manifest.json` file.

![Importing the plugin](https://api.copyui.com/uploads/import-plugin.png)

This will import your plugin successfully. ✅

![Plugin imported](https://api.copyui.com/uploads/plugin-imported.png)

You can now launch and use the plugin by going to the plugins menu.

![Launching the plugin](https://api.copyui.com/uploads/launch-plugin.png)
![Using the plugin](https://api.copyui.com/uploads/use-plugin.png)

That's it! When you run the development server with `npm run dev` and update the code in the `ui.html` or `code.ts` files, the plugin will update in real-time. ⚡

For more information on how to build and run figma plugins, refer to the [Figma Plugin Quickstart Guide](https://www.figma.com/plugin-docs/plugin-quickstart-guide/).


## 🎯 Who is This For?

**Avatars** is perfect for developers looking to build their own Figma plugins with minimal setup time. Whether you're a seasoned developer or just starting out, this boilerplate is designed to streamline your workflow and let you focus on creating great plugins.

## 📚 Resources

- **[Figma Plugin API Documentation](https://www.figma.com/plugin-docs/api/):** Dive into the official Figma Plugin API Documentation.
- **[TypeScript Documentation](https://www.typescriptlang.org/):** Learn more about TypeScript on the official website.


2024-03-09-15-43-08-1-1.m4v

a.png

c.png

b.png

avatars

Avatars is a robust and customizable Figma Plugin boilerplate, designed to help developers kickstart their plugin projects with ease. This boilerplate provides a solid foundation with TypeScript integration, ensuring that your development process is smooth and efficient.

Templates

Directory - The Ultimate Next.js Directory Template

Avatars - A Figma Plugin Boilerplate