Audit all Sketch content on website

aubrey-oneal commented 1 month ago

Sketch has been deprecated and the site needs to reflect this. Similar to the work done in Carbon core in 2023, we will audit all sketch content on the site and draft new information that is Figma centric

Acceptance criteria

[x] An ~~airtable~~ checklist below of all Sketch related content
[ ] Draft new content
[ ] If designers have access to the dev environment they can create a PR. Otherwise create a dev issue to execute these changes.

Helpful resources:

Example PR of Core's final Sketch to Figma changes
Example airtable of Core's draft Sketch to Figma changes (we used this during initial alignment conversations)

oliviaflory commented 1 month ago

Notes from Sizing 5/30

Scope to Audit only = Effort of 5

depending on audit, each page may need their own effort

Drafting content and PRs should be broken out into new issues

We will make changes only in the v2/v11 site

aubrey-oneal commented 2 weeks ago

The following query shows 30 files that mention sketch. This can serve as the audit and I will make issues grouping some of this work together, with rough drafts of new content

# Query: sketch
# ContextLines: 1

63 results - 30 files

[ ] .github/ISSUE_TEMPLATE/pattern-extension.md:

  67    for information about creating assets for the IBM Design System.
  68: - Use annotated wireframes or sketches to explain the visual hierarchy of
  69    components.

  72    pattern's behavior. Provide a
  73:   [Sketch file](https://www.sketch.com/docs/getting-started/) with any symbols
  74    you've created in the development of this pattern.

[ ] src/pages/ai-design/overview.mdx: Website URL

151    branding, however only approved AI features may use these UI patterns (visit
152:   the Watson Moments PAL to access the sketch kit and guidelines).
153

[ ] src/pages/cloud-paks/cross-pak-switcher/usage.mdx: Website URL

115: - [Sketch file with red lines](https://ibm.box.com/s/dfop51k9efvfnhtxg248jxibqufc62tc)

[ ] src/pages/cloud-paks/integrated-framework/components.mdx: Website URL

  32        aspectRatio="2:1"
  33:       href="https://ibm.box.com/shared/static/pop95z30sbjvhi7v9oqegcxmrcu24hxl.sketch">
  34  
  35: ![Sketch file](images/sketch-icon.png)
  36

[ ] src/pages/cloud-paks/navigation/usage.mdx: Website URL

232  
233: - <a href="images/SketchFile.sketch" download>
234:     Sketch file
235    </a>{' '}

[ ] src/pages/cloud-paks/trial-countdown/usage.mdx: Website URL

175  - [Other trial guidelines](https://pages.github.ibm.com/cdai-design/pal/)
176: - [Sketch files](https://pages.github.ibm.com/cdai-design/pal/)
177

[ ] src/pages/components/card/expressive/style.mdx: Website URL

582      <ResourceCard
583:       subTitle="Sketch file"
584        href="https://ibm.box.com/s/zfd8akquqmumk46bjg97yv3fho8wcgzz"></ResourceCard>

[ ] src/pages/components/card/productive/style.mdx: Website URL

  563      <ResourceCard
  564:       subTitle="Sketch file"
  565        href="https://ibm.box.com/s/zfd8akquqmumk46bjg97yv3fho8wcgzz"></ResourceCard>

[ ] src/pages/components/data-table/expandable-rows/usage.mdx: Website URL

  91  
  92: If you are working in Sketch it is easy to create a design where items in the
  93  expanded area align to the grid or the table columns. However, as soon as a

[ ] src/pages/components/data-table/nested-rows/usage.mdx: Website URL

499      <ResourceCard
500:       subTitle="Sketch kit"
501        href="https://ibm.box.com/s/xw43b70j7si4r474jhpr4mg6tqagp66s"></ResourceCard>

[ ] src/pages/components/onboarding/walkme-guide/main/design.mdx: Website URL

34        subTitle="WalkMe"
35:       title="Sketch kit"
36        aspectRatio="2:1"
37        actionIcon="download"
38:       href="https://sketch.cloud/s/16c33f90-8481-4210-a375-bcd14adadee4"></ResourceCard>
39    </Column>

136  WalkMe supports three types of overlay features: ShoutOut screen overlay, Step
137: Balloon / Popup Spotlight, and Highlighters. Additionally, your Sketch file
138  prototypes should follow these rules to get wider approval from an accessibility

[ ] src/pages/components/onboarding/walkme-guide/main/faqs.mdx: Website URL

29: <AccordionItem title="What happens if the sketch kit doesn't meet my needs?">
30:   If you find that the WalkMe sketch kit lacks a component you need, reach out
31    to the Getting Started design team to discuss alternative options. If we find

[ ] src/pages/components/onboarding/walkme-guide/main/overview.mdx: Website URL

62: You can also find resources such as the WalkMe Sketch Kit and links to Carbon
63  design guidance that is the foundation for the WalkMe Carbon components.

[ ] src/pages/components/side-panel/style.mdx: Website URL

712      <ResourceCard
713:       subTitle="Grid sketch file"
714        href="https://ibm.box.com/s/du4xu2wd2mdbcq17v5rf55yk89p1bvzj"></ResourceCard>

[ ] src/pages/components/tearsheet/style.mdx: Website URL

479      <ResourceCard
480:       subTitle="Tearsheet sketch file"
481:       href="https://sketch.cloud/s/db71ec37-fbf5-4895-9b90-7a9f5b269d5a"></ResourceCard>
482    </Column>

[ ] src/pages/contributing/contribution-framework/iterate.mdx: Website URL

171      actionIcon="launch"
172:     href="https://www.carbondesignsystem.com/designing/kits/sketch/"
173    />

[ ] src/pages/keyboard-guidance/index.mdx: Website URL

347  
348: ### Sketch symbol library and examples
349

[ ] src/pages/layouts/library.mdx: Website URL

13        aspectRatio="2:1"
14:       href="sketch://add-library/cloud/8f922fac-1243-44d7-a551-bd31d5ded1fd">
15  
16: ![Sketch file](images/sketch-icon.png)
17

[ ] src/pages/layouts/usage.mdx: Website URL

145  components, they help to minimizing the amount of redlining required and reduce
146: the noise for developers. From the Sketch kit, each module includes a symbol
147  embedded to easily convert the page designs to a redlined document.

[ ] src/pages/overview/faq.mdx: Website URL

50  changing. You can still ask questions in #cloud-pal, but you can also look for
51: advice in #carbon-for-ibm-products. You can continue using the Cloud PAL sketch
52: kit, but we will also be rolling out a new, unified library for both Sketch and
53  Figma.

[ ] src/pages/patterns/canvases/cursor-settings.mdx: Website URL

35  These cursor states mimic the following precedents: MacOS, diagrams.net,
36: Informatica, Keynote, Lucidcharts, Microstation, Sketch, Talend, and many
37  others.

84  
85: Similar to moving items in MacOS' Finder or Sketch, the state for moving items
86  on the canvas will be the `default` cursor state. However, if the use case

[ ] src/pages/patterns/grid-influencers/sketch-guidance.mdx: Website URL

2  title: Grid influencers
3: tabs: ['Usage', 'Style', 'Sketch guidance']
4  ---

7  
8: **Sketch guidance** <br /> IBM is moving to Figma. This guidance exists for
9: designers who do not have access to Figma yet, and are still using Sketch. This
10  guidance will be removed in Q2 2023 to reflect the organizational shift.<br/>

13  
14: ## Setting up your Sketch file
15  
16  To get started with your design, copy and paste the artboards to the right into
17: your new document. You can toggle seeing the columns on Sketch at “**View → Show
18  layout\***” and the units at “**View → Show grid**”.

47  
48: ![Input numbers in Sketch](images/sketch_numbers.png)
49  

73        subTitle="IBM grid template"
74:       href="https://sketch.cloud/s/ngV7z">
75  
76: ![Sketch file](images/sketch_icon.png)
77  

81      <ResourceCard
82:       subTitle="Sketch file"
83        href="https://ibm.box.com/s/du4xu2wd2mdbcq17v5rf55yk89p1bvzj">
84  
85: ![Sketch file](images/sketch_icon.png)
86

[ ] src/pages/patterns/grid-influencers/style.mdx: Website URL

2  title: Grid influencers
3: tabs: ['Usage', 'Style', 'Sketch guidance']
4  ---

[ ] src/pages/patterns/grid-influencers/usage.mdx: Website URL

2  title: Grid influencers
3: tabs: ['Usage', 'Style', 'Sketch guidance']
4  ---

[ ] src/pages/patterns/http-errors/usage.mdx: Website URL

84    Download the SVG illustration
85: </a> or find it in the Sketch Kit.
86  

104    Download the SVG illustration
105: </a> or find it in the Sketch Kit.
106  

122    Download the SVG illustration
123: </a> or find it in the Sketch Kit.
124

[ ] src/pages/patterns/notifications/usage.mdx: Website URL

82  
83: [Animation example](https://ibm.invisionapp.com/prototype/Notifications-panel-sketch-ckfftvja60004w30121uwq1ag/play/f800499a)
84

[ ] src/pages/third-party-logos/images/kubernetes.svg: Website URL

2  <svg width="62px" height="61px" viewBox="0 0 62 61" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3:     {/* Generator: Sketch 57.1 (83088) - https://sketch.com */}
4      <title>download (5)</title>
5:     <desc>Created with Sketch.</desc>
6      <g id="May-visual-design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

[ ] src/pages/walkme-guide/main/design.mdx: Website URL

   31        subTitle="WalkMe"
   32:       title="Sketch kit"
   33        aspectRatio="2:1"
   34        actionIcon="download"
   35:       href="https://sketch.cloud/s/16c33f90-8481-4210-a375-bcd14adadee4"></ResourceCard>
   36    </Column>

  133  WalkMe supports three types of overlay features: ShoutOut screen overlay, Step
  134: Balloon / Popup Spotlight, and Highlighters. Additionally, your Sketch file
  135  prototypes should follow these rules to get wider approval from an accessibility

[ ] src/pages/walkme-guide/main/faqs.mdx: Website URL

25  
26: <AccordionItem title="What happens if the sketch kit doesn't meet my needs?">
27:   If you find that the WalkMe sketch kit lacks a component you need, reach out
28    to the Getting Started design team to discuss alternative options. If we find

[ ] src/pages/walkme-guide/main/overview.mdx: Website URL


80  
81: You can also find resources such as the WalkMe Sketch Kit and links to Carbon
82  design guidance that is the foundation for the WalkMe Carbon components.

carbon-design-system / ibm-products

Audit all Sketch content on website #5158