.png)
Creating the style guide of the project
Since I use Finsweet’s Client First for naming conventions, I decided to clone the client-first project in Webflow and started editing with its style guide.
In the Figma file, the typography and color palette was clearly defined. So I replicated them quickly. Since everything in Figma is in px, I wanted to use it in rems in Webflow so I divided all the units by 16 in Webflow itself to get the units in rems. You can do this directly in Webflow by typing in the math. For example if the font size is 52px type 52/16rem and the result will appear as 3.25rem.
For best results, I defined the style of HTML tags as set in Figma so that there is consistency throughout the website build.
The following are the HTML tags that I check out
- Body
- All H1 headings, H2 headings, H3 headings and so on
- All Paragraphs
- All Links
- All Block Quotes
- All Ordered Lists
- All Unordered Lists
There were few card styles that were repetitive in the design, so I created a class for each and added it in the style guide.
For buttons, the hover effect and pressed effect were styled in the style guide itself
