Figma to React Task

What they ask

For the frontend team the funnel is: a short HR call, then a filtration task, then an HR interview. The task is a Figma design you implement in React. It is described as simple, but candidates consistently say it is bigger than a typical filter task, closer to a small feature than a single component.

A representative brief (the real Figma changes, the shape does not):

• A shipments page with a searchable, filterable table (status, city, date range).
• A details drawer for one shipment with its tracking timeline.
• Responsive down to mobile, matching the Figma spacing and typography.
• Data comes from a mock JSON you are given, or a simple mocked API.

What gets read closely is not the pixels. Reviewers look at folder structure, how you use TypeScript (typed props, API models, no any), how state and data fetching are organised, and whether the code would survive a second feature being added.

After the task there is an HR interview with standard questions: how do you improve your skills, what are your biggest achievements, why this company.

What they look for

• A sensible layout: features or pages, shared components, hooks, services, types.
• Strict TypeScript and a clean data layer, not everything inside one component.
• Reusable table and filter components rather than copy-paste.
• A README that explains how to run it and what you would do next with more time.

One honest caveat from candidates: feedback on the task can be thin, and it is not always clear an engineer reviewed it. Keep a copy and be ready to walk through it yourself.