Have you ever dreamt of building a Web Components UI Library that perfectly reflects your brand identity, but felt overwhelmed by the options? Microsoft’s FAST (Functional, Adaptive, Secure, and Timeless) toolkit can be your secret weapon! Let’s explore FAST’s potential as a foundation for crafting your own unique design system.
What is FAST?
Launched in 2020, FAST isn’t a Design System : it’s an open-source toolkit that empowers developers to build custom design systems. Think of it as a toolbox filled with high-quality building blocks – components – that you can assemble and customize to bring your design vision to life. These components are built using Web Components, ensuring seamless integration with various tech stacks.
FAST’s Strengths: One Block at a Time
FAST offers a three-tiered treasure trove:
- Ready-to-Use Components: Get a head start with pre-built components for common UI elements.
- Foundation Elements for Styling: Fine-tune the look and feel of components to match your brand.
- FAST Element Library: For the adventurous developer, craft entirely new custom components almost from scratch.
Imagine this: you can start by incorporating pre-made components into your project. As your design system evolves, you can customize existing components using FAST’s foundation elements. Finally, when your design’s needs become truly unique, the FAST Element library empowers you to build bespoke components that seamlessly integrate with the rest of your system.
This iterative approach makes FAST a perfect companion for you if want something up quick, are tight on ressources, but don’t want to be limited in the future.
A Friendly Note on FAST’s Quirks
While FAST is really interesting on the technical side, it’s not without its quirks. The design token system relies on JavaScript for configuration – a slight detour compared to an expected CSS variables approach. This does offer some unique functionalities (such as reacting to tokens change), but for simpler design systems, it might be a bit of an extra hurdle that’s not easy to make work with common Design Tokens pipelines.
The documentation, while comprehensive, could benefit from a visual refresh. Showcasing components in real-world contexts within the documentation itself would make FAST even more approachable for designers. Coming from the Design System space, FAST’s website really looks like a developer documentation website, it makes sense given that FAST isn’t just a Design System, though.
Is FAST Right for Your Design System?
FAST shines when it comes to composability and flexibility. If you’re unsure how to tackle these aspects in your design system, exploring FAST’s implementation of Web Components can offer valuable insights, even if you don’t adopt it entirely.
However, if you’re seeking a ready-made UI library with a distinct visual style, FAST might not be the best fit. Its default component styles are fairly neutral and if you don’t have a lot of budget for some UI focus in your Design System, going with a fancier choice will likely lead you to better results.
Here’s the good news: If you’re a developer looking for a technical foundation for your web component-based UI library, FAST is a strong contender. Even if you have a team of skilled developers, FAST’s pre-built components can save you valuable time, allowing you to focus on crafting unique components that perfectly align with your brand and needs.
FAST – A Foundation for Design System Success
FAST might not be a one-size-fits-all solution, but it’s definitely worth considering. Whether you use it as a springboard for your design system or simply glean valuable knowledge from its approach, FAST can help you create a system that empowers your team and elevates your user experience. Stay tuned for our next exploration of exciting web component UI libraries!
Until then, here’s a quote that really changed how I look at Microsoft’s involvement in the tech space in general, and Web Components here specifically :
Microsoft’s strategy has been incredibly effective over the years: Be late to the party but choose the right party. Once there, invest a lot and become a leader (or, in this analogy, simply take over as the host!). It worked with DirectX (winning with OpenGL and even consoles) and with Internet Explorer. More current examples include Github and Visual Studio Code, which actually took over the open-source developers’s IDE segment. Will the Microsoft FAST framework be in the same category?
Piotr Karwatka – What we can learn from FAST