Design Development
Toolkit 2021

https://www.bitdegree.org/learn/chrome-workspaces

Experimenting with CSS rules and HTML code in the Elements panel is convenient if you need to change the appearance of your website temporarily. However, if you want to make such modifications to the front-end permanent, you need to learn how Chrome Workspaces are set up in DevTools.

If you are manually transferring changes from DevTools to local files, Chrome Workspace will perform this task automatically and save precious time!

Developers use Chrome Workspaces to save the modifications to CSS, DOM, and JavaScript of a page. Therefore, you can automatically transfer various changes that you made to the style or code.

To set up your workspace, you need to perform two main actions. First, map your local folder to your workspace.

Then, map local files to URL to make sure that the applied changes will persist. Both of these actions are explained in this tutorial.

If you need to open local file in Chrome, you can do this by selecting Open File from the File menu. You can also use shortcuts: press CMD + O on iOS. For users of Windows and Linux operating systems, Chrome open local file works by pressing CTRL + O buttons.

After setting up Chrome Workspaces, you can easily modify files without having to jump from the browser to the code editor!

Contents

• 1. Chrome DevTools Workspace: Main Tips
• 2. Workspace Explained
• 3. Ways to Manage Local Files
• 3.1. Add
• 3.2. Delete
• 3.3. Back Up
• 3.4. Refresh
• 3.5. Search
• 4. Limitations of Workspace
• 5. Chrome DevTools Workspace: Summary

Chrome DevTools Workspace: Main Tips

• In this tutorial, we show you how to set up and use the Workspace in Chrome Developer Tools.
• Workspaces let you save the changes you make during live edits in the Sources panel.
• While changes to CSS via the Workspace are shown immediately, you must manually save and refresh to display modifications to the DOM.

Workspace Explained

Chrome Workspaces are used for saving the changes you make via the Chrome Developer Tools interface.

So, this includes changes to the DOM, CSS or even JavaScript.

If you are developing locally, you can add folders to DevTools' workspaces by:

• Right-clicking on the interface that is displaying source files, and selecting Add Folder to Workspace.
• Dragging and dropping the folder on the Sources panel interface.

Then, you will be able to access files in the Sources panel interface and save the changes by right-clicking the tab of the file in the editor and selecting SAVE.

After refreshing, the HTML DOM will show the new content as well.

Ways to Manage Local Files

With Workspace, you can also manage files on your computer.

You can add, delete, back up, refresh, and search for them. Consequently, this makes developing with DevTools even more convenient. We provide simple instructions on how this file-management is done.

Add

Find the folder in the right pane of the Sources panel and right-click it. This is the folder you are planning to add a file to.

Select the option New File.

You need to type in a name for the file. The extension must be a part of the name as well.

Delete

Find the file in the right pane of the Sources panel and right-click it.

Select the option https://www.bitdegree.org/learn/goon/datacamp)

Back Up

Often it may be useful to create a duplicate of a file before major changes are applied.

Find the file in the right pane of the Sources panel and right-click it.

Select the option Make a Copy.

Add a name to the copy of a file. Remember that you must include the extension in the file name.

Refresh

To refresh a file or a folder, right-click it and select REFRESH.

This feature is helpful when you make changes using an external editor, and want such modifications to be displayed in Chrome Developer Tools. Usually, this is done automatically, but you can do this manually as well.

Search

To open up the Search menu, press CTRL + SHIFT + F on Windows and CMD + OPT + F on Mac.

These shortcuts open a pane on the bottom of the Sources panel.

In this pane, you can search for files by their names or by their contents.

Also, you have various options for whether they should be case-sensitive, or whether they must look for a regular expression.

Limitations of Workspace

The Chrome Workspace seems like a handy and dynamic tool for editing pages on the browser.

However, the feature comes with certain limitations.

The following list contains the limits of Workspaces in Chrome:

• In the Elements panel, only changes to CSS persist, not to DOM.
• You can only save CSS changes into .css files.
• If files are mapped to a remote server instead of a local one, Chrome will reload the page from the remote one upon refreshes. The changes will persist on disk anyway while editing in the Workspace.
• If a file is mapped, the full version (including the file extension) must be in the specified path.

Chrome DevTools Workspace: Summary

• Our tutorial explained how you can prepare Chrome Workspaces and use them.
• Workspaces allow people to automatically save changes they make in the Sources panel.
• While modifications in the CSS are displayed automatically, changes in DOM need to be saved and refreshed manually.

