Featured

Figma to React NFT Card Component from Design to Code with Styled Components



Published
Build an NFT landing page in React from Figma designs with Rendition, try it out here: https://bit.ly/3sSs2Rn

We'll start with a nifty card component that we'll design and build together with React, Styled-Components, FlexBox, and regular JSX, HTML, and CSS.

Here's the starting code for today: https://rendition-prod.web.app/preview/4ff801b5-64fd-434c-ae1a-bfdd0fc4e31a
And here's the design file we're working from: https://www.figma.com/file/PT394renlWxJTSiyVU9Plo/NFT-Marketplace-Website-(Community)?node-id=102%3A415

Chapters:
0:00 Our task: design an NFT Listing Card
0:30 Create our Design
2:19 Get Code
8:04 Rendition


Backstory of Rendition
We had a bunch of figma designs waiting to be implemented, so we decided to built a tool that would do it for us.
Let us know if it helps you work faster, or if you have any issues


We got tired of writing HTML and CSS by hand, and we love using Figma as our design tool, so it was clear to us that something like Rendition could be useful. We built it both for javascript and typescript, and this version outputs typescript. Would be great to hear your thoughts on this, and if it's helpful as you go from design to code and figma to react. Figma to code is, we hope, part of the future. Our goal is instant design handoff from designer to developer
Category
Web design
Be the first to comment