From the course: Figma: From Design to CSS Implementation
Join today to access over 23,200 courses taught by industry experts.
Populating the design document - Figma Tutorial
From the course: Figma: From Design to CSS Implementation
Populating the design document
- [Instructor] With our design document established and a text element ready to accept our element identifiers, we'll now make use of the inspect workspace to gather these identifiers and create boilerplate CSS rules with matching visuals for identification purposes. The first thing we'll do is go to our landing page and identify things from top to bottom. So the first element we have is our top navigation. Let's select that and move over to the inspect workspace. Note, in our CSS code, we have a little comment identifier for Topnav. Let's go ahead and copy that. And then inside of our design document, we're going to add that in to the first line. Just paste in Topnav. Since we're dealing with CSS, we're going to want to create a matching CSS rule, identifying a div inside of our HTML that will give an idea of Topnav. There's our first rule set up. Notice there are no CSS properties inside of it. It's just simply an…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.