-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update copy-delivery.md #2388
Update copy-delivery.md #2388
Conversation
Preview url: https://benefits-2388--cal-itp-previews.netlify.app |
|
||
Ditto is our copy management system for Benefits and the Cal-ITP sites. It syncs directly with Figma and uses many of the same conventions found in Figma, including components and variables (therefore, it is important to be specific when referring to a Ditto component or a Figma variable). | ||
|
||
The Benefits project within Ditto is fully synced with Figma. Product and design may use either Figma or Ditto as their source of truth on copy, though it is recommended that Developers use Figma for all final copy. Compiler is considering using the Github integration that comes with Ditto, but has not formally integrated Ditto into their workflow as of yet. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Questions for @srhhnry
-
It makes sense to me for developers to use Figma to copy and paste English copy, but for getting Spanish copy, we'd have to go into Ditto, right? Or is there a way to check Figma for Spanish copy?
-
I know we're now using the
Ready for dev
status in Figma to communicate when a design is ready for development. But is there something similar for copy in Ditto? How are we Engineers to know when both English and Spanish copy is ready for dev from Figma or Ditto?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- For viewing copy in Spanish in Figma, one needs to have the Ditto plugin active. From there, select a frame and the Ditto plugin should automatically move to the Selected tab, and within that tab there's a dropdown to preview different variants.
Everyone has varying levels of permission, so if it is not possible to view that tab within the Ditto plugin, then yes I recommend using Ditto.
(should the above^ go into the documentation as well?)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is exactly the kind of instruction that should go in the Documentation. A good rule of thumb is: If you think you might have to copy/paste the same instructions to more than 1 person, it should be in the Docs. You could format is as 1, 2, 3 numbered instructions.
- `forTranslation` and `All Agencies` tab contains the English and Spanish translation side by side, with agency-specific copy. | ||
Figma is our primary design tool and is the source of truth for all design decisions, concepts, and directions for the Benefits app and all Cal-ITP sites. We have Figma Organization which includes developer mode, version history, and branching–a tool to explore new design directions. | ||
|
||
The development team prefers not to have admin or editor capabilities so as not to accidentally interfere with any designs. Currently there is no formal process within Figma for handoff. Instead handoffs occur over the course of two meetings, a review of the designs and then what we call “issue-fest,” or a chance for developers to create Github issues while designers can weigh in and answer questions. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The development team prefers not to have admin or editor capabilities so as not to accidentally interfere with any designs. Currently there is no formal process within Figma for handoff. Instead handoffs occur over the course of two meetings, a review of the designs and then what we call “issue-fest,” or a chance for developers to create Github issues while designers can weigh in and answer questions. | |
The development team prefers not to have admin or editor capabilities so as not to accidentally interfere with any designs. Currently there is no formal process within Figma for handoff. Instead handoffs occur over the course of two meetings, a review of the designs and then what we call “issue-fest,” or a chance for developers to create GitHub issues while designers can weigh in and answer questions. |
- Aren't we gonna use the Ready for dev feature in Figma for handoff? At handoff or issue-fest, not sure which, Design will also Merge the current Figma Branch into the main Branch, so that also indicates a new status.
- If anyone (Product, Engineering) has concerns about copy, should they put a comment on Ditto, on Figma, or some other way?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
-
Yup, I can write the Ready for Dev element in. I'd say we don't have a hands off approach with Figma though, and we rely on meetings/verbal communication over asset deliverable. Not sure when merging should happen. This time it happened after issue-fest (same meeting as hand-off), but I can see where merging after hand-off, and any updates, but before issue fest would be best. That way there's still a chance to see if there are any mistakes on the board and correct in real-time, as merging is a bit of a manual process.
-
My strong preference for comments is to have them in Figma. But I think we should note this is subject to preference and can change based on team dynamics.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm re-reading this section and I realized one thing that is confusing me: Instead handoffs occur over the course of two meetings, a review of the designs and then what we call “issue-fest,” or a chance for developers to create Github issues while designers can weigh in and answer questions.
Maybe instead of having 2 meetings that are both called handoffs, the last meeting should be The Hand-Off. And the first meeting is a Design Review. I think we can be explicit in our definition of what a handed-off design looks like.
A handed-off design means:
- The Figma file is fully synced with copy from Ditto and CrowdIn.
- The copy is production-ready in English and Spanish.
- The new designs in Figma are marked as "Ready for Dev".
- The new designs in Figma, which were previously in a branch, are now merged into the main branch.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If your preference is for comments in Figma, then we can make that the policy. You can note that all comments on copy or design should be made in Figma, and that all comments need to be submitted by the Hand-Off meeting. No comments should be added after the Hand-Off meeting ( as in, engineers cannot ask design to change anything after hand-off. that would be a new design process ).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I updated the Engineering responsibilities part, and then added some questions and suggestions for Sarah.
Co-authored-by: machiko <machiko@compiler.la>
Co-authored-by: machiko <machiko@compiler.la>
Co-authored-by: machiko <machiko@compiler.la>
Co-authored-by: machiko <machiko@compiler.la>
Just to make sure you know this, a preview can be viewed here: https://benefits-2388--cal-itp-previews.netlify.app/product-and-design/copy-delivery/ @srhhnry |
Closing this ticket for now. Will re-open PR with text that is ready. |
Updated copy