menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

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
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?
Hey ! 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
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.
So now I'm curious, : What do you all do at Shopify for icons?
πŸ¦—
Are you planning to use react in the GitHub website?
Haven't you recently removed jQuery and moved to vanilla js?
How was your journey so far using Figma?
How do you document your design system currently?
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)
also, πŸ‘‹
And howdy , let's take each of those questions one by one.
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
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.
*some projects on GitHub.com which render through iframes
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!
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/
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.
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!
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
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?

August 18, 2018 at 11:42am
Can you share the theme you are using for Jekyll style guide?
Which kit and x0?
Show more messages