Our Transition to a New Design Toolset

We’ve moved from a fragmented design toolset to a more consolidated, efficient workflow centered around Figma. Here’s a look at how our design tools have evolved:

Previous Toolset:

• Sketch App: Used for UI & UX web design.
• Abstract App: Used for design branching & version control of Sketch files.
• Invision App: Used for gathering feedback from stakeholders.

New Toolset:

• Figma.com: used as our sole design tool for all web designs and for creating / publishing our design system libraries using Figma branches & a Figma plugin for changelogs.
  • NOTE: Figma has branching capabilities, read more about “Branching best practices”, as well as a “Guide to branching” within the Figma help portal.
• Bugherd.com: Used for design feedback via integration with Figma and the team and clients provide feedback on websites or bug reports during design, development, testing and ongoing post launch.

Why Figma?

Figma offers powerful features like branching, collaboration, and interactive prototypes. It also provides a single source of truth for all our design work, reducing the need for multiple tools and making the handoff process smoother.

Design Process Guidelines

Meetings

We conduct all design-related meetings through Google Meet. This includes internal reviews, client presentations, and feedback sessions. We also use Fireflies.ai as a note-taker in our meetings, ensuring nothing gets forgotten, and can be referenced later.

Task Management and Roadmap Planning

• Harvest: Used for time tracking. We differentiate between internal open-source projects (where rough logs are acceptable) and client projects (which require precise time logs for billing purposes).
• Asana: Our primary task management tool. Design tasks are created as parent tasks with detailed subtasks for each design screen. These tasks are then converted to development tasks post-design phase.
• GitHub: For internal open-source products, we use GitHub Projects to plan new releases and manage plugin and theme roadmaps. Asana tasks link to corresponding GitHub issues, where the full requirements are detailed.

Our Git-Based Design Workflow

To streamline collaboration between designers and developers, we’ve adopted a Git-based design workflow that mirrors traditional development workflows:

New Feature Planning Workflow

1. Create GitHub Issue: Use a GitHub template to outline the new feature.
2. Create Figma Branch: Start a Figma branch corresponding to the GitHub issue.
3. Complete Design Updates: Work on design updates within the branch.
4. Design Review: Conduct a review of the design branch, similar to a pull request.
5. Merge Figma Branch: Merge the branch into the main design system upon approval.

This workflow ensures that design changes are well-documented, reviewed, and aligned with development processes.

Developer Handoff Process

To ensure a smooth handoff from design to development, we follow a structured handoff process:

1. Handover Notes: Detailed notes are provided in Asana, including Figma links, image assets, and specific development considerations.
2. Export and Upload Designs: Updated design screens are exported from Figma and attached to the corresponding GitHub issue.
3. Prototyping: Figma’s interactive prototypes allow developers to see exactly how specific elements are intended to work, reducing ambiguity and ensuring a smoother implementation.
4. Create Corresponding GitHub Branch: Use consistent naming conventions for Figma and GitHub branches.
5. Commit Code and Create Pull Request: Developers commit code to the GitHub branch and create a pull request for review.
6. Review and Merge Code: Conduct a code review and merge the branch upon approval.
7. Close Issue and Update Board: Close the GitHub issue and update the project board to reflect progress.
8. Update Changelog: After merging, ensure that the design system’s changelog is updated in Figma. Keeping a detailed changelog helps track improvements, bug fixes, and new features added to the design system. This step is crucial for maintaining transparency and providing a historical reference for updates.

Versioning and Changelog Maintenance

Maintaining a clear and detailed changelog is essential for both designers and developers. Our changelogs are kept up-to-date in Figma and GitHub, ensuring that users can see exactly what has changed in each release.

Key Steps for Maintaining Changelogs:

• Version Alignment: We align the versioning of our design systems with corresponding plugins and themes to ensure consistency.
• Release Notes: Each update includes a set of release notes that outline what’s new, improved, or fixed in the latest version.
• Changelog Plugin: In Figma, we use a changelog plugin to automate the process of documenting changes.

Maintaining a consistent changelog helps keep the design system organized and ensures all team members and users are informed of updates and improvements.