> For the complete documentation index, see [llms.txt](https://help.mimeeq.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.mimeeq.com/configurator/advanced-customisation/custom-ui-requirements.md). # Custom UI Requirements Give Mimeeq everything needed to build your custom configurator interface. Learn which design files, component states, user flows and PDF details to provide. Configurators present unique challenges in UI/UX design due to their inherent complexity and the vast array of options available. This guide aims to assist you in navigating these complexities. While it provides a comprehensive framework, we encourage you to consider your unique use cases to fully harness the potential of your configurator design. *** ## Accepted design format The design must be delivered as a **Figma file**. It should include a complete UI design, a fully built styles library, and a list of all components used in the design. This ensures consistency and allows for easy implementation. *** ## Responsive design The design must be provided for at least two breakpoints: * **Mobile:** e.g. 375px * **Desktop:** e.g. 1024px and above {% hint style="warning" %} Designs must be provided for all unique screens across these breakpoints. If additional breakpoints are needed, such as for larger screens like 4K or tablet, they should be listed. {% endhint %} We require this because two key parts of the UI – the canvas and the option panel – must function correctly across different screen sizes. By default, the canvas will shrink to fit smaller screens, but you can suggest alternative behaviour or provide minimum and maximum size limits for different screen sizes. ![Configurator design shown at desktop and mobile breakpoints](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FG2czGItFubZ05pFG8G55%2Fcustom-ui-2_158t30o.png?alt=media) *** ## Style library The style library must include: * Font styles * Colour palette * Icon library These should be created using Figma's style system, or they can be listed separately. If a custom or paid font is used, the font files must be included in a folder for easy download. Icons should be vector-based and easily exportable from Figma, or you can provide a separate folder with all the icons used in the design. ![Figma style library with font styles, colour palette and icons](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FSvlKsHmGbHszHOycqO6S%2Fcustom-ui-1_j38loi.png?alt=media) *** ## Interactive components All interactive components must be listed separately in the Figma file with all their available states, such as: * **Default** * **Hover** * **Selected** * **Loading** * **Error** * **Disabled** (if applicable) For example, a button component should have states for default, hover, loading, and pressed. Icons should include the same states, with an additional tooltip state if needed. ![Button component shown in each of its interaction states](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2F59SYpB1BWfE3SKRZ0yT7%2Fcustom-ui-3_19ly8eu.png?alt=media) Common interactive components include: * Option groups * Buttons * Icons * Dropdowns * Checkboxes * Radio selectors * Text input fields * Toggle switches * Tabs * Any other UI elements required in the custom design {% hint style="warning" %} If you require any additional components not listed above, they must also be included in the Figma file with all relevant states for accurate implementation. {% endhint %} *** ## 3D canvas Several key UI components typically appear on the canvas. **Quick action icons:** * Reset configuration * Dimension * View full-screen * Export (3D model, image, PDF) * Undo and redo * Add to favourites * Zoom all, zoom in, zoom out * Warning 3D message ![Quick action icons placed around the 3D canvas](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FtuFjh9AGZQkBzIZonhia%2Fcustom-ui-4_1d6dg7f.png?alt=media) **Other UI elements:** * Title and description * AR button * **Drag to Spin** component, which appears on the first load Decide which of these components should be included in your canvas design, or whether any additional options are required. Each selected element must be reflected in the Figma file to ensure proper implementation. ![Custom-designed 3D canvas with title, AR button and quick action icons](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2F9dCPP5ba22DykL4eEQg2%2Fcustom-ui-5_1jurbk0.png?alt=media) *** ## Option panel and widget designs You need to determine how the option panel will be displayed and which widgets you want to include. Standard widget UI options include: * Thumbnails widget * Multi-choice * Radio button * Number scale * Number button * Engraving * Print on demand * Colour picker * Upload own material * and others ![Standard widgets that can be customised in a custom UI](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FYk2WMySdzJO3xri0aWbg%2Fcustom-ui-7_1pa8y89.png?alt=media) {% hint style="warning" %} If you need assistance in selecting the appropriate widget types, you can reach out to us for guidance. Each widget can be customised to meet specific needs, and you must provide a design for every widget you plan to use. {% endhint %} *** ## Modals We offer several standard modals that can be included in the design, such as: * View in AR (for desktop) * Export 3D model * Generate image * Generate PDF ![Standard modals that can be customised, such as View in AR and Generate PDF](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FYi7dhyem9DbpfAxWzGtl%2Fcustom-ui-6_1r6upyz.png?alt=media) If you plan to use these modals, you must provide designs for each. If there are any other modals you wish to include, provide corresponding designs for those too. *** ## User flow specification Along with the design, provide a detailed user flow so it is clear how the custom UI should function. The preferred methods are:
#MethodWhat to include
1Loom video explanationA short video using Loom (or similar tools) explaining each step of the user flow. For example: click a button to open a modal, select an option to trigger a specific interaction, how error messages are displayed or resolved, and navigation between different sections of the UI.
2User flow diagramsConnected notes or detailed user flow diagrams directly inside the Figma file. Specify transitions, conditions and key interactions (e.g. hover states, button actions).
3Figma prototype (optional)An interactive Figma prototype that demonstrates navigation between screens. Include a recorded walkthrough of the prototype to highlight key interactions and features.
Providing a clear user flow ensures we understand all critical details. This helps us implement the UI as intended and cover all necessary scenarios, including edge cases and error handling. *** ## Custom PDF You can also customise the PDF that is generated from the configurator. If you choose to generate a custom PDF from customisable products, you must provide a detailed design for the PDF. This design should outline how the product details, images and other relevant information will be presented. {% hint style="warning" %} When providing the PDF design, specify the sizing format: A4, Letter, or a custom size. This ensures the PDF is generated correctly and formatted according to your needs. {% endhint %} *** ## Other important considerations If you wish to include any custom UI elements that are not offered by Mimeeq, you must provide a design for those elements. You also need to contact us to confirm that these custom elements can be implemented, so all details are agreed before development starts. This helps prevent issues during the implementation phase. {% hint style="success" %} We are always happy to assist and collaborate to ensure your custom UI meets all requirements and achieves the desired outcome. Reach out if you have any questions or need guidance. {% endhint %} *** ## Related articles
PDF ExportEnable PDF export and customise what appears in the exported PDF.PDF Export
JavaScript APIControl and respond to the Mimeeq configurator programmatically using JavaScript events.JavaScript API
Morph TargetsSet up morph targets to enable smooth shape transitions between product configuration options.Morph Targets
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://help.mimeeq.com/configurator/advanced-customisation/custom-ui-requirements.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.