DEV Community: Ak Deepankar

I Was Tired of Copy-Pasting Translations in Figma - So I Built My Own Tool

Ak Deepankar — Sat, 07 Feb 2026 16:44:15 +0000

I do a lot of design work for clients who have users all over the world. That means my designs can't just look good in English, they have to work in French, Hindi, Spanish, and German too.

In the past, this was a massive headache. After finishing a design, I’d spend Time copy-pasting translations from Google Sheets back into Figma. Then I’d find out the German version was way too long and broke my buttons. It was frustrating and took forever.

So I built Polyglot UI, a Figma Plugin that sits Right Inside my Workflow to solve my own problem, designed to be a complete internationalization (i18n) toolkit for designers.

// Detect dark theme var iframe = document.getElementById('tweet-2020176573132165268-811'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2020176573132165268&theme=dark" }

How I use it every day
I don't wait until the end to think about languages anymore. Here is how it helps me:

Core Translation & Localization
1) Instant scanning of your Figma design to extract and translate text into French, German, Hindi, and Spanish via the Lingo.dev API.
2) Live Canvas Preview: A real-time toggle that lets you "hot-swap" your actual Figma layers between languages so you can see exactly how the UI looks in different locales.
3) Stress Test (Pseudo-localization): A "break-it-first" mode that simulates expansion and accents (e.g., [!!! Ààééîî !!!]) to push your layout to its limits before you even start translating. If it survives stress mode, it’ll survive real translations. Because real translations break UIs in ways English never will.
4) Manual Overrides (Human-in-the-loop): Click any translation in the list to edit it directly. These tweaks are saved as persistent overrides in the Figma file, and the Plugin is smart enough to never overwrite your custom wording.
5) Custom Badging: Manually edited fields are clearly flagged with a "Custom" badge so you can easily distinguish between AI suggestions and approved brand voice tweaks.
6) The plugin automatically adapts to Figma's Light and Dark themes for a seamless workspace experience.
7) Top-Bar Quick Clear: A fast-access button in the header to reset your current session and revert the canvas back to English without touching your settings.

📦 Developer Handoff
Export to JSON: One-click export for any language. It generates a clean, developer-ready .json file containing all your approved translations and manual overrides, ready to be dropped into a React or mobile app.

How it works under the hood

For those curious about the technical side,
The underlying logic for the translation process is split between two main files:

ui.html : This file contains the core API logic.
It handles the fetch calls to the Lingo.dev engine. It manages the targetLangs array and the asynchronous batching of translation requests.
It also contains the pseudoLocalize function used for the Stress Test.

code.ts : This file handles the Figma interaction logic.It scans the design to extract text nodes.
It manages the persistence by saving and retrieving translations using Figma's setPluginData and getPluginData.
It ensures that your manual overrides aren't lost by checking for the isManual flag before applying updates.

In short: ui.htmlis the "brain" that talks to the AI, and code.ts is the "hands" that manages the design data inside Figma.

Github Link

Keeping it simple
I didn't want a "heavy" enterprise tool. I just wanted something that sits in Figma and does the boring work for me so I can get back to designing.

If you're tired of copy-pasting translations for your clients, you should try Polyglot UI. It saved a lot of my time.

Building the tool you actually need is a great feeling. 🏗️🚀

Forged in Westeros : A Developer Portfolio

Ak Deepankar — Tue, 27 Jan 2026 19:09:16 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

As a long-time Game of Thrones fan, I built this portfolio as a themed realm to represent my journey as a developer. Each section reflects a part of my watch - projects I’ve worked on, things I’ve learned, and experiences gained by building real products.

This portfolio is a place to explore how I approach problems, write code, and turn ideas into working applications. The watch never ends.

DON'T FORGET TO EXPLORE THE THREE THEMES IN THE PORTFOLIO. [ HOUSE STARK, HOUSE LANNISTER AND HOUSE TARGARYEN ] YOU CAN CHANGE IT. IN BOTTOM RIGHT CORNER SHIELD BUTTON.

To Open in New Tab - Portfolio Link

Portfolio

How I Built It

This portfolio was built using Next.js with Tailwind CSS for styling, allowing me to move fast while keeping the layout consistent and responsive. I focused on a component-driven structure so each section of the site could evolve independently.

I used Google Antigravity to help shape and refine the code during development, speeding up iteration and cleanup. Once ready, the site was containerized and deployed on Google Cloud Run, making deployment simple and reliable.

The goal was to keep the stack minimal, modern, and easy to maintain while letting the theme and content take center stage.

What I'm Most Proud Of

1. Immersive Storytelling 📖: The site doesn't just scroll; it tells a legend. From the "Beginning" to the "Hall of Victories," every section header and transition reinforces the protagonist's journey (you).
2. Micro-Interactions ✨: Small details like the magnetic buttons, the "swish" sound logic (implied visually), and the hover-reveal interactions on project cards make the site feel alive and responsive.
3. Visual Hierarchy 👁️: Despite the rich textures, the content remains readable. We balanced the "Maximalist" aesthetic (gold, crimson, parchment) with "Minimalist" usability (clean sans-serif fonts for body text, clear navigation).

GeoSpirits : Resurrecting GeoCities.

Ak Deepankar — Fri, 05 Dec 2025 20:13:20 +0000

Inspiration

