add(kit): Figma (#2645)

* add(kit): Figma

* Update src/pages/designing/kits/axure.mdx

Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>

* Apply suggestions from code review

Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>

* Update figma.mdx

Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>

src/pages/designing/kits/adobe-xd.mdx

@@ -3,13 +3,13 @@ title: Design kits
 description:
   Rapidly build beautiful and accessible experiences. The Carbon kit contains
   all resources you need to get started.
-tabs: ['Sketch', 'Axure', 'Adobe XD']
+tabs: ['Sketch', 'Figma', 'Adobe XD', 'Axure']
 ---
 
 <PageDescription>
 
-Rapidly build beautiful and accessible experiences. The Carbon kit contains all
-resources you need to get started.
+Rapidly build beautiful and accessible experiences. The Carbon kit for Adobe XD
+contains all resources you need to get started.
 
 </PageDescription>
 

src/pages/designing/kits/axure.mdx

@@ -3,7 +3,7 @@ title: Design kits
 description:
   Rapidly build beautiful and accessible experiences. The Carbon kit contains
   all resources you need to get started.
-tabs: ['Sketch', 'Axure', 'Adobe XD']
+tabs: ['Sketch', 'Figma', 'Adobe XD', 'Axure']
 ---
 
 <PageDescription>

src/pages/designing/kits/figma.mdx

@@ -0,0 +1,95 @@
+---
+title: Design kits
+description:
+  Rapidly build beautiful and accessible experiences. The Carbon kit contains
+  all resources you need to get started.
+tabs: ['Sketch', 'Figma', 'Adobe XD', 'Axure']
+---
+
+<PageDescription>
+
+Rapidly build beautiful and accessible experiences. The Carbon kit for Figma
+contains all resources you need to get started.
+
+</PageDescription>
+
+<InlineNotification>
+
+**Beta release:** Only the White theme is available in Beta. The other three
+themes will be available by the end of year. The beta is also only available to
+IBMers at the moment however we are hoping to publish it the the Figma community
+in early 2022 for external use.
+
+</InlineNotification>
+
+<AnchorLinks>
+
+<AnchorLink>Get the library</AnchorLink>
+<AnchorLink>Start designing</AnchorLink>
+
+</AnchorLinks>
+
+## Get the library
+
+#### 1. Sign into Figma using IBM SSO
+
+You should be added to the IBM Figma organization automatically once you sign
+in. You do not need to join or request to join any specific team to access the
+libraries.
+
+#### 2. Turn on the theme libraries
+
+Inside of a design file, navigate to the **Asset** panel on the left and click
+on the **Team library** icon in the upper right of the panel. Find the team
+called `[NEW] IBM Design Systems` and switch the toggle beside
+`White theme - Carbon Design System` to on.
+
+#### 3. Turn on the other IBM Design Language libraries 
+
+Under the same team `[NEW] IBM Design Systems` you can also turn on the
+following libraries:
+
+- Color styles - IBM Design Language
+- Icons and Pictograms - IBM Design Language
+- Text styles - IBM Design Language
+
+## Start designing
+
+### Components
+
+Included in the library are all 32 of the Carbon components and their variants.
+To insert a component, go to the **Asset** panel and find the component you
+would like to use. Drag it from the asset panel onto the canvas.
+
+View the name of the component in the right sidebar. If the component has
+variants, you'll see fields underneath the component name to configure the
+properties and values of that component set.
+
+For more help on how to use Figma components, see the
+[Figma docs](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants#Use_variants).
+
+### Grids and Screens
+
+Included in the library is an asset called `Screens`. These screens provide a
+canvas that can be configured at the five 2x grid breakpoints. It also includes
+the 16 column grid both with and without a left panel grid influencer.
+
+### Color styles
+
+The Carbon color tokens are surfaced in Figma using styles. To apply a color
+style, select an object then in the **Styles** menu you can select a style from
+the Carbon theme libraries or the IBM Design Language libraries. In addition to
+applying color styles to objects, you can also apply Color Styles to Text
+layers.
+
+To learn more about applying color styles in Figma, see the
+[Figma docs](https://help.figma.com/hc/en-us/articles/360040316193).
+
+### Text styles
+
+To apply a text style, select a text layer then in the properties panel select
+the text style from the `Text styles - IBM Design Language` library. Use color
+styles to change the color of a text style.
+
+To learn more about applying text styles in Figma, see the
+[Figma docs](https://help.figma.com/hc/en-us/articles/360039957034-Create-and-Apply-Text-Styles#apply).

src/pages/designing/kits/sketch.mdx

@@ -3,13 +3,13 @@ title: Design kits
 description:
   Rapidly build beautiful and accessible experiences. The Carbon kit contains
   all resources you need to get started.
-tabs: ['Sketch', 'Axure', 'Adobe XD']
+tabs: ['Sketch', 'Figma', 'Adobe XD', 'Axure']
 ---
 
 <PageDescription>
 
-Rapidly build beautiful and accessible experiences. The Carbon kit contains all
-resources you need to get started.
+Rapidly build beautiful and accessible experiences. The Carbon kit Sketch
+contains all resources you need to get started.
 
 </PageDescription>