How to Build a Staff Attendance App with AI

Figma Make

Figma Make is Figma with site publishing and AI vibe coding built in. The design-to-publish double-handling disappears, and development proceeds by chatting instructions to the AI.

Hi, I'm Masato.

A restaurant owner recently told me "I want a staff-attendance app" — so I built one with AI.

Drawing on that experience, this article shows restaurants and any business managing hourly staff how to build their own attendance app.

First, here's what I built:

In the AI era, tracking the frontier daily, my reaction to any app is "you could just build that yourself."

So here's the simplest AI-powered path to building an app — the tools, the steps, and most importantly, what it takes to make it actually usable.

We're going with the simplest, zero-setup route — no Claude Code CLI vibe coding this time, because the setup is a hassle. Instead: Figma Make — Claude Code without setup, and high quality.

What is Figma Make?

Figma plus site publishing plus AI vibe coding.

The Figma we designers use daily now ships with hosting and AI. The design→publish double-handling disappears, and the development itself is done by AI.

Figma is the world's #1 design tool by users. Give it publishing and there's no need to migrate to Webflow or WordPress — design straight to live site. That's now reality.

For real site operations, no-code still wins — but for small sites and apps at the individual-shop level, AI-built is already plenty satisfying.

Ordering your app through Figma Make's chat

"Build me an attendance app"

Just type it in chat, like talking to ChatGPT. That's genuinely all.

One sentence gets you this far. The hard part comes next: you need data persistence, which means wiring up a backend. Figma proposes Supabase — go along with it.

Add what real operation demands

Once you start using it, "ah, I need this too" moments arrive. Order each addition through chat.

Paste "please implement the following" plus this list:

• Database integration
• Auth/login system
• Payroll logic (overtime, night-shift, holiday premiums)
• Paid-leave management
• Data export/import (CSV, JSON)
• Legal compliance checks (working-hour limits, etc.)
• Notifications (browser)
• Printing (PDF generation)
• Analytics and reports
• Mobile support (responsive design)

When errors appear, just keep asking for fixes

This matters. Nothing is perfect on the first pass — even with AI it honestly takes time, and patience is the skill. When layouts break, throw "there's an error — fix it" into chat and keep moving. Plain language works: "this button doesn't respond," "the text is invisible."

Integrations that raise real-world utility

• Messaging integration: clock in/out from staff phones via chat apps
• Payroll software integration: automated data exchange — bookkeeping gets dramatically lighter
• PDF export: monthly reports auto-generated for your labor consultant

All orderable via chat. PDF is easy; integrations are trickier — as of August 2025, some messaging platforms have no AI path and need manual work.

Caution: save your code whenever things are good

Seriously important. I skipped this at first and paid for it.

Figma Make is convenient, but being AI, it occasionally resets its memory or breaks everything. Past versions are clickable to restore — but restoration has failed on me, so duplicate the whole file ("Make a copy") at every good checkpoint. Then a disaster just means resuming from the copy.

Summary: app-building with Figma Make

My honest take: the backend and integration side is hard. Maximum freedom, but you're dependent on the AI — rough going if you can't edit things yourself. Give it a year and full automation may arrive; I'm looking forward to that.

For freelancers and small companies especially, the era where Figma Make alone is sufficient has arrived.