Build an Interactive Habit Tracker

Design a clickable habit tracker with reusable components and variants in Figma.

Introduction

30 Second Summary

A habit check-in should take seconds. Crowded screens or confusing buttons can turn a tiny daily action into something people postpone.

In this project, you will create Pulse, a three-screen mobile habit tracker in Figma Design. Its reusable components support a clickable prototype of a complete habit check-in journey.

What You'll Build

Picture Pulse playing in the browser as each tap moves from today's habits to a completion screen before returning to the Dashboard.

By the end of this project, you'll have:

A polished three-screen journey that carries a user from today's habits to a clear success state.
A flexible mini design system whose Button and Habit Card components stay tidy when their labels change.
A playable prototype that demonstrates the complete Dashboard to Habit Detail to Success flow in the browser.
Secret Mission: Turn the Habit Card into an interactive component that toggles between Incomplete and Complete on the Dashboard.

Are there any prerequisites?

You need an existing Figma account plus internet access in a web browser. The free Starter plan covers every feature used here without a desktop app or paid subscription.

Before We Start

Pulse succeeds when completing a daily habit takes only a few focused actions. This step locks in who uses Pulse and how they move from reviewing today's habits to receiving quick confirmation.

Open Your Figma Design Workspace

Pulse's quick user journey is already clear. The screens now need an editable home.

A single editable Figma Design draft gives the local design system one shared home. The prototype can live on the same canvas page.

This approach needs no desktop app. It also avoids a paid library.

In this step, get ready to:

Open a new Figma Design draft in your browser.
Name the draft Pulse Habit Tracker.
Confirm edit access from the full creation toolbar.

Open the design editor

Figma Design runs in your web browser. The figma.new shortcut creates a new Design file in Drafts.

Your credentials stay on Figma's sign-in page throughout this step.

You should see your Figma file browser. This confirms your browser session is signed in.

Enter figma.new in the browser address bar.
Press Enter to create the new Design file.

You should see a blank canvas in the editor. Figma stores the new file in Drafts.

Design file did not open?

Confirm that your browser session is signed in to your existing Figma account.
Re-enter figma.new in the browser address bar.
Restore your internet connection if the browser cannot load Figma.

Still stuck? Help me open a new Figma Design file in my browser.

Name the project

A clear file name makes this draft easy to find later. Figma keeps the name up to date online.

Click the current file name in the editor's top bar.

The file-name field should become editable.

Type Pulse Habit Tracker into the file-name field.
Press Enter to apply the new name.

That rename pays off: your draft is now easy to spot in Drafts.

Why keep everything in one file?

The Starter plan supports the local components used later in this project.

Keeping the main components beside the screens makes reuse easy to inspect. It also avoids a team library.

Keep the blank draft on its current canvas page.

Confirm edit access

The editor toolbar acts as your permission check. A full toolbar with creation tools indicates can edit access.

Before you check, which interface do you think this browser tab shows: a viewing interface or the full editing workspace?

Read the file name in the editor's top bar.
Look across the current canvas page.
Inspect the editor's toolbar.

You should see Pulse Habit Tracker in the top bar. The current canvas page should be blank.

You should also see the full editing toolbar with creation tools. That toolbar confirms your edit access.

That's your workspace ready: Pulse now has an editable home for the whole product flow.

Your Figma Design workspace is ready. Next up, you'll turn the blank canvas into Pulse's first static Dashboard.

Build a Static Habit Dashboard

Your blank Pulse Habit Tracker file is ready in Figma Design. Now the user journey needs a screen where today's habits are visible at a glance.

A manually arranged Dashboard gives you an immediate visual result. A longer habit name will test how well that fixed arrangement handles real content.

In this step, get ready to:

Create a phone-sized Dashboard screen.
Build the first fixed-size habit card.
Duplicate the card to test a longer habit label.

Create the mobile screen

A frame acts as a top-level screen in Figma Design. Its name makes that screen easy to identify on the canvas.

Switch back to the blank canvas in the Pulse Habit Tracker file from earlier.
Press F to enable the Frame tool.
Choose a preset from the Phone category in the right sidebar.
Double-click the frame name above the canvas.
Enter Dashboard as the new frame name.
Use the background color control in the right sidebar to choose a light background.

You should see a phone-sized light screen named Dashboard on the canvas.