https://blog.bitsrc.io/how-we-build-our-design-system-15713a1f1833

How we Build a Design System

Building a design system with components to standardize and scale our UI development process.

In this article, I will show and explain our process of creating a design system. I will share real examples every
step of the way.

Design systems were created to bring order into an inevitable entropy. The first design system was introduced by NASA in 1976, and
today nearly all large organizations like Uber, Pinterest, Airbnb,
or Shopify have such a system to bring consistency into the chaos of more products and teams.

At , we build tools for 150,000+ developers
working with components. Our platform helps developers build, share, and collaborate on components to speed up and
improve web application development.

We enjoy a Design System driven by Components.

Over the past 2 years, we’ve been “dogfooding” our platform to build a design system and turn it into a living
ecosystem of shared modular components.

The benefits of our system go way beyond UI/UX consistency. We greatly accelerated and scaled our development,
improved our product quality, and greatly improved work between developers, designers, and everyone else.

By letting everyone create and share components in a collaborative way, we are able to achieve faster and wider
adoption of our design system.

In this article, I will focus on the developer-side fo things, and will share our goals, process, and results. Feel
free to AMA in the comments below.

1. Visual Language
2. Shared Components
3. Documentation and Discovery
4. Incremental Upgrades
5. Rippling Changes to Dependencies
6. Project Updates
7. Team Communication
8. Designer — Developer Collaboration

1. Our Visual Language

Audit, then order.

Our process of creating a visual language was a bit different than what you would read in most articles on design systems.
This is a privilege saved for larger enterprises and is often a luxurious choice for younger companies.

As a growing company, we didn’t have the time to stop and turn our design system into a large and complex project.
Instead, we had to audit and turn our existing visual language into an organized system.

This process, led by Bit’s head of design Amir
Shalev, was twofold: First auditing our existing styles and elements, and then
creating a consistent system to standardize our visual language as a strong yet flexible base.

Our surfaces and colors used in bit.dev

Visual consistency means creating a unified style-guide standard for colors, fonts, sizes,
positions, and every other part of your visual language. Aspects such as typefaces, typography, primary and
secondary colors can still be specified as part of the design system.

In addition, we needed to create a consistent set of UI elements that can be later implemented as components using a
modern framework (e.g. React).

Our buttons, avatars, and other basic components

To make your system of elements actionable n the real world, it must include more than just a set of basic UI
components like Button or Avatar. It should include concrete examples of more specific instances or compositions of
components, which are the most basic implementation of your features.

Composition of components to create more concrete and advanced features

The design of your system is not ready until you have two assets:

a) A style-guide that defines the styling and implementation of your UI. This is usually a rather
long document with a lot of text and typography.

b) A set of reusable visual elements that bring together both visual (UI) and functional
(UX) consistency through components. This is usually a rather large canvas with elements drawn on Figma
or Sketch
etc (we use both).

2. Shared Components

Building a component ecosystem.

Some people just publish a single-versioned package with all their components. We prefer creating a shared component
ecosystem.

Our process

