menu

Primer

For discussing Primer, Octicons, our style guide, and design systems at GitHub πŸ€–πŸŽ¨

Channels
Team

Open office hours - 08/17/18

August 17, 2018 at 5:45pm

Open office hours - 08/17/18

August 17, 2018 at 5:45pm

Talk to us about design systems at GitHub, how we're using Figma, our progress on building a react component library, and open roles on our team!


August 17, 2018 at 8:58pm
πŸ‘‹
like-fill
1
  • reply
  • like

Hi! Can you talk about how you document icons (e.g. with usage guidelines)? Is there any metadata/documentation in the Figma source, or are the docs hosted separately?

Also: I'm curious about your icon versioning strategy - does each icon get versioned separately?

  • reply
  • like

Hey @kaelig! We don't really have any official usage guidelines for individual icons, and currently our documentation for Octicons is spread across a couple of different places: https://octicons.github.com is where you can see each icon and usage via Ruby and Jekyll helpers. There's a more developer-friendly listing with HTML usage guidelines in the style guide: https://styleguide.github.com/primer/components/octicons/. We're working on updating the former to be a more canonical source of info and including the React library usage samples there, too.

like-fill
1
  • reply
  • like

And no, currently we version the whole library together, but we follow semver: adding an icon is a minor version bump, removing one is a major bump, and changes to existing ones are patches.

  • reply
  • like

So now I'm curious, @kaelig: What do you all do at Shopify for icons?

  • reply
  • like
πŸ¦—
  • reply
  • like

Are you planning to use react in the GitHub website?

  • reply
  • like

Haven't you recently removed jQuery and moved to vanilla js?

  • reply
  • like

How was your journey so far using Figma?

  • reply
  • like

How do you document your design system currently?

  • reply
  • like

Is Primer part of a larger design ops team at Github? If so, what else is bundled under that umbrella? (re: the recent job posting for design ops design producer)

  • reply
  • like

also, πŸ‘‹

  • reply
  • like

Hey, @donjo!

  • reply
  • like

And howdy @mittalyashu, let's take each of those questions one by one.

  • reply
  • like

Is Primer part of a larger design ops team at Github? If so, what else is bundled under that umbrella? (re: the recent job posting for design ops design producer)

The design systems team, who maintain Primer, are part of Design Operations. This is a new team, hence yes we are hiring a design producer to help build that out. Later in the year we'll also adding starting a design research team that will also be part of design operations.

like-fill
2
  • reply
  • like

Are you planning to use react in the GitHub website?

Hey Yashu! Right now we working on a React library of our Primer components which will be used across several different projects at GitHub. Integration into GitHub.com is still to be determined, though some projects which render through iframes do use primer-react.

  • reply
  • like

*some projects on GitHub.com which render through iframes

  • reply
  • like

Haven't you recently removed jQuery and moved to vanilla js?

Yes! The Web Systems team did recently remove a ton of jQuery from GitHub.com, though our team wasn't very involved in that effort!

  • reply
  • like

How was your journey so far using Figma?

We love Figma so far! We are currently porting all of our components from Sketch into Figma right now, and we've done some really cool things with our Octicon library which we wrote about here! https://blog.github.com/2018-04-12-driving-changes-from-designs/

  • reply
  • like

How do you document your design system currently?

For Primer CSS, we've got a Jekyll based style guide which we build automatically from markdown documentation included in our Primer package. The style guide includes examples, usage documentation, and status flags for each part of Primer CSS. We've also got a Storybook set up mostly for development work.

  • reply
  • like

How do you document your design system currently?

For our newest project, primer-react, we are using Kit and x0 to power our documentation! Right now it's mostly just code examples and very little usage guidelines, but we're planning a sprint for next week to make the documentation for primer-react more robust!

  • reply
  • like

So now I'm curious, @kaelig: What do you all do at Shopify for icons?

We've conducted some research across teams and it's a bit of a mess right now. Sorting it out is my team's big project for the next few months :)

like-fill
1
  • reply
  • like

A single Figma file for a design system can get very big very fast. How do you organize your components into files/pages? Which ones get a separate file, and how do you keep track of everything?

  • reply
  • like

August 18, 2018 at 11:42am

For Primer CSS, we've got a Jekyll based style guide which we build automatically from markdown documentation included in our Primer package. The style guide includes examples, usage documentation, and status flags for each part of Primer CSS. We've also got a Storybook set up mostly for development work.

Can you share the theme you are using for Jekyll style guide?

  • reply
  • like

For our newest project, primer-react, we are using Kit and x0 to power our documentation! Right now it's mostly just code examples and very little usage guidelines, but we're planning a sprint for next week to make the documentation for primer-react more robust!

Which kit and x0?

  • reply
  • like
Show more messages
private
This conversation has been locked