Draw the first static interface

This screen uses manually positioned layers. A clear text hierarchy helps the user spot the app name before scanning today's habit.

Add a text layer reading Pulse near the top of the Dashboard frame with the toolbar's text creation tool.
Add a second text layer reading Today's habits below the heading.
Draw a fixed-size rounded rectangle beneath the labels with the toolbar's shape controls.
Draw an empty circle inside the card near its left edge with the toolbar's shape controls.
Add a text layer reading Drink water beside the circle.
Draw a small rounded rectangle near the lower edge of the card for the button.
Add a text layer reading View details inside the button.
Position the button label within the button shape.

How does the manual card work?

Each layer keeps the size and position you give it. The short Drink water label fits inside those fixed boundaries.

Apply one accent color to the empty completion circle.
Reuse the same accent color on the button background.
Make Pulse the largest text on the screen.
Set Today's habits to a larger style than Drink water.
Keep every card layer inside the fixed rectangle boundaries.

Good progress. Your Dashboard now has a readable header plus one complete static habit card.

Expose the rigid-layout problem

A fixed card gives its text a limited area. Changing only the words exposes how the layout responds when content grows.

Before you duplicate the card, do you think the longer label will fit without moving any neighboring layer?

Select the card background plus every layer inside it.
Press Ctrl D to duplicate the selected card.
Drag the duplicated card below the first card.
Select the duplicate's Drink water text layer.
Replace the text with Drink two full glasses of water before breakfast.
Keep the duplicated card's size unchanged.
Keep the completion circle plus button positions unchanged.

You'll see the long label cramped inside the fixed card. That crowded result is intentional because the layout cannot respond to the extra content.

Did only one layer duplicate?

Undo the duplicate if Figma copied only one layer.
Drag a selection box around the complete first card.
Press Ctrl D again after every card layer is selected.

Still stuck? Help me duplicate every layer in my Figma habit card as one fixed layout.

Before the final check, what do you expect to stand out most when both cards are viewed together?

Select the top-level Dashboard frame on the canvas.
Confirm the Pulse heading is visible.
Confirm the Today's habits label is visible.
Confirm two fixed-size rounded habit cards are displayed.
Confirm the first card includes an empty completion circle.
Confirm the View details button is visible inside the first card.
Confirm the longer label looks visibly cramped inside the duplicated card.

You now have your first visible product screen. The cramped second card gives you concrete evidence that the fixed layout cannot adapt.

Next up, Auto Layout makes the habit cards respond to their content.

Create Reusable Habit Components

The cramped breakfast label has done its job. It proves that fixed card spacing breaks when real content gets longer.

In this step, Auto Layout makes the button respond to its label. The same layout system gives each card room to reflow.

A component becomes a reusable source whose instances receive its updates. Variants keep the Incomplete and Complete card states together.

In this step, get ready to:

Make the Button and Habit Card content-aware with Auto Layout.
Create local Button and Habit Card components with reusable states.
Replace the rigid Dashboard elements with linked instances.

Make the elements content-aware

The flexible layout starts with a clear hierarchy. The habit row groups the completion control with its label.

Drag the clean Drink water card out of Dashboard.
Place the card beside the Dashboard frame on the same canvas page.
Select the View details text layer inside the moved card.
Press Shift A to wrap the label in Auto Layout.

The label now sits inside an Auto Layout frame. This frame becomes the flexible button container.

Set the flow to Horizontal in the right sidebar.
Set the button resizing to Hug contents.
Adjust the padding until the label has clear space on every side.
Set a consistent gap for future button content.
Apply the existing accent color to the button frame.
Apply the existing rounded corners to the button frame.

The button now grows around its label while preserving the same visual style.

The layer nesting is easy to misread because each Auto Layout frame adds another selection boundary.

Select the empty completion circle with the Drink water label.
Press Shift A to create the habit row.
Set the habit row flow to Horizontal.
Set the habit label resizing to Fill container.

The completion control stays beside the label. The text can now use the remaining width in the row.

Select the habit row with the flexible button frame.
Press Shift A to create the outer card layout.
Set the outer card flow to Vertical.
Set the card height to Hug contents.
Adjust the card padding to match the original design.
Adjust the gap to preserve the card hierarchy.
Set the habit row width to Fill container.

