Design handoff process #1241
Design handoff process #1241
Conversation
I've added 'Working with design files' section that describes all the rules that we've agreed on recently when it comes to working with Figma files, naming conventions and Project Tools. In addition, I've changed slightly the formatting of the 'Process segments' section - using bold text for the main steps in the process increases the readability of this document. Please, share your feedback regarding both the content and the form :) Thank you!
Co-authored-by: Christina Forney <christina@sourcegraph.com>
Co-authored-by: Christina Forney <christina@sourcegraph.com>
Co-authored-by: Christina Forney <christina@sourcegraph.com>
Co-authored-by: Christina Forney <christina@sourcegraph.com>
Co-authored-by: Christina Forney <christina@sourcegraph.com>
Changes according to Rob's suggestion. @rrhyne please review. Thank you!
…gn-Process-headers
rrhyne
requested review from
AlicjaSuska,
attfarhan,
christinaforney,
felixfbecker and
poojaj-tech
and removed request for
AlicjaSuska
|
Is this PR different from #1187? It seems like there is some overlap. |
| - Metrics collection: | ||
| - **Design to engineering handoff** | ||
| - Design preperation | ||
| - Ensure colors utilize the named color styles vs. the color palette where possible |
There was a problem hiding this comment.
I would add some examples:
'Ensure colors utilize the named color styles (ex. web-styles/body-color/light) vs. the color palette (ex. grey-7) where possible
There was a problem hiding this comment.
Please feel free to add enhancements like this without asking!
| - Design preperation | ||
| - Ensure colors utilize the named color styles vs. the color palette where possible | ||
| - This adds our color style variable name to the code palette | ||
| - Redline any colors, styles, margins and paddings unique to the designs (not provided by a component) |
There was a problem hiding this comment.
Let's add: '...use em values (not px)'
There was a problem hiding this comment.
You probably meant rem :)
| - Ensure colors utilize the named color styles vs. the color palette where possible | ||
| - This adds our color style variable name to the code palette | ||
| - Redline any colors, styles, margins and paddings unique to the designs (not provided by a component) | ||
| - If introducing new colors, type, or other design elements, ask for review by an engineer focused on styles and React components |
There was a problem hiding this comment.
TODO: design-engineering review process (probably using Chromatic)
| - Redline any colors, styles, margins and paddings unique to the designs (not provided by a component) | ||
| - If introducing new colors, type, or other design elements, ask for review by an engineer focused on styles and React components | ||
| - Ensure any illustrations work in both light and dark mode | ||
| - TODO: Determine method of illustration/image exports |
There was a problem hiding this comment.
Let's start this discussion. @felixfbecker would you like to share your thoughts about what would be the preferred illustrations export? :)
|
@christinaforney I've merged my PR regarding headers and design files handling yesterday. That's probably why they overlap. In this one only part about the hand-off is new :) |
Thanks! I just merged in master to resolve the conflicts :) |
|
@rrhyne is this PR still relevant? Not urgent, just going through old PRs I'm getting notified about. |
Start of the documentation for the design handoff process documentation. Let's use this draft PR to communicate on what should be included here.