Menu Sheet Overlay
Search Sheet

Working With Components

Do’s and Dont’s of Working With Components

Every component in our SDK is represented in the Mobify UI Kit. If you’ve worked with our UI Kit before, you may have noticed that symbols are named to reflect their code counterparts. This is intended to be a guide for the developers who will inherit your designs; by maintaining this naming scheme, they will have a reference of which components you’ve used and therefore which ones they need to include in the build.

Just because we strive to match UI Kit symbols with the code doesn’t mean the components can’t be customized. In fact, they should be; the purpose of the UI Kit is not to act as a pre-defined style template for your project.

Customizing the components can be as simple as changing colours and icons‚ÄČ‚ÄĒ‚ÄČsomething that will filter through from your established design system‚ÄČ‚ÄĒ‚ÄČor as complex as rearranging the component‚Äôs internal elements or creating alternate views or variants. With the UI Kit, visual customizations can be made with little impact to your development timeline.

Component A Example
Component A
Component B Example
Component B
Component C Example
Component C: As you can see, these product tile components all have the same internal elements‚ÄČ‚ÄĒ‚ÄČimage, title, star rating, price‚ÄČ‚ÄĒ‚ÄČbut the arrangement and ratio of elements are different.
![Component Example](images/product-tile-components.001.jpeg)
<figcaption>As you can see, these product tile components have the same internal elements‚ÄČ‚ÄĒ‚ÄČimage, title, star rating, price‚ÄČ‚ÄĒ‚ÄČbut the arrangement and ratio of elements are different.</figcaption>

Though the default components included in the SDK should work for most situations, there may be occasions that require you to further customize a component to satisfy the needs of the client. In these cases, you may need to include additional elements to the components.

Component A Example
Component A: Restrictive timelines and limited desktop content required the designer to keep the product tile component as-is. The product tile component required no customization to achieve this design.
Component B Example
Component B: This designer had more product information to work with that required adding some custom elements. As the elements were simple and did not include special functionality, they did not require additional development time.
Component C Example
Component C: This product tile has a very complex custom element‚ÄČ‚ÄĒ‚ÄČa swatch selector‚ÄČ‚ÄĒ‚ÄČthat required additional development time to achieve. But as these features improved the user‚Äôs experience, the team agreed to devote time to achieve the desired results.
Component B Example
Sometimes you'll need to add in custom elements, such as this Award Winning badge shown above. Elements that do not provide additional functionality will likely not require significant development time.
Example component
This product tile has a custom swatch selector‚ÄČ‚ÄĒ‚ÄČthat will require additional development time. You'll need to weigh improvements in user experience, against available resources.

In general, be cautious about the additional costs of developing complex custom components. Before deciding on any custom components, review your designs with your development team to ensure they're feasible, and that they will not threaten your project timelines.