Skip to content

vansh1999/Figma-to-Code

Repository files navigation

Figma to Code

In this repository I transformd great-looking Figma mockups into Pixel-perfect usable user interfaces.

1. A Simple Card

The first challenge introduces you to Figma and recaps em and rem units before letting you loose with creating those near pixel-perfect elements. Topics covered include CSS grid, SVGs as links, and media queries.

2. A Simple Landing Page

This challenge introduces a range of topics including creating a hero image, forms and buttons, leaving you with a slick landing page that you can adapt for your own projects.

3. A Data Analytics Dashboard

In the project, we tackle elements such as animated nav bars, burger menus, more advanced backgrounds, gradients and logos, allowing you to practice making a sleek, modern site.

4. A Car Sales Site

This massive project allows you to practice creating a sales site, including a search bar, like functionality, icons, and an animated dropdown.

5. Drone Event Landing Page

This mind-blowing project lets you show off everything you’ve learned so far, plus pick up some awesome skills you might not already know. As well as creating pro-looking animated elements, styling quotes, and advanced CSS grid practice, we’ll also create another stylish form and animated nav bar, to cement your knowledge from earlier in the course.

About

Figma mockups into Pixel-perfect usable user interfaces

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published