Web Design

CSS Export

Exporting CSS to website

Grouping Objects

Now, let’s combine all the shapes and text into a group. A group will allow us to duplicate the card as many times as we want to. Holding control, click on the items you want to group, and press CONTROL+G. Now, we have a full group. We can change the name of this group to make it easier.

Duplicating Objects

Now, let’s duplicate the objects the same way we duplicated text. Then, we can space these new groups, around 10px apart. Change the gradients a bit, and we have our main page.

Creating our second page

Our second page we create will be a template for our blog posts. They will contain a full post versus the card which contained a short summary. On the left side, click on the frame and duplicate it. A new frame that looks the exact same will appear on the right. Delete all the cards.

Modifying the page

Now let’s modify the page a bit. Delete all the cards we made and remove the underline from the Home navigation tab. Move the lead a bit down and add some placeholder text. This is where all of our text of the post will go.

Now, add another text right under the title, black, regular, 16px.

If you want, you can add a gradient bar as well for some color.

Exporting CSS

And with that, we have finished the design for our blog. If you want, you can add more things to it and make it more about you. Now, to get the CSS from our design. Not all aspects of your design can be exported to CSS, so make sure you are designing things that can be made with CSS.

Click on any element, then go to the Code Panel on the right. Make sure <> is selected. This is the pure CSS of our element. We can just copy and paste it into ourCSS file, give it a name, and we can create objects with that class.

What Next?

In the next two sections, we will be combining all the skills we learned and create our blog. If you didn’t finish the Figma file, you can look at ours below. If the file doesn't show, click here.