Preferences

Privacy is important to us, so you have the option of disabling certain types of storage that may not be necessary for the basic functioning of the website. Blocking categories may impact your experience on the website. More information

Cross icon

These items are required to enable basic website functionality.

Always active

These items are used to deliver advertising that is more relevant to you and your interests.

These items allow the website to remember choices you make (such as your user name, language, or the region you are in) and provide enhanced, more personal features.

These items help the website operator understand how its website performs, how visitors interact with the site, and whether there may be technical issues.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
cookie icon
Thumbnail of Sketch logo to Webflow logo

Sketch to Webflow - Simple Guide For Migrating Your Designs With Ease

Date
December 4, 2023
Time reading
8 min
Table of contents

Have you ever wondered how you can transfer your Sketch designs to Webflow? In this forthcoming article, we'll expertly lead you through each phase of the process, covering everything from initiating a fresh project in Sketch to showcasing the final result on Webflow. 

What is Sketch?

Sketch is a comprehensive design software suite that empowers designers to create visually stunning products across a range of scales, catering to both individual and collaborative workflows. The suite encompasses a powerful Mac app for meticulously crafting designs, a web app for seamless handoffs and document management on the move, and an iOS app for convenient on-the-go prototyping.

What is Webflow?

Created in 2013, Webflow has established itself as a versatile website-building platform and hosting platform. This online solution has gathered the admiration of coders, web designers, and novice users alike. Webflow's capabilities span from visual design and code customization to website hosting and traditional CMS (Content Management System) functionalities. Its comprehensive features position Webflow as a robust platform with a wealth of possibilities.

Webflow's versatility extends to its diverse range of applications, catering to a wide spectrum of website types, features, and pages. It seamlessly handles landing pages, e-commerce sites, blogs, and B2B websites. Additionally, Webflow's CMS capabilities and hosting platform make it a well-rounded solution for website creation and management. For more articles on how to transfer designs to Webflow you can take a look at :

What to keep in mind before transferring your designs from Sketch to Webflow?

Webflow incorporates a box model

The model consists of four concentric rectangles: content, padding, border, and margin. Each rectangle represents a distinct element of an element's spacing: the content area, the space between the content and the border, the border itself, and the space between the border and other elements. This model is essential for Sketch design as it accurately reflects the web's margin-based spacing system.

Webflow box office model

Maximizing the utility of Sketch involves integrating plugins

Hone your Sketch experience and design with unparalleled efficiency thanks to two plugins:

The Paddy plugin seamlessly applies precise padding to background layers within a group, ensuring your buttons, symbols, and elements maintain consistent spacing. Perfect for projects destined for recreation in Webflow.

To reveal the full potential, the Measure plugin makes an impact. One-click generates an HTML page that offers offline verification of every intricate design detail, from CSS styles to layout specifics. Enhance your Sketch experience and design with unparalleled efficiency.

Sketch vs Webflow Features comparison

Both platforms for web designs have unique features in terms of usage, customizability, editing style, core features, integration, learning curve, and collaboration. When evaluating their strengths and weaknesses, they can be categorized as follows:

Webflow Sketch
Pros:
✔ Visual web design, protyping, CMS.

✔ Drag-and-drop design.

✔ Reusable components and symbols.

✔ Integrates with third-party tools.

✔ Advanced tools for responsive designs.

✔ Rich interactions and animations.

Pros:
✔ Specialized UI/UX design.

✔ Powerful vector-based editing.

✔ Efficient use of symbols for consistency.

✔ Extensive plugin support.

✔ Basic prototyping features.

✔ Collaboration features available.

Cons:
✘ Moderate for basic, steeper for advanced.

✘ Allows code export but can be complex.

✘ Subscription-based pricing

Cons:
✘ macOS only.

✘ Limited built-in feature.

✘ Primarily focused on design, lacks built-in web development features

7 Simple Steps to transfer designs from Sketch to Webflow

Following steps when transfering designs from Sketch to Webflow is crucial. It may seem easy at first glance, but everyone can get lost in the process, in order to avoid that we have created these simple 7 steps for migrating designs.

Step 1: Elevate Your Sketch Design with Paddy Magic

Firstly, you will need to export your desired Sketch design to SVG file. 

Go to File, then Export, and then click on SVG - This will create an SVG file that you can import into Webflow later on. 

Step 2: Streamline Your Design-to-Dev Workflow with Sketch Measure

Effortlessly extract design details, including CSS styles, and generate an index file for comprehensive design inspection. In this step we will have to prepare your images for use in Webflow:

  1. Apply Measure settings

Before exporting your design details, apply your desired settings for Measure. This will ensure that the generated index file and ZIP file contain the accurate measurements and styles you need.

  1. Click Spec Export

Once you've applied your Measure settings, click the "Spec Export" button. This will initiate the export process and generate the index and ZIP files containing your design details.

  1. Inspect design details in the index file

Open the generated index file to inspect all the design details, including CSS styles. This file provides a comprehensive overview of your design elements and their properties.

  1. Use assets from ZIP files for Webflow site

Unzip the ZIP file to access the assets, such as images and fonts, required for building your Webflow site. These assets ensure that your Webflow site matches your original Figma design.

Step 3: Adding Fonts

The next step is to add our assets to the Webflow project and insert fonts.

