How to Build a Staff Attendance App with AI (Figma Make)

Figma Make — what it means

Figma Make is Figma with site publishing and AI vibe coding bolted on. The double handling of design and then publishing disappears, and the AI takes the development forward from instructions given in chat.

Hello, this is Masato.

The other day a restaurant owner told me, “I would like to build an attendance app,” so I built one using AI.

Drawing on that experience, this article teaches restaurants and any company managing part-time staff how to build an attendance app of their own.

First, here is what I built ↓

Here we are going to build attendance management using AI.

This is the age of AI. From where I sit, following AI at the leading edge, whatever the app I find myself thinking “why not just build it yourself?”

So this article covers the easiest procedure and tools for building an app with AI, and the most important part of all: what it actually takes to put it into real use.

Incidentally, we at Webharu have decided to sell this attendance app.
We are also starting an app development business, in a small way.

We will go with the easiest method, with none of the fiddly setup. That is why we will not be doing live coding with the Claude Code CLI this time. The reason is that the setup is a chore.

Instead we will build with Figma Make, which lets you use Claude Code without any setup and still produces high-quality results.

What Figma Make is

It is Figma with site publishing plus AI vibe coding bolted on.

The Figma we web designers use every day has gained server features and AI. In other words, the double handling of design and then publishing has disappeared in one go, and on top of that the AI does the development for you. (Ridiculous!)

This is in fact exactly the future I had predicted. As I wrote in my last newsletter, I think this move — attaching a server business to Figma — is a revolution that will shake the whole no-code industry, Webflow included.

Figma is the world’s number one design tool by user count. Once publishing is attached to it, there is no longer any need to migrate to Webflow or WordPress. Straight from design to a published site. That has now become reality.

For actually running a site, no-code still has the edge. But for building small sites, or apps at the level an individual store would use, AI-built work is now satisfying enough.

Building the app you want through the Figma Make chat

Ordering it to build an attendance app

All you do is talk to the chat normally: “build me an attendance app.” That really is all. It is no different from talking to ChatGPT.

So what can “build me an attendance app” produce? Here it is ↓

A single sentence gets you this far. What comes next is unexpectedly hard work, though. Because the data has to persist, you need to connect a backend, and Figma proposes Supabase as that backend. Just go along with it.

Add the following to make it usable in practice

Once you start using it for real, parts where you think “ah, I want this feature too” start to appear. Order each of them through the chat as you go.

For example, I added things like “make the admin screen show everyone’s working hours in one list” and “a feature to export the data at month end.”

Just paste in “please implement the following”

• Database integration
• Authentication and login system
• Payroll calculation logic (overtime, late-night allowance, holiday allowance)
• Paid leave management
• Data export and import (CSV, JSON)
• Legal compliance checks (working-hour limits and the like)
• Notification system (browser notifications)
• Printing (PDF generation)
• Data analysis and reporting
• Mobile support (responsive design)

When errors come up, just have it fix them

This part matters. You cannot make something perfect from the start. Even with AI, it honestly takes a fair amount of time. Persistence is the key. Errors come thick and fast, and things you have to do by hand crop up here and there.

The AI presents you with tasks each time, though, so when the layout breaks, throw “there is an error, fix it” straight into the chat and keep going.

Just tell it in plain language — “this button does not work,” “the text is invisible” — and it will fix it.

Developing the extra apps and features you want to connect

Once the attendance basics are in place, the next step is the integrations that make it genuinely usable. I have not done these yet, but they are all things that can be built.

• LINE integration: let staff send clock-ins and clock-outs from LINE, Japan’s dominant messaging app. Easy punching in straight from their phones.
• Integration with payroll software: automate the exchange of data and make accounting work dramatically easier.
• PDF output: turn the monthly report into a PDF automatically. Preparing the documents for your labor and social security attorney is over in an instant.

All of it can be done through chat instructions. PDF is easy. The integrations are a bit harder. As of 8 August 2025 there is no AI route for LINE and similar services, so those have to be built by hand.

A word of caution: save the code once you have it in good shape

This part is seriously important. I did not do it at first, and I paid for it.

Figma Make is convenient, but it is AI, so its memory sometimes resets and everything sometimes falls apart. With Figma Make you can at least click a past version to go back to it.

Even so, there have been times when it would not go back, so duplicate the whole file with “Make a copy” and keep it. Then, if the worst happens, you can resume from there.

Conclusion: building an app with Figma Make

Having actually done it, my impression is that the backend and the integrations are the hard part. Freedom is at its maximum, but you end up dependent on the AI, so it is rough going if you cannot edit things yourself. Give it another year or so and full automation may arrive. I am looking forward to that.

As someone betting everything on Figma, I am convinced this trend will accelerate further. For freelancers and small companies in particular, the age has arrived where Figma Make alone can build something good enough. Watching where this goes, I intend to push hard on production in Figma too.

FAQ

Do I need technical knowledge to build an attendance app in Figma Make?

You can build it simply by talking to the chat normally: “build me an attendance app.” It is no different from talking to ChatGPT, and when the layout breaks you can tell it in plain language — “there is an error, fix it” — and it will fix it.

What does Figma Make use as a backend?

Because the data has to persist, you need to connect a backend, and Figma proposes Supabase as that backend.

What should I do if the app I built in Figma Make breaks?

In Figma Make you can click a past version to go back to it. There have been times when it would not go back, though, so duplicate the whole file with “Make a copy” and you can resume from there if the worst happens.

Can Figma Make integrate with LINE or with payroll software?

Sending clock-ins and clock-outs from LINE, exchanging data with payroll software, and exporting the monthly report as a PDF are all things that can be built. PDF is easy but the integrations are a little harder, and as of 8 August 2025 there is no AI route for LINE and similar services, so those have to be built by hand.