<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Design-System on Fernando Ruiz</title><link>https://www.fernandoux.com/tags/design-system/</link><description>Recent content in Design-System on Fernando Ruiz</description><generator>Hugo</generator><language>en-us</language><atom:link href="https://www.fernandoux.com/tags/design-system/index.xml" rel="self" type="application/rss+xml"/><item><title>Storybook</title><link>https://www.fernandoux.com/en/wiki/tools/storybook/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://www.fernandoux.com/en/wiki/tools/storybook/</guid><description>&lt;div class="info-panel"&gt;
 &lt;div class="info-header"&gt;
 &lt;span class="material-symbols-outlined info-panel-icon"&gt;info&lt;/span&gt;
 &lt;span class="info-panel-label"&gt;Quick Definition&lt;/span&gt;
 &lt;/div&gt;
 &lt;div class="info-content"&gt;
 Storybook is an open-source development tool for building, testing, and documenting UI components in isolation. It allows developers to create components in a &amp;ldquo;sandbox&amp;rdquo; environment outside the main application, making it easy to visualize all their states and collaborate with designers.
 &lt;/div&gt;
&lt;/div&gt;

&lt;h2 id="what-is-storybook"&gt;What Is Storybook?&lt;/h2&gt;
&lt;p&gt;Imagine you are building a car with LEGO pieces. Storybook is like a workshop where you can build and test each piece separately before assembling the car. You can build the engine (a complex component) and test it on its own, or you can build a simple wheel (a button) and see all its available colors and sizes, all without needing the complete car chassis.&lt;/p&gt;</description></item><item><title>Zeroheight</title><link>https://www.fernandoux.com/en/wiki/tools/zeroheight/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://www.fernandoux.com/en/wiki/tools/zeroheight/</guid><description>&lt;div class="info-panel"&gt;
 &lt;div class="info-header"&gt;
 &lt;span class="material-symbols-outlined info-panel-icon"&gt;info&lt;/span&gt;
 &lt;span class="info-panel-label"&gt;Quick Definition&lt;/span&gt;
 &lt;/div&gt;
 &lt;div class="info-content"&gt;
 Zeroheight is an online platform that allows you to create, document, and maintain [[Design System]] websites in a centralized and collaborative way. It integrates directly with design tools like Figma and development tools like [[Storybook]] to create a &amp;ldquo;single source of truth&amp;rdquo; for your entire design system.
 &lt;/div&gt;
&lt;/div&gt;

&lt;h2 id="what-is-zeroheight"&gt;What Is Zeroheight?&lt;/h2&gt;
&lt;p&gt;Imagine your [[Design System]] is a cookbook. Figma is where you design the photos of the dishes (the visual components). [[Storybook]] is where the chefs write and test the recipes (the component code). Zeroheight is the publisher that takes those photos and recipes and publishes them in an online cookbook, beautiful and easy to use, so everyone in the &amp;ldquo;restaurant&amp;rdquo; (your company) knows how to cook the dishes consistently.&lt;/p&gt;</description></item></channel></rss>