DesignGood website development process documentation.
Preparation:
- Download assets from the Assets page located in Figma
- Vectors if there are complex SVGs (if they are simple use the SVG code)
- Logos (always prefer SVG but sometimes they will have to be PNGs)
- Photography (always prefer JPG if there are no transparency), if there are rounded corners that is possible to custom via CSS use a JPG and add the border radius directly on Webflow
- Resize and compress assets with tinypng.com or other tool of your preference. Converting to AVIF or WEBP is even better, if you don’t get a compression below 300KB try to convert to these formats
- Rename assets with format (if needed): Name of the project + Context or description (Example: Castle Floorings Image of Carpets or Deep Roots Homepage Hero Background Image)
- Upload to Webflow in folders for each page (Example: 1 Homepage, 2 About, etc.)
Developing
I. Site Setup
- Create a new website from the template DesignGood Starting Point
- Add Google Fonts - see on the Figma Style Guide which fonts will be necessary (if there are custom fonts that are not Google Fonts the designers will add instructions on Figma)
- Add Favicon and Webclip, you can find them on Figma Style Guide page
- Connect Figma to Webflow plugin to the new website to get the font styles
II. Custom Webflow Style Guide to match Figma’s Style Guide page
- Copy the font styles from Figma (Style Guide page) via Figma to Webflow plugin and paste in the Style Guide where it says “Add Figma font styles here”
- Edit color variables to match the website colors from Figma
- Edit font variables to match the website fonts from Figma (the template has font variables for Titles and Copy), if the projects has more than two font families feel free to add more variables
- Add gradients classes if needed (where it says “Add gradients here if needed.”)
- Edit Buttons to match the website buttons
- Edit Navigation (if you need a different Navigation you can copy from our DG Webflow Library, make sure that the menu icon interaction has been copied with it)