From the course: Figma: Building Animations and Interactions

Unlock this course with a free trial

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

Completing the native web design

Completing the native web design

One more element needs to be gathered from the water pages for conversion to our HTML structure, the water lead copy text. That can be found in water expanded within the Figma design file, and it exists right here. The first thing we'll want to do is actually copy the content itself. Because this is text-based, all we need to do is click on the little clipboard, and our text is copied to the clipboard. Moving over to Visual Studio Code, once again, make sure you're in water.html. And recall that we had a little space here below the Nutritional Information button we created. And this is going to allow us to create another little paragraph here. And we're going to give this an ID of Lead so that we can style it appropriately through CSS. And all we need to do in the HTML here is simply paste in that text that we just copied from Figma. So I'm simply going to do a control or command V here, and there we are. Make sure to save water. html and go back into the browser and the lead text…

Contents