Zeplin is a tool used to create smoother collaboration around design artefacts. You can quickly export your artboards to Zeplin via a Sketch plugin. It can also be used to host exported icons and imagery and to maintain a simple style library. It even has extensions to export code snippets in CSS, HTML, React Native, and other languages.
It Saves Time
The developers on teams I work with have told me how much time Zeplin saves them. Using Zeplin means they don’t have to hunt for the correct Sketch file. They don’t have to wait for Sketch to open. Download bluestacks 4. Since they link the appropriate Zeplin artboards to the corresponding stories in their backlog, accessing the needed designs is super-quick and easy for everyone.
This is a framework which converts Zeplin designs (json schema) to React Native Code snippets - sivarajng/zeplin-to-react-native. React Native: React Native, React Native Styled Components. Flutter: Flutter, Flutter Extended, Flutter Gen. Xamarin: Xamarin.Forms. Related articles: Adding an extension to a styleguide. Exporting CSS and HTML. Developing Web projects using Zeplin. Developing iOS projects using Zeplin. Exporting React Native code snippets. Zeplin automatically generates resources, including measurements, assets, and code snippets tailored to platform needs. Here's a list of features that will help you develop Android projects: Measurements are in dp/sp. Assets are available as 5 PNGs (mdpi, hdpi, xhdpi.
React Native Zindex
Why should you use a style guide?
Using a style guide helps you save time and limit rework. Style guides are useful for both designers and developers as well as marketing teams.
For the designers, it helps with:
keeping the product consistent.
summarising all colours, font styles, components used throughout the app along with their states (idle, disabled, active, loading, success, error…) and variations (primary, secondary, icon only etc…).
explaining to the devs each component behaviour without having to repeat it on each mockup.
For developers, it serves as:
a reference of standard colour codes, font sizes, font weights to use in the code.
a library of components with the variations and states they can have.
a compilation of components behaviour so as not to forget any cases.
For marketers, it helps with:
a way to communicate brand standards.
a library of assets to use in marketing.
Try Zeplin
Zeplin a connected space for product teams It’s all about the details. Handoff designs and style guides with accurate specs, assets, code snippets—automatically.
Other design tools
Zeplin generates asset formats and scales based on your project type and density. When creating a new project, you can choose the project type and density that fits your needs.
Project type
React Native Zindex Android
Zeplin supports four project types; iOS, Android, Web and macOS. When exporting designs to a project, all resources (including measurements, assets and code snippets) are generated automatically based on its project type.
☝️ Since resources are generated during the export process, it's sadly not possible to change the project type after it’s been selected. If you need to change a project’s type, you will need to create a brand new project.
Here are some key differences among project types:
Measurements are in points on iOS projects while they're in dp/sp on Android projects.
Assets are downloadable as PNGand SVG on Android projects and PNG,SVG, and PDF on iOS projects.
Microsoft blob storage explorer. For iOS and Android projects, Zeplin can generate React Native code snippets. You can enable it for each project separately from the styleguide.
You can find more details about features and resources based on project types here:
Project density
Zeplin supports the following densities:
iOS: 1x, 2x, 3x
Android: mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi
Web: 1x, 2x
macOS: 1x, 2x
When exporting designs to a project, Zeplin calculates and displays the correct measurements to developers based on this density setting. Zeplin normally determines the correct density based on the size of your designs, but in some cases, you may be prompted to set it manually.
Your project density depends on the project type (target platform/device) you're working on and the original dimensions of your design. For example, if you're working on 750px × 1136px iOS screen, you will need to select '2x' as your project density. After that, if a measurement is 20px in your original design file, Zeplin will display it as 10pt to help developers out since they use '1x' values while coding.
To select or change the project density, click on the small pencil icon next to the project type and density in the project Dashboard.
☝️ The density only needs to be selected once by the designer(s), but they can change the project density anytime.
When selecting a density from the selection window, a list of commonly used artboard sizes is shown next to each density. You can use this as a reference for deciding which density to select.