Anatomy
Slots
Good to Know
Components with Slots consist of one or more predefined slots, which are like placeholders within the component's template. Users can replace these slots with their own content when using the component, achieving dynamic customization.
In Figma, we provide multiple templates that correspond to the current layouts across Mews products:
- Logo: As a web application, Mews Operations uses its logo to provide users with instant recognition of the platform they are using. The logo also works as a home link, allowing users to return to the main dashboard with a simple click. Beyond its practical role, the logo holds internal significance, contributing to branding and marketing efforts.
- Sidebar trigger: It allows the user to collapse or expand the side menu on demand.
- Search bar: The smart search empowers users to find everything they need effortlessly. By default, it searches within the current hotel or multi-property the user is working on. Users can perform a search across all accessible properties and execute complex queries using advanced commanding and filtering options.
- Shortcuts: Global features like Messages or Notifications provide users with notifications about new entries added from any of the properties they have a profile in.
- Global actions: A [+] button is globally available from the top nav, so the users can quickly create new entities without navigating to any specific page. This button opens a floating panel that suggests the user create that new entity within the property/portfolio they currently are, but they can select a different target if needed.
- Hamburger menu: The hamburger icon is used to open product navigation such as the Side navigation.The hamburger menu is only needed when there is a collapsable left navigation.
- Wordmark: For Mews products, the wordmark is always preceded by “MEWS.”
- Search Input
- Sub-menu
- Header utilities: These utilities are reserved for universal, system-level functions such shortcuts to main features, product-level actions, notifications, and similar functions. Not every product on a system is required to show the same utilities, but it is recommended for a better cross-product user experience.
- Use Profile: groups all pages related tot he user profile like profile settings, invoices, and also option to log out from the system.
- Language selection
- Hamburger Menu
- Property Logo
- Property Name
- Currency Selection
- Language Selection
- Close Button
Spacing
Motion
Overall
|
Layer |
Action |
Trigger |
Attribute |
Duration |
Easing |
Delay |
Effect |
|---|---|---|---|---|---|---|---|
|
Side menu |
Collapse |
Click |
CenterX |
Duration30 |
EasyIn |
|
Slide In |
|
Side menu |
Expand |
Click |
CenterX |
Duration30 |
EasyOut |
|
Slide Out |
Choreography
Action: Side menu collapse
|
Layer |
Element |
Trigger |
Attribute |
Duration |
Easing |
Delay |
Effect |
|---|---|---|---|---|---|---|---|
|
Mews Logo |
M |
Auto |
CenterX |
Duration20 |
EasyOut |
|
Slide In |
|
|
E |
Auto |
Opacity |
Duration10 |
EasyIn |
|
Fade Out |
|
|
W |
Auto |
Opacity |
Duration10 |
EasyIn |
|
Fade Out |
|
|
S |
Auto |
Opacity |
Duration10 |
EasyIn |
|
Fade Out |
|
Top bar |
Bar |
Auto |
CenterX |
Duration30 |
EasyIn |
|
Slide In |
|
|
Icon menu_arrow_left |
Auto |
Opacity |
Duration30 |
EasyIn |
|
Fade Out |
|
|
Icon menu_arrow_right |
Auto |
Opacity |
Duration30 |
EasyIn |
|
Fade In |
|
Side Bar |
Side Menu - expanded |
Auto |
CenterX |
Duration30 |
EasyIn |
|
Slide Out |
|
|
Side Menu - expanded |
Auto |
Opacity |
Duration10 |
EasyIn |
|
Fade Out |
|
|
Side Menu - collapse |
Auto |
CenterX |
Duration10 |
EasyOut |
|
Slide In |
|
|
Side Menu - collapse |
Auto |
Opacity |
Duration30 |
EasyOut |
Delay10 |
Fade In |
|
|
Avatars |
Auto |
CenterX |
Duration30 |
EasyOut |
|
Slide In |
Action: Side menu expand
|
Layer |
Element |
Trigger |
Attribute |
Duration |
Easing |
Delay |
Effect |
|---|---|---|---|---|---|---|---|
|
Mews Logo |
M |
Auto |
CenterX |
Duration20 |
EasyOut |
|
Slide In |
|
|
E |
Auto |
Opacity |
Duration10 |
EasyOut |
|
Fade In |
|
|
W |
Auto |
Opacity |
Duration10 |
EasyOut |
|
Fade In |
|
|
S |
Auto |
Opacity |
Duration10 |
EasyOut |
|
Fade In |
|
Top bar |
Bar |
Auto |
CenterX |
Duration30 |
EasyOut |
|
Slide Out |
|
|
Icon menu_arrow_left |
Auto |
Opacity |
Duration30 |
EasyOut |
|
Fade In |
|
|
Icon menu_arrow_right |
Auto |
Opacity |
Duration30 |
EasyOut |
|
Fade Out |
|
Side Bar |
Side Menu - expanded |
Auto |
CenterX |
Duration30 |
EasyOut |
|
Slide In |
|
|
Side Menu - expanded |
Auto |
Opacity |
Duration40 |
EasyOut |
Delay10 |
Fade In |
|
|
Side Menu - collapse |
Auto |
CenterX |
Duration20 |
EasyIn |
|
Slide Out |
|
|
Side Menu - collapse |
Auto |
Opacity |
Duration20 |
EasyIn |
|
Fade Out |
|
|
Avatars |
Auto |
CenterX |
Duration30 |
EasyOut |
|
Slide Out |