Remember GeoCities? In the late '90s, it was a digital neighborhood where anyone could create a personal homepage and claim their corner of the internet. At its peak, it was the third most-visited site on the web, a place where creativity thrived, unpolished and authentic. Then it died.

For Kiroween, we decided to resurrect that spirit - literally bringing dead tech back to life. GeoSpirits is GeoCities reborn, but instead of organizing pages by fictional neighborhoods, we anchor them to real places on Earth. Every page you create gets pinned to an actual location on an interactive 3D globe. It's the same democratized web publishing that made GeoCities magical, now enhanced with modern mapping technology, real-time 3D visualization, and the ability to explore the world through other people's stories.

We're bringing back the joy of building your own corner of the internet, but this time, that corner has coordinates. And with Kiro, we could focus on the creative magic while it handled the heavy lifting: from natural conversation brainstorming to spec-driven implementation, Kiro helped us summon this project from the digital graveyard. We even added some spooky touches, flying ghost animations across pages, dark themes, and atmospheric effects - because what's a resurrection without a little haunting?

What it does

GeoSpirits is a location-based page publishing platform that anchors web pages to real places on an interactive 3D globe.

Create & Publish:

Build pages with a drag-and-drop builder featuring 10+ components (headings, text, images, galleries, buttons, custom HTML)
Use AI to auto-generate page content and layouts instantly
Customize everything—colors, fonts, spacing, themes (light/dark), header images
Add interactive buttons with actions like links, confetti effects, and alerts
Embed custom AI chatbots on any page for visitor interaction
Pin your page to any location on Earth by clicking the 3D globe
Get a unique shareable URL (e.g., /my-travel-blog)

Explore & Discover:

Browse all published pages as purple markers on the 3D Mapbox globe
Click any marker to instantly visit that page
Navigate with smooth animations, atmospheric fog, and starry effects

Manage:

View all your pages in a personal "My Sites" dashboard
Edit pages anytime, update content, change locations, modify styles
Delete pages with confirmation protection
Secure authentication with Row Level Security using Supabase

Special Features:

Flying GIF animations across pages
Spooky mode for Halloween vibes
Server-side rendering for SEO and fast loads
No login required to view published pages

How we built it

We built GeoSpirits with Kiro, the AI-powered IDE that made rapid development possible during this hackathon.

Tech Stack:

Frontend: Next.js 16 with React 19, TypeScript, and Tailwind CSS
3D Globe: Mapbox GL JS with globe projection, custom markers, and reverse geocoding
Backend: Supabase for PostgreSQL database, authentication, and Row Level Security
AI Features: OpenAI API integration for content generation and custom chatbot embedding
Testing: Vitest for unit tests, fast-check for property-based testing

Vibe Coding : We used conversational coding for rapid prototyping and iteration:

"Create an interactive 3D globe with Mapbox that shows markers for published pages"
"Build a drag-and-drop page builder with customizable components"
The most impressive generation was the LocationPicker component-we described wanting users to click on a 3D globe to select coordinates, and Kiro generated the complete implementation including Mapbox event handlers, reverse geocoding API integration, coordinate state management, and UI feedback in one go.

Spec-Driven Development: For complex features, we created structured specs with requirements, design, and tasks:

AI Page Generator Spec:

10 user stories with 50 acceptance criteria
8 correctness properties like: "For any AI-generated component, the component must conform to the PageComponent type schema with all required fields and appropriate default styles"
15 implementation tasks with property-based tests (100+ iterations each using fast-check)
Covered: AI mode, prompt engineering, OpenAI integration, error handling, regeneration, token tracking

Globe Image Markers Spec:

5 user stories with 25 acceptance criteria
12 correctness properties like: "For any marker with valid location data, when clicked, the side panel should open and display the location details"
8 implementation tasks covering marker rendering, validation, styling, and side panel interactions

Why Specs vs Vibe Coding:

Specs for complex features: AI generation (external API, state management, security), authentication (RLS policies, session management), CRUD operations (validation, error handling)
Vibe coding for rapid iteration: UI styling, simple components, quick fixes, visual design
Hybrid approach: Prototype with vibe coding, create spec when complexity emerged
Example - AI Generation:

Vibe coding attempt: 30 min prototype, but no error handling, validation, or regeneration
Spec-driven: 1 hour writing spec, 4 hours Kiro implementation, fully tested with property-based tests
Result: Production-ready feature with comprehensive edge case coverage
Kiro's Impact:

Generated complete Supabase schemas with RLS policies
Built entire Mapbox integration with 3D globe, marker clustering, atmospheric effects
Created 20+ React components with TypeScript types and CSS modules
Implemented all CRUD server actions with proper error handling
Generated property-based tests validating correctness across 100+ random inputs
Integrated OpenAI API with prompt engineering, response parsing, token tracking

Challenges we ran into

3D Globe Interactions: Handling click events on a rotating 3D globe with accurate coordinate mapping and reverse geocoding
AI Validation: Ensuring OpenAI responses matched our component schema without breaking the page builder
State Management: Preserving manual edits during AI regeneration across multiple components
RLS Policies: Balancing user-only editing with public page viewing in Supabase

Accomplishments that we're proud of

Resurrected GeoCities with modern tech-democratized publishing anchored to real places
Property-based testing with 100+ iterations catching edge cases automatically
Hybrid workflow mastery: Specs for complexity, vibe coding for speed