Tommy Smith - How side projects can land you a dream job

2026-02-16 - 40 min - source - Read full transcript

Red (host)Tommy Smith

Key insights

Side projects reveal more about a designer's ceiling than client work does.

Tommy argues that contracted work boxes designers into an employer's constraints, while self-directed side projects show what someone actually wants to build and is capable of. He credits leading with his side project Chrono, rather than his sparse professional portfolio, as the deciding factor in landing his current role.

side-projects-as-portfolio

Building a deliberately hard side project accelerates skill growth faster than typical client work.

Tommy chose a calendar app for Chrono specifically because handling time zones, drag interactions, and complex front-end state is among the hardest UI problems to build well. Working through that complexity, not just designing it statically, is what he says made him a meaningfully better designer.

side-projects-as-portfolio

Perfecting one interaction lets AI tools extrapolate that quality bar across the rest of a product.

Both Tommy and Red note that once a single interaction (like Chrono's drag-to-create animation) is nailed with correct timing and easing, AI coding tools can be pointed at it as a reference and reproduce that feel elsewhere, sharply cutting the marginal cost of matching quality across a product.

ai-craft-workflow

AI unlocks creativity for designers rather than replacing it, by absorbing foundational implementation work.

Tommy pushes back on the fear that AI strips creativity from design. In his workflow, AI handles boilerplate and structural front-end work so he can spend his time on the human, felt details, easing curves, staggering, and micro-interactions, that he says AI can't produce well out of the box.

ai-craft-workflow

A design engineer is defined by knowing what makes an interaction feel good, not by formal engineering credentials.

Tommy, five years into his career, says the bar he holds himself to is whether he'd be comfortable handing his own built interactions to a developer as production-ready. He argues anyone who understands what makes interaction feel right, even without a deep engineering background, can legitimately claim the design engineer title.

design-engineer-transition

Which hybrid designer profile wins out depends on company stage and codebase maturity.

Tommy distinguishes two profiles: design-leaning generalists who prototype fast and fit early-stage startups, versus engineering-leaning designers better suited to mature codebases with established conventions. He says there's no single correct answer to what a 'design engineer' should be, it depends on the team's context.

design-engineer-transition

Building and feeling an interaction teaches things static design tools cannot.

Tommy says he has designed things in Figma that looked great and felt terrible once built. Actually building and interacting with a prototype surfaces problems invisible in static mockups, and that felt knowledge then improves his future static design decisions too.

design-engineer-transition

Portfolio case studies should assume almost no one reads the text.

Tommy designed Chrono's case study around video previews, one-click image zoom, and swipeable carousels precisely because, in his experience, hiring managers skim for visual craft rather than reading prose. The goal was to let the interface speak even if a viewer never clicks through.

portfolio-case-study-design

A personal icon set became his single highest-leverage design investment.

Tommy built a full custom icon suite that now appears in every project he ships, including Chrono. He says this single asset did more for his growth and personal design identity than any individual client or side project, because ownership over it compounds across everything he touches.

portfolio-case-study-design

Typography carries the majority of visual design quality.

Tommy calls typography roughly 90 percent of design, since interfaces ultimately reduce to rectangles and text. He recommends beginners focus there first: use consistent, limited font sizes and build hierarchy through weight and color rather than adding visual complexity elsewhere.

typography-fundamentals

Figma remains essential for ideation even in an AI-native workflow.

Despite building his entire portfolio and product work with AI coding tools, Tommy says no tool beats Figma for rapid free-form iteration, describing his early process as duplicating and reworking layouts dozens of times. He sees this as reflecting a genuinely different, more exploratory cognitive mode than structured code work.

ai-craft-workflow

A curiosity habit built through casual product exploration compounds into a personal library of craft references.

Tommy attributes much of his growth to constantly trying new apps and interactions (he says he has thousands of apps on his Mac) and consciously asking how something was built or whether he could recreate it, building an internal bank of techniques and taste he draws on later.

side-projects-as-portfolio

Companies

Mobin - Episode sponsor; design inspiration and pattern library, plugged for its animation reference library
Paper - Episode sponsor; a design tool built on real CSS so layouts export directly as React code
Figma - Tommy's primary ideation tool; used for early-stage layout exploration before building in code
Rive - Animation tool Tommy used to build the interactive, cursor-following mascot on his portfolio
Amie - Calendar/task app Tommy cited as the craft inspiration behind his side project Chrono
Cursor - AI coding tool Tommy uses for front-end implementation and for a client Figma-to-code pipeline
Windsurf - AI coding tool Tommy credits with leveling up his front-end workflow
Claude Code - Referenced for its ability to extrapolate a single well-crafted interaction into consistent motion across a product
Framer - Listed among Tommy's tool stack; how he builds websites
Genway - Listed among Tommy's tool stack; how he does research
Granola - Listed among Tommy's tool stack; how he takes notes during design crits
Jitter - Listed among Tommy's tool stack; how he animates designs
Lovable - Listed among Tommy's tool stack; how he builds ideas in code
Raycast - Listed among Tommy's tool stack; his shortcut tool at every step

Techniques and frameworks

Drag-to-create transition with deliberate origin point - The scale/tilt animation Tommy built for creating calendar events in Chrono, cited as the detail that immediately signaled craft to the host
Blur-plus-opacity hover fade - A subtle 3-4px blur combined with opacity fade used on nav hover states; a technique only accessible once designing in code rather than static Figma files
View Transitions API for theme switching - Used to animate the light/dark theme switcher on Tommy's site; inconsistent browser support (notably Firefox) but worth it for the effect
Staggered case-study progress bar - A small expandable progress indicator inside case studies that animates as the reader scrolls between sections
Personal icon system - A full custom icon set Tommy designed once and now reuses across every project, which he says did more for his design growth than any single client project
Figma-to-code design token pipeline - A JSON schema mapping design tokens that lets non-technical designers paste a Figma link into Cursor and push front-end PRs directly

Summary

Red interviews Tommy Smith, a designer roughly five years into his career who recently landed a role through the Dive Club talent network largely on the strength of his personal portfolio and its centerpiece side project, Chrono, a calendar app. The conversation is a detail-level walkthrough of Tommy's site: why he stripped it down after over-designing an earlier version, why he pushed his unpaid side project ahead of his professional client work in the navigation hierarchy, and the specific interaction choices, a cursor-following Rive mascot, a blur-and-opacity hover fade, a View Transitions API theme switcher, a staggered case-study progress bar, that signal craft to a hiring manager within seconds.

The through-line is that side projects now carry more signal about a designer's ceiling than contracted work, because client work boxes a designer into someone else's constraints while a self-directed project like Chrono shows what they actually want to build. Tommy picked a calendar app specifically because it's one of the hardest front-end problems (time zones, drag interactions, complex state), reasoning that working through that difficulty, not just designing it statically, would make him measurably better. He and Red repeatedly return to the idea that building and feeling an interaction teaches things a static Figma mockup cannot: Tommy has designed things that looked great on the canvas and felt terrible once built.

A second major thread is Tommy's framing of AI as a creativity unlock rather than a threat. He describes his role as a "design engineer" as knowing what makes an interaction feel good and being able to build it to a handoff-ready standard, not as formal engineering credentials. AI tools like Cursor and Windsurf absorb the foundational, structural work, letting him spend his time on the nuance, easing curves, timing, staggering, that AI cannot produce well unmanaged. He and Red discuss how, once a single interaction is sweated over and nailed, tools like Claude Code can extrapolate that quality bar across the rest of a product, sharply cutting the marginal cost of consistent craft. Tommy also describes building a Figma-to-code pipeline for a client using a JSON design-token schema, so non-technical designers can push front-end PRs directly from a Figma link, framing this system-building as an increasingly important part of the design engineer role.

On the portfolio itself, Tommy is explicit that almost no one reads the text: his case studies lean on video previews, one-click zoomable images, and swipeable carousels because hiring managers skim for visual craft. He calls typography "90 percent of design" and recommends limiting font sizes and building hierarchy through weight rather than added visual complexity, as the highest-leverage starting point for less experienced designers. He also singles out his personal icon set, built once and reused across every project since, as arguably his single most valuable design investment, more formative to his growth than any individual client engagement.

Despite his AI-heavy build process, Tommy maintains that Figma remains irreplaceable for early-stage ideation, describing rapid iterative exploration ("command D and making a mess... 15 more times") as suited to a genuinely different, more free-form cognitive mode than structured code work. He closes with career advice centered on sustained curiosity: constantly trying new products, asking how details were built, and accumulating a personal bank of technique and taste, which he says is what let him close the gap from imposter syndrome to a design engineer title he now feels he's earned.

Notable Quotes

"We're in an era where these side projects can tell you so much more about a designer than work that they were contracted to do and sort of boxed into." - Tommy Smith

"If you can build these interactions and you know what makes them good and you know what makes interacting with a product feel good, then you absolutely can be a design engineer. There's nothing to stop you." - Tommy Smith

"Typography is like 90% of design. All of what we're doing is like rectangles and text." - Tommy Smith

"No one's going to read all of it. Like that's just the harsh reality." - Tommy Smith

"You quite often don't know until you feel it." - Tommy Smith