From the course: Figma: From Design to CSS Implementation

An overview of the design project - Figma Tutorial

From the course: Figma: From Design to CSS Implementation

Start my 1-month free trial Buy for my team

An overview of the design project

“

- [Instructor] Before we start exporting any content from our Figma design file for use in other environments, we'll first take a few moments to get familiar with the design we'll be working on in this course. Here I have Big Star Collectibles Gift Claim as a project open in inside of Figma. We can see here that we have a Topnav frame, a Content frame, and a Footer frame. Each one of these frames is within our overall Landing Page - Gift Claim frame. Inside of the Topnav, we have a logo and also some text. Within our Content, we have a thank you and a rather large Offer set of images here that we can really export as a single graphic. At the very bottom, we have a Claim Button with a yellow background and black text. The only thing that resides inside of the Footer is some footer text. We're going to replicate this entire design in CSS. Let's have a look at the desktop preview. It's going to look very similar to what we see inside of Figma, and there it is. This simple landing page provides us with a number of interesting options when translating the design over to CSS.

Contents