Weekly UI/UX Design Systems Figma Agenda

[daniellex0]

Overview

This issue tracks the agenda and Milestone for the UX/UI meetings.

Milestone Typography

Typography

• Design Draft Typography section of Figma Design System #56

Milestone Colors

Colors (P1)

• Design Colors section of Figma Design System #57

Milestone Colors

Colors (P2)

• Design Colors section of Figma Design System #57

** Milestone Component Library** (P1)

• V2: Design Component Library & Icons portion of Figma Design System  #59
• Design Grids, Shadows, Radius, Spacing sections of Figma Design System  #61

Milestone Component Library

** Component Library** (P2)

• V2: Design Component Library & Icons portion of Figma Design System  #59
• Design Grids, Shadows, Radius, Spacing sections of Figma Design System  #61

Milestone Component Library

Component Library (P3)

• V2: Design Component Library & Icons portion of Figma Design System  #59
• Design Grids, Shadows, Radius, Spacing sections of Figma Design System  #61

Misc. Design System Figma Organization and Documentation

##Agendas and Meeting Notes:
2021/08/25

[daniellex0]

Assignment before Wed 8/18 Meeting (for those who have time)

• Re-read Typography section of Design Systems guide, and any other online resources about typography
• Find more good examples of Design System Typography sections and add them to the Typography tab of the Design Systems Figma (on the left side, under 'Examples from other companies')
  • Examples can be found in Design Systems for Figma, Design Systems Repo, and any companies' design system websites (just paste a screenshot if it's not Figma file)
  • Feel free to annotate any sections you think are important to point out/potentially emulate
• Design your own draft(s) of a Typography section for the Design System based on common trends you notice or trends that you feel can be effective/good to emulate. Design your draft in the Typography tab of the Design Systems Figma (on the right side, under 'Our Drafts')

Meeting Agenda - Wed 8/18

#56

1. Review and discussion of typography examples and trends from other companies' design systems
   • Focusing on both content (how many font sizes, which font sizes) and format (layout, categorization)
2. Review and discussion of our own Typography drafts (those who have)
3. Consolidate and design our own official Typography draft using our combined findings and preferences
4. Assign issue: (1) Add typography to Figma Styles, and finish/polish up typography section
5. Intro to next section: Colors

Meeting Notes - Wed 8/18

1. Rundown of timeline for first draft of design system (~3 weeks)
2. Review typography examples from other organizations (Design + content)

• Likes: Text examples that resemble real headings/text blocks (Con: Takes up more space on document)

3. Inclusion of Design Tokens: Possible feature in future MVP (version No. 3?)
4. Horizontal vs. Vertical layout

• Vertical: At quick glance, communicates information more easily
• Do A/B testing for horizontal vs. vertical layout?

5. Typography guidelines

• Useful information for people unfamiliar with industry standards for text
• Can be built upon for Accessibility in the future

Actions

1. Team:

• Add comments/contextual callouts to explain design decisions on Figma
• Research Color examples from other design systems + start new drafts in Figma

2. Bernard: Create new text styles in Figma
3. Anastasia: Create vertical version of existing Typography draft

For Other Teams

1. Potential UX research questions/topics:

• Does this layout make sense for users with limited experience with design systems?
• A/B testing for horizontal vs. vertical layout

[daniellex0]

Assignment before Wed 8/25 Meeting

• Re-read Colors section of Design Systems guide, and any other online resources about design system colors
• Find more good examples of Design System Colors sections and add them to the Colors tab of the Design Systems Figma (on the left side, under 'Examples from other companies')
  • Examples can be found in Design Systems for Figma, Design Systems Repo, and any companies' design system websites (just paste a screenshot if it's not Figma file)
  • Feel free to annotate any sections you think are important to point out/potentially emulate
• Design your own draft(s) of a Colors section for the Design System based on common trends you notice or trends that you feel can be effective/good to emulate. Design your draft in the Colors tab of the Design Systems Figma (on the right side, under 'Our Drafts')

Meeting Agenda - Wed 8/25

#57

1. Review and discussion of Colors section examples and trends from other companies' design systems
   • Focusing on how colors are categorized (naming) and layout
2. Review and discussion of our own Colors drafts
3. Consolidate and design our own official Colors draft using our combined findings and preferences
4. Assign issue: (1) Add colors to Figma Styles, and finish/polish up colors section
5. Intro to next section: Component Library

Meeting Notes - Wed 8/25

• Welcome UX Research Lead Nas to meeting
• Review Colors examples from other organizations (Design + content)
  • Likes: Visual hierarchy for primary colors, inclusion of usage examples, accessibility information
• Team members presented their Colors section drafts
• Team voted on which portions they liked
  • Likes:
    • Anh's draft layout (similar to final typography section layout) and visual hierarchy of primary colors
    • Ryan's text on top of color boxes
    • Bernard's side-by-side color variants
    • Anastasia's categories
    • Danielle's text on top of color boxes sections
• Team voted on which elements should definitely be included in MVP1:
  • Usage examples
  • Primary, Secondary categories (w/ explanation of what that means in 1 version)
  • Design tokens/name (describe tokens)
  • Functional colors (warning, success, etc)
  • If have multiple color variants, 100/200/300 number values
• Team voted to have accessibility color information (accessible text on top of each color box) in later iteration, not MVP1
  • Tough for new projects that need a small, quick design systems to implement
• Team decided to make 3 more versions based on decisions
  • Text below color box version- issue #79 assigned to Anh
  • Text on color box version- issue #80 assigned to Ryan
  • Side-by-side color variants version- issue #81 assigned to Bernard

[daniellex0]

Assignment before Wed 9/1 Meeting:

• Those assigned to issues to adjust the Colors section work on those and use the details in issues for guidance, or ask for any clarification/input (issues: Anh Design MVP option 1 of Figma Design System Colors section #79, Ryan Design MVP option 2 of Figma Design System Colors section  #80, Bernard Design MVP option 3 of Figma Design System Colors section #81)
• Re-read the Component Library section and Icons section of the Design System guide, and any other online resources about design system component libraries if you want
• Find more good examples of Design System component library sections and add them to the Component Libraries tab of the Design Systems Figma (on the left side, under ‘Examples from other companies’)
  • Examples can be found in Design Systems for Figma, Design Systems Repo, Figma’s ‘Community’ section, and any companies’ public design system websites (just paste a screenshot if it’s not Figma file)
  • Feel free to annotate any sections you think are important to point out/potentially emulate

Meeting Agenda - Wed 9/1

• Review and discussion of new Colors section drafts
  • Vote on final options and decide if any other edits/iterations are needed-
• Review and discussion of Component Library / Icons section examples and trends from other companies' design systems. Focusing on:
  • Component library sections categorization and layout
  • Icons section layout
  • How we will approach creating our component library and icons sections

[Hanastevenson]

@rcurtis2 has confirmed that he has taken all of this information and place it in the history of this project which will be on the Wiki.