Enhancing design systems:
MBition was able to build on their solid foundations, including a design system with a component library in Sketch, by implementing a prototyping approach using ProtoPie component libraries. They found it handy to split their libraries into smaller, logical chunks like Helper libraries, Asset libraries, and Logic-based libraries. Helper libraries, for instance, can replicate the layer styling functions of design tools like Sketch or Figma, allowing control of all components simultaneously. Asset libraries contain components like Icons, Text style components, and Static components, which use minimal logic and rely on helpers for styling. Dynamic components in Logic-based libraries can nest components from other libraries and store logic for functionality.
- building on existing design systems
- splitting libraries into smaller, logical chunks (Helper, Asset, Logic-based)
- replicating design tool functions (e.g., layer styling) within components
- categorizing components based on function and content
- nesting components from different libraries
Reusable interactive components:
The MBition team decided to use ProtoPie component libraries for their prototyping approach, establishing best practices that reduced the time and effort needed to develop functional prototypes. These libraries contain components like Icons, Text style components, and Static components, designed with minimal logic for tasks like initializing color or styling, allowing for easy replacement via the override function. Dynamic components, such as the Control Slider, Slider, and Status Line components, store logic and variables and can be overridden by parent components, sending values and triggering signals. By combining these components, different components communicate through a send/receive concept to enable interactions. The component guide feature in ProtoPie is also useful for documenting these components for team members.
- using component libraries for prototyping
- creating components with minimal logic for easy replacement/override
- developing dynamic components that store logic, variables, and interact via send/receive
- nesting components within others
- documenting components for team use
Consistency:
To improve transparency for team members and maintain bigger prototypes, MBition established guidelines and common rules/routines when working with ProtoPie component libraries. Key practices included naming variables, conditions, triggers, and responses consistently, using multiple libraries with specific naming and color coding, and grouping triggers for a better logic overview and consistency across components. Avoiding hard-coded values and bringing string values in conditionals to the same format (e.g., always uppercase) further help maintain flexibility and consistency, preventing the need to rebuild prototypes if elements are slightly moved.
- establishing guidelines and common rules for library use
- consistent naming conventions for variables, conditions, triggers, and responses
- using naming and color coding schemes for libraries/components
- grouping triggers for consistency across components
- avoiding hard-coded values to maintain flexibility
- standardizing string values in conditionals (e.g., case)
Workflow efficiency:
Using component libraries in ProtoPie gave MBition several benefits, including saving a lot of time compared to creating prototypes from scratch. The approach reduced the time and effort needed to develop functional prototypes. Splitting libraries into smaller chunks speeds up library uploads and allows different team members to work on different areas simultaneously, enabling a collaborative approach. Using templates with predefined design layouts and basic interaction logic saves time by providing a starting point. Avoiding hard-coded values prevents the need to rebuild prototypes when elements change, saving time. Documenting components makes it easier for other colleagues to work on the prototype with less friction. Overall, using ProtoPie allowed MBition to achieve results on "remarkably less resources" and significantly reduce development time.
- saving time by not creating prototypes from scratch
- reducing effort in prototype development
- speeding up library uploads and enabling parallel work through splitting libraries
- using templates with pre-built logic and layouts
- avoiding rebuilding due to layout changes by using dynamic values
- improving collaboration and reducing friction for new team members
- achieving results with less resources
- reducing overall development time
