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.

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

docs: update figma kit page with card icons #2724

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
91 changes: 56 additions & 35 deletions src/pages/designing/kits/figma.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ contains all resources you need to get started.

<AnchorLinks>

<AnchorLink>Get the library</AnchorLink>
<AnchorLink>Get the libraries</AnchorLink>
<AnchorLink>Start designing</AnchorLink>
<AnchorLink>Feedback</AnchorLink>

</AnchorLinks>

## Get the library
## Get the libraries

#### 1. Sign into Figma using IBM SSO

Expand All @@ -31,7 +31,9 @@ libraries.

#### 2. Turn on the theme libraries

There are four Carbon themes, 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.
There are four Carbon themes, 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.

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 @@ -45,7 +47,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 `White theme - Carbon Design System` to on (D).
`[NEW] IBM Design Systems` (C) and switch the toggle beside a themed library,
for example the `White theme - Carbon Design System` to on (D).

<Row>
<Column colLg={8}>
Expand All @@ -55,40 +58,58 @@ Then in the Libraries modal that appears, find the team called
</Column>
</Row>

To preview the four themed libraries, visit these view-only files.
<br />
<br />

To preview the four Carbon themes, visit these view-only links.

<Row className="resource-card-group">
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
subTitle="White theme"
href="https://www.figma.com/file/Vzz8k68Pqk5HfaTdQOQrGu/White-Theme---Carbon-Design-System">
</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('T7D1HJ3L', 0)}
subTitle="Gray 10 theme"
href="https://www.figma.com/file/i6y80WeotmhmbWxpmcffz7/Gray-10-Theme---Carbon-Design-System">
</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('LYFJTPDE', 0)}
subTitle="Gray 90 theme"
href="https://www.figma.com/file/fCucrHE8tdGDVJX7ODqajd/Gray-90-Theme---Carbon-Design-System">
</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('3XH0SIBJ', 0)}
subTitle="Gray 100 theme"
href="https://www.figma.com/file/TckQzGe3bNxHPLoRhbXFal/Gray-100-Theme---Carbon-Design-System">
</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
subTitle="White theme"
href="https://www.figma.com/file/Vzz8k68Pqk5HfaTdQOQrGu/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="Gray 10 theme"
href="https://www.figma.com/file/i6y80WeotmhmbWxpmcffz7/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="Gray 90 theme"
href="https://www.figma.com/file/fCucrHE8tdGDVJX7ODqajd/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="Gray 100 theme"
href="https://www.figma.com/file/TckQzGe3bNxHPLoRhbXFal/Gray-100-Theme---Carbon-Design-System"
actionIcon="launch">

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

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

<br />
<br />

#### 3. Turn on the other IBM Design Language libraries 
Expand All @@ -97,9 +118,9 @@ Under the same team `[NEW] IBM Design Systems` you can also turn on the
following libraries:

- Color styles - IBM Design Language
- Text styles - IBM Design Language
- Icons - IBM Design Language
- Pictograms - IBM Design Language
- Text styles - IBM Design Language

## Start designing

Expand Down
24 changes: 24 additions & 0 deletions src/pages/designing/kits/images/figma.svg
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.