Before testing the layout, predict how the card responds when its short label becomes the full breakfast habit.

Change the habit label to Drink two full glasses of water before breakfast.

You should see the long label reflow inside the card. The completion control and button keep their spacing.

Restore the source card label to Drink water.

Did the layers jump out of place?

Check that the completion circle and habit label share the horizontal habit row.
Check that the habit row and button sit inside the vertical outer card.
Set the label to Fill container if it still overlaps the completion control.

Still stuck? Help me fix the Auto Layout hierarchy in my Figma Habit Card.

Create the local component system

The flexible button becomes the first reusable source. Its linked copies can keep local text overrides while receiving visual updates from the main component.

Select the flexible button frame inside the card source.
Press Ctrl Alt K to create a main component.
Rename the selected main component Button.
Drag the Button main component beside the Dashboard frame.

That is your first reusable source. The Button can now create linked instances throughout the file.

Open the Assets tab in the left sidebar.
Drag a Button instance into the flexible card below the habit row.
Set the instance label to View details.

The card now contains a linked Button instance. Any later change to the Button source can flow into this nested copy.

Select the complete flexible card beside Dashboard.
Press Ctrl Alt K to create a main component.
Rename the selected main component Habit Card.

The card is now a reusable main component. The next actions organize its two visual states inside one component set.

Click Add variant in the right sidebar.
Rename the resulting component set Habit Card.
Rename the variant property State.
Set the first variant value to Incomplete.
Set the second variant value to Complete.

Why keep the system local?

The free Starter plan supports Auto Layout, components, variants, and prototypes in one Design file. Keeping the main components beside the screens makes the reuse visible without publishing a library.

Your canvas now holds the product flow and the small design system that powers it.

Select the Complete variant.
Fill its completion control with the existing accent color.
Apply a subdued style to its habit text.

The component set now presents two distinct states. Both variants keep the same flexible spacing and nested Button instance.

Cannot see the State property?

Confirm that you used Add variant on the Habit Card main component.
Confirm that both cards sit inside the same component set.
Rename the component set property to State after both variants appear.

Need another pair of eyes? Help me organize my Habit Card variants into one component set.

Replace the rigid Dashboard elements

The main components are ready to replace the manually arranged cards. Each new instance keeps its link to the local design system while allowing its own habit label.

Return to the Assets tab in the left sidebar.
Drag a Habit Card instance into Dashboard below Today's habits.
Drag a second Habit Card instance below the first instance.

Both Dashboard cards now come from the same component set. Their text and state can still differ.

Set the first instance label to Drink water.
Set the first instance State to Incomplete.
Set the second instance label to Drink two full glasses of water before breakfast.
Set the second instance State to Incomplete.
Remove the remaining rigid card from Dashboard.

The long breakfast label should wrap inside its instance with clear padding. The nested View details Button remains aligned below it.

Before you switch the state, make a quick prediction about whether the card stays linked while its appearance changes.

Select the Drink water Habit Card instance.
Switch its State property to Complete.

You should see a filled completion control with subdued habit text. The selected card remains a linked instance of the Habit Card component set.

Select the long breakfast Habit Card instance.
Confirm that its label reflows without overlapping the completion control.
Confirm that the nested View details element is a Button instance.

You have turned the rigid mockup into a local design system. The Dashboard now handles long content and selectable completion states without detached copies.

Did the instance lose its flexible layout?

Confirm that the Dashboard card came from the Assets tab.
Check that the habit label uses Fill container inside the horizontal habit row.
Check that the outer card uses Hug contents for its height.

Still seeing overlap? Help me debug this Habit Card instance without detaching it.

Your Dashboard now runs on reusable components that adapt to real content. Next up, you will use these instances to assemble the Habit Detail and Success screens.

Assemble the Complete Mobile Flow

The Dashboard now proves that local components keep repeated controls flexible. A single frame only shows one moment of the Pulse journey.

This step turns that frame into three coordinated product states in Figma Design. Linked instances keep each state connected to the same reusable source.

In this step, get ready to:

Create the two remaining same-size frames from Dashboard.
Build Habit Detail from linked component instances.
Build Success to prove one Button update reaches every screen.

Create the remaining screens

Duplicating the existing frame preserves its phone dimensions. It also gives both new states the Dashboard's visual foundation.

