Log in to like this post! The People App Stefan Ivanov / Tuesday, August 21, 2018 Overview and Walkthrough of the Sketch Design We hope that you’ve already heard about Indigo.Design and one of the samples we provide with it, the People App. Infragistics’ design system provides unmatched design, usability, and code generation tooling to make collaboration between the different roles in an enterprise more fluent, rapid, and productive. Indigo.Design makes the tedious handoffs obsolete and embraces the true nature of lean product development, which you can experience hands on with the People App. People is a simple app that lets you browse through profiles and perform various operations on the People data such as editing their name and birthday among others, as well as adding and deleting a complete profile. With the People App, we exemplify an app creation process with Indigo.Design and have made the following resources available for you to try it yourself: Sketch Design File Indigo.Design Cloud Prototype Ignite UI for Angular App This article will discuss the Sketch design containing four artboards. To clarify, the “People Home Drawer Open” is a state of the “People Home” with the navigation drawer opened, rather than a screen layout itself, therefore we will not dive into its details. Also, since “Edit Person” and “Add Person” artboards use a very similar layout, we will pick only one of the two. So, in the rest of the article, we will dive into the details of “People Home” and “Edit Person”. People Home The home screen of People holds the app navigation, as well as a list of people to the left and a profile layout to the right. The “People List” group results from the insertion, detaching from symbol and configuration of a “Generic List” from the Indigo-Components library. The most notable changes on the “Generic List” are content-related, such as the removal of its header item, and the use of a set of seven one-line list items to show the complete collection of profiles. The “People List” group is wrapped in another group, called “peopleList”, which is required for the List Component to generate code. To the right, a “peopleDetails” group is laid out, consisting of a background color, floating action button in the bottom right, and a centered layout of user profile UI elements in a group called “Information”. This group has fixed height and width and is positioned in the center of the “peopleDetails” group, which will instruct our code generation engine to define the necessary layout rules that would preserve this horizontal and vertical centering in the parent container in a responsive environment. Inside the “Information” group there are different elements and layout behaviors defined, which you may explore on your own after downloading the Sketch file for the People App. Edit Person The “Edit Person” artboard shows a screen, through which the details for a selected person can be updated, but the high-level structure of the screen is very similar to “People Home”. Inside the “Content” group, which appears together with a background and a hidden confirmation dialog under “peopleEdit”, a more intricate layout has been designed. It uses a larger variety of Indigo-Components such as an Avatar, Icon and Raised Buttons, Inputs, Slider, Checkbox and Radio Buttons. The arrangement follows a row layout paradigm, therefore, where multiple components overlap on a horizontal row, the row is “wrapped” as a Sketch group. Such is the case of the Text used as the label of the Slider and the Slider itself, or the three Raised Buttons at the bottom. Groups are sometimes automatically established like for the File Upload Pattern, which upon detaching to generate code assets, creates a group “File Upload”. Each group or element that constitutes a row has resizing properties that define the behavior of its width on the horizontal axis and preservation of margins to the neighboring elements on the vertical one. This has been achieved by pinning to the left, top, and right and fixing the height of the elements like the “Name”, “Birthday”, “Gender”, “Ranking Group” and “IsAdmin” that span from the left to the right border of their parent group. That wraps up our People App, and to learn the nuts and bolts of the Indigo.Design UI Kits, feel free to download and inspect the file yourself, but why not also design an additional screen or two. If you are completely fresh to design systems and our take of them with Indigo.Design, there is a very good blog that will help you get your head around this awesome new concept and the amazing product we have put together.