All Collections
Global Styleguides
Choosing a styleguide type
Choosing a styleguide type

Learn more about global styleguide types and their differences

Didem avatar
Written by Didem
Updated over a week ago

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 use 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.

Related articles

Did this answer your question?