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
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.
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.
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.
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
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
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.
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
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
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:
1
Loom video explanation
A 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.
2
User flow diagrams
Connected notes or detailed user flow diagrams directly inside the Figma file. Specify transitions, conditions and key interactions (e.g. hover states, button actions).
3
Figma 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.
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.
Related articles
Last updated
Was this helpful?