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;
Refer to the design guidelines or component-specific guidelines which should be followed while screen designing in Figma.
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;
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;
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
AppBar tagging is not supported for web applications.
Tag name: AppBar
Format: {Group or Frame name} + ":" + AppBar
Example: Group1:AppBar
AutoCompleteTextField
AutoCompleteTextField tagging is not supported for web applications.
Tag name: AutoCompleteTextField
Format: {Group or Frame name} + ":" + AutoCompleteTextField
Example: Group12:AutoCompleteTextField
BottomAppBar
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.
BottomBar
BottomBar tagging is not supported for web applications.
Tag name: BottomBar
Format: {Group or Frame name} + ":" + BottomBar
Example: Group12:BottomBar
BottomSheet
Tag name: BottomSheet
Format: {Group or Frame name} + ":" + BottomSheet
Example: Group12:BottomSheet
Button
Tag name: Button
Format: {Group or Frame name} + “:” + Button
Example: Frame1:Button
Calendar
Calendar tagging is not supported for web applications.
Tag name: Calendar
Format: {Group or Frame name} + ":" + Calendar
Example: Group12:Calendar
CheckBox
Tag name: CheckBox
Format: {Group or Frame name} + ":" + CheckBox
Example: Group12:CheckBox
ChipView
Tag name: ChipView
Format: {Group or Frame name} + ":" + ChipView
Example: Group12:ChipView
CircleImage
Tag name: CircleImage
Format: {Group or Frame name} + ":" + CircleImage
Example: Group12:CircleImage
CircleProgressBar
Tag name: CircleProgressBar
Format: {Group or Frame name} + ":" + CircleProgressBar
Example: Group12:CircleProgressBar
Column
Tag name: Column
Format: {Group or Frame name} + ":" + Column
Example: Group12:Column
Dialog
Tag name: Dialog
Format: {Group or Frame name} + ":" + Dialog
Example: Group12:Dialog
DrawerItem
Tag name: DrawerItem
Format: {Group or Frame name} + ":" + DrawerItem
Example: Group12:DrawerItem
Dropdown
Tag name: Dropdown
Format: {Group or Frame name} + ":" + Dropdown
Example: Group12:Dropdown
EditText
Tag name: EditText
Format: {Group or Frame name} + ":" + EditText
Example: Group12:EditText
ExpandableList
Tag name: ExpandableList
Format: {Group or Frame name} + ":" + ExpandableList
Example: Group12:ExpandableList
FloatingActionButton
Tag name: Fab
Format: {Group or Frame name} + ":" + Fab
Example: Group1:Fab
FloatingTextField
Tag name: FloatingTextField
Format: {Group or Frame name} + ":" + FloatingTextField
Example: Group12:FloatingTextField
Footer
Footer tagging is not supported for mobile applications.
Tag name: Footer
Format: {Group or Frame name} + ":" + Footer
Example: Group12:Footer
Grid
Tag name: Grid
Format: {Group or Frame name} + ":" + Grid
Example: Group12:Grid
Header
Header tagging is not supported for mobile applications.
Tag name: Header
Format: {Group or Frame name} + ":" + Header
Example: Group12:Header
IconButton
Tag name: IconButton
Format: {Group or Frame name} + ":" + IconButton
Example: Group12:IconButton
Image
Tag name: Image
Format: {Group or Frame name} + ":" + Image
Example: Group12:Image
List
Tag name: List
Format: {Group or Frame name} + ":" + List
Example: Group12:List
Map
Tag name: Map
Format: {Group or Frame name} + ":" + Map
Example: Group12:Map
OTPView
OTPView tagging is not supported for web applications.
Tag name: OtpView
Format: {Group or Frame name} + ":" + OtpView
Example: Group12:OtpView
ProgressBar
Tag name: ProgressBar
Format: {Group or Frame name} + ":" + ProgressBar
Example: Group12:ProgressBar
Radio
Tag name: Radio
Format: {Group or Frame name} + ":" + Radio
Example: Group12:Radio
RadioGroup
Tag name: RadioGroup
Format: {Group or Frame name} + ":" + RadioGroup
Example: Group12:RadioGroup
RatingBar
Tag name: RatingBar
Format: {Group or Frame name} + ":" + RatingBar
Example: Group12:RatingBar
Row
Tag name: Row
Format: {Group or Frame name} + ":" + Row
Example: Group12:Row
SearchView
Tag name: SearchView
Format: {Group or Frame name} + ":" + SearchView
Example: Group12:SearchView
SeekBar
Tag name: SeekBar
Format: {Group or Frame name} + ":" + SeekBar
Example: Group12:SeekBar
Sidebar
Sidebar tagging is not supported for mobile applications.
Tag name: Sidebar
Format: {Group or Frame name} + ":" + Sidebar
Example: Group12:Sidebar
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.
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
Staggered
Staggered tagging is not supported for web applications.
Tag name: Staggered
Format: {Group or Frame name} + ":" + Staggered
Example: Group12:Staggered
Switch
Tag name: Switch
Format: {Group or Frame name} + ":" + Switch
Example: Group12:Switch
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,
Group12:Pager:1
Table
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.
TextArea
Tag name: TextArea
Format: {Group or Frame name} + ":" + TextArea
Example: Group12:TextArea
WebView
WebView tagging is not supported for web applications.
Tag name: WebView
Format: {Group or Frame name} + ":" + WebView
Example: Group12:WebView
Got a question? Ask here.