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.

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.

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: topbar:AppBar

AppBar

AppStoreIcon​

Tag name: AppStoreIcon

Format: {Group or Frame name} + “:" + AppStoreIcon

Example: App Store:AppStoreIcon

AppStoreIcon

AutoCompleteTextField​

caution

AutoCompleteTextField tagging is not supported for web applications.

Tag name: AutoCompleteTextField

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

Example: Search Form:AutoCompleteTextField

AutoCompleteTextField

Barcode​

caution

Barcode tagging is not supported for web applications.

Tag name: Barcode

Format: {Group or Frame name} + “:" + Barcode

Example: barcode:Barcode

Barcode

BottomAppBar​

caution

BottomAppBar tagging is not supported for web applications.

Tag name: BottomAppBar

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

Example: BottomBar:BottomAppBar

BottomAppBar

BottomBar​

caution

BottomBar tagging is not supported for web applications.

Tag name: BottomBar

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

Example: BottomBar:BottomBar

BottomBar

BottomSheet​

caution

BottomSheet tagging is not supported for web applications.

Tag name: BottomSheet

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

Example: BottomSheetContainer:BottomSheet

BottomSheet

caution

BreadCrumb tagging is not supported for mobile applications.

Tag name: BreadCrumb

Format: {Group or Frame name} + “:" + BreadCrumb

Example: Breadcrumb:BreadCrumb

Breadcrumb

Button​

Tag name: Button

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

Example: Button:Button

Button

Calendar​

caution

Calendar tagging is not supported for web applications.

Tag name: Calendar

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

Example: calendar:Calendar

Calendar

Calendar

Chart​

caution

Chart tagging is not supported for mobile applications.

Tag name: Chart

Format: {Group or Frame name} + “:" + Chart

Example: Container:Chart

Chart

CheckBox​

Tag name: CheckBox

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

Example: text:CheckBox

CheckBox

ChipView​

Tag name: ChipView

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

Example: Option Container:ChipView

ChipView

CircleImage​

Tag name: CircleImage

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

Example: Image:CircleImage

CircleImage

CircleProgressBar​

Tag name: CircleProgressBar

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

Example: Performance Chart:CircleProgressBar

CircleProgressBar

Column​

Tag name: Column

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

Example: Input Fields:Column

Column

DatePicker​

Tag name: DatePicker

Format: {Group or Frame name} + “:" + DatePicker

Example: Input Fields:DatePicker

DatePicker

Dialog​

Tag name: Dialog

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

Example: PopUp:Dialog

Dialog

DrawerItem​

Tag name: DrawerItem

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

Example: Filter Container:DrawerItem

DrawerItem

Tag name: Dropdown

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

Example: Input Fields:Dropdown

Dropdown

Tag name: DropdownMenu

Format: {Group or Frame name} + “:" + DropdownMenu

Example: Input Fields:DropdownMenu

DropdownMenu

EditText​

Tag name: EditText

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

Example: Input Fields:EditText

EditText

ExpandableList, ExpandHeader & ExpandItem​

note

Use ExpandableList, ExpandHeader & ExpandItem tags together for accurate component identification. Using only one of these tags may result in inaccuracies and incomplete component recognition.

Tag name: ExpandableList

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

Example: FAQ Section:ExpandableList

Tag name: ExpandHeader & ExpandItem

Format:

{Group or Frame name} + “:" + ExpandHeader

{Group or Frame name} + “:" + ExpandItem

Example:

Question Container:ExpandHeader

text:ExpandItem

ExpandableList

Fab​

Tag name: Fab

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

Example: Floating Button:Fab

Fab

FloatingTextField​

Tag name: FloatingTextField

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

Example: input:FloatingTextField

FloatingTextField

caution

Footer tagging is not supported for mobile applications.

Tag name: Footer

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

Example: Footer:Footer

Footer

Grid​

Tag name: Grid

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

Example: Container:Grid

Grid

caution

Header tagging is not supported for mobile applications.

note

Use Header, HeaderMenu, MenuItem & SubMenu tags together for accurate component identification. Using only one of these tags may result in inaccuracies and incomplete component recognition.

Tag name: Header

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

Example: Header:Header

Header

HeaderMenu​

caution

HeaderMenu tagging is not supported for mobile applications.

note

Use Header, HeaderMenu, MenuItem & SubMenu tags together for accurate component identification. Using only one of these tags may result in inaccuracies and incomplete component recognition.

Tag name: HeaderMenu

