Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: update v11 figma content with theme file deprecation change #3674

Merged
merged 15 commits into from
Aug 4, 2023
Merged

docs: update v11 figma content with theme file deprecation change #3674

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
130a3d3
uppdate pages
laurenmrice Aug 2, 2023
035d81d
update images
laurenmrice Aug 2, 2023
2dcf660
update figma tab content
laurenmrice Aug 2, 2023
6cfb298
update migration guide content
laurenmrice Aug 2, 2023
2d0cb55
Merge branch 'main' into v11-figma-themes-deprecation-content-update
laurenmrice Aug 2, 2023
513c58a
update notification placement
laurenmrice Aug 3, 2023
0d87412
Merge branch 'v11-figma-themes-deprecation-content-update' of https:/…
laurenmrice Aug 3, 2023
d2773a9
update getting started content
laurenmrice Aug 3, 2023
7de761a
update notification content
laurenmrice Aug 3, 2023
4c130b2
update getting started content
laurenmrice Aug 3, 2023
87d55c9
update migration page content
laurenmrice Aug 3, 2023
f9bd359
update getting started overview
laurenmrice Aug 3, 2023
4608ff3
update figma kit page
laurenmrice Aug 3, 2023
2cd83cc
update image bug
laurenmrice Aug 3, 2023
0e0470a
update white theme reference from review
laurenmrice Aug 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 12 additions & 15 deletions src/pages/designing/get-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,17 +78,17 @@ starting point for building user interfaces. This brings consistency and speed,
allowing teams to focus on solving more specific user tasks. Core design kits
include elements, core components, wireframes, and guidelines.

