diff --git a/docs/content.md b/docs/content.md
index 5a5dda558ac835179f6e2ff2f43b8be6daaa7461..200b1f611d0cf4cf6251f1dc8ed0c010c4516255 100644
--- a/docs/content.md
+++ b/docs/content.md
@@ -86,5 +86,3 @@ References
* https://material.io/design/
* https://designsystem.gov.au/components/core/
* https://www.microsoft.com/design/fluent/
-
-
diff --git a/pages/design/tools/figma.mdx b/pages/design/tools/figma.mdx
index 6bc0c571047239b5a3e07afada028d5629700689..9f069e22a0aef790206d1c10774c5518b2d58a43 100644
--- a/pages/design/tools/figma.mdx
+++ b/pages/design/tools/figma.mdx
@@ -1,6 +1,105 @@
+import {Flex, Box, Text, BorderBox} from '@primer/components'
+
# Figma
+Welcome to the Figma page of the Primer design system! Figma is used at GitHub as a single source of design, collaboration, and exploration.
+
+<Text textAlign="center">
+ <Flex alignItems='center' flexDirection='row' mt='4' mb='4'>
+ <Box width={12/12}>
+ <BorderBox overflow='hidden'>
+ <img src="https://user-images.githubusercontent.com/6846673/61899371-26dda000-aed0-11e9-9f97-c1e2f2e8ebbf.png"/>
+ </BorderBox>
+ </Box>
+ </Flex>
+</Text>
+
+This page can help you become more familiar with:
+* [Team Library](#Library)
+* [Styles](#Styles)
+* [Components](#Components)
+* [Prototyping and Wireframing](#Prototyping)
+* [Collaboration](#Collaboration)
+* [Resources](#Resources)
+
+## <a name="Library"></a>Team Library
+GitHub has a Figma team that contains all of our design assets. In Figma, [styles](#Styles) and [components](#Components) can be reused across multiple files and projects with the [team library](https://help.figma.com/article/29-team-library) feature. With team libraries, you can enable and disable components styles within certain files. This makes it easy for designers to easily access Primer components from anywhere.
+
+<Text textAlign="center">
+ <Flex alignItems='center' flexDirection='row' mt='4' mb='4'>
+ <Box width={12/12}>
+ <BorderBox overflow='hidden'>
+ <img width="100%" src="https://user-images.githubusercontent.com/6846673/61732332-3f17b880-ad32-11e9-8e18-bfbfc0267d81.gif"/>
+ </BorderBox>
+ <Text textAlign='center' fontSize='1' color='gray.6'>Enable and disable libraries of components from across your team.</Text>
+ </Box>
+ </Flex>
+</Text>
+
+## <a name="Styles"></a>Styles
+Primer uses [Figma styles](https://help.figma.com/category/221-styles) to maintain a consistent look and feel across all of our UI. We have provided styles for color variables as well as our typography. Styles within Figma also map to our styles in [Primer CSS](https://primer.style/css), so we can make sure that our designs are consistent with that we code.
+
+
+<Text textAlign="center">
+ <Flex alignItems='center' flexDirection='row' mt='4' mb='4'>
+ <Box width={6/12} mr='4'>
+ <BorderBox overflow='hidden'>
+ <img src="https://user-images.githubusercontent.com/6846673/61830580-5af98800-ae20-11e9-8a25-c68d566de2f0.gif"/>
+ </BorderBox>
+ <Text textAlign='center' fontSize='1' color='gray.6'>Each color has 10 variations, creating a spectrum of light and dark shades.</Text>
+ </Box>
+ <Box width={6/12} mr='4'>
+ <BorderBox overflow='hidden'>
+ <img src="https://user-images.githubusercontent.com/6846673/61730796-01fdf700-ad2f-11e9-9208-065eabc8e806.gif"/>
+ </BorderBox>
+ <Text textAlign='center' fontSize='1' color='gray.6'>The type system includes bold, uppercase, and small variations for body and header text.</Text>
+ </Box>
+ </Flex>
+</Text>
+
+Check out our [color guidelines](https://primer.style/design/foundation/color) and [typography guidelines](https://primer.style/design/foundation/typography) for more details.
+
+## <a name="Components"></a>Components
+Primer uses components for all of our common UI patterns. For components with different states, we use layers or groups within each component to quickly switch between states. For a full list of Primer Components, please see the [resources](#Resources) below.
-## Components
+<Text textAlign="center">
+ <Flex alignItems='center' flexDirection='row' mt='4' mb='4'>
+ <Box width={6/12} mr='4'>
+ <BorderBox overflow='hidden'>
+ <img src="https://user-images.githubusercontent.com/6846673/61830583-5af98800-ae20-11e9-8aa9-459fc2d51133.gif"/>
+ </BorderBox>
+ <Text textAlign='center' fontSize='1' color='gray.6'>Search for components in the assets menu and drag them onto the canvas.</Text>
+ </Box>
+ <Box width={6/12} mr='4'>
+ <BorderBox overflow='hidden'>
+ <img src="https://user-images.githubusercontent.com/6846673/61830581-5af98800-ae20-11e9-93ab-9c33ff0dd2be.gif"/>
+ </BorderBox>
+ <Text textAlign='center' fontSize='1' color='gray.6'>Some components have multiple states, which you can toggle in the layer list.</Text>
+ </Box>
+ </Flex>
+</Text>
+
+
+## <a name="Prototyping"></a>Prototyping and Wireframing
+We’ve developed a prototyping toolkit that includes a set of page templates and components to help you get started with exploration and prototyping in Figma. These pages have flexible elements that can be hidden or shown to work for different fidelities. While Figma contains lots of [prototyping features](https://help.figma.com/category/87-prototyping), most designers at GitHub use code to prototype in higher fidelities.
+
+
+<Text textAlign="center">
+ <Flex alignItems='center' flexDirection='row' mt='4' mb='4'>
+ <Box width={12/12}>
+ <BorderBox overflow='hidden'>
+ <img src="https://user-images.githubusercontent.com/6846673/61732575-bfd6b480-ad32-11e9-8e77-5a8c28b9bd88.png"/>
+ </BorderBox>
+ </Box>
+ </Flex>
+</Text>
+
+Duplicate this [Figma file](https://www.figma.com/file/ex9hnSDJTr8fG24cTMyRJzHD/prototyping-pages?node-id=0%3A1) to your own project to use these templates for prototyping or exploration.
+
+## <a name="Collaboration"></a>Collaboration
+All Hubbers have read-only access to all GitHub design files and edit access to files within their team. You can leave [Figma comments](https://help.figma.com/article/44-comments) to provide feedback and use [issues](https://help.github.com/en/articles/about-issues) to document design exploration, track decisions and progress. The design team values [incremental correctness](https://github.com/github/product-design/blob/master/principles-and-practices.md#incremental-correctness), so share early and share often.
+
+## <a name="Resources"></a>Resources
+List of current Primer Components:
- [Alerts](https://www.figma.com/file/GTgkWXgIN2DzTY9nVLKkpzxe/primer-alerts)
- [Avatars](https://www.figma.com/file/NRdQUqZUgJJ4grrIe0vfktEB/primer-avatars)
- [Blankslate](https://www.figma.com/file/XscebjmfHCvUkUc3J9G4yEo5/primer-blankslate)
@@ -23,13 +122,9 @@
- [Subhead](https://www.figma.com/file/0qti8UWx1SR9M7dyXlYzHm6Z/primer-subhead)
- [Tooltips](https://www.figma.com/file/EmivQqEsAexN5eEclS78JTVH/primer-tooltips)
-
-## Utilities
-- [Colors](https://www.figma.com/file/IbJhpJJZRwGg4KlBE6TxhaQn/primer-colors)
-- [Cursors](https://www.figma.com/file/MbUdjMu8XZWBepwihiDFaFtT/Cursors)
-- [GitHub Templates](https://www.figma.com/file/VCkfDFhhJQz32TQSxGyLntrt/primer-buttons)
-- [Typography](https://www.figma.com/file/gHUvCi7ypiw9d2VzgqfhchNH/primer-typography)
-
-
+Check out these places to learn more about Figma and GitHub:
+- [Figma Design Documentation](https://help.figma.com/)
+- [GitHub takes its collaborative culture to a new level](https://www.figma.com/blog/github-case-study/)
+- [GitHub Primer Design](https://primer.style/design)
export const meta = {displayName: 'Figma', nav: 'side'}