[35412] Grids: Remove Sketch and Adobe XD references

en/components/grid-advanced-filter.md

@@ -1,7 +1,7 @@
 ---
 title: Grid Advanced Filter - Grid Feature
 _description: The Grid Advanced Filter allows the definition of advanced filtering criteria spanning over multiple Grid columns.
-_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Adobe XD, Adobe XD to Angular, Export code from Adobe XD, Adobe XD to HTML, Adobe XD UI kits
+_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
 ---
 
 # Grid Advanced Filter
@@ -14,13 +14,13 @@ Use the Grid Advanced Filter to specify advanced filtering criteria spanning ove
 
 ## Advanced Filter Feature
 
-The Grid has three `Advanced Filtering` symbols under `Features`, one for each Size, that represent the overlay shown over the Grid. In Figma you can switch between the different sizes via the dedicated property in the properties panel. In Adobe XD you can switch between display densities through the `Component States`.
+The Grid has three `Advanced Filtering` components under `Grid Features`, one for each Size, that represent the overlay shown over the Grid. In Figma you can switch between the different sizes via the dedicated `Size` property in the properties panel.
 
 <img class="responsive-img" src="../images/grid_advanced_filter_sizes.png" srcset="../images/[email protected] 2x" />
 
 ## Filter Expression State
 
-The Advanced Filter feature comes with an **Empty Filter** Expression by default that can be changed to Applied Filter if necessary. In Sketch, this is achieved with `Symbol Overrides`, while in Adobe XD we are using the `Component States` paradigm to let you easily switch between states. Once this is set up, you may customize it further by specifying desired filtering criteria. In Figma, to change the default empty state you need to find the `Filter Expression State` component in the layers panel and switch the property of the component from `Empty Filter` to `Applied Filter`.
+The Advanced Filter feature comes with an **Empty Filter** Expression by default that can be changed to **Applied Filter** if necessary. In Figma, to change the default empty state you need to find the `Filter Expression State` component in the layers panel and switch the `Type` property of the component from `Empty Filter` to `Applied Filter`. Once this is set up, you may customize it further by specifying desired filtering criteria.
 
 <img class="responsive-img" src="../images/grid_advanced_filter_expression.png" srcset="../images/[email protected] 2x" />
 

en/components/grid-column-hiding.md

@@ -1,7 +1,7 @@
 ---
 title: Grid Column Hiding - Grid Feature
 _description: The Grid Column Hiding is a mechanism to hide and show columns of the Grid.
-_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Adobe XD, Adobe XD to Angular, Export code from Adobe XD, Adobe XD to HTML, Adobe XD UI kits
+_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
 ---
 
 # Grid Column Hiding
@@ -14,7 +14,7 @@ Use the Grid Column Hiding to hide certain columns from the Grid. The easiest wa
 
 ## Toolbar and Header Cell
 
-The Grid Column Hiding can be achieved by adding a Toolbar with a Column Hiding action that enables the feature for the whole grid. However, in order to mark certain columns as hidable, you need to configure the `Column Hiding` override on the Grid Header Cell for the respective column in Sketch and set it to Hidden. In Adobe XD, the `Column Hiding` layer uses the `Component States` paradigm to let you easily switch between states. The default value is **Visible**. This feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.
+The Grid Column Hiding can be achieved by adding a Toolbar with a Column Hiding action that enables the feature for the whole grid. The Column Hiding as a header cell feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.
 
 ## Additional Resources
 

en/components/grid-column-moving.md

@@ -1,7 +1,7 @@
 ---
 title: Grid Column Moving - Grid Feature
 _description: The Grid Column Moving is a mechanism to rearrange the columns of the Grid.
-_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Adobe XD, Adobe XD to Angular, Export code from Adobe XD, Adobe XD to HTML, Adobe XD UI kits
+_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
 ---
 
 # Grid Column Moving
@@ -14,11 +14,11 @@ Use the Grid Column Moving to indicate that the columns of the Grid are movable
 
 ## Header Cell
 
