FREE FRAMER TEMPLATE · SHIPPED 2026
01 — THE CHALLENGE
General-purpose invoicing software is built for an accounting department: one invoice, one amount, paid or not paid. Design work rarely settles that cleanly. A project is a deposit, then a milestone, then a balance on delivery and the state a designer actually needs to see is how much of this is still owed to me, not whether a row is ticked.
WHERE IT BREAKS
Binary Status
Paid or unpaid describes a receipt, not a project. A half-settled milestone invoice is neither, and it's the most common state in a freelance book.
WHERE IT BREAKS
Accounting-first framing
Tax categories, ledgers and reconciliation lead the interface. A solo designer needs one question answered on open: what is outstanding, and who do I chase.
02 — RESEARCH AND INSIGHT
I started by taking apart what freelancers already use: general invoicing tools, accounting suites and the existing crop of Framer invoice templates. Followed by reading up on how freelance designers structure and chase payment. Two patterns held across both.
COMPETITIVE TEARDOWN
Every tool I looked at treated an invoice as settled or not. Where a partial payment was supported at all, it lived inside the record rather than on the surface making it invisible from any overview. Template competitors mostly styled a document, with no dashboard at all.
FREELANCE BEHAVIOR
Design engagements are commonly billed in stages: deposit, milestone, balance. The invoice doubles as a client-facing document. Freelancers also send the same invoice more than once, so it has to read clearly to someone who has never seen the tool.
That reframing did most of the design work. It promoted a partial-paid state to first class, made amount due a headline figure rather than a derived one, and pushed the whole dashboard toward buckets of money in motion instead of a chronological list of documents.
03 — PROCESS
01
AI prototyping
CLAUDE DESIGN
Directions explored as working screens rather than mood boards, so each could be judged in use. Three full moods, then four palette and type systems on one fixed layout, so only color and type varied. Cheap enough that rejecting three of them cost days, not weeks.
02
Research
DESK RESEARCH
Competitive teardown and reading on freelance billing behaviour, used to decide which of the prototyped ideas answered a real gap and which were decoration.
03
Design system
FIGMA
The chosen prototype rebuilt properly: high-fidelity screens drawn from component sets with variants, role-named colour variables and text styles, so a token change moved the whole file and the build had one source of truth.
04
Build & ship
FRAMER
The Figma file rebuilt as a working site with invoices as CMS records, made responsive down to mobile, then packaged and published free on the Marketplace. A real content model forced the data cuts early.
Why this order matters. Prototyping before the system meant the visual direction was settled by comparing real screens, and building against a real CMS meant the data model was settled by what could actually be maintained by hand.
The largest single decision was a subtraction. The first spec carried a revenue chart, a clients section, a settings page and a five-field invoice model. Cutting to two pages plus a shareable document, and to counts instead of derived totals, removed more design problems than it created.
I started where the audience seemed to point. Designers are a craft audience, so I explored three warm, tactile directions. Each of them a complete dashboard, not a mood board.
Aa
NOT SELECTED
Ledger
Editorial and print-set. No cards — hairline rules, large serif figures, a flush-left column. Read beautifully and scanned badly: nothing was grouped, so the eye had no anchor.
Aa
NOT SELECTED
Studio
Warm and calm, deliberately anti-SaaS. Soft pills, sage as a second voice, generous air. Pleasant, but the softness undercut the one thing the product is about: money that is late.
Aa
NOT SELECTED
Drafting table
Graph-paper ground, ink rules, stamped statuses, figure captions. The most distinctive of the three, and the most costume-like — a strong flavour that a tool opened daily would tire of.
The turn. All three optimised for how a design audience likes to look, not how a billing tool needs to work. Craft texture reads as personality on a portfolio site and as noise on a screen you check between calls. I changed direction to something quieter and more instrument-like: light, geometric, near-white, one charged accent.
SELECTED DIRECTION
Light futurist
A near-white ground, white cards, and a pale inset panel inside each card where the number lives. Depth comes from nesting rather than shadow. Ink carries emphasis; a single lime accent is reserved almost entirely for money that has actually arrived.
04 — WHAT SHIPPED
DASHBOARD
Five cards that count, not total
Unpaid, Partially Paid, Fully Paid, Draft and Total, each showing a count of invoices in that state. Counts rather than sums, because a number of things to deal with is a clearer prompt than a figure that changes with every payment. Each card leads into the filtered list, so the summary doubles as navigation.
INVOICES
Filter chips, search, list or grid
A chip per status with its count, a search field for going straight to a known invoice, and a toggle between list and grid. List is the default because invoices get compared; grid is for a small filtered set where one amount deserves to be large.
INVOICE DETAIL
Built to be sent, not just read
The page a freelancer shares with a client: line items, a three-row calculation, and a pay button linking out to their own Stripe, PayPal or bank page. Issue date, due date and total sit flat — amount due is the only inverted panel on the page, so the figure that matters is the loudest thing on it.
CONTENT & PLATFORM
CMS records, every screen size
Invoices are Framer CMS entries added and updated by hand — no integrations, no sync, no automation to break. Every page is responsive from desktop through mobile, since checking what is outstanding is a phone job as often as a desk one.
05 — OUTCOMES & IMPACT
Early numbers, honestly small. The template is live on the Framer Marketplace with 9 users and 11 remixes. That is enough to say people will start a real site from it, and not enough to say the progress-first model works. A template collects no analytics from the sites built on it. What follows is what the work produced and how I am testing the premise it rests on.
3
Weeks, idea to listing
Exploration, a documented design system, a built template and a Marketplace submission.
1
Complete design system
Component sets with full status and hover coverage, plus role-named color variables which is the reason the build went quickly.
10
Users, and 12 remixes
Free on the Framer Marketplace. More remixes than users. People are adapting it, not just installing it.
HOW I WOULD TEST IT
A template collects no analytics, so each of these is something I can run on the artifact, in a session, or on the listing itself.
Artifact count, before anything else. Pull 200+ real freelance design invoices and count the share settled in stages. The premise the whole product rests on; if it is rare, the hierarchy is wrong.
Time to first useful answer. Eight to ten moderated sessions against a binary-status tool, timing how long it takes to say what is outstanding and who to chase — the dashboard's only job.
Whether the buckets get used as navigation. Observed in the same sessions: do people filter from a summary card, or reach for search and the chips regardless.
What the 11 remixes changed. The most useful data I have. Remixed sites are public, so whatever people rip out, restyle or add back is an honest backlog — and with more remixes than installs, adaptation is already the common case.
Kill criteria, set in advance. Under 25% partial payment, or no time advantage over the binary tool, and the progress-first framing is wrong rather than under-designed.
KNOWN OPEN QUESTIONS
Cards count, they do not total. A count of unpaid invoices is not the same worry as the sum owed. I chose the count for legibility; both may be needed.
No overdue state. Lateness is folded into Unpaid. Chasing is a real job the current model cannot express, and it is the first status I would add.
Everything is manual. CMS entry keeps the template dependency-free and maintainable, but a freelancer with forty open invoices will feel the bookkeeping.
Ink hover is untested at scale. Inverting a whole row is confident on one card and possibly restless down a long list.
06 — KEY LEARNINGS