https://github.com/vansh1999/figma-to-code
Figma mockups into Pixel-perfect usable user interfaces
https://github.com/vansh1999/figma-to-code
css design figma html javascript-es6
Last synced: 11 days ago
JSON representation
Figma mockups into Pixel-perfect usable user interfaces
- Host: GitHub
- URL: https://github.com/vansh1999/figma-to-code
- Owner: vansh1999
- Created: 2019-04-22T14:45:58.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-09-07T19:29:13.000Z (over 4 years ago)
- Last Synced: 2025-01-29T07:30:34.487Z (over 1 year ago)
- Topics: css, design, figma, html, javascript-es6
- Language: CSS
- Homepage:
- Size: 3.52 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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.
#### Figma - https://www.figma.com/file/wzAjc1CgGZ0o2S3X9xRaBP/A-Simple-Card?node-id=0%3A1
#### See Live - https://practical-ptolemy-8c72bb.netlify.app/
### 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.
#### Figma - https://www.figma.com/file/5Y47YXJgt2DoezlF7Y4Ytq/A-Simple-Landing-Page?node-id=0%3A1
#### See Live - https://focused-newton-66779a.netlify.app/
### 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.
#### Figma - https://www.figma.com/file/VnejwcImzFbFOEyGxNRAkz/Dashboard?node-id=0%3A1
#### See Live - https://dazzling-easley-e77217.netlify.app/
### 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.
#### Figma - https://www.figma.com/file/qhHkkzlsyzNZnaOpZuRSHJ/Cars-Layout?node-id=0%3A1
#### See Live - https://frosty-ramanujan-49c0db.netlify.app/
### 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.
#### Figma - https://www.figma.com/file/Z3lglo2FLnwFAbHVnvw1cm/Drones?node-id=1%3A2
#### See Live - https://kind-neumann-77ab94.netlify.app/