Skip to main content

Tagging components in Figma

DhiWise auto-identifies all your screen view components and generates a complete code for the same. Generally, it auto-detects the components, but sometimes due to design changes, it may not able to identify them.

To get the component identified in Figma, you can do the following things;

  1. Refer to the design guidelines or component-specific guidelines which should be followed while screen designing in Figma.

  2. Tag a specific component in Figma and get it auto-identified in DhiWise.


Change the view of the misidentified component to the correct one in DhiWise. For Flutter learn here, and for React learn here.

Tagging components in Figma helps in auto-identifying components in the screen design easily when they are not auto-identified. Tag a component if it seems to be complex or you want to get it correctly identified in DhiWise.

Before tagging a component, follow the below guides to set a tag on a component:

Guidelines to follow before tagging

In Figma design, the components which are placed in screen design must be placed in a proper Group. To learn about the grouping guidelines follow the Group components and layers guidelines.

Proper grouping and layering of design elements will help in tagging a component easily, which will accurately help in identifying the component in DhiWise.

Follow the below guidelines to learn how to tag a component in Figma:

How to set a tag in Figma

In your app’s Figma file, go to the screen in which you want to set a tag on the component.

Select the Group or Frame of that particular component from the left sidebar of the Figma panel in the Layers section, and set a tag on it by renaming it.


Don't provide a Tag name by yourself! Set the Tag name as mentioned in each component.

The name format is differentiated based on the type of components, as some components also need other elements for their complete design like Tab & Pager, and Slider & Pager indicator.

Follow the below name format for giving the component a Tag;



{Group or Frame name} + ":" + {Tag}

Example: Group1:Button

Group or Frame name: The name which is given in the Figma design.

Tag: Tag added to the component from the list of available Tag names attached to a specific component.

Reference Tag: A number added for the reference of a tagged component to know that it has an attached element. It is added only for the components like Tab & Pager, and Slider & Pager indicator.

For Tab & Pager, and Slider & Pager indicator;



{Group or Frame name} + ":" + {Tag} + ":" + {Reference Tag}

Example: Group1:Tab:1,



Follow the supported components below to learn how to set a tag on each of them,



AppBar tagging is not supported for web applications.

Tag name: AppBar

Format: {Group or Frame name} + ":" + AppBar

Example: Group1:AppBar

Example banner



AutoCompleteTextField tagging is not supported for web applications.

Tag name: AutoCompleteTextField

Format: {Group or Frame name} + ":" + AutoCompleteTextField

Example: Group12:AutoCompleteTextField

Example banner



BottomAppBar tagging is not supported for web applications.

Tag name: BottomAppBar

Format: {Group or Frame name} + ":" + BottomAppBar

Example: Frame1:BottomAppBar


If BottomAppBar/BottomBar includes FloatingActionButton, then also add Tag for it with BottomAppBar/BottomBar.

Example banner



BottomBar tagging is not supported for web applications.

Tag name: BottomBar

Format: {Group or Frame name} + ":" + BottomBar

Example: Group12:BottomBar

Example banner


Tag name: BottomSheet

Format: {Group or Frame name} + ":" + BottomSheet

Example: Group12:BottomSheet

Example banner


Tag name: Button

Format: {Group or Frame name} + “:” + Button

Example: Frame1:Button

Example banner



Calendar tagging is not supported for web applications.

Tag name: Calendar

Format: {Group or Frame name} + ":" + Calendar

Example: Group12:Calendar

Example banner


Tag name: CheckBox

Format: {Group or Frame name} + ":" + CheckBox

Example: Group12:CheckBox

Example banner


Tag name: ChipView

Format: {Group or Frame name} + ":" + ChipView

Example: Group12:ChipView

Example banner


Tag name: CircleImage

Format: {Group or Frame name} + ":" + CircleImage

Example: Group12:CircleImage

Example banner


Tag name: CircleProgressBar

Format: {Group or Frame name} + ":" + CircleProgressBar

Example: Group12:CircleProgressBar

Example banner


Tag name: Column

Format: {Group or Frame name} + ":" + Column

Example: Group12:Column

Example banner


Tag name: Dialog

Format: {Group or Frame name} + ":" + Dialog

Example: Group12:Dialog

Example banner


Tag name: DrawerItem

Format: {Group or Frame name} + ":" + DrawerItem

Example: Group12:DrawerItem

Example banner

Tag name: Dropdown

Format: {Group or Frame name} + ":" + Dropdown

Example: Group12:Dropdown

Example banner


Tag name: EditText

Format: {Group or Frame name} + ":" + EditText

Example: Group12:EditText

Example banner


Tag name: ExpandableList

Format: {Group or Frame name} + ":" + ExpandableList

Example: Group12:ExpandableList

Example banner


Tag name: Fab

