In this article, I’ll explain how I approached designing a website for developers that assists them by offering pre-defined animated components.

👋🏼 Introduction

My developer friends and I were working on some front-end projects where we felt the need to have some components in our app. Components are the building blocks of an app or a website. It could be a header, footer, pricing card, product detail card, etc which could be used throughout the app multiple times. While it’s one of the most fundamental skills to be able to write components, project builders and developers often feel the need to use ‘pre-defined’ components in their apps. They are used because no one wants to repeat the process of setting up the boilerplate for a similar component for a new project.

Though there are alternatives out there that offer pre-defined components to speed up the development process, there’s a lack of platforms that offer ‘animated components**’**.

🧐 Understanding the problem

After interacting with some developers and discussing their experience in-depth, I came across the following problems:

• Coding animated components is a pain for developers. Designers can be creative in Figma or Sketch and create some fun micro-interactions with a button or a progress bar but coding it from scratch and handling it is a nightmare.