Implement a Figma design
Implement a Figma design

Summary of the project

This coding project gives candidates the abililty to show off their CSS skills by having them modify an existing signin page and updating it to match a Figma design. The project contains a simple-looking signin page built using NextJS and Tailwind CSS. Candidates will have access to an embedded Figma design to work from.

This fun and quick exercise is useful for gauging the design skills of potential software engineers of all experience levels.

Skills assessed

  • Design sense and attention to detail
  • CSS Flexbox
Project screenshot

What you'll be working with

Tailwind logo


Typescript logo


NextJS logo


Want to see it in action?
We'll be happy to show you a demo of this project.
Talk to sales

Implement a Figma design

Let frontend engineers show you their craft

Hiring a frontend engineer without seeing how they can take an existing web app and updating it to match a design specification is setting yourself up to be disappointed. Yet so many companies today hire frontend engineers using only portfolio reviews and algorithm quizzes.

This coding project bucks the industry status quo by asking candidates to take the basic sign-in page below, and turning it into the Figma shown above.

screenshot of a basic login page

Gain unique insights

As an employer, you will be able to administer design-based frontend assessments that cannot be done on any other platform. As a candidate, you can skip the weeks of preparation required to pass an algorithms interview. With this project, you will feel right at home if you have ever worked with NextJS or Tailwind.

This project gives candidates enough time to complete a design transformation of a realistic signin page. Companies will have access to a running instance of the candidate's solution to ensure it functions as expected.

This test is excellent as a first screener due to its scope and complexity. We recommend combining several types of coding projects to gain a more comprehensive understanding of a candidate's abilities.

This test is made by a subject-matter expert
TakeHomes team

TakeHomes' team of software development experts has crafted this coding project. Like every project in our library, it undergoes continuous evaluation to ensure ongoing enhancements, following our standardized revision process.

Crafted with expert knowledge

Projects at TakeHomes are designed by subject matter experts. They assess potential subject-matter experts based on their knowledge, ability, and reputation. Before being published, each test undergoes peer review by another expert and is calibrated using feedback from hundreds of test takers with relevant subject experience. Our feedback mechanisms and unique algorithms enable constant improvement for our subject-matter experts' tests.

We're making take homes easy for everyone.
Take control of your hiring like never before. Ditch the whiteboard interview!