From the course: Figma: Building Animations and Interactions

Unlock this course with a free trial

Join today to access over 24,400 courses taught by industry experts.

Reading CSS from a shared Figma project

Reading CSS from a shared Figma project - Figma Tutorial

From the course: Figma: Building Animations and Interactions

Start my 1-month free trial Buy for my team

Reading CSS from a shared Figma project

“

As we saw in the last movie, there are certain elements within our Figma design file that are missing or incomplete within the HTML-based structure we're working with. We'll need to inspect the shared design prototype and gather some CSS snippets that determine structure and display for use in this native web version. We're going to focus on the water page, water.html, and we can see it's missing the button here. Going back to Figma, here is our Nutritional Information button. What I'm going to do is, in Design Mode, select the entire water frame here. And of course, you could always mark as ready for dev here as well. And then whenever we switch back into Dev Mode, we'll be able to access all of this information. Clicking on the button itself reveals a lot of the code that we need. We can see that it's set to CSS here as the language, and it's outputting code snippets. We have both layout and style code, and clicking these little clipboard icons here will allow us to copy the layout…

Contents