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.

tip

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.

note

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;

info

Format:

{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;

info

Format:

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

Example: Group1:Tab:1,

Group121:Pager:1,

Group122:Pager:1

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

AppBar​

caution

AppBar tagging is not supported for web applications.

Tag name: AppBar

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

Example: Group1:AppBar

Example banner

AutoCompleteTextField​

caution

AutoCompleteTextField tagging is not supported for web applications.

Tag name: AutoCompleteTextField

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

Example: Group12:AutoCompleteTextField

Example banner

BottomAppBar​

caution

BottomAppBar tagging is not supported for web applications.

Tag name: BottomAppBar

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

Example: Frame1:BottomAppBar

info

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

Example banner

BottomBar​

caution

BottomBar tagging is not supported for web applications.

Tag name: BottomBar

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

Example: Group12:BottomBar

Example banner

BottomSheet​

Tag name: BottomSheet

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

Example: Group12:BottomSheet

Example banner

Button​

Tag name: Button

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

Example: Frame1:Button

Example banner

Calendar​

caution

Calendar tagging is not supported for web applications.

Tag name: Calendar

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

Example: Group12:Calendar

Example banner

CheckBox​

Tag name: CheckBox

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

Example: Group12:CheckBox

Example banner

ChipView​

Tag name: ChipView

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

Example: Group12:ChipView

Example banner

CircleImage​

Tag name: CircleImage

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

Example: Group12:CircleImage

Example banner

CircleProgressBar​

Tag name: CircleProgressBar

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

Example: Group12:CircleProgressBar

Example banner

Column​

Tag name: Column

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

Example: Group12:Column

Example banner

Dialog​

Tag name: Dialog

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

Example: Group12:Dialog

Example banner

DrawerItem​

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

EditText​

Tag name: EditText

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

Example: Group12:EditText

Example banner

ExpandableList​

Tag name: ExpandableList

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

Example: Group12:ExpandableList

Example banner

FloatingActionButton​

Tag name: Fab

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

Example: Group1:Fab

Example banner

FloatingTextField​

Tag name: FloatingTextField

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

Example: Group12:FloatingTextField

Example banner

caution

Footer tagging is not supported for mobile applications.

Tag name: Footer

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

Example: Group12:Footer

Example banner

Grid​

Tag name: Grid

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

Example: Group12:Grid

Example banner

caution

Header tagging is not supported for mobile applications.

Tag name: Header

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

Example: Group12:Header

Example banner

IconButton​

Tag name: IconButton

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

Example: Group12:IconButton

Example banner

Image​

Tag name: Image

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

Example: Group12:Image

Example banner

List​

Tag name: List

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

Example: Group12:List

Example banner

Map​

Tag name: Map

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

Example: Group12:Map

Example banner

OTPView​

caution

OTPView tagging is not supported for web applications.

Tag name: OtpView

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

Example: Group12:OtpView

Example banner

ProgressBar​

Tag name: ProgressBar

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

Example: Group12:ProgressBar

Example banner

Radio​

Tag name: Radio

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

Example: Group12:Radio

Example banner

RadioGroup​

Tag name: RadioGroup

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

Example: Group12:RadioGroup

Example banner

RatingBar​

Tag name: RatingBar

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

Example: Group12:RatingBar

Example banner

Row​

Tag name: Row

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

Example: Group12:Row

Example banner

SearchView​

Tag name: SearchView

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

Example: Group12:SearchView

Example banner

SeekBar​

Tag name: SeekBar

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

Example: Group12:SeekBar

Example banner

caution

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,

tip

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,

caution

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​

caution

Staggered tagging is not supported for web applications.

Tag name: Staggered

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

Example: Group12:Staggered

Example banner

Switch​

Tag name: Switch

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

Example: Group12:Switch

Example banner

Tab & Pager​

caution

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,

Group12:Pager:1

Example banner

Table​

caution

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

tip

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

Example banner

TextArea​

Tag name: TextArea

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

Example: Group12:TextArea

Example banner

WebView​

caution

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.