Purpose Statement

This document serves as a general guide for the design handoff process. Not every handoff will be identical. A good general rule of thumb is this: Designers and Developers should aim to keep things clear and consistent throughout the handoff process.

General Procedure

A design is complete when we have written approval from the Product Owner on the Jira ticket. Once designs are approved by the Product Owner, documentation will be created and the Jira ticket will be updated with a link to the documentation and “page(s)” in Figma. The Designer may work on design and documentation simultaneously if necessaryand tickets are created for IT, the design will be broken out into pages in Figma to match the tickets. The Designer will be available for questions (see the Communication section below for more information) from Developers until the designs are built and released. Once the work is released, the Designer will archive their working files and make any updates to the UI Kit that are necessaryThe UI Kit will be updated when necessary (new components and updates to existing components).

Communication

Communication on the Jira ticket should be reserved for the following:

• new requests

• new deliverablesfunctionality

• changes questions based on requirements.

• questions based on functionality

Communication in Figma using Figma’s Comments should be reserved for the following:

...

changes made to the mockups

...

resolution of changes

...

• questions about specific elements/comps

• questions about styles

Communication should be placed on both Jira and Figma if you are unsure of where it should go.

All comments in both Jira and Figma should include tags.

Free Figma accounts are required in order to make comments. Your Ferguson email address is required when creating your account. You’ll be added to the Ferguson organization in Figma when using your Ferguson email.

Communication should happen in a timely manner between Designers and Developers. Each morning the Designer should review and respond to any questions sent over that were specifically addressed to them from the Developers no later than 9am ET. If an answer is not available at the time, the Designer should respond that they received the question and give an estimate of when they can provide an answer.

Epic: Figma links to the page that tells the story (sectioned out by logical sections)

Story: Figma links to individual checkmarks (SECTION?pages that are green-checkmarked

(SCREENSHOTS OF THIS SETUP WILL BE COMING SOON)

Documentation

Just-in-time documentation - creating just enough documentation, just in The goal is to provide the least amount of documentation that is required by IT. This is done by providing more documentation than we think is needed and fine tune/lean it over time.

UI Standards Documentation should be utilized when possible.

Epic documentation will live in Confluence. Story documentation is the ticket itself.

Design Changes

• All components in the same state within comps on a page in Figma should match from comp to comp. If they are going to be different, the Designer should create a new page.

• When designs changes are requestedcomments are created in Figma, the Designer must respond in Figma to the change comment before resolving it.

• Once designs are handed off to developersDevelopers, any changes to design designs in Figma must be commented by a Designer. These comments can be resolved by the Developers.

• Designs that are in progress and not yet approved should have a blank black square an empty checkbox beside them in the drop down menupage title. Designs that are approved and ready should have a green box with a white check mark checkbox beside them in the drop down menu. (HOW SHOULD THIS BE WORDED, WHAT’S THE DROP DOWN MENU CALLED, NEED VARIOUS SCREENSHOTS OF HOW THIS IS SET UP PROPERLY IN FIGMA)

• STAR ICON FOR SINGLE SOURCE OF TRUTH?

• page title.

• A star icon should be used in the page title for the page that is the single source of truth (epic)

...

Unapproved Design Elements

• Out-of-scope elements should not be included on delivered comps .Future state (green-checkmarked pages)

• Any future states should be a separate page in Figma.

Naming Convention

• Designers should be consistent and clear across the board on all files.NAMING CONVENTION IN FIGMA?

• When a Figma page is tied to a ticket, that page’s title should include the ticket numberName

• The Figma file name should be named after the Epic

• When possible, name layers based on potential css properties or element (CLARIFICATION)

Handoff Artifacts

• DocumentationJira Ticket

• 1 Figma Page that is sectioned out

• Jira Ticket

• Prototype

• Links to documentation, Figma and prototype

Software Changes

...

• Figma link(s) to comps/prototypes

• Documentation (not always)

• Bullet points of design changes/decisions included on Jira tickets alongside links to designs/prototypes

Software

Switching or Introducing New Software: The team wanting to switch or introduce new software must consult with other teams they are collaborating with before any change is changes/additions can be made. All aspects of the software must be considered from various teams: cost, versioning, archiving, sharing, collaborating, etc. Once the switch is approved, training must be provided to make sure other teams know how to work with each other in the new software. Procedures and documentation must be updated to include any new ways of working with the software.

Figma Tips & Tricks

• Install this Figma (Open Links in Application) Chrome extension to allow you to control where you open links (NEED EXTENSION)Be considerate of what image types you are putting into FIgma files as this can slow it down (NEED LIST OF APPROVED FILES OR SPECS

• Try to limit large files/images (bitmap)