One of the advantages of Vega is that it makes it possible for consistency in design between designs and eventual development work. Working with Vega as a designer, you may be used to working with Figma and the Vega Plugin.
However, to ensure that developers are able to work with and easily replicate your designs in code, it is important to understand a few basic guidelines before handing off your materials.
If you design using the Vega plugin, this ensures that components and tokens are automatically assigned which can easily be converted into code.
That said, there are a few basic guidelines that can improve the workflow.
Use consistent naming conventions, and name your frames. If you choose camelCase, stick with it. Similarly, if you use hyphens in the name, use this for all file names. Use descriptive names that refer to the function or description of the image being created.
If there’s a lot of work that occurred previous to the final component, it is best to archive it. Provide only the final draft to the developer that includes the graphics necessary to construct it in code.
When designing for Vega, colors and other tokens should never be “broken out” of Vega to make tweaks. This not only runs the risk of severing the file from the tokens, which are what developers use to include in the code, but they also run the risk of breaking accessibility and will remove any possible scalability to the end product.
If possible, show a sequence of actions to the developer for how actions should appear on the page in order. This helps increase understanding of the user journey.
Figma files that are handed off to developers should be complete. While it may seem necessary to continue to tweak a file while it is being worked on, this can cause problems for those writing the code. If there are guidelines or additional changes that need to be made after hand-off, these should be kept separate; perhaps as notes in a clearly defined part of the file.
When handing over designs based on existing components, please include a link in the mockup to the referenced sticker sheet file.
Include the UX designer in the handoff meeting between designers and developers; this way important UX concerns can be addressed and defined to the developers. In fact, if UX designers could be more intimately involved in the process even after the handoff, this would certainly help improve the quality of the eventual results.