Different platforms come with varying sizes of the artboard. Artboard sizes may differ according to the needs of screens. So, it’s better to understand the different sizes of the artboard before drawing. The artboards are the self-contained design areas where you can draw your designs. Thus, Zeplin is a crucial piece of any product development puzzle.ĥ Things to Keep in Mind Working with Zeplin 1. Flexibility is the most significant advantage of the app updating assets dynamically, exporting assets into native code, saving time and tedium. The best part is the app will automatically version control your files and allow you to continue collaborating.Īs seen from the Zeplin example, a workflow bridge empowers designers to annotate screens and make the handoff phase easy with precise and complete specifications. Continue updating the file by exporting artboards from Sketch. Sharing, collaborating, and using version control- Here it is, your Zeplin file is ready to be shared with the team. A note can also be added by holding down Cmd or Ctrl and clicking anywhere on the screen.ġ0. Annotating your designs in Zeplin- To add notes to your design, select the add note icon and pin it to a component in the detailed view of a screen. Select the project resolution similar to your Sketch artboards.ĩ. Different codes will be generated based on the project type. Creating a new project in the Zeplin desktop app- Depending on the platform you are building for, choose the project type. Choose the slice option to export assets directly from Zeplin.Ĥ. Highlight the group and locate the 'Make exportable' option. Making assets exportable in Sketch- Once the assets are grouped into symbols, the page is opened up in the Sketch file. Create symbols for common assets and elements and save colors and fonts in Document Colors and Text Styles, respectively.ģ. Depending on the type of projects, the asset's naming convention is automatically adjusted, making exporting them easy. Preparing a Sketch File- In Sketch, organize your layers and assets. #Zeplin app downloadThen, download the Zeplin desktop app or Zeplin iOS app and the plugin for SketchĢ. Zeplin Login- The first step includes creating a Zeplin account or logging in if you already have one. Let us see how a prototype can be created using the Zeplin app in 10 steps:ġ. How to create a prototype in the Zeplin appĪs you know, what Zeplin is, it is essential to know that it can serve as the 'single source of truth for product teams because of its capability to create component libraries, generate living style guides, and versioning design assets. #Zeplin app how toPart 2: How to create prototypes with the Zeplin app alternative.Part 2: 5 Things to Keep in Mind Working with Zeplin.Part 1: How to create a prototype in the Zeplin app.This article offers a quick walkthrough for creating a prototype with the Zeplin app used by leading product teams and introduces an alternative. #Zeplin app codeThe handoff is facilitated by taking a design from Adobe XD, Photoshop, Sketch, or Figma and exporting them into a format that can quickly generate style guides, code snippets, assets, and specs. Though it is quite robust but feels lightweight and thus is the industry standard for handing off designs to engineering. Not a huge range of 3rd party plugins.Zeplin app is a well-designed application program that works as a collaboration tool bridging the gap between developers and designers by offering a connected space for product teams. Components and styleguides don't always work as expected and in some instances some styles are not detected at all. #Zeplin app PcAs a Mac and PC user, the PC application is practically useless in my opinion, there are so many quirky features, which I think take away from the usefulness of the product across different platforms. For example there is no global search, you have to search under the correct project to find a screen and you might not always know where you put a certain screen. The UX of the application leaves quite a lot to be desired in a lot of places, in particular the navigation system and searching are troublesome. It seems that there are constant updates to the product, which means that new features and fixes are always on the way. It is positive that the company are working hard to come out with new features, however I think a lot of the existing stuff could be polished to give a better experience.Įasy developer handover, a single source of truth for design and frontend development in your projects, the push for new features like flows and the new labelling features (annotations, behaviours, etc) is nice. I would never recommend it to be used as a standalone tool, but for. I find Zeplin a good (but not great) tool for helping to manage your design/developer handover, but you absolutely need to have a strategy for using it. A good tool, but missing the polish it a great tool
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |