Skip to content

Commit

Permalink
docs: figma v11 release content updates (#3176)
Browse files Browse the repository at this point in the history 
* updated design and migration .mdx files

* update content

* update images

* update figma .mdx

* update figme content

* update migration content

* fix typo

* remove break in figma.mdx

* format fix

* update images

* update component count

* typo update

* add figma migration section

* edit content

* update migration design guide

* add migration steps

* update migration docs

* update figma design kit page with links

* chore(format):  run yarn format

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
  • Loading branch information
@laurenmrice @kodiakhq @tw15egan
3 people authored Sep 30, 2022
1 parent 8b0bafa commit 30d826f
Show file tree
Hide file tree
Showing 6 changed files with 119 additions and 113 deletions.
16 changes: 8 additions & 8 deletions src/pages/designing/get-started.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,14 @@ as ensuring consistency between design assets and code.
Head on over to the [Design kits](/designing/kits/sketch) section and follow the
install instructions to get set up.

| Design tool | Carbon version | Status | Maintainer |
| ------------ | ----------------------------------------------------------------- | ------------------------------ | ------------------- |
| **Figma** | [v11](https://carbondesignsystem.com/designing/kits/figma) | Beta available – _IBMers only_ | Carbon Figma Guild |
| | [v10](https://v10.carbondesignsystem.com/designing/kits/figma) | Available – _limited supportt_ | Carbon Figma Guild |
| **Sketch** | [v11](https://carbondesignsystem.com/designing/kits/sketch) | Available | Carbon Sketch Guild |
| | [v10](https://v10.carbondesignsystem.com/designing/kits/sketch) | Available – _limited support_ | Carbon core team |
| **Adobe XD** | [v11](https://carbondesignsystem.com/designing/kits/adobe-xd) | Available | Carbon core team |
| | [v10](https://v10.carbondesignsystem.com/designing/kits/adobe-xd) | Available – _limited support_ | Carbon core team |
| Design tool | Carbon version | Status | Maintainer |
| ------------ | ----------------------------------------------------------------- | ----------------------------- | ------------------- |
| **Figma** | [v11](https://carbondesignsystem.com/designing/kits/figma) | Available | Carbon Figma Guild |
| | [v10](https://v10.carbondesignsystem.com/designing/kits/figma) | Available – _limited support_ | Carbon Figma Guild |
| **Sketch** | [v11](https://carbondesignsystem.com/designing/kits/sketch) | Available | Carbon Sketch Guild |
| | [v10](https://v10.carbondesignsystem.com/designing/kits/sketch) | Available – _limited support_ | Carbon core team |
| **Adobe XD** | [v11](https://carbondesignsystem.com/designing/kits/adobe-xd) | Available | Carbon core team |
| | [v10](https://v10.carbondesignsystem.com/designing/kits/adobe-xd) | Available – _limited support_ | Carbon core team |

### Additional design assets

Expand Down
150 changes: 65 additions & 85 deletions src/pages/designing/kits/figma.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,10 @@ contains all resources you need to get started.

<InlineNotification>

**V11 (Beta) themes now available!** All themes for the v11 libraries are now
available to IBMers internal users. The v11 libraries are marked as BETA as we
continue to optimize the libraries. In the coming weeks, some components may
receive breaking changes due to these enhancements. We will release the v11
libraries externally after stabilizing changes and enhancements (expected
release by the end of Q3 2022).
**v11 themes are now available!** All themes for the v11 libraries are available
to IBM's internal users and the public community. We have leveraged Figmas
latest features in this release which may result in breaking changes to some of
our components.

</InlineNotification>

Expand All @@ -47,11 +45,10 @@ libraries.

There are four Carbon v11 theme libraries, two light (White and Gray 10) and two
dark (Gray 90 and Gray 100). Each theme lives in its own Figma library. You can
turn on as many libraries as you’d like.

If you are using Carbon v11, the `(v11 BETA) White Theme` library and
`v11 Text Styles` library are now available. The other v11 theme libraries will
be available in Figma at the end of July 2022.
turn on as many libraries as you’d like. The v11 theme libraries are now
available to IBM’s internal users and the public community. We have leveraged
Figmas latest features in this release which may result in breaking changes to
some of our components.

Inside of a design file, navigate to the **Main menu** panel in the top left of
the toolbar (A). Open the menu and select **Libraries** from the list (B).
Expand All @@ -65,8 +62,8 @@ the toolbar (A). Open the menu and select **Libraries** from the list (B).
</Row>

Then in the Libraries modal that appears, find the team called
`[NEW] IBM Design Systems` (C) and switch the toggle beside a themed library,
for example the `(v11 BETA) White theme - Carbon Design System` to on (D).
`IBM Design Systems` (C) and switch the toggle beside a themed library, for
example the `(v11) White Theme - Carbon Design System` to on (D).

<Row>
<Column colLg={8}>
Expand All @@ -78,37 +75,7 @@ for example the `(v11 BETA) White theme - Carbon Design System` to on (D).

<br />

To preview the Carbon v11 Beta White theme library and v11 Text styles library,
visit these view-only links.

<Row className="resource-card-group">
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
subTitle="v11 Beta White theme"
href="https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11-BETA)-White-Theme---Carbon-Design-System?node-id=58%3A2763"
actionIcon="launch">

![Figma icon](/images/figma.svg)

</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
subTitle="v11 Text styles"
href="https://www.figma.com/file/rK06GY6bvEfokuzrFGdtWB/(v11)-Text-Styles---IBM-Design-Language?node-id=129%3A2"
actionIcon="launch">

![Figma icon](/images/figma.svg)

</ResourceCard>
</Column>
</Row>

<br />

To preview the four Carbon v11 theme libraries, visit the following view-only
To preview the four v11 Carbon theme libraries, visit the following view-only
links. To access the v10 Figma libraries, see
[v10 Design Kits](https://v10.carbondesignsystem.com/designing/kits/figma).

Expand All @@ -117,7 +84,7 @@ links. To access the v10 Figma libraries, see
<ResourceCard
onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
subTitle="v11 White theme"
href="https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11-BETA)-White-Theme---Carbon-Design-System"
href="https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-White-Theme---Carbon-Design-System"
actionIcon="launch">

![Figma icon](/images/figma.svg)
Expand All @@ -128,7 +95,7 @@ links. To access the v10 Figma libraries, see
<ResourceCard
onClick={() => fathom.trackGoal('T7D1HJ3L', 0)}
subTitle="v11 Gray 10 theme"
href="https://www.figma.com/file/0sd447WTcazDI6Dq9tjXOe/(v11-BETA)-Gray-10-Theme---Carbon-Design-System"
href="https://www.figma.com/file/0sd447WTcazDI6Dq9tjXOe/(v11)-Gray-10-Theme---Carbon-Design-System"
actionIcon="launch">

![Figma icon](/images/figma.svg)
Expand All @@ -139,7 +106,7 @@ links. To access the v10 Figma libraries, see
<ResourceCard
onClick={() => fathom.trackGoal('LYFJTPDE', 0)}
subTitle="v11 Gray 90 theme"
href="https://www.figma.com/file/fH8rkv1VUTw5pvFDvO1kPO/(v11-BETA)-Gray-90-Theme---Carbon-Design-System"
href="https://www.figma.com/file/fH8rkv1VUTw5pvFDvO1kPO/(v11)-Gray-90-Theme---Carbon-Design-System"
actionIcon="launch">

![Figma icon](/images/figma.svg)
Expand All @@ -150,7 +117,7 @@ links. To access the v10 Figma libraries, see
<ResourceCard
onClick={() => fathom.trackGoal('3XH0SIBJ', 0)}
subTitle="v11 Gray 100 theme"
href="https://www.figma.com/file/XhRIHF6qGiJQaJ5eOSSBRm/(v11-BETA)-Gray-100-Theme---Carbon-Design-System"
href="https://www.figma.com/file/XhRIHF6qGiJQaJ5eOSSBRm/(v11)-Gray-100-Theme---Carbon-Design-System"
actionIcon="launch">

![Figma icon](/images/figma.svg)
Expand All @@ -161,12 +128,13 @@ links. To access the v10 Figma libraries, see

<br />

#### 3. Turn on the other IBM Design Language libraries 
#### 3. Turn on IBM Design Language libraries 

Under the same team `[NEW] IBM Design Systems` you can also turn on the
following libraries or visit these view-only links.
Under the same team `IBM Design Systems` you can also turn on the following IBM
Design Language libraries or visit these view-only links.

- Color styles - IBM Design Language
- Hover color styles - IBM Design Language
- Text styles - IBM Design Language
- Icons - IBM Design Language
- Pictograms - IBM Design Language
Expand All @@ -179,6 +147,17 @@ following libraries or visit these view-only links.
href="https://www.figma.com/file/Gvwx2RnAZzDKTjVuC5xOlO/Color-Styles---IBM-Design-Language?node-id=129%3A2"
actionIcon="launch">

![Figma icon](/images/figma.svg)

</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
subTitle="v11 Hover color styles"
href="https://www.figma.com/file/hWnMvyDNQ5r4pyACeKNf39/(v11)-Hover-Color-Styles---IBM-Design-Language"
actionIcon="launch">

![Figma icon](/images/figma.svg)

</ResourceCard>
Expand Down Expand Up @@ -220,27 +199,18 @@ following libraries or visit these view-only links.

## External users

<InlineNotification>

**V10 only:** At the moment, external non-IBM users only have access to the v10
libraries. The v11 libraries will be published once they are stable and include
all optimizations and enhancements. Approximate delievery date is end of
Q3 2022.

</InlineNotification>

### Get the libraries

#### 1. Sign into Figma

#### 2. Get the theme libraries

There are four Carbon v10 theme libraries, two light (White and Gray 10) and two
There are four Carbon v11 theme libraries, two light (White and Gray 10) and two
dark (Gray 90 and Gray 100). Each theme lives in its own Figma library. You can
turn on as many libraries as you’d like.

If you are using Carbon v11, the v11 theme libraries will be available in Figma
at the end of July 2022 to the public community.
turn on as many libraries as you’d like. The v11 theme libraries are now
available to IBM’s internal users and the public community. We have leveraged
Figmas latest features in this release which may result in breaking changes to
some of our components.

Navigate to the **Community** tab in the left side panel (A).

Expand Down Expand Up @@ -277,16 +247,14 @@ See the Carbon Design System libraries that are available.

#### 4. Publish as a library to your workspace

<br />

To preview the four Carbon v10 theme libraries, visit these view-only links.
To preview the four Carbon v11 theme libraries, visit these view-only links.

<Row className="resource-card-group">
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
subTitle="v10 White theme"
href="https://www.figma.com/community/file/1127112416656936951"
subTitle="v11 White theme"
href="https://www.figma.com/community/file/1157761560874207208"
actionIcon="launch">

![Figma icon](/images/figma.svg)
Expand All @@ -296,8 +264,8 @@ To preview the four Carbon v10 theme libraries, visit these view-only links.
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('T7D1HJ3L', 0)}
subTitle="v10 Gray 10 theme"
href="https://www.figma.com/community/file/1127112675346599928"
subTitle="v11 Gray 10 theme"
href="https://www.figma.com/community/file/1157763433354586090"
actionIcon="launch">

![Figma icon](/images/figma.svg)
Expand All @@ -307,8 +275,8 @@ To preview the four Carbon v10 theme libraries, visit these view-only links.
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('LYFJTPDE', 0)}
subTitle="v10 Gray 90 theme"
href="https://www.figma.com/community/file/1127116371239304194"
subTitle="v11 Gray 90 theme"
href="https://www.figma.com/community/file/1157763622355802091"
actionIcon="launch">

![Figma icon](/images/figma.svg)
Expand All @@ -318,8 +286,8 @@ To preview the four Carbon v10 theme libraries, visit these view-only links.
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('3XH0SIBJ', 0)}
subTitle="v10 Gray 100 theme"
href="https://www.figma.com/community/file/1127118528177925123"
subTitle="v11 Gray 100 theme"
href="https://www.figma.com/community/file/1157763881353486317"
actionIcon="launch">

![Figma icon](/images/figma.svg)
Expand All @@ -331,7 +299,7 @@ To preview the four Carbon v10 theme libraries, visit these view-only links.
#### 3. Bring in additional colors and icons

Use these additional IBM Design Language libraries to have access to color
styles, text styles, icons, and pictograms.
styles, hover color styles, text styles, icons, and pictograms.

<Row className="resource-card-group">
<Column colMd={4} colLg={4} noGutterSm>
Expand All @@ -341,15 +309,26 @@ styles, text styles, icons, and pictograms.
href="https://www.figma.com/community/file/1089055766693968230"
actionIcon="launch">

![Figma icon](/images/figma.svg)

</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
subTitle="v11 Hover color styles"
href="https://www.figma.com/community/file/1157767268366811122"
actionIcon="launch">

![Figma icon](/images/figma.svg)

</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('T7D1HJ3L', 0)}
subTitle="v10 Text styles"
href="https://www.figma.com/community/file/1089053953312384353"
subTitle="v11 Text styles"
href="https://www.figma.com/community/file/1127113732861637625"
actionIcon="launch">

![Figma icon](/images/figma.svg)
Expand Down Expand Up @@ -384,7 +363,7 @@ styles, text styles, icons, and pictograms.

### Components

Included in the library are all 32 of the Carbon components and their variants.
Included in the library are all 40 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.

Expand All @@ -407,17 +386,18 @@ 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.
layers. In addition to the Color style library, we have created a Hover color
styles library to incorporate specific hover colors per color grade.

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 either the v10 or v11 Text styles - IBM Design Language
library depending on which version you are on. Use color styles to change the
color of a text style.
To apply a text style, select a text layer, then in the properties panel, choose
a text style from the '(v11) Text styles - IBM Design Language' library
depending on which version you are on. 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).
Expand Down
Binary file modified src/pages/designing/kits/images/kit-figma-2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/designing/kits/images/kit-figma-5.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

1 comment on commit 30d826f

@vercel
Copy link

@vercel vercel bot commented on 30d826f Sep 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

carbondesignsystem – ./

carbondesignsystem-git-main-carbon-design-system.vercel.app
carbondesignsystem.vercel.app
carbondesignsystem-carbon-design-system.vercel.app

Please sign in to comment.