How we use Figma files to keep the Octicons icon library up to date
Overview
The article discusses the integration of Figma designs into the Octicons icon library, highlighting the transition from a restrictive GitHub workflow to a more efficient, automated process using Figma's API. It emphasizes the importance of reducing friction for contributors and leveraging continuous integration for icon management.
What You'll Learn
1
How to streamline the contribution process for design assets using Figma
2
Why using continuous integration can enhance icon management workflows
3
How to utilize Probot for automating GitHub tasks related to design assets
Prerequisites & Requirements
- Basic understanding of Git and design tools(optional)
- Figma account and access to the Octicons repository
Key Questions Answered
How can Figma improve the contribution process for Octicons?
Figma allows contributors to work with design assets without needing specific software or complex setups. By migrating to Figma, the Octicons team has made it easier for anyone to contribute, reducing the barriers that previously existed with GitHub workflows.
What role does continuous integration play in managing Octicons?
Continuous integration (CI) is used to automatically export icons from Figma and distribute alpha versions of the libraries on every pull request. This automation helps streamline the workflow and ensures that the latest changes are consistently integrated into the project.
What is Probot and how is it used in the Octicons project?
Probot is an automation tool for GitHub that helps manage tasks such as checking pull requests for changes in Figma. It can comment on pull requests with before and after images of icons, simplifying the review process for contributors and maintainers.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Design Tool
Figma
Used for managing and contributing design assets for the Octicons icon library.
Automation Tool
Probot
Automates GitHub tasks related to checking pull requests for design changes.
Development Practice
Continuous Integration (ci)
Used to automate the export and distribution of icons on pull requests.
Key Actionable Insights
1Transitioning design assets to Figma can significantly enhance collaboration among contributors.By using a platform-agnostic tool like Figma, teams can eliminate software-specific barriers, making it easier for contributors to participate without needing specialized setups.
2Implementing continuous integration for design assets can automate repetitive tasks and improve efficiency.This approach not only saves time but also ensures that the latest design updates are consistently integrated and available for use.
3Utilizing Probot for GitHub task automation can streamline the review process.By automating checks and providing visual feedback on design changes, Probot enhances the clarity and speed of contributions, benefiting both contributors and maintainers.
Common Pitfalls
1
Contributors may struggle with complex setups when contributing to design assets.
This often occurs when specific software requirements and Git knowledge are necessary, which can deter potential contributors from participating.
Related Concepts
Design Systems
Continuous Integration
Automation In Github