![]() You can group all the folders generated under one so you can toggle viewing the specs on and off.Īnother useful thing about Measure is that it distinguishes between specs for sizing, spacing, and properties. You can add the specs on the artboard, which creates different folders for these. ![]() However, with Measure you can see the specs on the design within Sketch. Like Marketch, the free Measure plugin for Sketch generates an HTML page of the specs. Marketch, snapshot of HTML page generated when specs are exported If you change the designs after you export the specs, you need to manually generate a new file and override any previous exports. The specs are not synced with the designs in Sketch so they don’t get updated when you edit the design. Another limitation is that the HTML page generated is not ideal for sharing the specs because you have to take care of hosting it somewhere suitably accessible for others yourself. You can only see the specs once you export. The downside is that you can’t see any of these specs while working on the design in Sketch. The file generated includes an HTML page on which you can measure specs and export assets. Marketch is a free Sketch plugin that allows you to export specs as a ZipFile. Plugins like Marketch, Measure or Craft’s Inspect can annotate the dimensions between and of objects on a screen and the style used for a specific object. Categorizes the specs to distinguish between properties (e.g. Generates and displays specs in the design toolĤ. I believe a good handoff tool is one thatġ. I point out their strengths and weaknesses based on my personal experience using them. In this post, I look at a few of the design handoff tools that focus on sharing specs (spacing, properties, dimensions, colours) rather than flow, transitions or interactions. Some of these tools are standalone, and some are integrated within design applications either through plugins or as part of the application.ĭesign Handoff tools (Left to right: Sketch, InVision, PNG Express, Measure Plugin for Sketch, Marketch, Avocode, Zeplin, Markly, InVision’s Craft, React Storybook) A variety of tools have emerged in the last few years to help ease the handoff process. The process of creating these guides is time consuming and not always effective because things get missed or misinterpreted. These are a combination of style guides, information architecture maps, annotated mockups and/or prototypes of the flow and transitions. To ensure that design decisions are captured, we also provide styling specifications. Throughout the process, we hand over designs to developers. buttons, tables, tabs), gestures and transitions. ![]() When we design websites and applications, we decide on elements such as colours, fonts, layout, grids, components (e.g.
0 Comments
Leave a Reply. |