diff --git a/src/pages/designing/kits/adobe-xd.mdx b/src/pages/designing/kits/adobe-xd.mdx index 422b609c037..822e1e55bac 100755 --- a/src/pages/designing/kits/adobe-xd.mdx +++ b/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'] --- -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. diff --git a/src/pages/designing/kits/axure.mdx b/src/pages/designing/kits/axure.mdx index 654445846f8..6ba3a3f7d58 100755 --- a/src/pages/designing/kits/axure.mdx +++ b/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'] --- diff --git a/src/pages/designing/kits/figma.mdx b/src/pages/designing/kits/figma.mdx new file mode 100644 index 00000000000..eaaa5f84f13 --- /dev/null +++ b/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'] +--- + + + +Rapidly build beautiful and accessible experiences. The Carbon kit for Figma +contains all resources you need to get started. + + + + + +**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. + + + + + +Get the library +Start designing + + + +## 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). diff --git a/src/pages/designing/kits/sketch.mdx b/src/pages/designing/kits/sketch.mdx index 242ccc6dc65..9d8dd2fdf23 100755 --- a/src/pages/designing/kits/sketch.mdx +++ b/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'] --- -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.