Format: {Group or Frame name} + “:" + HeaderMenu

Example: Menu:HeaderMenu

HeaderMenu

Header MenuItem & SubMenu​

caution

Header MenuItem & SubMenu tagging is not supported for mobile applications.

note

Use Header, HeaderMenu, MenuItem & SubMenu tags together for accurate component identification. Using only one of these tags may result in inaccuracies and incomplete component recognition.

Tag name: MenuItem & SubMenu

Format:

{Group or Frame name} + “:" + MenuItem

{Group or Frame name} + “:" + SubMenu

Example:

Menu:MenuItem

Menu:SubMenu

Header MenuItem & SubMenu

IconButton​

Tag name: IconButton

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

Example: Icon:IconButton

IconButton

Illustration​

Tag name: Illustration

Format: {Group or Frame name} + “:" + Illustration

Example: Icon:Illustration

Illustration

Image​

Tag name: Image

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

Example: Image:Image

Image

KeyBoard​

caution

KeyBoard tagging is not supported for web applications.

Tag name: KeyBoard

Format: {Group or Frame name} + “:" + KeyBoard

Example: Keyboard:KeyBoard

KeyBoard

List​

Tag name: List

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

Example: Group 161:List

List

Tag name: Logo

Format: {Group or Frame name} + “:" + Logo

Example: Logo Container:Logo

Logo

Map​

Tag name: Map

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

Example: Map image:Map

Map

MultiIconEditText​

Tag name: MultiIconEditText

Format: {Group or Frame name} + “:" + MultiIconEditText

Example: Input Fields:MultiIconEditText

Map

OTPView​

Tag name: OtpView

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

Example: Otp Number:OtpView

OtpView

PasswordEditText​

Tag name: PasswordEditText

Format: {Group or Frame name} + “:" + PasswordEditText

Example: Input Fields:PasswordEditText

PasswordEditText

PhoneNumberInput​

note

Use PhoneNumberInput & CountryPicker tags together for accurate component identification. Using only one of these tags may result in inaccuracies and incomplete component recognition.

Tag name: PhoneNumberInput

Format:

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

{Group or Frame name} + “:" + CountryPicker

Example:

Input Fields:PhoneNumberInput

Input Field with Flag:CountryPicker

PhoneNumberInput

PopupMenuItem​

Tag name: PopupMenuItem

Format: {Group or Frame name} + “:" + PopupMenuItem

Example: popup:PopupMenuItem

PopupMenuItem

ProgressBar​

Tag name: ProgressBar

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

Example: Progressbar:ProgressBar

ProgressBar

QRCode​

caution

QRCode tagging is not supported for web applications.

Tag name: QRCode

Format: {Group or Frame name} + “:" + QRCode

Example: icon:QRCode

QRCode

QuantityInput​

Tag name: QuantityInput

Format: {Group or Frame name} + “:" + QuantityInput

Example: Quantity:QuantityInput

QuantityInput

Radio​

caution

Radio tagging is not supported for web applications.

Tag name: Radio

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

Example: Light Theme Container:Radio

Radio

RadioGroup​

caution

RadioGroup tagging is not supported for mobile applications.

Tag name: RadioGroup

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

Example: shipping:RadioGroup

RadioGroup

RatingBar​

Tag name: RatingBar

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

Example: Star:RatingBar

RatingBar

ReadMoreText​

caution

ReadMoreText tagging is not supported for web applications.

Tag name: ReadMoreText

Format: {Group or Frame name} + “:" + ReadMoreText

Example: Text:ReadMoreText

ReadMoreText

Row​

Tag name: Row

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

Example: Tracking Order Option:Row

Row

SearchView​

Tag name: SearchView

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

Example: Search View:SearchView

SearchView

Section​

Tag name: Section

Format: {Group or Frame name} + “:" + Section

Example: Settings Container:Section

Section

SectionList​

caution

SectionList tagging is not supported for web applications.

Tag name: SectionList

Format: {Group or Frame name} + “:" + SectionList

Example: Settings Container:SectionList

SectionList

SeekBar​

Tag name: SeekBar

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

Example: Slider:SeekBar

SeekBar

SelectionGroup​

Tag name: SelectionGroup

Format: {Group or Frame name} + “:" + SelectionGroup

Example: Size Options:SelectionGroup

SelectionGroup

SelectionList​

caution

SelectionList tagging is not supported for web applications.

Tag name: SelectionList

Format: {Group or Frame name} + “:" + SelectionList

Example: Option:SelectionList