Select the top-level Dashboard frame on the canvas.
Create two copies by pressing Ctrl D twice.

You should see two same-size copies near Dashboard.

Move one copy to the right of Dashboard.
Move the other copy to the right of the first copy.

The canvas now reads from left to right as a three-screen sequence.

Rename the middle frame Habit Detail.
Rename the right frame Success.

You now have the full three-screen stage for the Pulse journey.

Build the detail state from instances

An instance keeps its link to the local main component. Reusing one here avoids redrawing the card when the journey moves into a focused habit view.

Select the Habit Detail frame.
Delete every copied content layer except one Habit Card instance.

The frame should now contain one linked Habit Card on its light background.

Select the text creation tool in the toolbar.
Add One habit left today above the Habit Card.

You should see a short progress message above the remaining card.

Drag a Button instance from the Assets tab into Habit Detail.
Change the Button instance label to Mark complete.

The new label should fit inside the Button without breaking its padding.

Arrange the three elements with spacing that matches Dashboard.

Habit Detail should now show one Habit Card instance. A short progress message should sit above it.

The Mark complete Button instance should sit below the card. That middle state now focuses the user on one decision.

Build the success state and prove reuse

The final state gives the journey a clear confirmation. Building it with another Button instance also creates a direct test of component reuse.

Select the Success frame.
Delete all copied content inside the frame.

You should see an empty phone-sized frame with the existing light background.

Select the text creation tool in the toolbar.
Add Habit complete near the top of the frame.

The success message should stand on its own near the top of the screen.

Select a shape creation control in the toolbar.
Draw a simple circle below the completion message.

You should see one celebratory shape beneath the message.

Set the circle to the existing accent colour from Dashboard.
Drag a Button instance from the Assets tab into Success.

The accent circle should now connect the confirmation screen to the rest of the interface. A linked Button instance should appear beneath it.

Change the Button instance label to Back to Dashboard.
Arrange the success elements with the same visual hierarchy as the other screens.

The Back to Dashboard label should fit cleanly inside the Button instance.

Select the Button main component beside the product screens.
Increase its corner radius by 8 in the right sidebar.

The Button on Dashboard should gain rounder corners. The Button on Habit Detail should match.

The Button on Success should match too. That shared update proves every Button instance still follows the same main component.

Button instances did not update?

Confirm that you selected the main Button component beside the screens.
Replace any detached button with a fresh instance from the Assets tab.

Still stuck? Help me check why my Figma Button instances are not receiving changes from the main component.

Before you inspect the full canvas, which elements do you expect to distinguish each product state?

Select the three top-level frames together on the canvas.

The three selected frames should have the same phone dimensions. They should be named Dashboard, Habit Detail, and Success.

Dashboard should retain its two Habit Card instances. Its Button instance should still read View details.

Habit Detail should show one linked Habit Card instance. Its Button label should read Mark complete.

Success should show its completion message above the circle. Its Button label should read Back to Dashboard.

The rounder Button corners should match across all three screens. That shared change confirms the instances remain linked.

That is the complete visual journey assembled. Pulse now has a clear beginning, action state, and confirmation state.

Your complete Pulse journey now exists as three reusable product states. Next, you will connect those states into a playable prototype.

Connect the Playable Prototype

Three polished Pulse screens now sit together in your Figma Design file. The screens still behave like separate mockups.

Prototype connections turn each Button instance into a testable step in the journey. This step links the flow from Dashboard through Success.

In this step, get ready to:

Connect the Dashboard action to Habit Detail.
Complete the route through Success with a return to Dashboard.
Test the round trip in each playback mode.

Connect Dashboard to Habit Detail

A hotspot is the clickable layer that starts an interaction. The first hotspot sends the user from today's habits to the selected habit.

Click Prototype in the right sidebar.

The right sidebar changes to show the controls for prototype interactions.

Select the View details Button instance inside Dashboard.
Drag the plus icon from the selected instance to the Habit Detail frame.

You'll see a connection line running from the Button instance to Habit Detail.

In the Interaction details panel, set the trigger to On click.
Set the action to Navigate to.

The interaction details should now show Habit Detail as the destination.

What did the first connection create?

Figma creates a flow starting point when the first connection is added. The starting point tells prototype playback to begin on Dashboard.

