IFS Design System

Overview

This VS Code extension provides intelligent suggestions for IFS Design System-based tokens in SCSS files, enhancing your workflow by streamlining the process of incorporating design tokens into your code. Whether you're coding interfaces, styling components, or refining layouts, this extension offers convenient access to your locally installed design system's tokens directly within your editor.

Features

• Token Suggestions: Instantly access design system tokens as you code in SCSS files, reducing manual lookup and ensuring consistency across your projects. (Supported token types)

• Efficient Workflow: Accelerate development by eliminating the need to switch between tools or reference external documentation for token values.

Getting Started

This extension retrieves the Granite Design Tokens available in your local project within the Design Token node module. Therefore this extension will always provide you with the locally available Design Tokens.

1. Install the extension from the Visual Studio Code Marketplace.
2. For this extension to function, it requires for the local project to have the @ifsworld/granite-tokens node module installed.
3. Start coding in SCSS files, and enjoy seamless token suggestions right within your editor with autocompletion intellisense for the given SCSS property.

Configuration

Currently this extension does not contain any configurable settings or impact on VS Code settings.

Known Issues/Limitations

• A known issue in the v1.0.0: font-weight autocompletion is disabled.

Usage with IFS Design System

This extension is specifically tailored for use with the IFS Design System, providing seamless integration defining the foundational elements of the design system, such as colors, typography, and spacing. Design tokens promote consistency and facilitate easy updates across the system and their usage within your project. Developed by the UX team of the IFS Design System, you can trust that this extension aligns closely with the design system's principles and guidelines. For more information regarding the design system check our Design System guide.

Feedback and Contributions

We welcome feedback, bug reports, and feature requests! If you encounter any issues or have ideas for improving the extension, please don't hesitate to reach out.