Aditya's Newsletter
Posts
Vibe Coding A World Clock With Figma And Anima Playground

Vibe Coding A World Clock With Figma And Anima Playground

From design to code in seconds

Aditya Kumar Saroj
April 25, 2025

We are now a community of 254! Thank you❤️

This newsletter is free and I don’t use paid advertising. I completely rely on organic growth through users who like my content and share it.

So, if you like today’s edition, please take a moment to share this newsletter on social media or forward this email to someone you know.

If this email was forwarded to you, you can subscribe here.

If you want to create a newsletter with Beehiiv, you can sign up here.

Anima Playground is a UI-first platform that enables you to go from a Figma design to a fully functional app in seconds. Today, we are going to do just that. I will design a minimal non-functional world clock in Figma and by the end of this article we will have a fully functional world clock coded, pushed to GitHub, and deployed by Anima Playground.

Step 1: Make The Initial Design In Figma

For the original design, I used a ‘Desktop’ frame in Figma with an indigo background. A simple “World Clock” title to the top left, a PNG world map image with a lighter shade of blue in the background and a red line in the middle, and two time-boxes complete our design.

The first time-box shows the local time, time zone, and location. The red line is supposed to be a slider that points to the area whose time and time zone is supposed to be shown in the second time-box.

Of course, it’s just a static design in Figma. Let’s see if Anima Playground can understand all the logic involved here.

Step 2: Load Your Design Into Anima Playground

Just open animaapp.com and paste the link of the Figma design to convert it into React code in seconds.

I pasted my World Clock’s Figma link and here’s the initial result:

Uh oh! This isn’t really our design. Let’s see if Anima Playground is smart enough to fix the mistakes.

Step 3: Fix Initial Mistakes

Anima Playground had the right components coded but some wrong repetitions of images and text so I tried this prompt:

“The time boxes on the bottom look fine. But I want a single map which is the world map image in the middle. And no extra images or time boxes. The “World Clock” heading at the top is fine but I don’t need “World Clock” repeated too. Just one heading, one map with the line, and two time boxes.”

And voila, we have the image and time boxes in the right place:

I also changed the background to white and maintained the rounded corner style that the Playground chose for me.

Step 4: Add Some Logic

Next, I decided to make the slider red and movable across the image. Anima understood and implemented this in a single attempt!

Step 5: Show The Local Time

As per the initial design, I wanted the first box to show the local time, time zone, and location. This should be relatively easier to code because JavaScript already has built-in functions to get the local time and time zones.

The Playground initially got the location as “Calcutta” from Asia/Calcutta as my time zone but I told it to use the city’s correct name — Kolkata.

Step 6: Get Time From Map

Well, here’s the tricky part. If you ask Anima Playground or rather any AI agent to directly get locations from the silhouette image that I’ve used, it will not work. After all, it is just an image and not a programmatically-marked map component.

So, for the world clock to function i.e., show different locations, times, and time zones as we drag the slider, we need to create an illusion.

I used this prompt — “The image that I’ve used is a black silhouette of the world map. What we need now is to dynamically change the time, timezone, location in the second time box as the slider moves across the world map. Of course, we cannot extract actual locations from the map so we need to create the illusion of changing locations as we move the slide from left to right. Have at least one location for each timezone. Starting from -11 in Alaska to +12 in New Zealand I guess. You need to pick the right time zones for the right location.”

Bingo! Anima Playground created a map (the data structure, not the image) of cities with the right time zones and used it to arrange them across the world map. It wasn’t perfectly aligned but it did the job.

For some reason, Playground also changed the code of the first box and my location changed to Karachi, Pakistan.

Step 7: Apply Final Touches

My final fixes included instructing Anima to fix my location and changing the original image so that the slider mechanism was more accurate (also, because the original map did not have New Zealand and I felt bad for them).

Here’s the final product:

Don’t expect it to be completely accurate with the locations on the map but it’s a usable project if you want to convert your local time to some other time zone.

Here’s the world clock app deployed by Anima: World Clock Powered By Anima Playground.

If you want to take a look at the code, you can check it out on my GitHub: Source Code (pushed in a single-click by Anima!).

Conclusion

This entire process took me less than two hours and I had no strict plans before starting. Everything was reactive and conversational between me and Anima Playground. Converting your Figma designs to fully-functional apps is easier than ever before.