Design Engineer at Finite State

We are redirecting you to the source. If you are not redirected in 3 seconds, please click here.

Design Engineer at Finite State. Location Information: USA. Design Engineer (React / Next.js / TypeScript). Contract-to-Hire | 15–20 hours/week | Remote (U.S). About the Role. We're looking for a . Design Engineer. who thrives at the intersection of design and front-end development. You’ll bring thoughtful, high-quality user interfaces to life — helping us build fast, accessible, and elegant experiences.. This is a hands-on, highly collaborative role focused on shipping polished UI using . React, Next.js (App Router), TypeScript. , and modern tooling like . Vercel. . You’ll move quickly (with AI-assisted workflows) while maintaining a high bar for detail and technical excellence.. In this role, you will:. Translate product requirements into polished, responsive UIs with attention to spacing, typography, motion, and interaction states.. Build and evolve a reusable . component library/design system. — including design tokens, theming, dark mode, i18n, and accessibility.. Ship and operate . Next.js apps. using App Router, Server Components, SSR/SSG/ISR, edge functions, and middleware — all deployed on . Vercel. .. Use advanced . TypeScript patterns. (discriminated unions, generics) to write safe, maintainable, and self-documenting code.. Optimize for . performance and Core Web Vitals. — including bundle strategy, code-splitting, caching, and Suspense streaming.. Ensure . WCAG 2.2 AA accessibility. through semantic HTML, ARIA, keyboard handling, focus management, and contrast audits.. Add thoughtful motion and micro-interactions (hover, press, drag, page transitions) while maintaining performance.. Collaborate with Product Design on feasibility, prototypes, and design critiques — giving and receiving detailed feedback.. Integrate with . REST/GraphQL APIs. , manage data fetching (TanStack Query, SWR), and handle empty/error/loading states gracefully.. Write reliable tests using . Vitest, Testing Library. , and . Playwright. ; own UI quality via CI and automated checks.. Use AI tools (Copilot, Cursor, LLMs) for scaffolding, refactors, test generation, and docs — always with standards and reviews in place.. What We're Looking For. React + Next.js (App Router, RSC, SSR/SSG/ISR). expertise, including dynamic routing and SEO metadata strategies.. Strong . TypeScript. skills — writing strict types, clean component APIs, and ergonomic developer experiences.. Proficiency with . Vercel. — environments, preview links, edge runtime, and performance tooling.. A sharp . design eye. — understanding of typography, layout systems, grids, elevation, color, and spacing.. Demonstrated experience building . accessible. interfaces to WCAG 2.2 AA standards.. Fluency in . performance debugging. tools (Lighthouse, WebPageTest, React Profiler) and diagnosing hydration, jank, or memory issues.. Strong CSS experience using . Tailwind. or CSS Modules, and familiarity with . design tokens. and theming strategies.. Collaborative Figma workflow experience (variants, auto-layout, tokens), with the ability to give designers constructive feedback.. Solid grasp of . data fetching. , caching, and degraded state UX (loading, errors, offline).. Strong communicator with a bias for ownership, iteration, and delivery.. Comfortable using . AI tools. responsibly — with prompt discipline, security awareness, and thoughtful code review habits.. Bonus Skills. Experience with . headless CMSs. , especially Sanity.io.. Animation experience using . Framer Motion. or . GSAP. with accessibility in mind.. Familiarity with . design token pipelines. (e.g., Style Dictionary) and multi-brand theming setups.. Understanding of . SEO/OG. best practices, structured data, and internationalization (i18n, RTL support).. Experience with . analytics tools. (e.g., PostHog, Amplitude), feature flags, and experimentation frameworks.. Awareness of . backend UX-affecting concepts. like pagination, rate limits, and API error handling.. Knowledge of . frontend security best practices. (XSS, CSP, sandboxing, OAuth).. How We Work. Tooling:. Next.js, React, TypeScript, Tailwind (or equivalent), Vercel, TanStack Query, Testing Library, Playwright, Storybook.. Quality Process:. Automated CI checks (type, lint, tests, a11y), Vercel PR previews, design token documentation.. AI Culture:. We promote AI-assisted workflows (scaffolding, testing, docs) — always with human review, security guardrails, and code quality checks.. What to Include with Your Application. A . portfolio. or links to shipped work (live sites preferred), including details about your role and UI ownership.. GitHub. or relevant code samples (ideally using React, Next.js, and TypeScript).. A short note on a . UI you significantly improved. — what changed, what the impact was (CLS, TTI, conversion), and how you approached it.. If you're excited about crafting great UIs with purpose — and care deeply about performance, accessibility, and code quality — we’d love to hear from you.