GitHub is where code lives and collaboration happens. It's built on Git but adds a visual interface, project management tools, and social features that make teamwork smoother. For designers, GitHub is increasingly essential - it's where design systems are maintained, where design-dev handoff happens, and where you can track and contribute to projects. This guide will make you confident navigating and using GitHub.
1. Creating and Navigating GitHub Repositories
A repository (repo) is a project folder with version history. Here's how to work with them:
Creating a New Repository
Click the '+' icon and select 'New repository'. Give it a descriptive name (use-dashes-not-spaces), add a description, and choose public or private. Initialize with a README to describe your project.
Understanding the Repository Interface
The Code tab shows files. The Issues tab tracks tasks and bugs. Pull Requests shows proposed changes. Actions automates tasks. Settings controls permissions. The branch dropdown lets you switch between versions.
Cloning Repositories
To work locally, click 'Code' and copy the URL. In your terminal, run 'git clone [URL]'. This downloads the entire project with its history. You now have a local copy connected to GitHub.
Forking vs Cloning
Forking creates your own copy of someone else's repo on GitHub - useful for contributing to open source. Cloning downloads a repo to your computer. Fork first if you don't have write access.
2. Using Issues and Project Boards for Design Tasks
GitHub Issues are powerful for tracking work. Here's how designers can use them effectively:
Creating Design Issues
Click 'New Issue' and describe the design task clearly. Include context, requirements, and acceptance criteria. Attach mockups or Figma links. Use markdown for formatting - it supports images and links.
Labels and Organization
Create labels like 'design', 'needs-design-review', 'design-approved'. Filter issues by label to see only design-related tasks. This helps you focus and helps developers know what needs design input.
GitHub Projects
Projects are Kanban boards for issues. Create columns like 'Design Backlog', 'In Design', 'Dev Ready', 'Done'. Drag issues between columns. This gives everyone visibility into design progress.
Linking Issues to Work
Reference issues in commits and PRs using '#123' (issue number). This creates automatic links. When a PR that fixes an issue is merged, the issue can auto-close. Everything stays connected.
3. Reviewing Pull Requests and Providing Design Feedback
Pull Requests (PRs) are proposals to merge changes. Designers should review PRs that affect the UI:
Finding Relevant PRs
Watch for PRs with design-related labels or that touch UI files. GitHub can notify you when specific files change. Ask to be added as a reviewer on design-impacting PRs.
Reviewing the Changes
The 'Files changed' tab shows what's different. Green lines are additions, red are deletions. For visual changes, check the preview deployment (many teams auto-deploy PRs for review).
Leaving Helpful Comments
Click the '+' next to any line to comment. Be specific: 'The button padding should be 16px not 12px' is better than 'spacing looks off'. Include screenshots or references when helpful.
Approving or Requesting Changes
After review, submit your review as 'Approve', 'Request changes', or 'Comment'. Request changes for must-fix issues. Your approval helps developers know when design is satisfied.
4. Managing Design Assets and Documentation on GitHub
GitHub excels at storing and versioning design-related files:
Design Tokens and Variables
Store design tokens (colors, spacing, typography) as JSON or CSS files. Changes are tracked and reviewed like code. This is the source of truth that syncs with Figma and code.
Documentation with Markdown
Write documentation in Markdown files (.md). GitHub renders them beautifully. Create a design-system folder with component documentation, usage guidelines, and examples.
Version-Controlled Design Files
While Figma handles version control internally, you can store exports, assets, and specifications in Git. Some teams store icon SVGs, illustrations, and static assets in repos.
README Files
Every project should have a README.md explaining what it is, how to use it, and how to contribute. For design systems, include quick-start guides and links to Figma or Storybook.
Key Takeaways
- Repositories are project folders with full version history
- Issues track tasks - create design-specific labels and project boards
- Review Pull Requests to ensure design implementation matches specs
- Store design tokens and documentation in the repo as the source of truth
- Use markdown for readable, version-controlled documentation