Basics & Fundamentals

Introduction

To create extensions that improve functionality and bring joy to users, it's important to focus on user-centered design, thoughtful layout strategies, and effective use of color and typography. Let's explore how you can seamlessly integrate your extensions with the Simple experience. If you plan to publish your App on the Marketplace, please review our Marketplace App Guidelines for the Design and Usability section.

Crafting your interface

Designer Extensions operate within an iframe, allowing you to use standard HTML, CSS, and JavaScript for developing your user interface, just like you would for a single-page application. To simplify the process, you may employ frameworks and libraries. For example, React or Vue can be used to create UI components, while Tailwind CSS or Bootstrap can be used for styling.

Although Simple does not demand Designer Extensions to be native to the Designer, we believe that applications that feel native will be more appealing to our customers and provide a superior user experience.

Design principles

Your UI should adhere to the following key principles:

• Customer-focused: The app's purpose and value should be defined around the needs of the users. It should solve a unique problem for them.
• Simplicity: Your app should be simple to use and not require extensive learning to get started. It should complement the visual abstraction of code, not complicate it.
• 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.
• Foster creative momentum: Your app should not hinder the creative process. Avoid unnecessary steps or options that could break the user's flow state.
• Clear language: Use clear and concise copy. It should guide users and connect the dots between visuals, layouts, and usability.
• Accessible: Strive to make your app accessible to all users. This means ensuring it adheres to accessibility standards and best practices.

Design guidelines

Choose a color scheme that aligns with the purpose and tone of your App. Simple primarily uses the Inter for its interface. You should consider adopting it for consistency.

Example Error

If you are seeing these errors, you should ensure your application is built to limit the rate of requests it is performing. It could, for example, be triggered by polling aggressively when waiting for resources to be created or making a large number of highly concurrent API calls.

{
    "message": "Too Many Requests",
    "code": "too_many_requests",
    "externalReference": null,
    "details": [],            
}

Accessing the APIs

Our APIs interact with the canvas via user-friendly objects and methods. With these APIs you're able to interact with existing elements, or add new elements to the canvas.

Conclusion

Let's walk through the key files needed to bring structure, style, and dynamic content to your apps. You can always learn more about an App's configuration, structure, and necessary files in our docs. 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.