From the course: Figma: From Design to CSS Implementation

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Documenting the project CSS

Documenting the project CSS - Figma Tutorial

From the course: Figma: From Design to CSS Implementation

Start my 1-month free trial Buy for my team

Documenting the project CSS

“

- [Instructor] Before creating the actual CSS and HTML files for the translation from Figma, it's good practice to document the necessary project elements, establishing identifiers in consideration of the visual elements upon which they're derived. We'll do this with our Figma design file, creating a visual design document for all steps moving forward. The first thing we need to do is create a new frame to hold all of this. So I'm going to zoom out and use our frame tool to drag out a new frame right here. With that frame selected, let's go ahead and rename it to Design Document. Looking toward the design workspace, I want to make sure that the width here is wide enough. I'm going to set it at 1096. And for the height, let's choose 1280. I want to change the fill color so it's nice and dark, so I'm going to set that to a dark gray, a text code 19, 19, 19. And then I can reposition it right next to our landing page.…

Contents