When you first create a new styleguide, you’ll be prompted to choose a type. Base styleguides can work for all platforms, while 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 you plan to link to different types of projects or styleguides simultaneously (like iOS and Android). You can choose this type if you're developing multiple projects using common elements like components, colors, etc.

☝️ 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 this article: Working with percentage values
Based on the project you linked to this styleguide, assets are available in regular and optimized formats, as PNGs, JPGs, or WebP in 1x, 2x, 3x scales, PDFs, or SVGs.

Platform-specific: Web, iOS, Android, 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.

☝️ 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 Web type offers:

Measurements are in pixels.
Assets are available in regular and optimized formats, as PNGs, JPGs, or WebP in 1x, 2x, 3x scales, and as SVGs.
Measurements are also available as percentages for responsive designs. You can enable rem unit as well.
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 iOS & macOS type offers:

Measurements are in points.
Assets are available in regular and optimized formats, as PNGs or JPGs in 1x, 2x, 3x scales, and as SVGs and PDFs.
Code snippets via extensions from colors, text styles, and components.
When you first export assets into the .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 Android type offers:

Measurements are in dp/sp.
Assets are available in regular and optimized formats, as PNGs, JPGs, or WebP in mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi scales, and as SVGs.
Code snippets via extensions from colors, text styles, and components.
TextView code snippets from text layers.
When you first export assets into the res directory of your project, they 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 selected. If you need to change a styleguide type, you'll need to create a brand-new styleguide.

Related articles