Skip to end of banner
Go to start of banner

Design > Development Handoff

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

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 necessary. The Designer will be available for questions 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 necessary.

Communication

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

  • new requests

  • new deliverables

  • changes based on requirements.

Communication in Figma should be reserved for the following:

  • changes made to the mockups

  • resolution of changes

  • requests based on elements or an adjustment

Communication should happen in a timely manner between Designers and Developers. Each morning the Designer should review and respond to any questions sent over 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: links to the page that tells the story

Story: links to individual checkmarks (SECTION?)

Documentation

Just-in-time documentation - creating just enough documentation, just in time.

UI Standards Documentation should be utilized when possible.

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 requested, the Designer must respond in Figma to the change before resolving it.

  • Once designs are handed off to developers, any changes to design in Figma must be commented.

  • Designs that are in progress and not yet approved should have a blank black square beside them in the drop down menu. Designs that are approved and ready should have a green box with a white check mark 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?

Unapproved Design Elements

  • Out-of-scope elements should not be included on delivered comps.

  • Future state 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 number

  • Name layers based on potential css properties or element (CLARIFICATION)

Handoff Artifacts

  • Documentation

  • 1 Figma Page that is sectioned out

  • Jira Ticket

  • Prototype

  • Links to documentation, Figma and prototype

Software Changes

If a team needs to switch software (ex. Invision to Figma), they must consult with other teams they are collaborating with before any change is 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 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)

  • No labels