-In order to indicate that a column is movable, configure the `Column Moving` override of the Grid Header Cell for the column in Sketch by changing the default value from **Not Movable** to **Movable**. In Adobe XD, the `Column Moving` layer uses the `Component States` paradigm to let you easily switch between states. This is what marks the column as movable as far as code generation is concerned. This feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.
+The Grid Column Moving as a header cell feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.
 
 ## Column Moving Feature
 
-The Grid has a `Column Moving` symbol/component under `Features` that represents the ghost Header Cell shown for the dragged column. It comes with presets for numeric and text columns. Adding this symbol/component has only a visual effect on your design to make it more realistic, if you want to switch the Column Moving feature, configure the Header Cells accordingly.
+The Grid has a `Column Moving` component under `Features` that represents the ghost Header Cell shown for the dragged column. It comes with presets for numeric and text columns. Adding this component has only a visual effect on your design to make it look more realistic.
 
 ## Additional Resources
 

en/components/grid-column-pinning.md

@@ -1,7 +1,7 @@
 ---
 title: Grid Column Pinning - Grid Feature
 _description: The Grid Column Pinning is a mechanism to pin selected columns of a scrollable Grid.
-_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Adobe XD, Adobe XD to Angular, Export code from Adobe XD, Adobe XD to HTML, Adobe XD UI kits
+_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
 ---
 
 # Grid Column Pinning
@@ -14,19 +14,19 @@ Use the Grid Column Pinning as a mechanism to fix the first few columns of a scr
 
 ## Header Cell Feature
 
-To indicate a column as pinnable, use the `Column Pinning` override of the Grid Header Cell for that column in Sketch and change the default value from **Not Pinned** to **Pinned**. In Adobe XD, the `Column Pinning` layer uses the `Component States` paradigm to let you easily switch between states. This is what marks the column as pinnable as far as code generation is concerned. This feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.
+The Grid Column Pinning as a header cell feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.
 
 The Built-In Column Pinning can be used through the Grid's toolbar which by default contains a button (combined with a combo dropdown) that lets you configure the pin state of the columns for the whole grid.
 
 <img class="responsive-img" src="../images/grid_column_pinning_built_in.png" srcset="../images/[email protected] 2x" />
 
 ## Custom Column Pinning
 
-It is also possible to add a custom pinning action in the Grid Header Cell. In Sketch this can be achieved by using either the `Feature Left` or `Feature Right` overrides and setting it to `Icon Template`. This way an icon will appear to indicate the column is pinned and you can change its state from pin to unpin icon from Icon override. In Figma the method is identical, you need to go to the Header Cell layer, select either the `Feature Left` or `Feature Right` layer and change its `Type` property from `None` to `Icon Template`. Of course, you would probably also want to rearrange the column order so that the pinned ones come first when looking left to right.
+It is also possible to add a custom pinning action in the Grid Header Cell. In Figma you need to go to the Header Cell layer, select either the `Feature Left` or `Feature Right` and change its `Type` property from `None` to `Icon Template`. Of course, you would probably also want to rearrange the column order so that the pinned ones come first when looking left to right.
 
 ## Cell Right Border
 
-The right-most pinned column should have its `Right Border` override to indicate `Pinned Line` both for the Header and all Body Cells of the column. This is shown on the image below for all cells of the second column since "Status" is pinned.
+The right-most pinned column should have its `Right Border` set to `Pinned` both for the Header and all Body Cells of the column. This is shown on the image below for all cells of the second column since "Status" is pinned.
 
 <img class="responsive-img" src="../images/grid_column_pinning_demo.png" srcset="../images/[email protected] 2x" />
 

en/components/grid-column-resizing.md

@@ -1,7 +1,7 @@
 ---
 title: Grid Column Resizing - Grid Feature
 _description: The Grid Column Resizing is a mechanism to adjust the width of the columns of the Grid.
-_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Adobe XD, Adobe XD to Angular, Export code from Adobe XD, Adobe XD to HTML, Adobe XD UI kits
+_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
 ---
 
 # Grid Column Resizing
@@ -14,11 +14,11 @@ Use the Grid Column Resizing to indicate that the columns of the Grid are resiza
 
 ## Header Cell
 
