Enhancing Efficiency and Collaboration from Design to Development

At LightSpeed, we are committed to improving our design and development workflow to enhance efficiency, collaboration, and quality. We have made significant updates to our internal processes, focusing on integrating a Git-based workflow for our design systems. Here’s a comprehensive overview of our updated design process, specifically tailored for our internal open-source projects.

Transition from Sketch to Figma

We have transitioned to using Figma as our sole design tool. This move consolidates our design work into a single, collaborative platform, making it easier to maintain our design system and interface designs. Figma supports branching, which aligns well with our Git-based workflow. Learn more about branching in Figma here and here.

Naming Conventions & Exporting Image Files

To ensure organization and efficiency, all files must adhere to specific naming conventions:

• Naming Conventions: Use lowercase naming, hyphen separation, and include image dimensions.
• File Formats: Use .JPEG for photographs, .PNG for images requiring transparency, and .SVG for vector-based graphics.
• Optimization: Aim to keep file sizes low without sacrificing quality.

Feedback Collection

For our internal projects, we utilize Figma for initial feedback and discussion between Designers, Product Owners, and Developers. This fosters collaboration and ensures that developers discuss designs with designers before development begins. Once development starts, we use Bugherd for providing contextual feedback through comments logged on the development site. Bugherd streamlines the feedback process, making it easier to communicate and prioritize tasks.

Task Management & Roadmap Planning

Task Management

• We use Asana for internal task management, tracking design tasks, deadlines, and project progress.
• A parent design task is created in Asana for the duration of the design phase, serving as the central hub for status updates and project management.
• Sub-tasks with detailed requirements and time estimates are converted to development tasks upon completion of the design phase.

Roadmap Planning

• For internal open-source projects, planning for new releases and roadmaps begins in GitHub Projects.
• Asana tasks reference GitHub issues, which contain the full requirements for each feature.

Git-Based Design Workflow

Our design workflow is structured around Git principles, ensuring a seamless transition from design to development:

New Feature Planning

1. Create GitHub Issue: Use a GitHub template for new features and plan in GitHub Issues & Projects.
2. Create Figma Branch: Corresponding to the GitHub issue.
3. Complete Design Updates: Work on updates within the Figma branch.
4. Design Review: Conduct reviews similar to pull request reviews.
5. Merge Figma Branch: Merge the branch into the main design system upon approval.

Developer Handoff

1. Handover Notes: Provide detailed notes, including all relevant Figma links, image assets, and specific considerations.
2. Export and Upload Designs: Attach updated design screens to the relevant GitHub issue.
3. Create Corresponding GitHub Branch: Use consistent naming conventions between Figma and GitHub branches.
4. Commit Code and Create Pull Request: Develop the new feature, commit to the GitHub branch, and create a pull request for review.
5. Review and Merge Code: Conduct a review and merge the branch upon approval.
6. Close Issue and Update Board: Close the GitHub issue and update the projects board.

Changelog and Versioning

We maintain a detailed changelog for both design systems, aligning versioning with plugins and themes. The LSX Tour Operator Design System starts at version 2.0.0 to align with the plugin release.

Using Bugherd for Design Feedback

Bugherd is integral to our feedback process:

• Setting Up Projects: Invite participants and install the browser extension.
• Adding Comments: Use Bugherd to comment directly on design elements, collect feedback on Figma designs, images, and PDFs.
• Communicating Changes: Use clear, concise language and prioritize feedback.
• Organizing Feedback: Categorize tasks and assign them to specific team members.
• Reviewing Designs: Update task statuses and communicate for ongoing discussions.
• Finalizing Changes: Review resolved tasks and sign off on completed designs.

Future Objective: Figma Code Connect

Figma Code Connect is a future objective for integrating Figma directly with our codebase. Initial steps include understanding Figma Code Connect, setting up the environment, and defining integration goals. Resources needed include Figma and GitHub API documentation, a code editor, Postman, and collaboration tools like Slack and Asana.

By following these guidelines, we ensure a streamlined, efficient, and collaborative design process for our open-source projects at LightSpeed. Stay tuned as we continue to refine our processes and explore new tools to enhance our workflow.

This blog post provides a detailed look into our Figma process, emphasizing our commitment to efficient and collaborative open-source project development.

See our detailed internal process document below: