Frontend Developer โ€” Design System Implementation

We're looking for a detail-oriented frontend developer to implement our design system across an existing SaaS React application. The job is purely presentational โ€” you'll be referencing Figma designs and ensuring every component, page, and layout matches 1:1.


All routing, authentication, API integrations, and business logic are already wired up or will be handled separately. Your focus is pixel-perfect visual implementation and component consistency.


What You'll Be Doing

  • Taking existing, functional React components and restyling them to match our Figma designs using Tailwind CSS and shadcn/ui
  • Ensuring consistent spacing, typography, colour, and layout across all views
  • Refactoring component markup where needed to match the design structure, without changing functionality
  • Building any new presentational components required by the designs (cards, layout wrappers, empty states, etc.)
  • Flagging any design ambiguities or inconsistencies back to the team rather than guessing

 

Views in Scope

Approximately ~15 existing views including:

  • Analytics dashboards
  • Data tables with filtering and sorting
  • Chat/conversational UI
  • Project settings and configuration panels
  • Navigation, sidebars, and top-level layout

 

All desktop-only โ€” no mobile or tablet. Must look clean across 1280โ€“1920px viewport widths.

 

Tech Stack

  • Framework: React 19 (Vite)
  • Styling: Tailwind CSS 4
  • Component library: shadcn/ui (Radix primitives + CVA + tailwind-merge)
  • Charts: Recharts
  • Tables: TanStack Table (already wired to data โ€” you're styling, not configuring)
  • State/data: TanStack Query, Zustand (already implemented)
  • Design source: Figma

 

What We're Looking For

  • Strong Tailwind CSS skills
  • Experience with shadcn/ui or at least Radix-based component patterns
  • An eye for detail โ€” if the Figma says 16px gap, it's 16px gap
  • Comfortable working async across timezones (we're AEST, most overlap happens in our morning / your evening if you're in Europe)
  • Clear communication โ€” ask questions early rather than delivering something that doesn't match!

     

What You Don't Need

  • Backend, API, or database experience
  • Authentication or routing implementation (it's done)
  • State management or data fetching setup (it's done)
  • DevOps or deployment knowledge

 

How We'll Work Together
You'll get access to the Figma file and the existing repo. Communication is async via Slack and Loom, with occasional video syncs as needed. You'll see that the app already runs โ€” your job is making it look right.


Paid Trial
Before the full engagement, we'll ask you to implement one Figma frame (e.g. a dashboard card or settings panel) within our existing repo. This is paid work ($100โ€“150 USD) and gives both sides a chance to see if the fit is right!

 

We're looking to run the trial in early April, with the full engagement starting around April 10.


To Apply
Please share:

  • Your portfolio or examples of Figma-to-JS work
  • A brief note on your availability and preferred working hours
  • Your hourly rate or project-based pricing preference

Required skills experience

React.js 2 years
Tailwind CSS 2 years
Shadcn UI 2 years

Required languages

English C1 - Advanced
Published 12 March
22 views
ยท
8 applications
50% read
To apply for this and other jobs on Djinni login or signup.
Loading...