Component Guides published (#4997)

Co-authored-by: Amrita Desmet <[email protected]>
Co-authored-by: bpiven <[email protected]>

Author: 3 people

site/docs/getting-started/designing/figma-component-guides.mdx

@@ -0,0 +1,95 @@
+---
+title: Salt DS Figma Component Guides
+layout: DetailTechnical
+sidebar:
+  label: Figma Component Guides
+---
+
+Salt DS Figma Component Guides is a Figma library providing guidance about how to configure and customize Salt DS components.
+
+## What you’ll need
+
+- Have an active Figma account.
+
+## How to use
+
+### For JPMC employees
+
+To start using the Guides library, enable it directly from the 'Assets' panel within your Figma file.
+
+<Image
+  src="/img/design-getting-started/component-guides/asset-panel.png"
+  srcDark="/img/design-getting-started/component-guides/asset-panel-dark.png"
+  alt="Adding the library in Figma asset panel"
+/>
+
+- Find the library (you can search “Salt DS Guides”).
+- Add it to your file by clicking 'Add to file'.
+
+#### Finding the right Guide in the asset panel
+
+<Image
+  src="/img/design-getting-started/component-guides/finding-guides-in-asset-panel.png"
+  srcDark="/img/design-getting-started/component-guides/finding-guides-in-asset-panel-dark.png"
+  alt="Finding the right Guide in the asset panel"
+/>
+
+- Search or browse the list of Component Guides to find the one you want (e.g., Accordion in the screenshots above and below).
+
+<Image
+  src="/img/design-getting-started/component-guides/insert.png"
+  srcDark="/img/design-getting-started/component-guides/insert-dark.png"
+  alt="Insert the instance or drop it into your design file"
+/>
+
+- Insert the instance or drop it into your design file. Then you can see the details of the Guide.
+
+<Callout title="Any feedback?">
+  You can add comments with questions or suggestions to the Guides directly in
+  the library.
+</Callout>
+
+### For community users
+
+Access the library on [Salt Figma community page](https://www.figma.com/community/file/1184556994541622424). (To explore Salt DS libraries, search for the @jpmorgan_salt handle in the Figma Community.)
+
+<Image
+  src="/img/design-getting-started/component-guides/community-page.png"
+  srcDark="/img/design-getting-started/component-guides/community-page-dark.png"
+  alt="Salt Figma community page - Component guides"
+/>
+
+- Click 'Open in Figma'
+
+<Image
+  src="/img/design-getting-started/component-guides/duplicated-guides.png"
+  srcDark="/img/design-getting-started/component-guides/duplicated-guides-dark.png"
+  alt="Salt Figma component guides duplicated to your draft"
+/>
+
+- Then you’ll see the file has been duplicated as a copy in your Drafts, which you can then check to find the guides in the file.
+
+<Callout title="About the duplicated file">
+
+Please note that this is a duplicated version, which won’t be updated after the date of duplication. The latest version will be on the Community page.
+
+</Callout>
+
+## Further assistance
+
+If you encounter any issues or need additional help despite following the guide, please don’t hesitate to reach out. Our support team is here to assist you.
+
+<QuickLinks
+  columns={{ xs: 1, md: 2 }}
+  links={[
+    {
+      title: "Support (Internal)",
+      description: "For JPMC employees only",
+      href: "https://go/salt-ds-internal/support",
+    },
+    {
+      title: "Support (External)",
+      href: "/salt/support-and-contributions",
+    },
+  ]}
+/>

site/docs/getting-started/designing/index.mdx

@@ -1,8 +1,9 @@
 ---
-title: Designing with Salt
+title: Designing with Salt Figma Libraries
 layout: DetailTechnical
 sidebar:
-  label: Designing
+  label: Figma Libraries
+  groupLabel: Designing
 ---
 
 Salt provides a comprehensive set of components and styles, which include themes, typography, color palettes, iconography and more. Use the components as they are, out of the box, or adapt them to suit the needs of your business or application.