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 a leading Frame or Group that contains all the list items inside it as individual similar-looking frames or groups.

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

As seen below, for a single item, the heading and its description are placed in a single Frame while, the Caption and the image below in the other Frame.

Example banner

Here, a leading Frame is used inside which all the inner components are placed in different sub-frames for avatar, text and right-most text.

Example banner

Grid

The Grid should be designed as a leading Frame or Group that contains all the Grid items inside it as individual similar-looking frames or groups.

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

As seen below, two frames are maintained for the Grid item's Image and its Name and Description.

Example banner

Here, a leading Frame is used inside which all the inner components are placed in different sub-frames for Product image, name and details.

Example banner

Staggered Grid

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

Example banner

For images in a Staggered grid, as below, place them inside a single Frame or Group.

Example banner

Keep the same design for all the staggered cells.

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.

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

Table

The Table component allows you to display data in an organized manner using rows and columns in a tabular format.

Create a main group to organise Table design and manage two child objects inside it.

  1. First child object should be the Table header,

  2. Second child object should be the Table data containing all the child objects or the cell objects which has similar view. Here, make sure to place this child objects in a row or a horizontal format only.

caution

Place the second child objects or Table data in a row or horizontal format only!

Useful Design Tips:

To get the best results, use the auto layout property to align and distribute table's objects.

Organise the table in a row or linear horizontal format for easy design structuring.

Example banner

ProgressBar

Normal progress

Use Frame and 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

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.