SelectionList

caution

Sidebar tagging is not supported for mobile applications.

note

Use Sidebar, SidebarMenu, MenuItem & SubMenu tags together for accurate component identification. Using only one of these tags may result in inaccuracies and incomplete component recognition.

Tag name: Sidebar

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

Example: Sidebar:Sidebar

Sidebar

SidebarMenu​

caution

SidebarMenu tagging is not supported for mobile applications.

note

Use Sidebar, SidebarMenu, MenuItem & SubMenu tags together for accurate component identification. Using only one of these tags may result in inaccuracies and incomplete component recognition.

Tag name: SidebarMenu

Format: {Group or Frame name} + “:" + SidebarMenu

Example: Menu:SidebarMenu

SidebarMenu

Sidebar MenuItem & SubMenu​

caution

Sidebar MenuItem & SubMenu tagging is not supported for mobile applications.

note

Use Sidebar, SidebarMenu, MenuItem & SubMenu tags together for accurate component identification. Using only one of these tags may result in inaccuracies and incomplete component recognition.

Tag name: MenuItem & SubMenu

Format:

{Group or Frame name} + “:" + MenuItem

{Group or Frame name} + “:" + SubMenu

Example:

Dashboard:MenuItem

Orders:SubMenu

SidebarMenu

SlidableList​

caution

SlidableList tagging is not supported for web applications.

Tag name: SlidableList

Format: {Group or Frame name} + “:" + SlidableList

Example: Monday Tasks:SlidableList

SlidableList

Slider & Page Indicator​

Tag name: Slider

Tag name: PagerIndicator

Format:

{Group or Frame name} + “:" + Slider

{Group or Frame name} + “:" + PagerIndicator

Example:

Image Carousel:Slider

Indicator:PagerIndicator

Slider_PageIndicator

SocialMediaIcons​

Tag name: SocialMediaIcons

Format: {Group or Frame name} + “:" + SocialMediaIcons

Example: icons:SocialMediaIcons

SocialMediaIcons

Staggered​

caution

Staggered tagging is not supported for web applications.

Tag name: Staggered

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

Example: pics:Staggered

Staggered

STATUSBAR​

caution

STATUSBAR tagging is not supported for web applications.

Tag name: STATUSBAR

Format: {Group or Frame name} + “:" + STATUSBAR

Example: StatusBar:STATUSBAR

STATUSBAR

Stepper​

Tag name: Stepper

Format: {Group or Frame name} + “:" + Stepper

Example: Steppers:Stepper

Stepper

Switch​

Tag name: Switch

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

Example: Notifications Toggle:Switch

Switch

Tab & Pager​

note

Use Tab & Pager tags together for accurate component identification. Using only one of these tags may result in inaccuracies and incomplete component recognition.

Tag name: Tab

Tag name: Pager

Format:

{Group or Frame name} + “:" + Tab

{Group or Frame name} + “:" + Pager

Example:

tab:Tab

pager:Pager

Tab_Pager

Table, TableHeader & TableData​

caution

Table, TableHeader & TableData tagging is not supported for mobile applications.

tip

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

note

Use Table, TableHeader & TableData tags together for accurate component identification. Using only one of these tags may result in inaccuracies and incomplete component recognition.

Tag name: Table

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

Example: table:Table

Tag name: TableHeader

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

Example: Row:TableHeader

Tag name: TableData

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

Example: Container:TableData

TableData

TextArea​

Tag name: TextArea

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

Example: Review Input:TextArea

TextArea

timePicker​

Tag name: timePicker

Format: {Group or Frame name} + “:" + timePicker

Example: Input Fields:timePicker

timePicker

UnorderedList​

caution

UnorderedList tagging is not supported for mobile applications.

Tag name: Ul

Format: {Group or Frame name} + “:" + Ul

Example: Flavor:Ul

Ul

VerticalTab & VerticalPager​

caution

VerticalTab & VerticalPager tagging is not supported for mobile applications.

note

Use VerticalTab & VerticalPager tags together for accurate component identification. Using only one of these tags may result in inaccuracies and incomplete component recognition.

Tag name: VerticalTab & VerticalPager

Format:

{Group or Frame name} + “:" + VerticalTab

{Group or Frame name} + “:" + VerticalPager

Example:

Dashboard:VerticalTab

Data:VerticalPager

VerticalTab_VerticalPager

WebView​

caution

WebView tagging is not supported for web applications.

Tag name: WebView

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

Example: image 1:WebView

WebView