menu

Primer

For discussing Primer, Octicons, our style guide, and design systems at GitHub 🤖🎨

Channels
Team

Sending icon changes from Figma to production!

July 12, 2018 at 9:26pm

Sending icon changes from Figma to production!

July 12, 2018 at 9:26pm

👋Earlier this year I wrote about the workflow we setup to export our icon set Octicons, from Figma files to production. In the blog post I detail the process and what worked and what didn't. https://blog.github.com/2018-04-12-driving-changes-from-designs/


July 13, 2018 at 8:52pm

Thank you for this! 🙏 I loved getting insight into how you manage icons at Github. I'm using a similar setup with my team right now where everything is managed in a Sketch file that gets exported as JSON through a Node script. I've started playing around with Figma though since reading your article and it's even easier to export and manage now 🙌.

Are you doing anything similar for illustrations? I'd love to smooth out that process at my work. It's not terrible right now in React with react-svg-loader, but I'd love a more central place like Figma where it's easy to contribute and update. I'm really excited for the upcoming webhooks in Figma so things like illustration and icon workflows can be even further automated.

  • reply
  • like

Thank you for this! 🙏 I loved getting insight into how you manage icons at Github. I'm using a similar setup with my team right now where everything is managed in a Sketch file that gets exported as JSON through a Node script. I've started playing around with Figma though since reading your article and it's even easier to export and manage now 🙌.

Are you doing anything similar for illustrations? I'd love to smooth out that process at my work. It's not terrible right now in React with react-svg-loader, but I'd love a more central place like Figma where it's easy to contribute and update. I'm really excited for the upcoming webhooks in Figma so things like illustration and icon workflows can be even further automated.

"Are you doing anything similar for illustrations? I'd love to smooth out that process at my work. It's not terrible right now in React with react-svg-loader, but I'd love a more central place like Figma where it's easy to contribute and update."

I think you could setup a similar process with illustrations. What we really built out was the automation for getting illustrations (our octicons) from Figma to the app that uses the svg. If you're currently storing your SVG illustrations in your repository after exporting from Sketch, then you can update your workflow to export the SVG files from Figma when the server is being built for deployment.

For us it was really about removing the step of manually exporting from Sketch. Either from the app, or on a Mac running some node scripts. The nice thing about an web API, is it doesn't matter what platform it happens on.

like-fill
1
  • reply
  • like