Open your Webflow project, select the font tab in the project settings on the right, and add your fonts.

Webflow Fonts
Creative Corner Tip: Only use the weight(s) that you need when uploading fonts. Every font weights adds to the site’s file size and load time, which will be important for SEO later on.

Step 4: Create a Style Guide for Consistent Design

In this step we will create a style guide in Webflow. Without having to spend a lot of time updating a color through the whole document in Sketch, we will use global colors to save time and headaches.

Simply mark a swatch as "Global" within Webflow, and any subsequent modifications to that swatch will be seamlessly reflected across the entire project. 

The layout of your style guide is entirely at your decision. It can be as structured or informal as you prefer. 

When defining element sizes, prioritize relative units over fixed units. This will make sure that an element’s size will be considered relative to the other elements. In short, it will make all your elements responsive across various devices, but do not forget to check again about responsiveness, because sometimes designs are crashing.

To achieve responsive web design, we utilize units like percentages (%), viewport width (vw), and viewport height (vh). These units allow our elements to adapt seamlessly to the browser's dimensions, unlike pixels. Since their actual size adapts to the viewport size, they are ideal for responsive layouts.

Regarding font size, opt for rems (relative to the root font size), which scale proportionally with the root font size, ensuring consistent text sizes across different devices. This approach promotes accessibility and user comfort.

Each section will have the following components:

  • Headings: Employ global selectors (e.g., "All H1 Headings") for each heading level, rather than creating unique classes for each instance. This approach keeps the code cleaner.
  • Paragraphs: Ensure "All paragraphs" are selected.
  • Buttons and States: Add their states, including hover, pressed, and focused states.
  • Text Links and States: Define their respective states.
  • Colors: Establish a consistent color palette by saving brand colors as global swatches. This way we can easily apply them or update them later, if needed.

Once done, add the elements to their appropriate sections on the canvas.

Webflow Headings

Step 5: Uploading images

In the Designer in Webflow we will open the Assets panel to add the images from Sketch Measures Export. They can be added either by dragging and dropping them or they can be uploaded one by one. 

Webflow Assets

Step 6: Craft Global Element Components 

Navigation, footer, header, contact form, and modal elements should stay the same on every page. To do it, it’s needed to make each into a Symbol.

The purpose of Symbols is to turn every element reusable component. This means that if you make any changes to a Symbol it will instantly update on all instances of that symbol.

For example, you can create global elements of the navigation, footer, and contact.

Webflow Navigation
Creative Corner Tip: Use custom naming conventions for your classes. You can’t imagine how much it speeds up the design process.

Step 7: Create the rest of the website

After adding the fundamentals, the rest is cakewalk. Our assets, styles, and fonts are complete and we can start building.

Here are some simple steps to follow when building your website. 

Remember, these steps are not etched in stone, they're simply a suggested path to guide your journey through Webflow. The platform's true brilliance lies in its versatility, stimulating you to focus on your design adventure from any point and in any style you desire. So, embrace the freedom to explore, experiment, and create something truly exceptional.

  1. Create a style guide Symbol that contains all the global elements that will be reused throughout the site.
  2. Create the hero section using flexbox with a vertical flex layout and align: stretch so the contents fill the section.
  3. Add hero content, including a welcome text using the global H3 style and a hero-heading text using the global H1 style with a white color.
  4. Add general content within the "content-section" element, using the same amount of padding for all content sections to maintain consistency.
  5. Reuse elements like H2 and paragraph elements within the content sections, leveraging the work done in the style guide.
  6. Create the contact form and footer, making sure to select them as Symbols for reuse on other pages.
  7. Explore Webflow's unique capabilities, such as animation, responsiveness, and fixed positioning.
  8. Remember that the designs completed in Sketch are not the final form of your work, and feel free to experiment and create something truly unique.

Final thoughts

Sketch is one of the best tools for web design there is, and combining it with Webflow, it almost sure to create a stunning website. There are a lot of steps involved in transferring your designs from Sketch to Webflow, and it may seem like a tough job to do at first glance, but nothing is impossible until it is done. We hope that this guide will benefit you in your design migration. And if you still struggle with completing it you can always contact us and we can take care of it for you. 

Contributers
Share

This is Andrey. He can answer all of your questions that you haven't found answers to on this page. Just click the button below to book a meeting with him.

Still have questions? Find answers here.

Does Sketch have a web app?

Yes, Sketch has a web app called Sketch Cloud. Sketch Cloud allows you to view, comment, and inspect Sketch documents in your browser. It also allows you to download production-ready assets from designs.

Is Sketch good for web design?

Sketch is good for web design because it is a vector-based drawing tool that allows you to create high-quality graphics and user interfaces. It also has a number of features that are specifically designed for web design, such as the ability to export CSS code and generate responsive layouts.

Is Sketch better than Figma?

Sketch and Figma are both popular prototyping tools, and there is no clear consensus on which one is better. However, Sketch is generally considered to be better for creating high-fidelity mockups, while Figma is better for creating interactive prototypes.

How do you make a website Sketch?

To make a website with Sketch, you will need to export your Sketch designs and import them into Webflow. Starting from there you can follow our guide to developing a responsive pixel-perfect website.

Can you open Sketch files in Figma?

No, you cannot open Sketch files in Figma directly. However, you can export your Sketch file to SVG or PNG format and then import it into Figma.