Format: {Group or Frame name} + ":" + Fab

Example: Group1:Fab

Example banner


Tag name: FloatingTextField

Format: {Group or Frame name} + ":" + FloatingTextField

Example: Group12:FloatingTextField

Example banner


Footer tagging is not supported for mobile applications.

Tag name: Footer

Format: {Group or Frame name} + ":" + Footer

Example: Group12:Footer

Example banner


Tag name: Grid

Format: {Group or Frame name} + ":" + Grid

Example: Group12:Grid

Example banner


Header tagging is not supported for mobile applications.

Tag name: Header

Format: {Group or Frame name} + ":" + Header

Example: Group12:Header

Example banner


Tag name: IconButton

Format: {Group or Frame name} + ":" + IconButton

Example: Group12:IconButton

Example banner


Tag name: Image

Format: {Group or Frame name} + ":" + Image

Example: Group12:Image

Example banner


Tag name: List

Format: {Group or Frame name} + ":" + List

Example: Group12:List

Example banner


Tag name: Map

Format: {Group or Frame name} + ":" + Map

Example: Group12:Map

Example banner



OTPView tagging is not supported for web applications.

Tag name: OtpView

Format: {Group or Frame name} + ":" + OtpView

Example: Group12:OtpView

Example banner



PhoneNumberInput tagging is not supported for web applications.

Tag name: PhoneNumberInput

Format: {Group or Frame name} + ":" + PhoneNumberInput

Example: Frame9:PhoneNumberInput

Example banner


Tag name: ProgressBar

Format: {Group or Frame name} + ":" + ProgressBar

Example: Group12:ProgressBar

Example banner


Tag name: Radio

Format: {Group or Frame name} + ":" + Radio

Example: Group12:Radio

Example banner


Tag name: RadioGroup

Format: {Group or Frame name} + ":" + RadioGroup

Example: Group12:RadioGroup

Example banner


Tag name: RatingBar

Format: {Group or Frame name} + ":" + RatingBar

Example: Group12:RatingBar

Example banner


Tag name: Row

Format: {Group or Frame name} + ":" + Row

Example: Group12:Row

Example banner


Tag name: SearchView

Format: {Group or Frame name} + ":" + SearchView

Example: Group12:SearchView

Example banner


Tag name: SeekBar

Format: {Group or Frame name} + ":" + SeekBar

Example: Group12:SeekBar

Example banner


Sidebar tagging is not supported for mobile applications.

Tag name: Sidebar

Format: {Group or Frame name} + ":" + Sidebar

Example: Group12:Sidebar

Example banner

Slider & Page Indicator

Tag name for Slider: Slider

Tag name for Pager Indicator: PagerIndicator

Format: {Group or Frame name} + ":" + Slider + ":" + {Reference Tag}

Format: {Group or Frame name} + ":" + PagerIndicator + ":" + {Reference Tag}

Example: Group12:Slider:1, Group123:PagerIndicator:1,


The reference tag number given should be the same for one group, and different for another group in the design.

Example banner

For Web, it has other two supported properties,


Previous slider control, and next slider control tagging are not supported for mobile applications.

Tag name for previous slider control: PreviousSliderControl

Tag name for next slider control: NextSliderControl

Example: Group12:Slider:1, Group123:PagerIndicator:1, Group445:PreviousSliderControl:1, Group445:NextSliderControl:1

Example banner



Staggered tagging is not supported for web applications.

Tag name: Staggered

Format: {Group or Frame name} + ":" + Staggered

Example: Group12:Staggered

Example banner


Tag name: Switch

Format: {Group or Frame name} + ":" + Switch

Example: Group12:Switch

Example banner

Tab & Pager


The Pager content for all the Tabs will be the same. The first identified Page or the previous one will be used to display under each Tab.

Tag name: Tab

Tag name: Pager

Format: {Group or Frame name} + ":" + Tab + ":" + {Reference Tag}

Example: Group12:Tab:1,


Example banner



Table tagging is not supported for mobile applications.

In order to tag a Table component, you need to also tag Table header and Table data with it. Don't forget to tag them!

Tag name: Table

Format: {Group or Frame name} + ":" + Table

Example: Group1:Table

Tag name for Table header: TableHeader

Format: {Group or Frame name} + ":" + TableHeader

Example: Group11:TableHeader

Tag name for Table data: TableData

Format: {Group or Frame name} + ":" + TableData

Example: Group12:TableData


Before you tag Table, it is suggested to follow the design guidelines for Table to get better design accuracy.

Example banner


Tag name: TextArea

Format: {Group or Frame name} + ":" + TextArea

Example: Group12:TextArea

Example banner



WebView tagging is not supported for web applications.

Tag name: WebView

Format: {Group or Frame name} + ":" + WebView

Example: Group12:WebView

Example banner

Got a question? Ask here.