No connection line?

Select the View details Button instance instead of its text layer.
Drag from the plus icon on the selected instance to the outer edge of Habit Detail.

Still stuck? Help me create the first Figma prototype connection.

Complete the round trip

The remaining two connections close the journey into a loop. The user can complete a habit before returning to today's list.

Select the Mark complete Button instance inside Habit Detail.
Drag its plus icon to the Success frame.

You'll see a second connection line ending at Success.

In the Interaction details panel, set the trigger to On click.
Set the action to Navigate to.

The selected interaction should now show Success as its destination.

Select the Back to Dashboard Button instance inside Success.
Drag its plus icon to the Dashboard frame.

The final connection line returns to Dashboard.

In the Interaction details panel, set the trigger to On click.
Set the action to Navigate to.

The selected interaction should now show Dashboard as its destination.

Play and repair the flow

Preview opens prototype playback inside the editor. Present opens presentation view in a separate browser tab.

Before you test the flow, which screen do you expect each hotspot to show?

Click Preview to start inline testing.

You'll see the prototype start on Dashboard.

Click View details.

You'll see Habit Detail.

Click Mark complete.

You'll see Success with its completion message.

Click Back to Dashboard.

You'll return to Dashboard.

Did a button open the wrong screen?

Return to the Figma Design editor.
Select the hotspot that opened the wrong frame.
Set the View details destination to Habit Detail.
Set the Mark complete destination to Success.
Set the Back to Dashboard destination to Dashboard.
Open Preview again to retest the repaired connection.

Need another pair of eyes? Help me repair a Figma prototype connection.

Exit Preview to return to the Figma Design editor.

Before the final run, do you expect the journey to stay on one screen or move through the full product flow?

Click Present in the Figma Design editor.

A separate browser tab opens with the prototype starting on Dashboard.

Click View details in the presented prototype.

You'll move from Dashboard to Habit Detail.

Click Mark complete.

You'll reach Success in the browser presentation.

Click Back to Dashboard.

You'll return to Dashboard and complete the full round trip.

You have turned three polished screens into a browser-ready product demo. Every Button now carries the user to the intended next state.

Secret mission

Make the Habit Card Change State

The screen-to-screen journey is already playable. Add inherited variant interactions so a Dashboard Habit Card toggles between Incomplete and Complete without leaving the screen.

Clean Up Your Resources

Your complete prototype lives in one Figma Design draft named Pulse Habit Tracker. The features used here are available on Figma's free Starter plan.

The draft creates no ongoing billable cloud resources. Choose whether to keep the file or pause your work. You can also delete it entirely.

Resources you used:

One persistent Figma Design draft named Pulse Habit Tracker in Drafts.

Keep everything running

No action is needed. Choose this option if you want to keep refining or presenting your Pulse prototype.

Keep Pulse Habit Tracker in Drafts.
Click Present whenever you want to demo the prototype.

You'll see the tested flow move from Dashboard to Habit Detail to Success before returning to Dashboard.

Pause - I'll come back to this later

Close the browser tab to pause your work. Figma keeps the online file up to date.

Return to the Figma file browser.
Select Drafts in the sidebar.
Confirm that Pulse Habit Tracker appears in Drafts.
Close the browser tab.

Your complete prototype remains available in Drafts for your next session.

Delete - I don't want to use this again

Deleting this draft removes only Pulse Habit Tracker. Permanent deletion cannot be reversed.

Return to the Figma file browser.
Move Pulse Habit Tracker to Trash.
Open Trash.
Right-click Pulse Habit Tracker.
Select Permanently delete.
Click Permanently delete file to confirm.

Your cleanup is complete. The Pulse Habit Tracker draft is permanently removed.

Nice Work!

You did it! Your Pulse Habit Tracker is now a polished three-screen product demo in Figma Design.

You've learned how to:

Repair a cramped Dashboard with Auto Layout so the long breakfast habit keeps clear spacing.
Create reusable components for Button instances across all three screens. Organize the Habit Card's Incomplete and Complete states as variants in one component set.
Connect a playable prototype that carries the user from Dashboard through Habit Detail and Success before returning to Dashboard.
Secret Mission: Add interactive Habit Card behavior that toggles one Dashboard instance between Incomplete and Complete without navigating away.

Ready to quiz yourself?