2. Designing the user interface

Designing the user interface for a Designer Extension involves a mix of HTML, CSS, and Javascript or Typescript. The same principles that apply to building a web application apply for building a Webflow App.

In this guide, we’ll walk through:

• Building your UI
• Understanding and modifying the starter code
• Design principles
• Layout guidelines
• Color & typography

You can also jump straight to our detailed UI Guidelines and corresponding Figma file here!

Building your UI

Since extensions run within an iFrame, you can use traditional HTML, CSS, and JavaScript or TypeScript to design and develop your user interface. You'll design your Designer Extension’s UI much like you would a small web application.

You can use frameworks and libraries to help with this process. For instance, you might use React or Vue.js for creating your UI components, and Tailwind CSS or Bootstrap for styling.

Understanding and modifying the starter code

When you begin building your Designer Extension, Webflow provides a basic HTML and CSS scaffold to get you started. This scaffold is a simple web application that includes a header, main content area, and footer. It's designed to be easy to understand and modify, so you can quickly start building your own custom Extension.

You can get started with an example project by typing the following command, and replacing with your extensions name.

webflow extension init my-extension

Here's a quick rundown of the starter code, but you can get a more in-depth overview in our App Structure documentation.

1. Index.html: The scaffold's HTML structure is defined in public/index.htmlThis file is the entry point for the application on the client side. Feel free to add, remove, or modify elements within file to suit your Extension's needs. This file should include just the contents of the tag, and not include any tags.

1. CSS Styling: The scaffold's styles are defined in public/styles.css. These styles include basic layout and formatting for the body of the page and the header, main, and footer sections. Feel free to modify these styles or add new ones to create the look and feel you want for your Extension. Keep in mind the design principles and guidelines outlined in this document as you do.
2. TypeScript Functionality: The scaffold includes a basic Typescript file, src/index.ts, which you can modify to add interactivity to your Extension. The process of building your UI with TypeScript will be very similar to how you'd typically build a small web app. When creating a build of your extension using npm run build the CLI will convert the TypeScript into JavaScript and store the compiled Javascript in /public/index.js.

As you explore and modify the scaffold, don't be afraid to experiment and make changes. The best way to learn is by doing, and the scaffold is a safe environment to try things out. Remember, all apps submitted to the Marketplace must adhere to Webflow's App Principles and Guidelines. So always keep these principles in mind as you build your Extension.

Design Principles

Your UI should adhere to the following key principles:

1. Customer-focused: The app's purpose and value should be defined around the needs of Webflow users. It should solve a unique problem for them.
2. Simplicity & approachability: Your app should be simple to use and not require extensive learning to get started. It should complement Webflow's visual abstraction of code, not complicate it.
3. Consistent design: Use consistent design elements like color, typography, and button styles throughout your app. This improves the user experience and makes your app easier to navigate.
4. Foster creative momentum: Your app should not hinder the creative process. Avoid unnecessary steps or options that could break the user's flow state.
5. Clear Language: Use clear and concise copy throughout your app. It should guide users and connect the dots between visuals, layouts, and usability.
6. Inclusive & Accessible: Strive to make your app accessible to all users. This means ensuring it adheres to accessibility standards and best practices.

Layout Guidelines

1. Vertical component arrangement: For the narrow default interface, components should be stacked vertically rather than horizontally.
2. Full-width buttons & components: Full-width elements enforce a vertical orientation and make your app easier to scan.
3. Avoid horizontal scrolling: Ensure your UI elements fit within the iframe's width to prevent horizontal scrolling.
4. Consistent spacing: Use a consistent spacing rhythm (e.g., multiples of 4px) to create a visually pleasing app. Use white space effectively to create a balanced layout and highlight important information.
5. Clear & concise copy: Use sentence case for all text, including headings and buttons. Make error states helpful and actionable, and always strive for clarity over complexity.
6. Consistent design language: Use a consistent design language, including typography, color schemes, and button styles. This will create a more cohesive user experience and help users navigate your plugin more easily.
7. Iconography: Use recognizable and intuitive icons throughout your app. Icons can help users navigate your app more easily and quickly.

Color & Typography

Choose a color scheme that aligns with the purpose and tone of your app. Webflow primarily uses the Inter font for its interface. You can consider adopting it for consistency.