| Maintainer | Design kit | Type |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------ |
| IBM Brand | [IBM Pictograms](https://www.figma.com/community/file/1089047716352012639/Pictograms---IBM-Design-Language) | `Elements` |
| | [IBM Icons](https://www.figma.com/community/file/1089055340263947620/Icons---IBM-Design-Language) | `Elements` |
| | [v11 Text styles](<https://www.figma.com/community/file/1127113732861637625/(v11)-Text-Styles---IBM-Design-Language>) | `Elements` |
| | [IBM Color palette](https://www.figma.com/community/file/1089055766693968230/Color-Styles---IBM-Design-Language) | `Elements` |
| Carbon Core | [v11 White theme](<https://www.figma.com/community/file/1157761560874207208/(v11)-White-Theme---Carbon-Design-System>) | `UI` |
| | [v11 Gray 10 theme](<https://www.figma.com/community/file/1157763433354586090/(v11)-Gray-10-Theme---Carbon-Design-System>) | `UI` |
| | [v11 Gray 90 theme](<https://www.figma.com/community/file/1157763622355802091/(v11)-Gray-90-Theme---Carbon-Design-System>) | `UI` |
| | [v11 Gray 100 theme](<https://www.figma.com/community/file/1157763881353486317/(v11)-Gray-100-Theme---Carbon-Design-System>) | `UI` |
| Accessibility | [Accessibility toolkit](https://www.figma.com/community/file/1118184491812988116/IBM-Accessibility-Design-Kit) | `Guidelines` |
| Maintainer | Design kit | Type |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| IBM Brand | [IBM Pictograms](https://www.figma.com/community/file/1089047716352012639/Pictograms---IBM-Design-Language) | `Elements` |
| | [IBM Icons](https://www.figma.com/community/file/1089055340263947620/Icons---IBM-Design-Language) | `Elements` |
| | [v11 Text styles](<https://www.figma.com/community/file/1127113732861637625/(v11)-Text-Styles---IBM-Design-Language>) | `Elements` |
| | [IBM Color palette](https://www.figma.com/community/file/1089055766693968230/Color-Styles---IBM-Design-Language) | `Elements` |
| Carbon Core | [v11 All themes](<https://www.figma.com/community/file/1157761560874207208/(v11)-White-Theme---Carbon-Design-System>) | `UI` |
| | [v11 Gray 10 theme [Deprecated]](<https://www.figma.com/community/file/1157763433354586090/(v11)-Gray-10-Theme---Carbon-Design-System>) | `UI` |
| | [v11 Gray 90 theme [Deprecated]](<https://www.figma.com/community/file/1157763622355802091/(v11)-Gray-90-Theme---Carbon-Design-System>) | `UI` |
| | [v11 Gray 100 theme [Deprecated]](<https://www.figma.com/community/file/1157763881353486317/(v11)-Gray-100-Theme---Carbon-Design-System>) | `UI` |
| Accessibility | [Accessibility toolkit](https://www.figma.com/community/file/1118184491812988116/IBM-Accessibility-Design-Kit) | `Guidelines` |

The links in the table for Figma Libraries are preview only. Some of the Figma
kits are for internal IBMers. To learn more about installing Figma Libraries and
Expand All @@ -99,10 +99,7 @@ available external libraries visit the Figma tutorial

Support for v11 Figma kits are prioritized, but
[Figma v10 kits](https://next.carbondesignsystem.com/design-kits?q=v10&tool[]=figma)
are also available with limited support. Visit the
[design kit catalog](https://next.carbondesignsystem.com/design-kits) to see a
comprehensive list of all design kits, including v10 Figma kits and kits for
tools that are no longer maintained. In
are also available with limited support. In
[Other resources](/designing/design-resources/), you'll find links to icon
libraries, color palettes, plugins, and more. The Adobe XD kit is no longer
prioritized or maintained, but you may access it
Expand Down
118 changes: 23 additions & 95 deletions src/pages/designing/kits/figma.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,9 @@ contains all resources you need to get started.

<InlineNotification>

**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.
**All themes are now available in one Figma library!** We have implemented Figma
modes and theming variables, allowing us to combine all four themes into one
library file.

</InlineNotification>

Expand All @@ -41,14 +40,11 @@ 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 v11 theme libraries
#### 2. Turn on the Carbon themes library

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. 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.
The `(v11) All themes - Carbon Design System` library (previously referred to as
(v11) White theme - Carbon Design System) includes all four Carbon themes,
including two light (White and Gray 10) and two dark (Gray 90 and Gray 100).

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 @@ -62,8 +58,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
`IBM Design Systems` (C) and switch the toggle beside a themed library, for
example the `(v11) White Theme - Carbon Design System` to on (D).
`IBM Design Systems` (C) and switch the toggle beside the
`(v11) All Themes - Carbon Design System` library to on (D).

<Row>
<Column colLg={8}>
Expand All @@ -75,51 +71,18 @@ example the `(v11) White Theme - Carbon Design System` to on (D).

<br />

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

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

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

</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('T7D1HJ3L', 0)}
subTitle="v11 Gray 10 theme"
href="https://www.figma.com/file/0sd447WTcazDI6Dq9tjXOe/(v11)-Gray-10-Theme---Carbon-Design-System"
actionIcon="launch">

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

</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('LYFJTPDE', 0)}
subTitle="v11 Gray 90 theme"
href="https://www.figma.com/file/fH8rkv1VUTw5pvFDvO1kPO/(v11)-Gray-90-Theme---Carbon-Design-System"
actionIcon="launch">

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

</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('3XH0SIBJ', 0)}
subTitle="v11 Gray 100 theme"
href="https://www.figma.com/file/XhRIHF6qGiJQaJ5eOSSBRm/(v11)-Gray-100-Theme---Carbon-Design-System"
actionIcon="launch">

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

</ResourceCard>
Expand Down Expand Up @@ -205,14 +168,11 @@ Design Language libraries or visit these view-only links.

#### 2. Get the theme 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. 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.
The `(v11) All themes - Carbon Design System` library (previously referred to as
(v11) White theme - Carbon Design System) includes all four Carbon themes,
including two light (White and Gray 10) and two dark (Gray 90 and Gray 100).

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

<Row>
<Column colLg={8}>
Expand All @@ -222,8 +182,8 @@ Navigate to the **Community** tab in the left side panel (A).
</Column>
</Row>

Select the **Design Systems** category (B) and search for **Carbon Design
System** (C).
Select the **Design Systems** category and search for **Carbon Design System**
(B).

<Row>
<Column colLg={8}>
Expand All @@ -233,7 +193,7 @@ System** (C).
</Column>
</Row>

See the Carbon Design System libraries that are available.
See the `(v11) All themes - Carbon Design System` library file.

<Row>
<Column colLg={8}>
Expand All @@ -247,49 +207,17 @@ See the Carbon Design System libraries that are available.

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

To preview the four Carbon v11 theme libraries, visit these view-only links.
To preview the `(v11) All themes - Carbon Design System` library, visit the
following view-only link.

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

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

</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('T7D1HJ3L', 0)}
subTitle="v11 Gray 10 theme"
href="https://www.figma.com/community/file/1157763433354586090"
actionIcon="launch">

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

</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('LYFJTPDE', 0)}
subTitle="v11 Gray 90 theme"
href="https://www.figma.com/community/file/1157763622355802091"
actionIcon="launch">

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

</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('3XH0SIBJ', 0)}
subTitle="v11 Gray 100 theme"
href="https://www.figma.com/community/file/1157763881353486317"
actionIcon="launch">

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

</ResourceCard>
Expand Down Expand Up @@ -395,7 +323,7 @@ To learn more about applying color styles in Figma, see the
### Text styles

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
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.

Expand Down
Binary file removed src/pages/designing/kits/images/axure-icon.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/pages/designing/kits/images/axure-updates.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/pages/designing/kits/images/kit-adobexd-1.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/pages/designing/kits/images/kit-adobexd-2.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/pages/designing/kits/images/kit-adobexd-3.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/pages/designing/kits/images/kit-adobexd-4.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/pages/designing/kits/images/kit-adobexd-5.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/pages/designing/kits/images/kit-adobexd-6.png
View file
Open in desktop
Binary file not shown.
Binary file modified src/pages/designing/kits/images/kit-figma-1.png
View file
Open in desktop
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-2.png
View file
Open in desktop
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-3.png
View file
Open in desktop
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-4.png
View file
Open in desktop
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
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/pages/migrating/guide/design.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ accessibility, collaboration, and efficiency for users.

| Design tool | v11 | Migration strategy |
| -------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Figma](/designing/kits/figma) | Update available | The v11 Figma updates are available as new libraries. Teams need to swap out assets from v10 to v11 assets to migrate. The v10 Figma files will not receive continuous updates and will remain permanently on v10. |
| [Figma](/designing/kits/figma) | Update available | The v11 Figma update is available as a new library with all themes in one file. See the [Design Kit Figma tab](https://carbondesignsystem.com/designing/kits/figma/) for more information. Teams need to swap out assets from v10 to v11 assets to migrate. The v10 Figma files will not receive continuous updates and will remain permanently on v10. |
| [Sketch](/designing/kits/sketch) | Update available | The same Sketch Cloud libraries that were used in v10 have been updated to include the v11 changes. Do not accept the library update until you are ready to work in v11. There are new [v10](https://v10.carbondesignsystem.com/designing/kits/sketch#get-the-kit) libraries available for teams that still need them. Note that Sketch kits will not be prioritized or maintained in the future. |
| [Adobe XD](https://github.com/IBM/design-kit/tree/master/Adobe%20XD) | Partial update available | Some of the v11 changes have been made in the XD files, available in GitHub. Note that Adobe XD kits will no longer be prioritized or maintained. |

Expand Down
14 changes: 7 additions & 7 deletions src/pages/migrating/guide/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,13 +158,13 @@ If you're curious about specific changes to tokens, take a look at our

#### Figma

All v11 theme libaries are now available in Figma. Head to the
[design kit catalog](https://next.carbondesignsystem.com/design-kits?tool[]=figma)
to see the full list of available libraries. We have leveraged Figma's latest
features in this release, which may result in breaking changes to some of our
components. To meet team's migration preferences, we have separate v11 and v10
libraries. If you are still on v10, migrate to the v11 libraries when you are
ready to do so.
All v11 themes are now available in a library in Figma. Head to the
[get started page](https://carbondesignsystem.com/designing/get-started/#core-design-kits)
to see the full list of available core libraries. We have leveraged Figma's
latest features in this release, which may result in breaking changes to some of
our components. To meet team's migration preferences, we have separate v11 and
v10 libraries. If you are still on v10, migrate to the v11 libraries when you
are ready to do so.

### New packages

Expand Down
Loading