diff --git a/guides/v2.1/ui_comp_guide/bk-ui_comps.md b/guides/v2.1/ui_comp_guide/bk-ui_comps.md
index 4dc4872f492..12d4483a438 100644
--- a/guides/v2.1/ui_comp_guide/bk-ui_comps.md
+++ b/guides/v2.1/ui_comp_guide/bk-ui_comps.md
@@ -103,6 +103,30 @@ A particular instance of a UI component is defined primarily by the following:
 3. [Backend/PHP modifiers]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_modifier_concept.html).
 4. Configuration inside the JavaScript classes.
 
+## UI component used in the frontend design area
+
+* Configured through layout XML.
+
+* The `jsLayout` argument is used to specify information.
+
+```xml
+<block name="block-name" template="Magento_Module::path_to_template.phtml">
+  <arguments>
+    <argument name="jsLayout" xsi:type="array">
+      <item name="components" xsi:type="array">
+        ...
+      </item>
+    </argument>
+  </arguments>
+</block>
+```
+
+## UI component used in the Adminhtml area
+
+* Configured through dedicated XML file (view/.../ui_component/[ui_component_name.xml])
+
+* Included in layout XML with uiComponent tag
+
 ## Things to remember when working with UI components
 
 **UI components have different settings**
diff --git a/guides/v2.2/ui_comp_guide/bk-ui_comps.md b/guides/v2.2/ui_comp_guide/bk-ui_comps.md
index d16f237d037..c063f5a89d2 100644
--- a/guides/v2.2/ui_comp_guide/bk-ui_comps.md
+++ b/guides/v2.2/ui_comp_guide/bk-ui_comps.md
@@ -103,6 +103,30 @@ A particular instance of a UI component is defined primarily by the following:
 3. [Backend/PHP modifiers]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_modifier_concept.html).
 4. Configuration inside the JavaScript classes.
 
+## UI component used in the frontend design area
+
+* Configured through layout XML.
+
+* The `jsLayout` argument is used to specify information.
+
+```xml
+<block name="block-name" template="Magento_Module::path_to_template.phtml">
+  <arguments>
+    <argument name="jsLayout" xsi:type="array">
+      <item name="components" xsi:type="array">
+        ...
+      </item>
+    </argument>
+  </arguments>
+</block>
+```
+
+## UI component used in the Adminhtml area
+
+* Configured through dedicated XML file (view/.../ui_component/[ui_component_name.xml])
+
+* Included in layout XML with uiComponent tag
+
 ## Things to remember when working with UI components
 
 **UI components have different settings**
diff --git a/guides/v2.3/ui_comp_guide/bk-ui_comps.md b/guides/v2.3/ui_comp_guide/bk-ui_comps.md
index 13fb6dbe356..e08cb5aff54 100644
--- a/guides/v2.3/ui_comp_guide/bk-ui_comps.md
+++ b/guides/v2.3/ui_comp_guide/bk-ui_comps.md
@@ -105,6 +105,30 @@ A particular instance of a UI component is defined primarily by the following:
 3. [Backend/PHP modifiers]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_modifier_concept.html).
 4. Configuration inside the JavaScript classes.
 
+## UI component used in the frontend design area
+
+* Configured through layout XML.
+
+* The `jsLayout` argument is used to specify information.
+
+```xml
+<block name="block-name" template="Magento_Module::path_to_template.phtml">
+  <arguments>
+    <argument name="jsLayout" xsi:type="array">
+      <item name="components" xsi:type="array">
+        ...
+      </item>
+    </argument>
+  </arguments>
+</block>
+```
+
+## UI component used in the Adminhtml area
+
+* Configured through dedicated XML file (view/.../ui_component/[ui_component_name.xml])
+
+* Included in layout XML with uiComponent tag
+
 ## Things to remember when working with UI components
 
 **UI components have different settings**