UX Engineer (Hybrid)

Homebase•Toronto, ON

28d•$108,000 - $172,000•Hybrid

About The Position

Designbase is the foundation that every product team at Homebase builds on. As a UX Engineer on the Designbase team, you'll join a tight-knit systems crew — pairing with our existing Design Engineer and Design Systems Lead Designer — to close the gap between what designers imagine and what engineers ship, at scale, across web and native app surfaces. You are a builder. Your craft lives in the component library but isn’t always limited there. You'll co-own Storybook alongside your engineering counterpart — building net-new components, maintaining and evolving what exists, and making sure every implementation reflects the design intent in Figma with precision. This spans both web and native. You're comfortable thinking in both and know where they share logic and where they diverge. In one sprint, you're shipping a new form component and writing its usage documentation. Next, you're working through a cross-platform pattern with your fellow Design Engineer and the iOS and Android teams, making sure it holds up on native before it ships. Then you're in Figma with the Design Systems Lead, pressure-testing a new pattern before it gets built. The team is small, and the leverage is enormous. This role is for someone who thrives in a collaborative systems environment, is obsessed with quality at the component level, and gets genuinely excited about the infrastructure that makes everyone else's work better.

Requirements

2-5 years of frontend, UX engineering, or design engineering experience, with meaningful time spent in a design systems context. We care less about your title than your ability to move fluidly between Figma and production code and to build things that scale across a team.
Design judgment — you catch hierarchy, spacing, and interaction problems without waiting for a spec, and you can take a rough prototype and refine it until it reads as polished. You don't need to live in Figma, but you know when something is off.
Storybook fluency — you've owned or significantly contributed to a component library documented in Storybook
Demonstrated ability to maintain design-to-code fidelity — you can look at a component in Figma and in the browser or native app and immediately see the delta
Cross-platform thinking — you know where web and native components can share logic and where they need to diverge, and you make those calls with confidence
Accessibility knowledge — WCAG 2.1 AA on web, with awareness of platform accessibility standards on native. You build accessible components, not just test for them after the fact.
High AI proficiency — you actively use AI tools in your workflow and can show concrete examples of how they accelerate your output
Strong written communication — you write documentation that reduces questions, not generates them
Prototyping fluency — you build interactive prototypes in code when the design question isn't settled yet, and you know when a prototype should become a component versus stay a sketch.
Component testing fluency — you write tests with React Testing Library and Jest, and treat visual regression (Chromatic or similar) as part of the component contract, not an optional step.

Responsibilities

Build net-new components — Own the component build process from Figma review to coded component to documented storybook story. You catch edge cases designers didn't spec and flag them before they become debt.
Maintain and evolve existing components — Audit the library regularly. Deprecate the stale, upgrade the brittle, and keep the system consistent as the product grows.
Bridge Figma and code with zero drift — Be the source of truth on what's actually shipped. When a component in Figma and in Storybook diverge, you're the one who notices and fixes it.
Write the documentation that engineers actually use — Clear usage guidelines, prop tables, do/don't examples, and accessibility notes. Documentation is part of the component, not an afterthought.
Leverage AI as a force multiplier — You're not experimenting with AI for the first time. You use it concretely: scaffolding components, generating test coverage, drafting documentation, exploring pattern variants faster than manual iteration allows. You have a workflow, and you can show it.
Work closely with iOS and Android teams – You will be encouraged to learn/write in Swift or Kotlin to support our mobile components. It’s important you work closely with the respective teams to ensure the components are built to the highest standards
Advocate for accessibility — WCAG compliance isn't a checkbox. You bake it into component architecture and catch violations before they reach product teams.
Support cross-team adoption — Partner with product engineers across the org to unblock them on the design system. Review PRs, answer questions, and make the system easy to use correctly.
Own the system layer, not just the components — You think about the infrastructure that makes components work at scale: token architecture, the Figma-to-code pipeline, how tokens flow across web and native surfaces. You bring informed opinions on tooling and patterns, not just for what to build, but how the whole system holds together.

Benefits

Stock options
401(k) with 4% match
Medical, dental, and vision coverage
FSA options
Unlimited PTO (salaried)
Company holidays
Access to paid AI tools
Up to 12 weeks of paid parental leave (after 6 months of service)
Life insurance
Short/long-term disability coverage
Work From Anywhere Month
Meeting-free weeks yearly
Meals provided
Commuter benefits
Team offsites
Customer Days
TFSA/RRSP with 4% company match (Canada)
Maternity/Parental Leave EI top-up support offered (after 6 months of service) (Canada)