From 7c5aee635331d9dcc0d0e35c552fd97876931c06 Mon Sep 17 00:00:00 2001 From: aagonzales Date: Thu, 18 Nov 2021 14:45:41 -0600 Subject: [PATCH 1/4] add(kit): Figma --- src/pages/designing/kits/adobe-xd.mdx | 6 +- src/pages/designing/kits/axure.mdx | 2 +- src/pages/designing/kits/figma.mdx | 97 +++++++++++++++++++++++++++ src/pages/designing/kits/sketch.mdx | 6 +- 4 files changed, 104 insertions(+), 7 deletions(-) create mode 100644 src/pages/designing/kits/figma.mdx diff --git a/src/pages/designing/kits/adobe-xd.mdx b/src/pages/designing/kits/adobe-xd.mdx index 422b609c037..fd6befef9ba 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..80c2f58537c 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..2c6924ef86d --- /dev/null +++ b/src/pages/designing/kits/figma.mdx @@ -0,0 +1,97 @@ +--- +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. + + + + + +Get the library +Start designing + + + +## Get the library + + + +**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. + + + +#### 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 joing 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 + +## Using the theme libraries + +### 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..80d597e383d 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. From 8bf07ce6b2b2670c953c6b99311465da5de6b6af Mon Sep 17 00:00:00 2001 From: Anna Gonzales Date: Thu, 18 Nov 2021 15:05:46 -0600 Subject: [PATCH 2/4] Update src/pages/designing/kits/axure.mdx Co-authored-by: Abbey Hart --- src/pages/designing/kits/axure.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/designing/kits/axure.mdx b/src/pages/designing/kits/axure.mdx index 80c2f58537c..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', 'Figma', Adobe XD', 'Axure'] +tabs: ['Sketch', 'Figma', 'Adobe XD', 'Axure'] --- From 0d64428790b944a48bdf678f1f2e9b5f751271d3 Mon Sep 17 00:00:00 2001 From: Anna Gonzales Date: Thu, 18 Nov 2021 15:06:13 -0600 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Abbey Hart --- src/pages/designing/kits/adobe-xd.mdx | 2 +- src/pages/designing/kits/figma.mdx | 4 ++-- src/pages/designing/kits/sketch.mdx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/designing/kits/adobe-xd.mdx b/src/pages/designing/kits/adobe-xd.mdx index fd6befef9ba..822e1e55bac 100755 --- a/src/pages/designing/kits/adobe-xd.mdx +++ b/src/pages/designing/kits/adobe-xd.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', 'Figma', Adobe XD', 'Axure'] +tabs: ['Sketch', 'Figma', 'Adobe XD', 'Axure'] --- diff --git a/src/pages/designing/kits/figma.mdx b/src/pages/designing/kits/figma.mdx index 2c6924ef86d..c37bacebbf8 100644 --- a/src/pages/designing/kits/figma.mdx +++ b/src/pages/designing/kits/figma.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', 'Figma', Adobe XD', 'Axure'] +tabs: ['Sketch', 'Figma', 'Adobe XD', 'Axure'] --- @@ -34,7 +34,7 @@ in early 2022 for external use. #### 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 joing any specific team to access the +in. You do not need to join or request to join any specific team to access the libraries. diff --git a/src/pages/designing/kits/sketch.mdx b/src/pages/designing/kits/sketch.mdx index 80d597e383d..9d8dd2fdf23 100755 --- a/src/pages/designing/kits/sketch.mdx +++ b/src/pages/designing/kits/sketch.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', 'Figma', Adobe XD', 'Axure'] +tabs: ['Sketch', 'Figma', 'Adobe XD', 'Axure'] --- From 6b369b62a29b423d989d17c8ca2ebfb8063b3a10 Mon Sep 17 00:00:00 2001 From: Anna Gonzales Date: Thu, 18 Nov 2021 16:22:44 -0600 Subject: [PATCH 4/4] Update figma.mdx --- src/pages/designing/kits/figma.mdx | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/pages/designing/kits/figma.mdx b/src/pages/designing/kits/figma.mdx index c37bacebbf8..eaaa5f84f13 100644 --- a/src/pages/designing/kits/figma.mdx +++ b/src/pages/designing/kits/figma.mdx @@ -13,15 +13,6 @@ contains all resources you need to get started. - - -Get the library -Start designing - - - -## Get the library - **Beta release:** Only the White theme is available in Beta. The other three @@ -31,14 +22,21 @@ 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 @@ -55,7 +53,7 @@ following libraries: - Icons and Pictograms - IBM Design Language - Text styles - IBM Design Language -## Using the theme libraries +## Start designing ### Components