Skip to main content

Display Controls

Display controls are used to display the results related to the data on the screen. They give information like progress, display lists, images, etc. Refer to specific component guidelines while designing it in Figma, to get them correctly identified in DhiWise.

tip

While designing any component, use Frame as its background base to easily identify the component.

List​

The List should be designed as the leading group that contains all the list items inside it as individual similar-looking groups.

All the components for the List item should look common in design and used on the screen.

As shown below, People is a List having different people’s data, which are list items here having the same design.

Example banner

Grid​

The Grid should be designed as the leading group that contains all the Grid items inside it as individual similar-looking groups.

All the components for the List item should look common in design and used on the screen.

As shown below, Food Menu is a Grid having different food items, which are grid items here with the same design using proper grouping.

Example banner

Staggered Grid​

Design must have one or more items for staggered items with different height of them, else staggered would not be identified.

Example banner

Keep the same design for all the staggered cells.

Expandable list​

List items should be placed in the proper group, which is a common cell in the list.

For expandable list, the design must include an icon that is in collapsed or expand mode.

Expand item must be placed in any part of the screen UI but not at the extreme bottom of the screen.

All the collapsed items should have the same design, as shown below;

Example banner

ProgressBar​

Normal progress​

Use Rectangle to design a normal progress bar, one to highlight the progress and the other for the progress background, as shown below;

Example banner

Circular progress​

Use only Ellipse while designing circular progress, with the help of Arc tool in Figma.

Example banner

SeekBar​

SeekBar seems almost same as the ProgressBar just it has a thumb on it, which is used to change or show the progress value. The user can touch the thumb and drag left or right to set the current progress level.

While designing SeekBar, it should have a thumb and a Rectangle sliding bar.

Example banner

RangeSeekBar​

RangeSeekBar is a custom SeekBar with two thumbs to set a specific range of progress.

info

Follow SeekBar guidelines priorly to design RangeSeekBar.

For its design, add two thumbs in the design using Ellipse and a proper Rectangle for its progress and background area to get it easily identified.

Example banner

ChipView​

All the chip elements must be inside one group, and each group must have a text with/without an icon on its left or right.

Example banner

Every chip element should have the same alignment vertically, and the text width must be based on the text wrap according to the text size, so every chip differs from the other.

TextView​

Text element width must be auto-width while designing it in the Figma file. So it will remain flexible in design.

Example banner

ImageView​

To design an image view use Vector, Rectangle , or Ellipse.

Only Vector should be used while designing icons for screen UI.

Example banner

The vector elements or path of the Image must be in a single group, so its vector path is easily identifiable in the design hierarchy.

CircleImageView​

To design a CircleImageView use Vector, Rectangle , or Ellipse.

Only Vector should be used while designing icons in screen UI and a proper image masking if needed to apply.

Example banner

As shown above, the profile picture with the inner vector elements is grouped into one group, and Vector is used for designing the same.



Got a question? Ask here.