Creating a Style Guide with Webflow - Design. Build. Launch. Episode 4
Episode 4: Creating a Style Guide in Webflow and Exporting Adobe XD Assets.
In this video we will export are assets from Adobe XD, setup our Webflow website project and create a style guide in Webflow.
We will start by exporting all of our images from Adobe XD. Moving into Webflow we will then setup our body for all the pages of the website by setting defaults like font. We are using Roboto so we can easily set that up in Webflow. Next we will make an additional page called styles. Here we will build a style guide in Webflow. Setting up all of our text sizes and repeated elements.
Once we have our style guide done we are ready to build the homepage. Which we will start in Episode 5.
Enjoy the video :D
For this project you will need two tools:
Sign Up for Webflow (affiliate): https://webflow.grsm.io/caleredwards
Download Adobe XD: https://www.adobe.com/products/xd.html
New Videos Every Tuesday & Thursday!
Have a Great Day! Join the Notification Squad: click the bell 🔔
Subscribe: http://www.youtube.com/user/CalerEdwa...
Learn UI/UX Design and Adobe XD 👩💻👨💻(60% OFF)
Learn: https://www.udemy.com/ui-ux-design-us...
Join the channel and become a Member ❤️
Get exclusive content from me and help support the channel.
Join: / @caleredwards
SOCIAL: @CalerEdwards 💙
Dribbble- https://dribbble.com/CalerEdwards
Instagram- / caleredwards
Twitter- / caleredwards
Behance- http://behance.net/CalerEdwards
Website- http://caleredwards.com
Hangout on the Discord server! 💜
Discord: / discord
▶ Music: Epidemic Sound 🎹
What is Design. Build. Launch. ?
If you missed the Introduction Video you can check it out here:
• Design. Build. Launch. | Introduction
Episode 1: • How to Wireframe a Website - Design. ...
Episode 2: • Finalizing a Wireframe - Design. Buil...
Episode 3: • Designing a Website in Adobe XD - Des...
#Webflow #AdobeXD #NoCode