If you head over to the you will see
something awesome. When the mouse hovers over a component, a highlighter will turn on, indicating the
component's name, version, and parent Scope. Try it.

](https://bit.dev/)

The Bit.dev homepage — a composition of shared components

What you see here is a page composed of
shared components. However, these are independent components developed and owned by different teams and
published from different projects, which are mixed and integrated together.

At Bit, we have more than just one design system. We have different teams that build and share their
components, in a UI component ecosystem.

If you hover over components like link or paragraph and click the links, you will see
that these components are part of the “”
Scope. This is our most basic design system, developed by our design system team in an
autonomous GitHub repo, and published to Bit.dev for everyone to
use.

](https://bit.dev/bit/base-ui)

“Base-ui” — Our base design system components

The marketing team, however, needs some more concrete components like a marketing “heading” or “action-button”. These are not a part of the base-ui
design system but are a part of another Scope called “Evangelist”. They belong autonomously to the
marketing team in this GitHub repo. Since they use components
from base-ui, they get updates from the base-ui team.

](https://bit.dev/bit/evangelist)

“Evangelist” — Our marketing components

Evangelist is just one of many Scope of components that compose and extend the base-ui components. In fact, each team
in the company builds and shares its own Scope of components with everyone else.

Instead of publishing a single one-size-fits package for components, we create an ecosystem where everyone works
together yet deliver independently. The design system’s team role is to facilitate and regulate, not block or
enforce.

This turned out to be a huge success, and we were able to reduce the building time of new marketing pages by ~75%
while keeping our design consistent. Try visiting the bit.dev/enterprise
page or /support pages to see examples. Similar success was recorded by
many other teams in the company.

Working with our own tools

Our own “dogfooding” of Bit means we build the way we help other people build. We’ve been doing so for a few years,
since 2017. Here’s the gist.

1. We use Bit’s OSS Workspace to develop, manage, and publish
   decoupled components in different codebases owned by different teams.
2. We enjoy Bit’s cloud platform to help all teams smoothly expose, share, and
   integrate components with each other.
3. The design-system team provides our base components, controls updates, and regulates changes to ensure
   consistency and standardization.

Choosing React

We chose to use React back in 2017 for a variety of reasons, and have been very happy with our choice. Since the
introduction of Hooks and Context API in React 16, the ability to decouple components from each other even in terms
of state management, for example, has become phenomenal.

Yet, we’re seeing many teams choosing to use Bit for Vue or Angular and even Stencil Web Components. We’ve even been
working with the Angular team itself to provide support for Bit with Angular. After taking everything into account,
we believe React is the best solution for us at this point.

Independent components

Bit workspace helps you build modular projects, while enjoying a simple and holistic dev experience. Each component
is independently developed, built, tested, documented, published, and integrated into new applications. All
components are composed and managed together in harmony. Try
it.

Standardizing development

Another great way to achieve consistency in design is to standardize the development of components. Bit helps us do
so with a variety of features such as standard component dev environments, reusable docs templates, and even
extensible and reusable build pipelines to standardize the release process.

Customizable, extensible, reusable build pipelines

3. Documentation and Discovery

Always up to date. No extra tools.

Another advantage we have when working with Bit is that we don’t need to create or maintain extra documentation
websites for components.

Local development

As we write components, Bit’s UI presents the documentation for every component in the local development environment.
This includes descriptions, examples, and even compositions that render the component in isolation.

You can create customizable and reusable docs templates so that all components can be documented by the same
standards and design.

Docs are a part of local development

Docs on the cloud

Docs are just a part of every Bit component. When it is exported to the cloud, its docs become the front-page of the
component for everyone to see. Docs can be viewed and explored in the same place the component is hosted. If you
install or import a component, you can locally develop the docs too.

“Tokens, then React, UI Kit, then Doc Site for changed links to those + release docs”

— Kaelig Deloumeau-Prigent, Developer, Shopify’s Polaris

All the docs on Bit.dev are exactly what we see when we develop locally. With every new version of a component, its
docs can be easily updated too. No extra overhead, no complex processes, no outdated documentation.

What you develop locally is what you get on the cloud

Discoverability and search

And as we have more and more components, Bit.dev makes components discoverable with features like
component-search and context-filters that help us instantly search through many components with
ease.

Head over to bit.dev and search thousands of OSS components, or add your own

4. Incremental Upgrades

Independent component versioning.

Our design system is versioned by component, and not as a single package.

Versioning
independent components is much better than versioning all components as a single package.
Independent per-component sem-ver has been a game-changer for us. I’d also suggest reading this wonderful post
by the awesome Nathan
Curtis. Here are the key advantages for us:

1. We only get updates you need to the things you use.
2. We easily and quickly upgrade a single component.
3. We easily hotfix or rollback any component.
4. We mix and match components to create anything.

Bit helps us version and publish each component as an independent package. Since each component is versioned
independently, our different projects can get incremental upgrades to components, instead of just one large package.

If you head over to this
component you will notice that it is currently on version 1.5.0, and started on version 1.0.0 a while back.

This gives both our designers and developers great freedom to constantly innovate and release upgrades to production.

For example, here is version 1.5.0 of
‘button’ used in production.

Evangalist/button@1.5.0

And here is the previous version 1.4.0.

And here’s the earliest version 1.0.0 of
‘button’.

Evangalist/button@1.0.0

If you head back to version 1.5.0 you will notice that it has an array of examples that support more design use-cases
than ever before.

Our designers and developers are able to freely innovate and deliver upgrades without having to wait on large bloated
versions or long releases.

Component developers can control each component’s version bumps according to sem-ver rules, view its history, and
even its view changelog.

App builders don’t get updates they don’t need. Everyone is happy.

5. Rippling Changes to Dependencies

Managing all component relationships.

Bit manages the dependency graph between all components in a project. This means that when we upgrade or break a
component, Bit will “know” which other components depend on it, and will run their builds and tests.

As a result, it becomes much easier to develop many components inside a single project, since it’s easier to master
their internal relationships.

“If we upgrade and break a component, we have to go through and fix all the dependent components”

— Jony Cheung, Software Engineering Manager, Atlassian’s Atlaskit

On every change, the builds and tests of all dependant components will run and let us know exactly what’s broken and
what’s not. If all is well, we can simply tell Bit to bump all dependant components at once.

We’re now working on a new product called Ripple CI. Through the cloud, Ripple’s build process will
propagate changes to all dependant components in all of the organization’s applications. We (and you) will be able
to see exactly how every component is impacted, where, and how, then fix and release (want to learn more? ask to get
in our Beta program).

6. Project Updates

Automated with a GitHub Integration.

We use a publically
available integration to connect Bit.dev with GitHub. When a new version of a component is published to
Bit.dev, it will “know” which GitHub (or GitLab) projects should be getting this update.

Then the process becomes fully automated.

The new version of the component is sent to all-consuming projects as an automated Pull-Request that can be accepted
with one click.

This makes it very easy for our design-system team to continuously deliver upgrades and help all product-builders
accept and integrate the changes.

And, our design system team can monitor who forgot to update what and where at all times. Here Gilad
Shoham who leads our core team just avoided a serious nudge! Watch out Gilad, we see everything.

7. Team Communication

Automated with a Slack Integration.

When a new component version is published, all teams that use this component (i.e. have this component as a
dependency) will get an update notification via the platform and also via
a Slack integration.

So, for example, when a version of ‘button’ inside ‘shopping-cart’ gets exported, our team gets a notification that
includes the user’s name, the type of action (export), the number of components related to that specific action.

Here Eden
Ella from the Envagalism team is caught upgrading buttons.

When importing, the same notification shows but with the origin Scope.

This workflow helps everyone stay in sync and work better together.

8. Developer — Designer Collaboration

Working together over code, in a visual way.

A design system means
different things to designers and developers.

Designers usually talk about elements on their canvas. Developers talk about the React component in their IDE. Users
will get the code, not the design.

That’s why it’s critical to include designers in our UI development process.

We use two great tools to achieve a firm, mutual handshake.

The first is Zeplin
— Which is a great way for designers to work with developers. We use to translate and organize design tasks into
development tasks, and we work with it every day.

The second is — Which is a fantastic way for developers to work
with designers. It creates a bridge for our designers to take an active part in the development of UI components.
Moreover, helps our designers to monitor and collaborate on code changes and new versions of components.

💡 The Zeplin and Bit teams are now working on a joint integration!

Designers can see and try the actual React components in a visual way

We use Bit to expose all our components to our designers and help them always make sure everything stays perfectly
aligned with the design.

Features like hot-reloading rendering and editable examples are a great way for designers to view components, and
even try different designs hands-on.

When there’s a new component published to Bit.dev, or a new version of an existing component, designers can instantly
and visually see what changed. That makes it easy to ensure everything stays consistent with the design.

Then, after designers approve, the change can be sent as an
automated PR to all projects affected by the change. This means our designers now work with developers
directly on the development of components. Cool, right?

In the near future, our team intends to add more designer-facing features to Bit.dev such as an interactive property
panel, so designers can create changes to components, and save them as new versions. Should be ready in 2021.

Conclusion

NASA’s Design System 2020

Creating and keeping a consistent UI/UX across every touchpoint of your products helps users intuitively navigate,
and successfully interact, with different parts of your applications without confusion. It’s your brand.

You need a good brand.

In our process, we have been creating a design system from the ground up. We audited the existing design, then turned
it into an orderly system that defines our visual elements and styleguide, which tell our Brand’s story.

We rely on our own tools cloud platform to create a system of shared components that
brings everyone together in the process. We let components drive the development of our products, in a democratized
yet regulated ecosystem. This system gets fast and almost absolute adoption.

I hope this helped you learn a little bit about our process and the possibilities that exist out there to build web
applications together in the modern world.

We’ve been helping many really great teams build their own systems in a similar way, and please feel free to reach out to us and ask anything!

Thanks for reading 🍻 🎨 ❤️

https://medium.com/ux-power-tools/everything-you-need-to-know-about-invisions-new-design-system-manager-including-how-to-build-one-3d32a40c22ea

Everything You Need to Know About InVision’s New Design System Manager, Including How to Build One

Team collaboration, made simple.

His name might now sound familiar, but Ransom E. Olds is considered by many to be the founder of the automotive industry and patriarch of mass production. Maybe you’ve heard of the Oldsmobile? He’s that guy.

This forgotten pioneer is credited with developing the assembly line, which helped him build the world’s first mass-produced automobile, the Oldsmobile Curved Dash. Now there’s a car!

The credit for the invention of the assembly line often goes to Henry Ford because of one very critical addition — Ford put the cars on a conveyor of sorts, creating the all-important *moving* assembly line.

The assembly line is one of the most extraordinary innovations ever developed. For the first time, products could be assembled quickly and consistently without sacrificing quality. There was no guesswork — products coming off the line looked the same and worked the same, every single time.

The concept has been improved and adapted across all industries to accelerate production and improve output, and it’s finally made its way into the mainstream design practice with design systems.

The Right Time

If you’re building digital products at scale with an in-house design team of more than one person, it might be time to start building out a design system.

There are varying levels of sophistication and complexity, but all systems include some kind of a collection of reusable elements and components. When you’ve settled on an elemental set of design pieces, you can start codifying how and when they’ll be used, and save them in a central location for assembly-line-style fabrication by your design team.

InVision Design System Manager (DSM)

We’re going through an industrial revolution of sorts where new design tools are released every single day, and it can be hard to see through the clutter.

After vetting various tools, I ultimately ended up coming back to InVision DSM plugin because InVision has and always will be central to our design delivery workflow. It just made sense to me to stay in the ecosystem.

Note: I haven’t switched to Studio because my agency is very engrained in Sketch. At this moment, it would be a costly switch, but we’re not ruling it out. I hear great things, and the time may be more right in the future.

DSM is the Ford of design systems, offering an improvement on the concept which makes it easier to update and scale a design system without abandoning your design tool of choice.

Why not just use Sketch Libraries?

Totally understandable question — I asked the same thing. Here’s why I like it:

• Drag-and-drop interface
• You can search for components
• Symbols are organized visually in a toolbox
• Team sharing is simpler
• Version history and version deployment
• Automatically-generated online style guide

Building Your Design System

Let’s break down every step required for building out your design system in InVision DSM. It’s worth noting that full-blown design systems typically include design, philosophy, and code. I’ll be covering the design portion in this article, but just recognize that it’s just one part of a larger assembly line.

I’m going to assume you’ve already built out your styles and symbols…if you haven’t done that yet, feel free to follow along using , the sample design system provided by InVision DSM.

Open up your design system Sketch file where you’ve been building out the various components of your design system, and let’s get started.

Step 1: Creating a Library

Head to your InVision web dashboard and click on DSM.

In the same way that you need to create a new InVision Project before you can start syncing screens, we have to create a new design system library. As your design system grows, it’s best practice to compartmentalize your system components across multiple libraries — one library for desktop, one for iOS mobile, one for Android mobile, one for core components, one for product-specific components, etc.

Click Create New Library to get started:

Step 2: Downloading the Plugin

Your design system “shell” is ready, and it’s time to start filling it with elements, components, and saved styles.

Download and install the InVision Craft plugin if you haven’t already. If you’ve never used it before, you might get confused when you open the app because you don’t see anything launch. You’ll find it in your Mac menu bar.

Make sure you activate the DSM tool under the Tools tab at the top.

Craft | InVisionCraft is a suite of plugins to let you design with real data in mind. Manage them via the new Craft Manager for…www.invisionapp.com

If you installed it correctly, you’ll see a new vertical toolbar inside of Sketch:

Step 3: Understanding the Library Sections

Click on the cog shape at the bottom (it might be in a different place depending on which tools you have activated in Craft Manager). You’ll see the DSM toolbox open in a new window, and your new library shell should already be selected:

Pro Tip: Show and hide this window by pressing Command + L!

A DSM library is divided into five sections (called “Folders”) by default:

• Colors: This is where you’ll put all of the colors used in your system
• Text Styles: This is where you’ll put all of the saved text styles
• Layer Styles: This is where you’ll put all of the saved layer styles (fills, borders, shadows, etc…)
• Icons: This is where you can organize all of your design system icon symbols.
• Components: This is where you’ll put all of your symbols.

Folders

Folders are probably the most convenient tool in DSM because they allow you to thoughtfully organize the pieces of your design system so they make sense to everyone using it. You can even create folders within other folders to add deeper organization (currently limited to two levels of nesting).

Step 4: Adding Colors

Select the Colors folder and click the + button in the bottom right. A modal will pop up asking you to name this color palette. You can have multiple color palettes based on your color system, so feel free to create one or many.

DSM will scan your document to find all of the colors that you use. Select which ones you want to add to this palette, then click Add Colors.

Click the text below the color swatch to rename your colors to something a little more useful:

DSM let’s you add descriptions to components in your library, which is great for adding usage guidelines and design principles:

The rich text editor is pretty dope – I don’t have to hack it with my own homegrown formatting.

Step 5: Adding Text Styles

If you’re not already using text styles, I *implore you* to start immediately. When you design products using text styles, it makes it mind-numbingly easy to make file-wide updates to the font by just updating the style, then syncing.

Anyway, adding text styles is super easy because DSM just does it all for you. Click into the Text Styles folder, then click the + button in the bottom right:

It looks like it’s pulling duplicates, but it’s not. I have two text styles set up for left- and center-alignment!

DSM will auto-detect every text style in your document. Just click Select All, and Add Text Styles.

Step 6: Adding Layer Styles

Click into the Layer Styles folder, then repeat the previous step. Pretty easy!

Step 7: Adding Icons

It’s important to note that icons don’t have to be symbols in order to add them into your DSM library.

*!!! A Very VERY Important Note !!!
*DSM supports deep-nesting in symbols. This means that if you’re using the color symbol technique to allow you to change the color of your icons, DSM will automatically scrape your file for all nested symbols and import those into the library for you automatically. This means you do not need to import your color symbols. Just import your final symbol composites…not the individual nested symbols that make up the final component.

Click into the Icons folder, select an icon layer or symbol, then click the + button to add. Note: You can select multiple icons at a time and add them in one fell swoop. No need to do them one-at-a-time. Phew.

I strongly recommend you take some time organizing your icons into an understandable sub-folder structure. It’ll make it easier to find them later:

I usually divide mine into the following:

• App Icons: Product icons for things like Twitter and Facebook.
• UI Icons: Standard UI icons like settings, delete, user profile, etc.
• Toggle Icons: Things like checkboxes, radios, and switches.
• Misc Icons: Anything else that doesn’t fit in the above categories.

Step 8: Adding Components

You should have the hang of it by now! Click into the Components folder, then click the + button to start adding your reusable elements and components.

This is where you’ll want to be *super* organized with your folder structure:

Remember, DSM will automatically import any deeply-nested symbols that make up your larger symbol composites, so you only have to import the “final component” into DSM:

The Chips above have lots of nested symbols in them to allow for choosing different avatar styles (image, initials, icons), chip color, and text color. I only had to import my final chip symbol into DSM. When I’m using chips from my design system in another file, DSM will bring all of those nested symbols with it, including any nested symbols that have the same artboard size.

It’s really really nice.

Step 9: Deploying and Using the System

When you’ve finished adding all of the necessary components to your design system, they’ll instantly be available to everyone on your team! They’ll just have to click sync to update their file with the latest-and-greatest from the shared DSM library.

On the Enterprise plan, you’ll have the ability to do some fancier things like library versioning, user permissions, and library access control.

If you’re on the enterprise plan and want to release a new version, just click on the dropdown in the top left, then choose Release new version…

Your new design system version now exists, and if you’ve already released an earlier one, you can see what’s been changed by clicking Version history…

This will take you to a web view of your change log, just like you might see when you update an app on your computer:

You should really aim to be a lot more verbose and detailed than I was in the above screenshot so that your team knows what has changed.

Speaking of team, you’ll probably want to invite some other designers to use, edit, and manage your new DSM library.

From within your library in the web interface, click the Invite button in the upper right of the screen. You’ll see a popover where you can invite other designers.

Note: If you’re on the Enterprise plan, you’ll have the added ability to invite users to View, Edit, or Manage (admin) this library.

You can also visit the People tab on the DSM home screen to view, edit, and add collaborators to your libraries.

These permissions and roles are only available on the Enterprise plan.

You can quickly jump to this page from within the DSM plugin, too:

Step 10: Making Updates to Your System

Since you’re the “master librarian” of your new design system, it makes sense that you’ll want to make updates from time to time, whether it be adding new components, or updating existing ones.

Click into the folder that contains the component you want to update, then click the + button. If DSM detects that the symbol already exists, you’ll get a dialog box that looks like this:

Decide whether you want to Create New or Replace Existing, and the change will propagate into your DSM library:

When updates are made in your library, members of your design team will get notified that components have been updated:

All they have to do is click Sync library to document and the changes will be reflected in their document, with all existing overrides (like text) preserved:

Really-Quick-Side-Note: Anyone who shouldn’t be poking around in the library symbols can just be set to be a Viewer instead of an Admin or Editor inside of the collaborator permissions. Protect your system from any unwanted changes!

Summary

In this article, we learned how to create a library, install the Craft plugin, build out your library, and deploy your system. You and your team are now ready to start using your brand new design system!

I helped InVision create a sample design system called so you can see how nice it looks in their web view. and the , and you can begin assembling your own library with the DSM tool using the Render system as a starting point.

Click above to view the completed Design System on InVision!

https://blog.prototypr.io/bringing-design-system-components-from-production-into-framer-x-786e89be2250

Bringing Design System Components from Production into Framer X

Spoiler alert: It’s easier than you think

At Datadog, the speed at which we design and build components into our
React-based design system has been increasing. And with greater speed comes the challenge of representing those
components consistently in our design tools.

Our team received invites for Framer X beta and we’ve spent a few days testing
its capabilities. The power of Framer X lies in its ability to allow designers to design on the canvas and with code
interchangeably.

Code from Framer X is not meant to be production code, but it does have the same capabilities as a regular React
project. So we set out to explore the possibility of a workflow to bring our production components into Framer X.

We wrote this article as part guide, part documentation. It follows the process we went through to get our production
components into Framer X.

Getting started

This guide assumes you have a basic development environment setup with Node, Yarn and Git, as well as basic Javascript and
React knowledge. Let’s start by cloning the build system repository:

git clone https://github.com/shiftsave/framerx-build-system.git

Next, install the dependencies:

cd framerx-build-system && yarn install

Bundling the codebase

First of all, we needed to bundle our production codebase into a format that Framer X could interpret. That means
plain ES6 and CSS. We used Webpack to bundle our production codebase
into a dependency-free library (referred to as “lib” in code).

The entry point of the library is the index.ts file, which imports the relevant assets and components
from the production codebase. This includes anything from JSX, TSX, LESS, Sass or even SVG images.

One of the biggest hurdles was to have all the production component dependencies resolve correctly in the library
that we are exporting. For example, a dropdown component that is dependent on classnames.

To use this build system with your production codebase, point the Webpack entry to your codebase. We
recommend creating a symlink to your production codebase to avoid duplication.

Whether you decide to follow along with our example or use your own, all you have to do is run
yarn build. This will bundle the code inside _production and copy the bundled library into
design-system.framerx.

Working with bundled components

Before we get started, we need to dissipate some haze about the way Framer X works. A .framerx file is a
zipped folder bundled as a binary.

When opened, Framer X unzips the file inside macOS’s AutoSave Information folder. On file close, Framer X zips the
contents back into the file.

Adding components

We are going to take our production component from lib, and wrap it in a new component as a bridge
between our production code and Framer X. We need this wrapper to expose Property Controls (We’ll touch on these
soon)

The build system we put together includes a sample
Button component. We will use this component in this section.

Open design-system.framerx and create a new Code Component called Button. Framer X will
open Button.tsx in Visual Studio Code.

Let’s remove the boilerplate code and add back what we need piece by piece.

We’ll start with the import declarations. We recommend alias import declarations { Button as _Button }
this allows us to use the original component name as the name of the Framer X Code Component.

import * as React from "react";
import { Button as _Button } from "../lib"; // <- This is the bundled production code we inserted with yarn build.

Next, let’s define the component and its props. The props in the example below match the props defined in the
component from the production folder we bundled with Webpack. Props change the content and visual style of the
component, in this case size, type and title.

import * as React from "react";
import { Button as _Button } from "../lib";enum SIZE_OPTIONS {
  EXTRA_SMALL = "xs",
  SMALL = "sm",
  MEDIUM = "md",
  LARGE = "lg"
}// Define type of property
interface Props {
  buttonType?:
    | "default"
    | "primary"
    | "success"
    | "warning"
    | "danger"
    | "toggle";
  size: SIZE_OPTIONS;
  title: string;// Width and height of the component when loaded in the canvas
  width: number;
  height: number;
}export class Button extends React.Component<Props> {
  render() {
    return <_Button {...this.props}>{this.props.title}</_Button>;
  }
}

Now the component is in Framer X, but you’ll notice it renders a bit off. This is because we haven’t initialized any
defaultProps. Let’s initialize some props to have a better default view of the component.

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { Button as _Button } from "../lib";enum SIZE_OPTIONS {
  EXTRA_SMALL = "xs",
  SMALL = "sm",
  MEDIUM = "md",
  LARGE = "lg"
}// Define type of property
interface Props {
  buttonType?:
    | "default"
    | "primary"
    | "success"
    | "warning"
    | "danger"
    | "toggle";
  size: SIZE_OPTIONS;
  title: string;// Width and height of the component when loaded in the canvas
  width: number;
  height: number;
}export class Button extends React.Component<Props> {
  // Set default properties
  static defaultProps = {
    title: "Button",
    size: "md",
    buttonType: "default",
    width: 68,
    height: 28
  };render() {
    return <_Button {...this.props}>{this.props.title}</_Button>;
  }
}

Voila! the production component is in Framer X! 🎉🎊

Exposing controls

Next, let’s add some Property Controls. Property Controls are one of the most powerful features of
Framer X; they allow you to expose controls to interact with the props of your component. See Framer X docs for details.

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { Button as _Button } from "../lib";enum SIZE_OPTIONS {
  EXTRA_SMALL = "xs",
  SMALL = "sm",
  MEDIUM = "md",
  LARGE = "lg"
}// Define type of property
interface Props {
  buttonType?:
    | "default"
    | "primary"
    | "success"
    | "warning"
    | "danger"
    | "toggle";
  size: SIZE_OPTIONS;
  title: string;// Width and height of the component when loaded in the canvas
  width: number;
  height: number;
}export class Button extends React.Component<Props> {
  // Set default properties
  static defaultProps = {
    title: "Button",
    size: "md",
    buttonType: "default",
    width: 68,
    height: 28
  };// Items shown in property panel
  static propertyControls: PropertyControls = {
    title: { type: ControlType.String, title: "Title" },
    buttonType: {
      type: ControlType.Enum,
      options: ["default", "primary", "success", "warning", "danger", "toggle"],
      title: "Button Type"
    },
    size: {
      type: ControlType.SegmentedEnum,
      options: ["xs", "sm", "md", "lg"],
      title: "Size"
    }
  };render() {
    return <_Button {...this.props}>{this.props.title}</_Button>;
  }
}

Collaboration and versioning

One of the biggest hurdles we had to overcome during this process was collaboration, and tracking changes in GitHub.
This meant extracting the components from the Framer X file into the main repository.

We wrote three scripts inside package.json that allow us to sync the Framer file with the contents of
src and vice versa. This allowed us to have full versioning capabilities for Design and Code
components with minimal impact to the workflow. This works well for now until Framer X has a better
way to handle versioning in the future.

The scrips we implemented for managing the build system are:

yarn build

Bundles the production codebase into ES6 and copies it into the lib inside Framer X contents.

yarn sync:lib

Replaces lib inside Framer X contents with the latest version of the build.

yarn sync:src

Replaces the contents of src with the content of the Framer X file.

yarn sync:framerx

Builds a new Framer X file in case of conflicts or file corruption with the contents of lib and
src.

Conclusion

This workflow is still in its early stages — but the benefits are real:

• Allows cross-functional teams to have a centralized source for approved components. Yes, a single source
  of truth.
• Simplifies collaboration between design and engineering . We can easily list out the components and specs needed
  for new features.
• Empowers designers with development experience to build components that are nearly ready for production.
• Allows designers to build prototypes with real interactions faster.

At Datadog, we’re designing products that give engineers visibility into their Cloud Infrastructure. Our design
system is complex with lots of moving parts, so we’re excited to test out Framer X’s ability to help us bridge the
gap between design and engineering.

If you’re interested in working on challenges like these and want to help us shape design at Datadog, we’d love to hear from you!