I am often asked what it’s like to freelance in design systems. The questions range from how I get my clients to how I structure my projects, the nuts and bolts of running a business, the tools and services I use, and the lessons I’ve learned. In this post, I catalog the tools and associated monthly costs that keep Genoni Studio running.
Tools and services
The current industry standards in the design systems space are Figma for design, Tokens Studio for design tokens, and React for development. With few exceptions, all my projects have involved some combination of these.
Claude
Claude has become a central part of my workflows. Yes, it can build things from scratch but its real power is its ability to continually review code, find discrepancies, and make sweeping changes that, if done manually, often leads to mistakes. Using its Skills feature I can provide it with highly detailed rules for style, structure, and accessibility, and be confident that it will look for and correct any unintended side effects.
Figma
Design work happens in Figma and FigJam. Using several plugins, I build component libraries for teams with variables and document components. Among my favorites:
- PropStar for creating variant tables.
- EightShapes Specs for detailed component documentation.
- Simple Sort for consistently organizing variants.
Tokens Studio
If design tokens are part of the project, I’ll use Tokens Studio to author and update tokens and push changes to a GitHub repository. I do not use it to style Figma components directly; I found it clunky and buggy, and instead generate Figma Variables. To convert the tokens to the needed platforms, I use Style Dictionary.
GitHub
My development setup is standard: Git with GitHub, iTerm2 with oh my zsh for my terminal, and Visual Studio Code for writing code. There are a ton of great, free extensions available, but among the ones I use frequently are:
- GitHub’s CoPilot for code explanations and suggestions.
- Project Manager to switch projects quickly.
- CSS Variables Autocomplete for inserting variables.
Next.js & Storybook
Coded components are almost exclusively written in React with TypeScript and CSS Modules with Next.js for layout examples and Storybook to document the components. I used to use SCSS but switched to CSS variables for dark mode and multi-brand support. I’ve used Svelte for personal projects and love it, but not yet with clients.
Vercel
For hosting, I relied on Netlify for years but found Vercel’s interface cleaner and more intuitive. To share ongoing client work, I deploy two sites on genoni.studio subdomains, one with Next.js example pages and one for Storybook. Changes I commit are automatically deployed within a minute, including branches, and the client can view them at all times.
Arc
This has been my primary browser for some time now. It’s Chromium-based, so the rendering is identical to Chrome’s and supports its extensions. However, with Arc, I can cleanly divide up my clients into Spaces. Combined with Profiles, I can stay logged into personal and work accounts and instantly switch between them. It took a week to get used to the hotkeys, but I’m now (mostly) happy with it.
Bear
I switched back and forth a few times between various note-taking applications and ultimately decided to stick with Bear. Other than the lack of “workspaces” and web sharing, the feature set and authoring environment are great. Ask me in three months, and I’ll probably be on to something else.
Things
I generally don’t require significant project management, as the work is clearly outlined in my proposals and contracts. I use Asana and Linear with clients for ticket tracking, but Things hits the sweet spot for managing most day-to-day tasks.
Raycast
While not a design or development tool per se, Raycast is a powerful launcher I use constantly. Its extensive extension library allows many tasks to be completed in Raycast. I use it to open local VS Code projects, start and stop time tracking, trigger text expansions, start meetings, and query its built-in AI tools. If you’ve ever used LaunchBar or Alfred, you’ll quickly understand why Raycast is a worthy successor.
MacBook Pro
I’ve always had Macs, and my current 14” M5 plugged into a 27” monitor is perfect.
Communication
Google Workspace
I use Google Workspace with a custom domain for my email, calendar, meetings, proposals, and contracts. I’ll use Zoom if I have to, but I prefer Google Meet.
Cal.com
For my first year, I used Calendly to manage meetings. However, I always found their UX confusing, and the cost rose once I hooked it up to four or five calendars. I switched to Cal.com and much prefer it. Not only is it easy to use, for now it’s free. It would be impossible to run my business without it.
Slack
All my clients to date have used Slack. Its account management is bizarrely confusing (how do I leave a Workspace again?), but I can easily manage multiple clients. Pretty much all communication happens there.
PandaDoc
PandaDoc is a DocuSign clone that is slightly nicer for contract signatures and has a more generous free tier. However, I don’t use it often because I usually sign contracts drawn up by the client.
Harvest
I used to manage spreadsheets and invoices manually, but making mistakes was easy and potentially costly. Harvest works perfectly for my use cases and has many excellent features I don’t have to think about, including automatic invoice generation and reminders.
Taxes
One of the most important aspects of working freelance is how you are taxed. Most people, whether full-time or freelance, will pay personal taxes on their earnings. So, if you make $100,000, you are liable for personal taxes on that total amount. However, there is another way (at least in the United States).
Establishing an LLC and filing as an S Corp can significantly reduce your overall tax burden. Essentially, you set up a company with yourself in dual roles: employer and employee. The income earned is paid first to your LLC. Your employee (you) receives a monthly salary from the LLC for IRS purposes, though its owner (also you) can withdraw funds anytime. Sound confusing? Well, it is.
After researching it, I signed up with Collective, who handle the required paperwork and ongoing accounting and tax filings. Collective’s website, where I occasionally upload files and fill out forms, isn’t great but mostly acts as a layer between you and your primary accountant.
As part of this process, you’ll also need a business checking account and business credit card. I use Mercury for checking (it’s a pleasure to use) and a no-annual-fee Chase Business Ink card because I already had a personal account with them.
Costs
Except for Collective, most services are low-cost or free. Some services mentioned above, like Tokens Studio, are paid for by the client and not included below. Values with an (*) are the calculated monthly costs based on the yearly subscription pricing.
| Service | Monthly cost |
|---|---|
| Collective | $199 |
| Claude | $100 |
| Figma | $15* |
| Google Workspace | $14 |
| Cal.com | Free |
| Harvest | $12 |
| PandaDoc | Free |
| Bear | $3* |
| Things | $1* |
| Raycast | $8* |
| Vercel | $10* |
| Total | $362 |
Future tools
Though most of my clients don’t require long-form documentation, I expect paid services like Zeroheight and Supernova to become more common because they provide so much of the web-hosted documentation functionality that teams have historically had to build themselves.
The design token space will also see a lot of new tooling for authoring, managing, and distribution as they become increasingly popular, standardized, and (one day) graduate to an official standard.