From Adobe XD to Webflow: how to turn your prototypes into live websites

In the blog post, Martin Perhiniak, a certified Adobe design instructor, outlines his process for designing a website using Adobe XD and Webflow. He emphasizes the importance of creating a solid design system by organizing branding and web-centric elements on a single artboard and saving them to XD’s Assets UI, a practice he mirrors in Webflow by setting up font families and global colors early on. Perhiniak's approach is divided into five sections: System, Sitemap, Wireframe, Artboard Layout, and Transition to Webflow. The process begins with establishing a comprehensive design system, followed by creating a site map to visualize page relationships and wireframing to develop the user experience in XD. He maintains a one-to-one relationship between mockups and the website by adhering to the web’s box model, further facilitated by setting up artboard layouts with default settings like 1200px width and 15 columns, ensuring a seamless transition to Webflow.