{"id":22096322,"url":"https://github.com/vansh1999/figma-to-code","last_synced_at":"2026-05-17T06:44:22.601Z","repository":{"id":67711793,"uuid":"182808103","full_name":"vansh1999/Figma-to-Code","owner":"vansh1999","description":"Figma mockups into Pixel-perfect usable user interfaces","archived":false,"fork":false,"pushed_at":"2021-09-07T19:29:13.000Z","size":3692,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-29T07:30:34.487Z","etag":null,"topics":["css","design","figma","html","javascript-es6"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vansh1999.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-22T14:45:58.000Z","updated_at":"2023-04-08T11:58:58.000Z","dependencies_parsed_at":"2023-07-14T02:31:03.352Z","dependency_job_id":null,"html_url":"https://github.com/vansh1999/Figma-to-Code","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vansh1999%2FFigma-to-Code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vansh1999%2FFigma-to-Code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vansh1999%2FFigma-to-Code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vansh1999%2FFigma-to-Code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vansh1999","download_url":"https://codeload.github.com/vansh1999/Figma-to-Code/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245191636,"owners_count":20575248,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","design","figma","html","javascript-es6"],"created_at":"2024-12-01T04:10:21.708Z","updated_at":"2025-10-11T14:11:35.634Z","avatar_url":"https://github.com/vansh1999.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Figma to Code\n\n### In this repository I transformd great-looking Figma mockups into Pixel-perfect usable user interfaces.\n\n\n### 1. A Simple Card \n\n#### 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. \n\n#### Figma - https://www.figma.com/file/wzAjc1CgGZ0o2S3X9xRaBP/A-Simple-Card?node-id=0%3A1\n\n#### See Live - https://practical-ptolemy-8c72bb.netlify.app/\n\n\n### 2. A Simple Landing Page \n\n#### 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. \n\n#### Figma - https://www.figma.com/file/5Y47YXJgt2DoezlF7Y4Ytq/A-Simple-Landing-Page?node-id=0%3A1\n\n#### See Live - https://focused-newton-66779a.netlify.app/\n\n\n### 3. A Data Analytics Dashboard \n\n#### 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.\n\n#### Figma - https://www.figma.com/file/VnejwcImzFbFOEyGxNRAkz/Dashboard?node-id=0%3A1\n\n#### See Live - https://dazzling-easley-e77217.netlify.app/\n\n\n### 4. A Car Sales Site \n\n#### This massive project allows you to practice creating a sales site, including a search bar, like functionality, icons, and an animated dropdown.\n\n#### Figma - https://www.figma.com/file/qhHkkzlsyzNZnaOpZuRSHJ/Cars-Layout?node-id=0%3A1\n\n#### See Live - https://frosty-ramanujan-49c0db.netlify.app/\n\n\n### 5. Drone Event Landing Page \n\n#### 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. \n\n#### Figma - https://www.figma.com/file/Z3lglo2FLnwFAbHVnvw1cm/Drones?node-id=1%3A2\n\n#### See Live - https://kind-neumann-77ab94.netlify.app/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvansh1999%2Ffigma-to-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvansh1999%2Ffigma-to-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvansh1999%2Ffigma-to-code/lists"}