deven-org · thrbnhrtmnn · Feb 29, 2024 · Feb 16, 2024 · Feb 16, 2024 · Feb 16, 2024
diff --git a/README.md b/README.md
@@ -20,10 +20,9 @@
     - [Questions, feedback or feature requests?](#questions-feedback-or-feature-requests)
     - [Report an issue](#report-an-issue)
   - [:gear: Requirements](#gear-requirements)
-  - [:rocket: How to start](#rocket-how-to-start)
+  - [:arrow_forward: How to start](#arrow_forward-how-to-start)
     - [Installation](#installation)
     - [Setup](#setup)
-    - [Usage](#usage)
   - [:white\_check\_mark: How to test](#white_check_mark-how-to-test)
   - [:v: Contribute](#v-contribute)
   - [:page\_facing\_up: License](#page_facing_up-license)
@@ -94,8 +93,16 @@ In case you discover a security vulnerability please review our [security policy
 
 In addition, you might need to install Corepack. For more information checkout [Corepack Documentation](https://nodejs.org/api/corepack.html).
 
+### Figma
+Figma is a collaborative tool used for designing user interfaces. Figma can be run on any operating system that can run a browser which can help designers, developers and various other stakeholders to collaborate seamlessly. Sharing designs, managing permissions on a granular level and requesting feedback are some of the many features that help teams work in a more agile fashion.
 
-## :rocket: How to start
+### Tokens Studio
+Tokens Studio for Figma (also known as Figma Tokens) is a plugin for Figma that allows users to integrate design tokens into their Figma designs.
+Before you start working with B01LER Design System for Figma, make sure to install the Tokens Studio for Figma (Figma Tokens) plugin so you can access and customize the UI kit easily.
+
+The plugin allows both designers and developers to inspect tokens that have been applied to components. An overview of all tokens for a component can be viewed with deep inspect or the specific tokens used for the building blocks of a component can also be viewed 
+
+## :arrow_forward: How to start
 
 ### Installation
 > Note: You need to run terminal as administrator on Windows machines.
@@ -114,7 +121,7 @@ In addition, you might need to install Corepack. For more information checkout [
    $ git clone https://github.com/deven-org/B01LER-Kitchen.git
    ```
 
-3. now we enable corepack for yarn and choose right version
+3. Now we enable corepack for yarn and choose right version
 
    ```sh
    $ corepack enable
@@ -133,18 +140,60 @@ In addition, you might need to install Corepack. For more information checkout [
    $ yarn start
    ```
 
+> Note: This command will also open up Storybook locally. This provides you with a full list of available components that you can experiment with. Each component in Storybook also contains detailed documentation how to use them and the parameters that they can accept.
+
 ### Setup
-Note: This is not filled out yet!
+
+> Note: To be able to edit tokens, you must own a pro license of token studio
+
+1. First, open your Copy of the B01LER and bookmark Tokens Studio in the Plugins panel
+2. Next, launch Tokens Studio using 'New Empty File' since no tokens have been defined yet
+3. Connect your repository to Tokens Studio. First, generate and copy a new Personal Access Token in Github. You can use either Tokens (Classic) or 'Fine-grained tokens'. Next, use the copied token to add GitHub as a Sync Provider. Click the 'Settings tab' in Tokens Studio and in the 'Add new menu', select GitHub. Use the Personal Token that you copied to authenticate yourself and to connect your cloned B01LER repository.
+4. If the entered credential are correct you will be asked to Pull from git. Please accept this dialog. The tokens tab should now contain all tokens sets of B01LER available.
+
+Please refer to the 'Getting Started' section in our [Figma file](https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?type=design&node-id=8311-4751&mode=design&t=SPtTkLRxRECGO4Ga-0) (the link to the Figma file above is exclusively for members of the Accenture organization, while those outside the organization can download the file [here](https://boilerds.com/boilerds/B01LER-v1-alpha%20release.fig)) for more detailed instructions on how to set up the library, configure Figma Tokens Studio and customize the project assets to meet your requirements.
+
 ...
 
-### Usage
-Note: This is not filled out yet!
+The 'Getting Started' section also explains the logic behind our token names and enable you to find and change the right tokens when rebranding B01LER or when you want to extend or change some functionality of a component.
 ...
 
 
 ## :white_check_mark: How to test
 Learn about our testing approach [here](./doc/TESTING.md).
 
+## :toolbox: How to build
+> Note: Each command must be run from the root directory of the project
+
+The B01LER UI Library can be built using the following command:
+
+   ```sh
+   $ yarn build:ui-library
+   ```
+
+B01LER can also be built with Storybook bundled alongside it which provides you with a sandbox to experiment with our components:
+
+   ```sh
+   $ yarn build:storybook
+   ```
+
+B01LER comes with an example vanilla JS application to demonstrate how easy it is to use components in your app. To build this example app, run the following command:
+
+   ```sh
+   $ yarn build:js-example
+   ```
+
+In the generated `dist` folder, the generated `index.html` file can be opened in the browser to preview our components.
+...
+
+## rocket: How to deploy
+Learn about our approach to deployment [here](./doc/DEPLOYMENT.md).
+...
+
+## :building_construction: How to develop
+Note: This is not filled out yet!
+...
+
 
 ## :v: Contribute
 For a detailed documentation on how to contribute to the B01LER project, have a look at our [contribution guide](./CONTRIBUTING.md).

diff --git a/doc/DEPLOYMENT.md b/doc/DEPLOYMENT.md
@@ -1,5 +1,11 @@
 # Deployment
-This chapter should provide the user with all needed information around the deployment of your project. Please provide a short introduction here.
+This chapter should provide the user with all needed information around the deployment of your project.
+
+Currently, the B01LER project is getting deployed to [render.com](https://render.com) periodically. In the near future, we intend on implementing a more formal deployment schedule so that the latest version of the project will be available to view and interact with.
+
+The project can be viewed [here](https://b01ler.onrender.com/). This link allows you to experiment with the project and learn about how you can use components via Storybook.
+
+We also deploy our JS Example app to [Render](https://b01ler.onrender.com/js-example-app). This application shows you how our components look when implemented in a vanilla Javascript application.
 
 ## Content
 - [Tooling](#tooling)
@@ -10,22 +16,22 @@ This chapter should provide the user with all needed information around the depl
 - [Support](#support)
 
 ## Tooling
-Please explain what kind of tools you use for your deployment, why you have choosen them and how to work with them.
+Note: This is not filled out yet!
 
 
 ## How to deploy
-In this section you should discribe the deployment process for your project. Think about how developers  who are unfamiliar with the project can deploy it to the respective enviroments.
+Note: This is not filled out yet!
 
 
 ## Versioning
-Please describe briefly how you manage the versioning of your project.
+Note: This is not filled out yet!
 
 
 ## Release Management
-If you have a release management setup in place, please describe the process and who to contact if support is needed.
+Note: This is not filled out yet!
 
 ## Deployment Schedule
-Please write down your deployment schedule. Consider using screenshots or graphs for better visualization.
+Note: This is not filled out yet!
 
 ## Support
-If someone needs support while deploying your project, please list the possible contact persons or communication channels where people can get support.
+Note: This is not filled out yet!