TAKO / GROWTH GEEKS AGENCY
An independent product created by Growth Geeks Agency. We planned, designed, and built a Figma plugin and web platform to turn scattered screens into a shared view for designers and their teams.
The shared web map: journeys and flows stay connected to the product.
01The brief
A product can have well-designed screens and still be difficult to understand as a whole. Flows are spread across files, separate documents fall behind, and stakeholders outside Figma lose the context.
Tako is our own response to that problem. We built it for designers, design-system teams, founders, and stakeholders who need one understandable view of the product.
02The approach
We started with a simple hierarchy: Project → Journey → Flow → Screen. It connects the product’s purpose to the steps a person takes and the interfaces they use.
Designers import and update frames through the Figma plugin. The web platform turns that structure into a shared map, with browsing, search, status filters, and screen previews for the wider team.
03The work
The Figma plugin supports the designer’s import and update workflow. The web platform gives the wider team a shared way to browse and understand the product.
Designers review screens before importing them into the connected product structure.
The plugin’s frame review and update workflow.
Journeys keep the imported screens organised around the experience.
Maps, lists and library views provide different ways to navigate the same product.
Browse screens in the web platform.
Connect the product to its component libraries.
The public website introduces Tako, while documentation supports the people using it.
The public product website.
Product documentation and onboarding guidance.
04Our contribution
Growth Geeks Agency owned the complete build: strategy, UX and UI, the design system, plugin and web development, integrations, documentation, and release workflows.
Before building the interfaces, we defined who Tako needed to serve and how those people would understand the product.
How it helped: The plugin and web application could share one model, so importing a design and understanding it on the web became parts of the same experience.
The Figma plugin and web platform have different roles, but they need a consistent visual language and familiar interactions.
How it helped: Reusable decisions kept the interfaces consistent, while adoption views made component usage visible within the product structure.
We built the Figma plugin, web application, and supporting platform as parts of one system.
How it helped: The product could support the full path from a designer’s frame selection to a team’s shared view, with account and delivery foundations behind the interface.
A useful product also needs a clear introduction. We created the public website to explain Tako’s purpose and lead people toward trying it.
How it helped: The first visit and the in-product experience could tell the same story, while consent-aware tracking provided the measurement foundation.
05What we delivered
The result is a connected ecosystem: the Figma plugin, web platform, shared design system, public website, and supporting documentation, with authentication, billing, analytics controls, and release workflows.
Next.js, React, and TypeScript power the web application. The Figma plugin uses React, Vite, and esbuild. Hono, Prisma, and PostgreSQL support the API and data layer. OAuth and workspace permissions govern access. Stripe handles subscription workflows, Google Tag Manager is governed by consent controls, and GitHub Actions runs checks with Vitest and Playwright.
GROWTH GEEKS AGENCY
Connect the strategy, design and delivery your project needs.
