docs: adds a page about accessing the Figma libraries (#1989)

packages/docs/pages/guides/_meta.json

@@ -1,10 +1,20 @@
 {
+  "-- Designing": {
+    "type": "separator",
+    "title": "Designing"
+  },
+  "figma-libraries": "Figma Libraries",
+  "design-migration": "Admin UI Migration",
+  "-- Developing": {
+    "type": "separator",
+    "title": "Developing"
+  },
   "getting-started": "Getting Started",
   "state-management": "State Management",
   "styling": "Styling",
   "composition": "Composition",
   "forms": "Forms",
-  "migration": "Admin UI Migration",
+  "code-migration": "Admin UI Migration",
   "-- Contributing": {
     "type": "separator",
     "title": "Contributing"

packages/docs/pages/guides/figma-libraries.mdx

@@ -0,0 +1,83 @@
+# Figma Libraries
+
+The Shoreline Figma libraries includes all the resources designers need to quickly assemble a prototype and create coherent experiences for merchants. For more information on how to apply the styles and components in these libraries, please refer to [tokens](https://shoreline.vtex.com/foundations), [icons](https://shoreline.vtex.com/foundations/icons), and [components](https://shoreline.vtex.com/components) documentation.
+
+import { Callout } from 'nextra/components'
+
+<Callout type="info" emoji="ℹ️">
+  You can help evolve the Shoreline libraries by fixing bugs or proposing new features. Learn how to get involved in the [contribution process](https://shoreline.vtex.com/guides/contributing-introduction).
+</Callout>
+
+## VTEX users
+
+If you are a VTEX designer, you already have access to the organization in Figma. If you don't have access to Figma, use the IT workflow to request it. Once in Figma, the Shoreline team is open and anyone has viewer access to it. Consider that even VTEX designers don't have edit access to the libraries.
+
+Use the libraries below in your files.
+
+import { Cards } from 'nextra/components'
+import { IconLinkSimple } from '@vtex/shoreline'
+
+<Cards>
+  <Cards.Card
+    title="Components"
+    href="https://www.figma.com/design/PWGSQ26U55u8E34JWn9ZYE/Shoreline-Components?m=auto"
+    icon={<IconLinkSimple />}
+    arrow
+  />
+  <Cards.Card
+    title="Tokens"
+    href="https://www.figma.com/design/o8pBRBvdLkUVCEo8rwduHi/Shoreline-Tokens?m=auto&t=vdsMoyxPbSnBLwIY-6"
+    icon={<IconLinkSimple />}
+    arrow
+  />
+  <Cards.Card
+    title="Patterns"
+    href="https://www.figma.com/design/Di6uKmexGGkJumRUMGowiu/Shoreline-Patterns?m=auto&t=vdsMoyxPbSnBLwIY-6"
+    icon={<IconLinkSimple />}
+    arrow
+  />
+  <Cards.Card
+    title="Icons"
+    href="https://www.figma.com/design/o3s49SJn2lIfmXBkHd9aXi/Shoreline-Icons?m=auto&t=vdsMoyxPbSnBLwIY-6"
+    icon={<IconLinkSimple />}
+    arrow
+  />
+  <Cards.Card
+    title="Utilities"
+    href="https://www.figma.com/design/mODZvmhswLgPdFXtyCY3Rh/Shoreline-Utilities?m=auto"
+    icon={<IconLinkSimple />}
+    arrow
+  />
+</Cards>
+
+Learn how to add the libraries to your file:
+
+<br/>
+<video src="/assets/libraries-vtexusers.mp4" width="1512" height="945" controls></video>
+
+## External users
+
+If you are part of an agency working with a VTEX product team to implement a feature, you can access the Shoreline libraries published in the Figma Community.
+
+<Cards>
+  <Cards.Card
+    title="Components"
+    href="https://www.figma.com/community/file/1423299030561421036/shoreline-components"
+    icon={<IconLinkSimple />}
+    arrow
+  />
+  <Cards.Card
+    title="Tokens"
+    href="https://www.figma.com/community/file/1424030755108071608/shoreline-tokens"
+    icon={<IconLinkSimple />}
+    arrow
+  />
+</Cards>
+
+Learn how to get the libraries from Figma Community:
+
+<br/>
+<video src="/assets/libraries-externalusers.mp4" width="1512" height="945" controls></video>
+
+After publishing the libraries, follow the guidelines from the video in the previous section to start using them.
+