When you first create a new styleguide, you’ll be prompted to choose a type. A Base styleguide can work for all platforms, and the iOS, MacOS, Web, and Android styleguides will generate measurement formats and code snippets specific to the selected type.
Platform-free: Base
The Platform-free, Base type is for styleguides that you plan to link to different types of projects or styleguides at the same time (like iOS and Android). You can choose this type if you're developing more than one project that uses common elements like components, symbols, colors, and so on.
☝️ You can link all types of projects and add all types of extensions to a Base styleguide.
Here's a list of features that the Base type offers:
Measurements are in pixels.
Measurements are also available as percentages, for responsive designs. For more details, check out our blog post on this feature.
Based on the project you linked to this styleguide, assets are available as 3 PNGs (1x, 2x, 3x), PDFs or SVGs and optimized SVGs (with SVGO). Bitmap images are also available as 3 JPGs.
Platform-specific: iOS, Android, Web and macOS
All resources, including measurements, assets, and code snippets, are automatically generated while exporting designs based on the styleguide type. These resources are also accessible from your linked project's Styleguide tab as well.
☝️ You can link a project to a Platform-specific styleguide only if they have the same type.
Here's a list of features that the iOS type offers:
Measurements are in points.
Assets are available as 3 PNGs (1x, 2x, 3x) and PDFs.
Code snippets via extensions from colors, text styles, and components.
When you first export assets into
.xcassets
directory of your project, images are added to the appropriate directories, and assets are added to your project. Next time you export another asset, you can simply select the project.
Here's a list of features that the Web type offers:
Measurements are in pixels.
Assets are available as 3 PNGs (1x, 2x, 3x), SVGs and optimized SVGs (with SVGO). Bitmap images are also available as 3 JPGs.
Measurements are also available as percentages for responsive designs.
Code snippets like CSS, Sass, SCSS, Less, Stylus, etc., from layers, colors, and text styles via extensions.
Here's a list of features that the Android type offers:
Measurements are in dp/sp.
Assets are available as 5 PNGs (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) and SVGs.
Code snippets via extensions from colors, text styles, and components.
TextView code snippets from text layers for components.
When you first export assets into the
res
directory of your project, assets are placed in the appropriate directories. Next time you export another asset, you can simply select the project.
☝️ Since resources are generated during the export process, it's sadly not possible to change the styleguide type after it's been selected. If you need to change a styleguide type, you will need to create a brand new styleguide.