-To indicate that a column is resizable, configure the `Column Resizing` override of the Grid Header Cell for the column in Sketch by changing the default value from **Not Resizable** to **Resizable**. In Adobe XD, the `Column Resizing` layer uses the `Component States` paradigm to let you easily switch between states. This is what marks the column as resizable as far as code generation is concerned. This feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.
+The Grid Column Resizing as a header cell feature has been deprecated in Figma and if you are using AppBuilder to generate your design, you should apply it directly there after the code generation.
 
 ## Column Resizing Indicator Feature
 
-The Grid has a `Column Resizing Indicator` symbol/component under `Features` that represents a highlight border of the whole column where resizing occurs. Adding this symbol/component has only a visual effect on your design to make it more realistic, if you want to switch the Column Resizing feature, configure the Header Cells accordingly.
+The Grid has a `Column Resizing Indicator` component in the `Base Components` that represents a highlight border of the whole column where resizing occurs. Adding this component has only a visual effect on your design to make it look more realistic.
 
 ## Additional Resources
 

en/components/grid-editing.md

@@ -1,7 +1,7 @@
 ---
 title: Grid Editing - Grid Feature
 _description: The Grid Editing allows the user to update the values of the records displayed in the Grid.
-_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Adobe XD, Adobe XD to Angular, Export code from Adobe XD, Adobe XD to HTML, Adobe XD UI kits
+_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
 ---
 
 # Grid Editing
@@ -10,19 +10,19 @@ Use Grid Editing to allow the user to update certain values either cell by cell
 
 ## Cell Editing
 
-The Grid Cell Editing happens cell by cell and is configured via the Body Cell that one wants to display in edit mode via the `Grid Feature` override in Sketch. In Figma, this is achieved by choosing `Focused` state from the properties panel on the nested Cell State component inside each body cell. In Adobe XD, the `Grid Feature` layer uses the `Component States` paradigm to provide a similar mechanism. Once you set the `Grid Feature` to `Cell Feature/Cell Editing`, you will have an editable Grid that respects this mode.
+The Grid Cell Editing happens cell by cell and is configured via the Body Cell that one wants to display in edit mode. In Figma, this is achieved by choosing `Focused` state from the properties panel on the nested `Cell State` component inside each body cell.
 
 <img class="responsive-img" src="../images/grid_cell_edit.png" srcset="../images/[email protected] 2x" />
 
 ## Row Editing
 
-The Grid Row Editing happens one row at a time and is configured via the Body Cells that belong to the edited row by setting their `Grid Feature` to `Cell Feature/Row Editing`. In Sketch, we introduce a second override `Editing State` allowing you to specify the cell in focus by setting it to `Focus Cell`, bear in mind that you should set all other cells on this row to `Rest Cell`. In Adobe XD both the above are available as `Component States` on the `Grid Feature` layer. In Figma, to indicate that a row is in editing state, you have to switch on the `Row Editing` boolean property of all cells in that row. For the cell, which is being edited, in addition to switching on the `Row Editing` boolean property, you also have to change the `State` variant property to Focused.
+The Grid Row Editing happens one row at a time and is configured via the Body Cells that belong to the edited row. In Figma, to indicate that a row is in editing state, you have to switch on the `Row Editing` boolean property of all cells in that row. For the cell, which is being edited, in addition to switching on the `Row Editing` boolean property, you also have to change the `State` variant property to `Focused`.
 
 <img class="responsive-img" src="../images/grid_row_edit.png" srcset="../images/[email protected] 2x" />
 
 ## Editing Row Banner
 
-The Grid has an `Editing Row Banner` symbol under `Features` that represents a summary area with the number of edits made on the row and a pair of actions for canceling and confirming the edits made on the row. Adding this symbol/component has only a visual effect on your design to make it more realistic, if you want to switch the Row Editing feature, configure the Cells of the row accordingly.
+The Grid has an `Editing Row Banner` component under `Grid Features` that represents a summary area with the number of edits made on the row and a pair of actions for canceling or confirming the edits made on the row. Adding this component has only a visual effect on your design to make it look more realistic, if you want to switch the Row Editing feature, configure the Cells of the row accordingly.
 
 ## Additional Resources