diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md
deleted file mode 100644
index 5be2ae01ac..0000000000
--- a/.github/CODE_OF_CONDUCT.md
+++ /dev/null
@@ -1,132 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
-size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, caste, color, religion, or sexual identity
-and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our
-community include:
-
-* Demonstrating empathy and kindness toward other people.
-* Being respectful of differing opinions, viewpoints, and experiences.
-* Giving and gracefully accepting constructive feedback.
-* Accepting responsibility and apologizing to those affected by our mistakes,
- and learning from the experience.
-* Focusing on what is best not just for us as individuals, but for the
- overall community.
-
-Examples of unacceptable behavior include:
-
-* The use of sexualized language or imagery, and sexual attention or
- advances of any kind.
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment.
-* Publishing others' private information, such as a physical or email
- address, without their explicit permission.
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting.
-
-## Enforcement Responsibilities
-
-Community leaders are responsible for clarifying and enforcing our standards of
-acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
-or harmful.
-
-Community leaders have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, and will communicate reasons for moderation
-decisions when appropriate.
-
-## Scope
-
-This Code of Conduct applies within all community spaces, and also applies when
-an individual is officially representing the community in public spaces.
-Examples of representing our community include using an official e-mail address,
-posting via an official social media account, or acting as an appointed
-representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-[INSERT CONTACT METHOD].
-All complaints will be reviewed and investigated promptly and fairly.
-
-All community leaders are obligated to respect the privacy and security of the
-reporter of any incident.
-
-## Enforcement Guidelines
-
-Community leaders will follow these Community Impact Guidelines in determining
-the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-
-**Community Impact**: Use of inappropriate language or other behavior deemed
-unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing
-clarity around the nature of the violation and an explanation of why the
-behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-
-**Community Impact**: A violation through a single incident or series
-of actions.
-
-**Consequence**: A warning with consequences for continued behavior. No
-interaction with the people involved, including unsolicited interaction with
-those enforcing the Code of Conduct, for a specified period of time. This
-includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or
-permanent ban.
-
-### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including
-sustained inappropriate behavior.
-
-**Consequence**: A temporary ban from any sort of interaction or public
-communication with the community for a specified period of time. No public or
-private interaction with the people involved, including unsolicited interaction
-with those enforcing the Code of Conduct, is allowed during this period.
-Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-
-**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior, harassment of an
-individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within
-the community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 2.1, available at
-[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
-
-Community Impact Guidelines were inspired by
-[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
-
-For answers to common questions about this code of conduct, see the FAQ at
-[https://www.contributor-covenant.org/faq][FAQ]. Translations are available
-at [https://www.contributor-covenant.org/translations][translations].
-
-[homepage]: https://www.contributor-covenant.org
-[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
-[Mozilla CoC]: https://github.com/mozilla/diversity
-[FAQ]: https://www.contributor-covenant.org/faq
-[translations]: https://www.contributor-covenant.org/translations
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
deleted file mode 100644
index 6f51066e61..0000000000
--- a/.github/CONTRIBUTING.md
+++ /dev/null
@@ -1,164 +0,0 @@
-# Contributing Guidelines
-
-Hello 👋. We welcome you all to GirlScript Winter Of Contributing🎊🎊
-| Index |
-| ------------------------------------------------------------- |
-| [Contributing to this repo](#contributing-to-this-repository) |
-| [Role of Mentors](#role-of-mentors) |
-| [Role of Supervisors](#role-of-supervisors)|
-| [Adding A New Topic](#adding-a-new-topic)|
-| [Index (readme) Files](#index-readme-files)|
-| [Basics of Git & GitHub](#basics-of-git-and-github) |
-
-## Contributing to this repository
-
-GWOC encourages individuals to share their knowledge and ideas to develop technical skills and gain valuable experience in the field of tech education. We are creating a content repository which is full of valuable resources. Folders for different domains like Android Development, Web Development have been created and contribution to a specific domain will go to that folder only. Inside each directory there will be subdirectories for sub-topics of that particular domain. **There is a specific branch for each of the domains and participants need to contribute to that branch only**. For example, if someone is contributing to Web Development or a subtopic of it, contributions to that domain should only go to that branch.
-
-### Types of contribution you can make
-
-Throughout the program there are three modes of contribution, as listed below:
-
-1. Documentation
-
-- Content Creation in the form of codes or tutorials
-- Preferred language should be English
-- Accepted via [Google Colab](https://colab.research.google.com/)
-- Clear, Consise and Complete.
-
-2. Video
-
-- Animations, screen-recordings, presentations and regular explanatory films are all possibilties
-- Video length should not exceed more than 25 min
-- Presentable and Clear
-- Accepted via Google drive link
-
-3. Audio
-
-- Should be in mp3 format
-- Includes speech clarity,concise ,low distortion
-- Presentation can also be submitted along with audio [Optional]
-- Accepted via Google drive
-
-📌Note: For video and audio files, only link should be added to the repository with details of the video/audio.
-
-✔ Participants are requested to give regular updates regarding their progress to the mentors.
-
-✔ If the participant is not able to contribute to the assigned issue due to any reason, kindly let the mentors know so that the issue is assigned to some other participant.
-
-## Role of mentors
-
-Mentors will offer assistance to the contributors. They will be available to contribute to Github, assist contributors in creating content, answer questions, manage the subject repository, and provide assistance to the contributors throughout the program.
-
-## Role of supervisors
-
-Supervisors are experts in the Open Source project on which the team is currently working. At the commencement of the program, they will provide project roadmap, and will also be available to evaluate pull requests, assist with concepts, encourage the team throughout the program. Supervisors can create directories and subdirectories as per requirement and they need to make sure projct under them is getting executed smoothly
-
-
-
-## Adding a new topic
-
-If you are adding a new domain/field, you need to create a new branch. That branch should be created from branch `main` and not from any other branch. The naming convention of the branch should follow `Pascal_Snake_Case`. Examples are given below:
-
-If you want to add the domain `Android Development` , the name of the corresponding branch and folder should be
-Branch: `Android_Development`
-Folder: `Android_Development`
-The starting letter of every word should be in uppercase. Do not use spaces or hyphen(-). Instead use underscore (_) to join words.
-All branches and folder and sub-folder names should follow this naming convention to maintain a uniformity in the repository
-
-
-
-## Index (readme) files
-
-Inside each directory there is a `README` file. This is the index file of the directory. This `README` file should contain the list of sub-directories clicking on which one can navigate to a particular sub-directory. If you are adding a new sub-directory make sure you have added it to the `README` also. Again, inside subdirectories, there is another `README` file, that will contain all the topics that the subdirectory contains. The point of adding `README` inside directories and sub-directories is to help someone know about the content that is residing inside the directory or subdirectory. For the index files, please refer to the [templates](../templates)
-
----
-
-
-
-## Basics of Git and GitHub
-
-### Git & GitHub
-
-Before we proceed, it's better to know the difference between Git and Github. Git is a version control system (VCS) that allows us to keep track of the history of our source code , whereas GitHub is a service that hosts Git projects.
-
-We assume you have created an account on Github and installed Git on your System.
-
-Now enter your name and E-mail (used on Github) address in Git, by using following command.
-
-`$ git config --global user.name "YOUR NAME"`
-` $ git config --global user.email "YOUR EMAIL ADDRESS"`
-This is an important step to mark your commits to your name and email.
-
-
-
-### Fork a project
-
-You can make a copy of the project to your account. This process is called forking a project to your Github account. On Upper right side of project page on Github, you can see -
-
-
-Click on fork to create a copy of project to your account. This creates a separate copy for you to work on.
-
-
-
-
-
-### Clone the forked project
-
-You have forked the project you want to contribute to your github account. To get this project on your development machine we use clone command of git.
-
-`$ git clone https://github.com/girlscript/winter-of-contributing.git`
-Now you have the project on your local machine.
-
-
-
-### Add a remote (upstream) to original project repository
-
-Remote means the remote location of project on Github. By cloning, we have a remote called origin which points to your forked repository. Now we will add a remote to the original repository from where we had forked.
-
-`$ cd `
-`$ git remote add upstream https://github.com/girlscript/winter-of-contributing.git`
-You will see the benefits of adding remote later.
-
-
-
-### Synchronizing your fork
-
-Open Source projects have a number of contributors who can push code anytime. So it is necessary to make your forked copy equal with the original repository. The remote added above called Upstream helps in this.
-
-`$ git checkout main`
-`$ git fetch upstream`
-`$ git merge upstream/main`
-`$ git push origin main`
-The last command pushes the latest code to your forked repository on Github. The origin is the remote pointing to your forked repository on github.
-
-
-
-### Create a new branch for a feature or bugfix
-
-Usually, all repositories have a main branch that is regarded to be stable, and any new features should be developed on a separate branch before being merged into the main branch. As a result, we should establish a new branch for our feature or bugfix and go to work on the issue.
-
-`$ git checkout -b `
-This will create a new branch out of master branch. Now start working on the problem and commit your changes.
-
-`$ git add --all`
-`$ git commit -m ""`
-The first command adds all the files or you can add specific files by removing -a and adding the file names. The second command gives a message to your changes so you can know in future what changes this commit makes. If you are solving an issue on original repository, you should add the issue number like #35 to your commit message. This will show the reference to commits in the issue.
-
-
-
-### Push code and create a pull request
-
-You now have a new branch containing the modifications you want in the project you forked. Now, push your new branch to your remote github fork.
-
-`$ git push origin `
-Now you are ready to help the project by opening a pull request means you now tell the project managers to add the feature or bug fix to original repository. You can open a pull request by clicking on green icon -
-
-
-
-Remember your upstream base branch should be main and source should be your feature branch. Click on create pull request and add a name to your pull request. You can also describe your feature.
-
-Fantastic! You've already made your first contribution.🥳
-
-#### BE OPEN!
-
-#### Happy Coding 👩💻👩💻
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
deleted file mode 100644
index 46f17c51d0..0000000000
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-## Description 📜
-
-Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context.
-Fixes #
-
-
-
-## Type of change 📝
-
-
-
-- [ ] Audio (Should be in mp3 format Includes speech clarity, Concise ,Low distortion)
-- [ ] Video (Animations, screen-recordings, presentations and regular explanatory films are all possibilties etc)
-- [ ] Documentation (Content Creation in the form of codes or tutorials)
-- [ ] Other (If you choose other, Please mention changes below)
-
-
-
-## Domain of Contribution 📊
-
-
-
-- [ ] Android Dev (Flutter, Java, Kotlin)
-- [ ] Backend Dev (Java, .NET, Python)
-- [ ] C/CPP
-- [ ] Competitive Programming
-- [ ] Cyber Security
-- [ ] DSA
-- [ ] Database
-- [ ] Datascience with Python
-- [ ] Datascience with R
-- [ ] Frontend Dev (HTML, CSS, JS)
-- [ ] Frontend Dev (React, Angular, Vue)
-- [ ] Golang
-- [ ] Interview Prep
-- [ ] Java
-- [ ] JavaScript
-- [ ] MERN
-- [ ] Machine Learning
-- [ ] Open Source
-- [ ] Python
-- [ ] Rust
-- [ ] Statistics
-- [ ] UI/UX
-
-
-
-## Checklist ✅
-
-
-
-- [ ] I follow [Contributing Guidelines](https://github.com/girlscript/winter-of-contributing/blob/main/.github/CONTRIBUTING.md) & [Code of conduct](https://github.com/girlscript/winter-of-contributing/blob/main/.github/CODE_OF_CONDUCT.md) of this project.
-- [ ] I have performed a self-review of my own code or work.
-- [ ] I have commented my code, particularly in hard-to-understand areas.
-- [ ] My changes generates no new warnings.
-- [ ] I'm GWOC'21 contributor
-
-
-
-
-
-## Screenshots / Gif (Optional) 📸
-
-
\ No newline at end of file
diff --git a/README.md b/README.md
index 60af26d3b1..4dd116cfb5 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,7 @@
+
**GirlScript Winter of Contributing** is a three-month newly established initiative by **[GirlScript Foundation](https://www.girlscript.tech/home)** that will take place over the winter months. GWOC invites people to contribute their expertise and ideas in order to improve their technical abilities and obtain significant experience in the field of tech education.Throughout the program, the participants can contribute to a range of themes while being guided by an expert facilitator.The goal of GWOC is to develop the world's largest multilingual repository.🧡
+
## Contributing Guidelines
Please follow the [contributing guidelines](./.github/CONTRIBUTING.md) to contribute to the project.
## Code of Conduct
+
This project and everyone participating in it is governed by the [GirlScript Code of Conduct](./.github/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code
diff --git a/UI_UX/Basics_of_Visual_Design/Color_terminology/Basics_of_Visual_Design: Part_1.md b/UI_UX/Basics_of_Visual_Design/Color_terminology/Basics_of_Visual_Design: Part_1.md
deleted file mode 100644
index 6ad15f0ce9..0000000000
--- a/UI_UX/Basics_of_Visual_Design/Color_terminology/Basics_of_Visual_Design: Part_1.md
+++ /dev/null
@@ -1,285 +0,0 @@
-
-
-
-
-
Basics of Visual Design
-
-Visual design strives to increase the aesthetic appeal and **usefulness** of a design/product by using appropriate *imagery*, *typography*, *space*, *layout*, and *colour*. Aesthetics are only one aspect of visual design. Designers carefully position pieces to build interfaces that improve user experience and increase conversion.
-
-
-
-*See why Visual Design is about more than product prettiness.*
-> *“Problems with visual design can turn users off so quickly that they never discover all the smart choices you made with navigation or interaction design.”*
->
-> *— Jesse James Garrett, UX Designer & Co-founder of Adaptive Path*
-
-
-
-## **Visual Design is Aesthetic,** *Strategic* **Design**
-
-
-
-Users’ first impressions typically form in `50 milliseconds`. This fact reflects the visceral level of [emotional design](https://www.interaction-design.org/literature/topics/emotional-design) — in other words, the user’s first impression of or gut reaction to a design. If they don’t like what you show them in those critical moments, they will leave. So, visual design is a vital part of your work as a designer.
-
-
-
-> *“Everything has a personality: everything sends an emotional signal. Even where this was not the intention of the designer, the people who view the website infer personalities and experience emotions.”*
->
-> *— Don Norman, Grand Old Man of User Experience*
-
-
-
- Many people mistake it to mean that designers include attractive elements just to maximize an item’s appeal. Actually, you use visual design to create and organize elements to
-
- `A) lead the user’s eye to an item’s functionality`, and
-
- `B) make the aesthetics consistent.`
-
- For instance, designers compose and arrange website content around each page’s purpose and are careful to ensure that content gives off the right **visual cues**. The smallest and subtlest details will affect what users think and how they feel. So, you must always **show them the right things in the right way**. Your enemy here is **user uncertainty**. If your users have to stop and think about your design, they won’t trust it—or you. Therefore, a visual design should **draw their attention to the important aspects and strike the balance between a fresh, powerful design and something they expect to see**. How you apply visual design will depend on your product, its organization/industry and its users (including their culture). A major factor in visual design is that you work to accommodate **user limitations** such as **cognitive load**. For example, you use chunking to help users understand and remember information more easily.
-
-
-
-These are some of the most common **Elements of Visual Design :**
-
-1. **Lines** (straight/curved/geometric/organic) – use these to create divisions, textures and shapes.
-
-2. **Shapes** – use lines, different colors, etc. to create enclosed/self-contained areas.
-
-3. **Negative space/whitespace** – use the blank area around a "positive" shape to create a figure/ground effect or calm the design overall.
-
-4. **Volume** – use this to show the rich fullness of all three dimensions of elements on two-dimensional screens.
-
-5. **Value** – use this to set the relationship between lightness and darkness, typically through a light source to create shadows and highlights.
-
-6. **Color** – use this to set the theme/tone and attract attention.
-
-7. **Texture** – use this to define an object’s surface.
-
-
-
-### **The Psychology of Color**
-
-Color theory and the psychological effects color can have on users is a complex and often subjective topic. But there are certain aspects that can be addressed on a more universal level.
-
-Things like the common meanings of the main colors (primary, secondary, and tertiary), traditional color palettes, and cultural variations in color meanings are all fairly straightforward. Designers can easily learn these basics and apply them to their work. But there are finer points to be learned when it comes to using colors in UX design.
-
-
-
-
-
-
-
-
-
-The emotional impact of interface colors shouldn’t be overlooked. And while some colors are “universal” in UX design (such as black, white, and gray, at least one of which is used in virtually every good design out there), the colors they’re combined with can have a huge impact on a user’s perception.
-
-Of course, the way in which color is used can also have a dramatic impact on how it’s perceived. For example, blue used as a primary color in a modern, minimalist design will have a very different feel than the same blue used as an accent color in a more complex, corporate design.
-
-
-
-
-
-
-
-
-
-### **Cultural Differences in Color**
-
-One issue designers tend to overlook is the [cultural differences](https://www.shutterstock.com/blog/color-symbolism-and-meanings-around-the-world) that can exist around different colors. For example, in many Western cultures, white is associated with things like purity, innocence, and hope. But in parts of Asia, white is associated with death, mourning, and bad luck.
-
-Some colours, such as orange, have universally good associations independent of culture, but others, such as white, vary considerably between countries. This might make it difficult for a designer to produce a design that would appeal to the widest potential audience.
-
-Designers must consider the cultural implications of their colour palettes dependent on the product or website's target audience. If a product is intended for a global audience, make sure the colours and imagery utilised are balanced to avoid unwanted cultural implications. Designers might pay less attention to the consequences of the selected palette in different cultures if a product is primarily targeted at a single culture.
-
-
-
-> *“All colors are the friends of their neighbors and the lovers of their opposites”*
->
-> *— Mark Chagall*
-
-
-
-
-### **Basic color wheel**
-
-
-This is to show the relationship between primary, secondary and tertiary colors.
-
-
-
-
-
-
-
-
-
-
-- **Primary colors** on the color wheel are Red, Blue and Yellow.
-
-
-- **Secondary colors** are Violet, Green and Orange. These colors can be create by mixing two primary colors together.
-
-
-- **Tertiary colors** are Red-Violet, Blue-Violet, Blue-Green, Yellow-Green, Yellow-Orange and Red-Orange. Can make by mixing one primary color and its adjacent secondary color.
-
-
-
-### **Tints, Shades and Tones**
-
-
-
-
-
-
-
-
-
-### **Meanings behind colors**
-This will help you to understand how colors can influence on people to make decisions and how the impact that colors can have on our brains.
-
-
-
-### *Red*
-Red is a very powerful color which symbolizes **strength, power, danger, love and desire**. In Design red is mostly used to get users attention.
-
-One of the basic colours on the colour wheel, which is extremely aggressive, is used as a warning colour and to indicate an incorrect state, but on the other hand, this is a colour that you can play with with a little to obtain some light red tints that complement the young sector.
-
-There are several well-known brands that utilise red as their primary colour. For instance, YouTube, KFC, Coca-Cola, CNN, Netflix, and so on...
-
-
-
-### *Blue*
-Blue is well known as the most preferred and most important color that is commonly used in design. It indicates the **trust, loyalty, wisdom, confidence, intelligence, faith and truth.**
-
-Because light blue is linked with health, meditation, and may be seen in hospitals, health applications, and fitness facilities, it represents water and sky, giving you a sense of peace and relaxation.
-
-On the other hand, most financial goods and social media businesses utilise blue to indicate that their product is trustworthy, dependable, and secure, which will help them get more consumers.
-
-Some common examples are PayPal, Genie, Pay Here, Facebook, Twitter, LinkedIn, and other social media sites...
-
-
-
-### *Yellow*
-Yellow color is associated with **joy, energy, happiness, confidence, positivity, light and warmth**. If you overuse this color will become very disturbing.
-
-Instead of white lettering, yellow may blend seamlessly with black text to attract more user attention.
-
-McDonald's, IKEA, CAT, and other companies utilise yellow in their products.
-
-
-
-### *Green*
-Green is the color of nature as it connected with environment which can grab users attention easily.
-
-It is associated with meanings of **growth, relaxation, harmony, freshness and fertility**.
-
-Dark greens are associated with money and grandeur, whereas lighter colours are associated with tranquilly and harmony. Green, the polar opposite of red, denotes safety.
-
-Land Rover, Animal Planet, Whats App, Spotify, Sprite, and more brands utilise green as their primary hue.
-
-
-
-### *Orange*
-As Orange is a mixture of red and yellow it shows the **creativity, cheerful, determination, attraction, encouragement and stimulation**.
-
-In the arts, entertainment, food, sports, and transportation industries, orange works best.
-
-Orange is the predominant colour of Fanta, Nickelodeon, and Sketch App.
-
-
-
-### *Purple*
-Purple is the color of royalty and associated with **luxury, ambition, wisdom, independence and magic.**
-
-Yahoo, Cadbury are examples for brands which uses purple as their main color.
-
-
-
----
-
-
-
-## Conclusion
-
-
-
-
-
-
-
-
-
-While color theory is a complex subject, it isn’t particularly complicated to learn the basics. From there, designers can build on their knowledge to create more varied and sophisticated color palettes for their designs.
-
-A well-designed color palette, particularly one that includes some unexpected hues, isn’t merely an aesthetic choice. It can have significant psychological effects on users, which UX designers should capitalize on in order to create better experiences.
-
----
-
-
-
-## External References
-
-- [The Role of Color in UX](https://www.toptal.com/designers/ux/color-in-ux)
-
-- [How to Use Color in UX Design](https://www.breakfreegraphics.com/design-blog/how-to-use-color-in-ux-design/)
-
-- [Color Psychology: A Brilliant Helping Hand in UX Design](https://medium.com/ux-trends/color-psychology-brilliant-helping-hand-in-ux-design-cdca6b783f43)
-
-- [Aesthetics](https://www.interaction-design.org/literature/topics/aesthetics)
-
-- [Role of colors in UX and UI Design](https://uigstudio.com/insights/role-of-colors-in-ux-and-ui-design)
\ No newline at end of file
diff --git a/UI_UX/Create_a_prototype/Part_2/README.md b/UI_UX/Create_a_prototype/Part_2/README.md
deleted file mode 100644
index 8ca1b8b393..0000000000
--- a/UI_UX/Create_a_prototype/Part_2/README.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# Prototype creation using Figma
-
-### Figma’s prototype help’s making the design of interactive by assigning a link between the frames.
-
-#### Prototypes are outstanding in the following way:
-
-1. Follow a flow of interaction
-
-2. portrait like a completion of an app or website
-
-3. Present to the stockholders
-
-4. Require a less amount of period
-
-### Let’s get into How to connect two frames ?
-
-1. Create 2 frames
-
-2. Select a particular portion where you want to connect to the other screen
-
-3. Click + to start a connection
-
-4. Drag it to the next screen, which is your goal
-
-* Note: If you don’t have a destination, you cannot give a connection
-
-
-
-### From the above preview, we can conclude that it has two screens:
-
-When you hover on the button, **Get started**, you can view a "+" button and drag to the destination.
-
-The **Screen 1** represents the first flow of the screen
-### Animation to prototype
-
-
-1. Click on to prototype
-2. Move to interactions
-3. Check the Animation drop down and add
-4. Preview the animation
-
-## Style the prototype preview
-
-1. Select a Device eg.iphone 11 pro max
-2. Change to portrait and landscape
-3. Preview your prototype
-4. Select Background color
-5. Set the prototype's Starting Frame i.e Screen 1
diff --git a/UI_UX/Essential_Screens/Calendar_Screen/Home_Page/homscreen.md b/UI_UX/Essential_Screens/Calendar_Screen/Home_Page/homscreen.md
deleted file mode 100644
index 8740dfffae..0000000000
--- a/UI_UX/Essential_Screens/Calendar_Screen/Home_Page/homscreen.md
+++ /dev/null
@@ -1,14 +0,0 @@
-
Home Screen Design
-
-
E-commerce
-
Steps :
-
1. The frame used was Desktop you can click Frame on the top and choose respective device
-
2. You can change the background colur using color selction
-
-
-
3. Adding text is done by clicking Text at the top and move the cursor at a particular destination to type
-
4. You can edit the font style,font size and shape
-
-
5. Drag and drop the image into the canvas,Figam supports PNG, JPEG, GIF, TIFF or WEBP
🎉 Hope you have got some idea to design a screen in Figma 🎉
diff --git a/UI_UX/Essential_Screens/Calendar_Screen/PR_Template.md b/UI_UX/Essential_Screens/Calendar_Screen/PR_Template.md
deleted file mode 100644
index a54b21cf1c..0000000000
--- a/UI_UX/Essential_Screens/Calendar_Screen/PR_Template.md
+++ /dev/null
@@ -1,46 +0,0 @@
-
-
-## Description 📜
-
-Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context.
-Fixes # 96
-
-
-
-## Type of change 📝
-
-
-
-- [ ] Audio (Should be in mp3 format Includes speech clarity, Concise ,Low distortion)
-- [ ] Video (Animations, screen-recordings, presentations and regular explanatory films are all possibilties etc)
-- [x] Documentation (Content Creation in the form of codes or tutorials)
-- [ ] Other (If you choose other, Please mention changes below)
-- [x] Screenshots and Explaination
-
-
-
-## Domain of Contribution 📊
-
-
-
-- [x] UI/UX
-
-
-
-## Checklist ✅
-
-
-
-- [x] I follow [Contributing Guidelines](https://github.com/girlscript/winter-of-contributing/blob/main/.github/CONTRIBUTING.md) & [Code of conduct](https://github.com/girlscript/winter-of-contributing/blob/main/.github/CODE_OF_CONDUCT.md) of this project.
-- [x] I have performed a self-review of my own code or work.
-- [x] I have commented my code, particularly in hard-to-understand areas.
-- [x] My changes generates no new warnings.
-- [x] I'm GWOC'21 contributor
-
-
-
-
-
-## Screenshots / Gif (Optional) 📸
-
-
diff --git a/UI_UX/Essential_Screens/Calendar_Screen/Screens/Desc.md b/UI_UX/Essential_Screens/Calendar_Screen/Screens/Desc.md
deleted file mode 100644
index 63943fe8d1..0000000000
--- a/UI_UX/Essential_Screens/Calendar_Screen/Screens/Desc.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Calendar Screen
-
-A calender app design with following screens
-
-- Splash Screen
-
-
-
-This is the pop-up screen for app start-up
- ``click`` to continue
-
-
-- Monthly view
-
-
-
-This is the home page or default screen on starting the app.
-Navigation
- - Clicking ``18`` navigates to "Daily view"
- - clicking ``+ Add event`` navigates to "Event Addition" screen
-
-
-- Event Addition
-
-
-
-This is the event addition screen
- ``click`` to continue
-
-
-- Daily View
-
-
-
-The daily schedule with all the events and vacant time is diplayed here.
-Navigation
- - Clicking ``+`` navigates to "Event Addition" screen
- - clicking ``18th Sept`` navigates to "Monthly view"
-
-
-
-This is the [Figma Protype](https://www.figma.com/proto/yPdKVuRAFNUeikCTRdcEIw/Calendar_GWOC?node-id=2%3A67&scaling=scale-down&page-id=0%3A1&starting-point-node-id=2%3A67), check out the link.
-
-
-Made by [Saksham](https://www.linkedin.com/in/sakshammishra/) :+1:
diff --git a/UI_UX/Essential_Screens/Login_Page.md b/UI_UX/Essential_Screens/Login_Page.md
deleted file mode 100644
index 18ee0b6bd5..0000000000
--- a/UI_UX/Essential_Screens/Login_Page.md
+++ /dev/null
@@ -1,49 +0,0 @@
-# Login and Signup Screen
-Login/Signup page UI/UX with the following screen :
-I have created two pages in figma. One for the mobile version and the other for the desktop version.
-## 👉🏻 Here are the UI/UX for the mobile version 📱 :
-👁🗨 Explore [Figma Mobile version Prototype](https://www.figma.com/proto/mIN4lmnyKnrdvvtOBsBGO9/Sign-Up-Login-Page?page-id=0%3A1&node-id=35%3A238&viewport=241%2C48%2C0.87&scaling=scale-down&starting-point-node-id=19%3A71).
-### Signup Screen
-#### 📲 Light mode
-
-#### 📲 Dark mode
-
-#### 📲 Color mode
-
-
-In the top left there are some circles that represent the mode of your screen such as it has light mode, dark mode and color mode (I search for this mode to make something specific).
-Then you see an illustration that is masked with circle. Also it gives you various options to create an account like you can create account using your github id or google account or linkedin account. In addition, you can easily create an account with email.
-Here the eye will make sure that your password is visible or not.
-When you click on `Login`, it takes you to the login page and if you click on `Signup` it takes you to the signup page.
-### Login Screen
-#### 📲 Light mode
-
-#### 📲 Dark mode
-
-#### 📲 Color mode
-
-
-In light mode I used a simple white background with a simple gradient. And for dark mode I used black color background with same gradient.
-Talking about the color mode, I just added simple solid background color and added some gradient with contrasting colors on half the design. It's like something new.
-
-## 👉🏻 Here are the UI/UX for the Desktop version 💻:
-👁🗨Explore [Figma Desktop version prototype](https://www.figma.com/proto/mIN4lmnyKnrdvvtOBsBGO9/Sign-Up-Login-Page?page-id=25%3A2&node-id=20%3A100&viewport=241%2C48%2C0.23&scaling=scale-down&starting-point-node-id=20%3A104).
-
-### Signup Screen
-#### 📲 Light mode
-
-#### 📲 Dark mode
-
-#### 📲 Color mode
-
-### Login Screen
-Everything is same as the mobile version but there is a slight difference in the design.
-In the signup page for the desktop version I have used a triangular design whereas for the login page for the desktop version the envelope type design is used.
-#### 📲 Light mode
-
-#### 📲 Dark mode
-
-#### 📲 Color mode
-
-
-Here's the [Figma file link](https://www.figma.com/file/mIN4lmnyKnrdvvtOBsBGO9/Sign-Up-Login-Page?node-id=0%3A1), Explore It!
diff --git a/UI_UX/Interface Elements/ImageAssets/Anatomy-Button.jpeg b/UI_UX/Interface Elements/ImageAssets/Anatomy-Button.jpeg
deleted file mode 100644
index 44cb0b20a0..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/Anatomy-Button.jpeg and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/Animated_Button.gif b/UI_UX/Interface Elements/ImageAssets/Animated_Button.gif
deleted file mode 100644
index 9011537344..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/Animated_Button.gif and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/CheckButton.png b/UI_UX/Interface Elements/ImageAssets/CheckButton.png
deleted file mode 100644
index 67e381ccf2..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/CheckButton.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/Color-coded-Buttons.png b/UI_UX/Interface Elements/ImageAssets/Color-coded-Buttons.png
deleted file mode 100644
index 68e7596ad1..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/Color-coded-Buttons.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/DropdownButton.png b/UI_UX/Interface Elements/ImageAssets/DropdownButton.png
deleted file mode 100644
index b4cdadfda6..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/DropdownButton.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/FAB.png b/UI_UX/Interface Elements/ImageAssets/FAB.png
deleted file mode 100644
index cefcb06c1b..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/FAB.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/FlatButton.png b/UI_UX/Interface Elements/ImageAssets/FlatButton.png
deleted file mode 100644
index 49394c4a03..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/FlatButton.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/GhostButton.png b/UI_UX/Interface Elements/ImageAssets/GhostButton.png
deleted file mode 100644
index 65bfb26584..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/GhostButton.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/IconButton.png b/UI_UX/Interface Elements/ImageAssets/IconButton.png
deleted file mode 100644
index e3cdc12953..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/IconButton.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/Icon_with_Label.png b/UI_UX/Interface Elements/ImageAssets/Icon_with_Label.png
deleted file mode 100644
index 279271776b..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/Icon_with_Label.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/LoginForm.png b/UI_UX/Interface Elements/ImageAssets/LoginForm.png
deleted file mode 100644
index 097f15cd08..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/LoginForm.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/RadioButton.png b/UI_UX/Interface Elements/ImageAssets/RadioButton.png
deleted file mode 100644
index f0d4d06d5b..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/RadioButton.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/RaisedButton.png b/UI_UX/Interface Elements/ImageAssets/RaisedButton.png
deleted file mode 100644
index 209d36d4e8..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/RaisedButton.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/ShapeButtons.png b/UI_UX/Interface Elements/ImageAssets/ShapeButtons.png
deleted file mode 100644
index caf0884326..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/ShapeButtons.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/SizeButtons.png b/UI_UX/Interface Elements/ImageAssets/SizeButtons.png
deleted file mode 100644
index d5201f0ccb..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/SizeButtons.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/States-Button.jpg b/UI_UX/Interface Elements/ImageAssets/States-Button.jpg
deleted file mode 100644
index 9140c30ffd..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/States-Button.jpg and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/TextButton.png b/UI_UX/Interface Elements/ImageAssets/TextButton.png
deleted file mode 100644
index 75ff1651b7..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/TextButton.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/ToggleButton.png b/UI_UX/Interface Elements/ImageAssets/ToggleButton.png
deleted file mode 100644
index 84ca9174e4..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/ToggleButton.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/ImageAssets/faded-button.png b/UI_UX/Interface Elements/ImageAssets/faded-button.png
deleted file mode 100644
index 285b1a65c9..0000000000
Binary files a/UI_UX/Interface Elements/ImageAssets/faded-button.png and /dev/null differ
diff --git a/UI_UX/Interface Elements/Interface Elements-Types of UI buttons in Figma.md b/UI_UX/Interface Elements/Interface Elements-Types of UI buttons in Figma.md
deleted file mode 100644
index f30f2949b9..0000000000
--- a/UI_UX/Interface Elements/Interface Elements-Types of UI buttons in Figma.md
+++ /dev/null
@@ -1,58 +0,0 @@
-
-# Interface elements-Types of UI buttons in Figma
-
-
-
-
A button is an interactive element that enables to get the expected interactive feedback from the system following a particular command. Basically, a button is a control that allows a user to directly communicate with the digital product and send the necessary commands to achieve a particular goal. For example, it may be the task to send an email, buy a product, download some data or a piece of content, turn on the player and tons of other possible actions. One of the reasons why buttons are so popular and user-friendly is that they efficiently imitate interaction with the objects in the physical world.
Modern UI buttons are quite diverse and can serve plenty of purposes, with aesthetics and animations that are icing on the cake. Many also have shapes, color codes, or icons that usually convey it's functionality to the user without the need of documentation.
-
-
-
Fig: Simple form with a LOGIN button & create an account button on the bottom.
-
-## Anatomy of a button:
-*Fig: Design components of a Button.*
-
-## Different states of a Button:
-*Fig: Button states.*
-
- - **Normal:** states that button is available for interaction.
- - **Focus:** states that the button element is highlighted by a keyboard or other input method.
- - **Hover:** states that user is hovering the mouse pointer over it.
- - **Active:** states that the user has tapped on the button, the state starts from the user starting the tap till the tap ends.
- - **Progress/Loading:** states that the user has tapped and the command is executing.
- - **Disabled:** states that the button is not interactive.
-
-## Categories of Buttons:
-
-Buttons are highly flexible element in any product, and their flexibility in design introduces some characteristics of their functionality.
-There are multiple categories in which the buttons can be classified:
-
- -
Shape: Buttons come in different shapes, the most preferred shapes are rectangles, rounded rectangles, squares, rounded squares and circles, while sharp borders represent formality, rounded buttons exhibit friendliness.THe images contains various options of logging in with buttons.
-
- -
Size: Buttons also come in different sizes, mostly denoting their importance in a product, bigger ones are considered to be primary, while smaller ones are considered secondary.Image contains Login button with higher precedence, while signup and guest have same and lower precedence.
-
- -
Color: Buttons also come in different colors, As nowadays programming languages allow for manipulating color to match the product aesthetics, conventionally there were some predefined colors that exhibited certain situations.
-
- -
Animation: Static buttons are somewhat very prevalent in well-set businesses, while newer generation focused on more aesthetics, designers found a way to teach their product with animations.
-
-## Types of buttons you can create in Figma:
-Figma's rich interface allows designers to create literally anything. and so the types of buttons that a designer can create is vast. However, below are some of the buttons that you can easily create with Figma.
-
- -
Flat Button: Simple rectangular shape with text inside.
-
- -
IconButton: Simple icon in the centre, many times in a circular shape, icon conveys the action done by the button.
-
- -
Icon with Label Button: Simple rectangular shape with Icon and a text.
-
- -
CheckBox button: Allows selection when multiple options are available, and selections are also more than one required.
-
- -
Radio Button: Also allows selection of options where multiple are available, but only one at a time.
-
- -
Ghost Button: Simple rectangular shape, but only borders visible, grouped with primary buttons (solid fill buttons) to signify a secondary behaviour. The image has SignUp functionality integrated with Ghost button
-
- -
Ghost Button: Simple text which is capable of action when tapped on. Grouped with primary buttons, to either signify secondary action, or tertiary action when secondary button is also present. The image has signUp functionality embedded with a text button.
-
- -
RaisedButton: Same rectangular button but other applied effects make it look like it is raised above the screen it is on.
- -
Toggle Button: A button which changes visuals when clicked. For e.g: Electric switches look different when they are switched from on to off.
- -
DropDown Button: Buttons which when clicked, expands into atomic actions. For e.g: A sharing button opens multiple buttons with multiple ways of sharing data.
-
-
diff --git a/UI_UX/Introduction_to_Figma/Part_1_What_is_Figma_.ipynb b/UI_UX/Introduction_to_Figma/Part_1_What_is_Figma_.ipynb
deleted file mode 100644
index bf1a8bfd40..0000000000
--- a/UI_UX/Introduction_to_Figma/Part_1_What_is_Figma_.ipynb
+++ /dev/null
@@ -1,276 +0,0 @@
-{
- "nbformat": 4,
- "nbformat_minor": 0,
- "metadata": {
- "colab": {
- "name": "Part 1-What is Figma?.ipynb",
- "provenance": [],
- "collapsed_sections": []
- },
- "kernelspec": {
- "name": "python3",
- "display_name": "Python 3"
- },
- "language_info": {
- "name": "python"
- }
- },
- "cells": [
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "BAM7qCZYD31w"
- },
- "source": [
- "## What is Figma?\n",
- "\n",
- "Figma is a web-based graphics editing and user interface design app. You can use it to do all kinds of graphic design work from wireframing websites, designing mobile app interfaces, prototyping designs, crafting social media posts, and everything in between.\n",
- "\n",
- "Figma is different from other graphics editing tools. Mainly because it works directly on your browser. This means you get to access your projects and start designing from any computer or platform without having to buy multiple licenses or install software.\n",
- "\n",
- "\n",
- "\n",
- "---\n",
- "## Key features of Figma \n",
- "\n",
- "* Modern pen tool that lets you draw in any direction and instant arc designs\n",
- "\n",
- "* Open Type font features\n",
- "* Automated tasks via plugins for repeated elements to speed up projects\n",
- "* Smart selection tool with auto adjustments for spacing, arrangement, and organizing\n",
- "* Create design systems and components\n",
- "* Drag and drop accessible libraries\n",
- "* Inspect design files and grab code snippets\n",
- "* Easy export feature, that has a live link (not a flat PDF)\n",
- "* Design interactions and mobile optimized prototypes\n",
- "* Smart animation to connect objects and transitions\n",
- "* Edit together with teams in real-time in shared design spaces\n",
- "* Version history that lets you know everything that has changed, and who did it\n",
- "* Create design systems with searchable assets, shareable styles, and everything in one location\n",
- "* Create reusable components with the ability to override them when necessary\n",
- "\n",
- "\n",
- "## Before we get started\n",
- "\n",
- "Take a second to look at the objectives we are going to complete.\n",
- "\n",
- "* Find our way around Figma’s interface\n",
- "\n",
- "* Learn important keyboard shortcuts\n",
- "\n",
- "\n",
- "---\n",
- "\n",
- "\n",
- "### 1. Setup your Figma Account\n",
- "\n",
- "Getting started in Figma is as simple as going to www.figma.com, clicking “Sign up”, and entering your details. Once you’ve done that, Figma will open up with a start screen like this. Click on “New File” and we’ll get started!\n",
- "\n",
- "\n",
- "\n",
- "### 2. Take a look around the Figma interface\n",
- "\n",
- "\n",
- "\n",
- "Here’s an explanation of the interface’s main areas (labeled above):\n",
- "\n",
- "**Menu:**\n",
- "\n",
- "Unlike regular desktop design apps, Figma’s menus can be found by clicking the hamburger button in the top-left of the screen. Take a minute to browse around these menus and see what’s there! You can also search for the specific command you need. Start typing in “line” and you’ll quickly find the Line Tool, complete with a handy reminder of its keyboard shortcut. And these are the options available in the menu:\n",
- "\n",
- "* **Back to Files:** Open the file Browser in the current location.\n",
- "\n",
- "* **File:** Perform file-level permissions, including importing and exporting.\n",
- "* **Edit:** Access undo/redo, copy/paste, and advanced selection functions.\n",
- "* **View:** Control view settings for layout grids and rulers, perform zoom functions, and navigate within a file.\n",
- "* **Object:** Apply object-level functions like grouping, framing, rotating, and more.\n",
- "* **Text:** Format text with bolds or italics, and set size, height, and spacing.\n",
- "* **Arrange:** Tidy up objects with alignment and distribution functions.\n",
- "* **Plugins:** View, manage, and run any plugins you have installed.\n",
- "* **Integrations:** View, manage, and use any applications you have connected.\n",
- "* **Preferences:** Adjust your preferences.\n",
- "* **Libraries:** Open the Library modal.\n",
- "\n",
- "**Tools:**\n",
- "\n",
- "\n",
- "\n",
- "Here you can quickly access the tools you’re likely to use most often: frames, shapes, text, etc.\n",
- "\n",
- "* **Move and Scale Tools:** \n",
- "When you open files in the Editor, Figma will select the Move Tool **`V`** by default. The Move tool allows you to select and reorder layers in the Layers Panel, or move objects around on the canvas.\n",
- "\n",
- "* **Frame and Slice tools:** \n",
- "Use the keyboard shortcuts **`A`** or **`F`** to select the frame tool. Create a frame with your own dimensions in the canvas, or select a frame size from Figma's presets in the right-hand panel. \n",
- "\n",
- " The Slice tool allows you to specify a region of the screen you want to export.\n",
- "Use the keyboard shortcut **`S`** to select the Slice tool.\n",
- "\n",
- "* **Shape tools:** \n",
- "In addition to drawing your own shapes using the Pen Tool, there are a number of default shapes you can use in Figma.\n",
- "\n",
- "* **Pen and Pencil tools:**\n",
- "The Pen tool **`P`** allows you create custom shapes and icons. Build complex Vector Networks using vector paths, anchor points, and bezier curves.\n",
- "The Pencil tool allows you to add freehand drawings or annotations to your design files.\n",
- "\n",
- "* **Text tool:**\n",
- "Text is one of the crucial components of interface design. Everything from the placement and arrangement of text, to the choice of font, has a part to play.\n",
- "\n",
- " Select the Text tool from the Toolbar, or press the **`T`** key to add text layers to your file.\n",
- "\n",
- " * Click once in the canvas to add a text layer that grows horizontally\n",
- " * Click and drag to create a text layer that is fixed in size\n",
- "\n",
- "* **Hand tool:**\n",
- "The Hand Tool allows you to click around within a file without accidentally activating hover outlines, making selections, or moving objects.\n",
- "\n",
- " If you're using Figma on a device with a touch screen, the Hand Tool allows you to pan around a file using your fingers.\n",
- " Press and hold the **`Space bar`** to activate the Hand Tool.\n",
- "\n",
- "* **Comment tool:**\n",
- "The Comment tool allows you to quickly exchange ideas with collaborators. Use comments to respond to feedback, tweak your designs and iterate faster - all from the original design file.\n",
- "\n",
- " Comments are accessible to anyone with view or edit permissions to the file.\n",
- "\n",
- "**Options:**\n",
- "\n",
- "This area shows extra options for whichever tool you have selected. When no object is selected (as shown above), Figma displays the file name. When an object is selected, contextual options appear here.\n",
- "\n",
- "* **Edit Object:** \n",
- "Click the **`Edit Object`** icon to enter Vector Edit mode. This allows you to add, remove, or adjust the individual anchor points within a vector path.\n",
- "\n",
- " Click the **`Enter`** / **`Return`** key to enter Vector Edit mode.\n",
- "\n",
- "* **Create Components:**\n",
- "Components are elements that you can reuse across your designs. They help to create and manage consistent designs across projects. Click the **`Create Component`** icon to create a Component out of your selection.\n",
- "\n",
- " If you select more than one layer or frames, use the arrow next to the icon to choose how to create Components:\n",
- "\n",
- " * Create Component: Create a single Component from your selection.\n",
- "\n",
- " * Create Multiple Components: Create a Component for each layer or frame in your selection.\n",
- "\n",
- " MacOS: **`Control`** + **`Commmand`** + **`K`**\n",
- "\n",
- " Windows: **`Ctrl`** + **`Alt`** + **`K`**\n",
- "\n",
- " \n",
- "\n",
- "* **Use as Mask:**\n",
- "Masks let you show or hide specific portions of a layer or object. Click the **`Mask icon`** to create a mask out of the current selection.\n",
- "\n",
- " When you create a mask, Figma will place every layer within that selection inside a Mask group. Figma will use the outline of the current layer to determine what you can see of any layers underneath.\n",
- "\n",
- " MacOS: **`Control`** + **`Commmand`** + **`M`**\n",
- "\n",
- " Windows: **`Ctrl`** + **`Alt`** + **`M`**\n",
- "\n",
- " \n",
- "\n",
- "\n",
- "**Share and view settings:**\n",
- "\n",
- "* **Multiplayer and observation mode:**\n",
- "See who else is active on the file. This includes anyone who is currently viewing or editing the file.\n",
- "\n",
- " Click on a users' avatar to enter observation mode and view their actions in real-time. This is great for presentations and design critiques.\n",
- "\n",
- " \n",
- "\n",
- "* **Share:**\n",
- " Click the Share button to open the share modal. This lets you manage who has access to your file. From the share modal you can:\n",
- "\n",
- " * Invite Viewers or Editors to a file\n",
- "\n",
- " * Share files with others using Link Sharing\n",
- " * Transfer ownership of a file\n",
- " * Adjust permissions on a file\n",
- " * Remove a collaborator from a file\n",
- " * Prevent Viewers from copying, sharing, or export from files\n",
- "\n",
- " \n",
- "\n",
- "* **Present:**\n",
- " Click the Present icon to open the file in Presentation View. This lets you preview your designs and interact with any prototypes you've created.\n",
- "\n",
- " Use Presentation view while you build and test your prototype, or when you're ready to share your prototype with others.\n",
- "\n",
- "* Preview static designs on specific devices\n",
- "* Present slides for presentations\n",
- "* Build and test interactions and animations\n",
- "* Run usability tests with users\n",
- "\n",
- " \n",
- "\n",
- "* **View Settings:** \n",
- "Adjust your view settings on your file, including:\n",
- "\n",
- " * Zoom Settings\n",
- "\n",
- " * Pixel Preview\n",
- " * Pixel Grid\n",
- " * Layout Grids\n",
- " * Multiplayer Cursors\n",
- "\n",
- "**Layers:**\n",
- "\n",
- "Any Frames, Groups or Objects you add to the canvas will be visible in the Layers panel. You can determine if a Layer is a Frame, Group or a specific type of Object by the icon next to it\n",
- "\n",
- "Every object in the canvas will have a corresponding layer in the Layers Panel.\n",
- "\n",
- "Click the Layers tab in the left sidebar to open the layers panel. Or, use the keyboard shortcut:\n",
- "If you hover over the layer in the panel, a blue box will highlight that layer’s location on the Canvas.\n",
- "\n",
- "Click on the layer name in the layers panel to select it.\n",
- "\n",
- "If there are any Frames or Groups on the canvas, we will nest the child objects within the parent. Click the arrow next to a Frame, Group, or Component to view any child layers.\n",
- "\n",
- "\n",
- "\n",
- "As you can see in the image above, the selected frame is highlighted in bluw with it's corresponding layers \n",
- "\n",
- "**Canvas:**\n",
- "\n",
- "This is where you create and review all your work. If you like having rulers visible on your canvas, you can use the **`Shift`** + **`R`** shortcut to enable them. You can also use the search feature under the menu icon to search for rulers. \n",
- "\n",
- "**Inspector:**\n",
- "\n",
- "The Inspector shows contextual information and settings for whatever object is selected. In the image above, we’re seeing options for the Canvas itself. Note that Figma gives us separate tabs in the Inspector (Design, Prototype, and Inspect).\n",
- "\n",
- "* **Design :**\n",
- "The Design tab allows you to view, add, remove or change the properties of objects within your design. It has properties such as frame, layers, color fills, typefaces, stroke effects, etc.\n",
- "\n",
- " \n",
- "\n",
- "* **Prototype :**\n",
- " The Prototype tab gives you access to all the prototyping functionality.\n",
- "\n",
- " This allows you to establish connections between frames in your design. You can then apply transitions that simulate how a user might interact with them.\n",
- "\n",
- " The Prototype tab consists of five sections: \n",
- " * Choose an Interaction\n",
- "\n",
- " * Apply an Animation\n",
- "\n",
- " * Customize an Overlay\n",
- "\n",
- " * Define the Overflow Behavior\n",
- "\n",
- " * Adjust the Prototype Settings\n",
- "\n",
- " \n",
- "\n",
- "* **Inspect :**\n",
- " The third option in the right sidebar is the Inspect tab. This allows you to see how to express elements of your design in code.\n",
- "\n",
- " You can choose from the following formats:\n",
- "\n",
- " * CSS (Web Development)\n",
- " * iOS (Swift)\n",
- " * Android (XML)\n",
- "\n",
- " "
- ]
- }
- ]
-}
\ No newline at end of file
diff --git a/UI_UX/Introduction_to_Figma/Part_3_VectorNetworksandPenTool_Video.md b/UI_UX/Introduction_to_Figma/Part_3_VectorNetworksandPenTool_Video.md
deleted file mode 100644
index 77c343e642..0000000000
--- a/UI_UX/Introduction_to_Figma/Part_3_VectorNetworksandPenTool_Video.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# Pen Tool and Vector Networks
-
-
-
-
-Created by : [Sarfraz Alam](https://github.com/Sarfraz-droid)
\ No newline at end of file
diff --git a/UI_UX/Introduction_to_Figma/Part_3_Vector_Networks_and_Pen_Tool.md b/UI_UX/Introduction_to_Figma/Part_3_Vector_Networks_and_Pen_Tool.md
deleted file mode 100644
index c2cf16f4fd..0000000000
--- a/UI_UX/Introduction_to_Figma/Part_3_Vector_Networks_and_Pen_Tool.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# Vector Networks and Pen Tool
-
-Vector networks are one of the most unique features in Figma. Most pen tools draw paths in a loop with a defined direction, always wanting to reconnect to their original point. Vector networks do not have a direction and can fork off in different directions without requiring a separate path object to be created. Complex objects can then be created within the same object and with the same properties much faster than they could be drawn using traditional vector path tools.
-We will start off with the core concepts behind the pen tool, and from there we will move onto Figma’s Vector Networks.
-
-## Pen Tool
-The Pen tool allows you to create new vector points or to edit existing points. You can hold click while creating a new vector point to curve your vector lines.
-
-
-The pen comes with the initial shape, i.e., Straight Line.
-Click and extend it in any direction. You can see it is a straight line. To terminate it click again at any point if you want to exit that particular SVG, press ESC.
-
-
-Now you will see this in the taskbar.
-
-The curved symbol means we can curve it from ends. You can also do this by clicking on the small circle at the end.
-
-## Paths
-The pen tool is used to create and manipulate paths.
-Paths are a series of lines and curves that may or may not form a loop. The main characteristic of paths is that they form a single continuous unbroken chain. This means that each node can only be connected to one or two other nodes.
-
-
-A path is made up of two things, points and lines. The points are known as **nodes** (or vertices) and the lines are called **edges**. Edges fall into two categories, straight and curvy.
-
-### Editing a path:
-If you select a path and hit ENTER, you’ll enter Vector Edit mode, in which you can select, adjust, or change properties of individual points, lines, or entire shapes. You can also use the Edit Object button from the Toolbar to enter Vector Edit. To exit, just hit ENTER again or press DONE in the toolbar.
-
-## Bezier curves
-Curvy edges are bezier curves. Bezier curves are a special type of curve defined by four points. The positions of the two nodes in our edge make up the start and end points of the curve. Each of the two nodes has a *control point*.
-
-
-Vectors are composed of points, which can be curved using the Bezier Curve. At any point, you can select a vector point and edit the Bezier Curve by clicking on the endpoints/ Control points.
-
-To access a point’s Bézier handles, enter Edit mode. If it is a curve, the handles will already be showing. If it is a corner with no handles, hold ⌘ and click the point to show the handles and create a mirrored curve.
-
-### Rounded Corners
-Any intermediate point on a path can be rounded via the Corner Radius property in the Inspector. If you select the entire path, it rounds all corners to the same degree. If you go into Edit mode, you can select individual points and round them separately.
-
-Terminal points on an open path can only be rounded via End Caps.
-
-
-# VECTOR NETWORKS
-A vector network is an improvement upon vector paths. It allows you to join any two points unlike vector paths which require forming a single chain that can't be broken. Vector networks make it very easy to create complex shapes which is especially useful while designing icons.
-*A vector network improves on the path model by allowing lines and curves between any two points instead of requiring that they all join up to form a single chain.*
-
-### An example for working with vector networks:
-Create a rectangle 24x24 and rotate 45 degrees. Press enter to edit and select the Pen tool. Create a new vector point from the bottom point, and click at the nearest pixel. Press Shift and down arrow twice to move by 20 downwards. Repeat the same steps for the other 2 points. Then, close the bottom points from each side. Voila, you have a 3D-like cube.
-You can customize the perspective by moving the top point down by 5, and the bottom point upwards by 5.
-
-
-
-
-Image Credits: https://medium.com/ & https://designcode.io/
-
diff --git a/UI_UX/Introduction_to_Figma/Part_4_Creating_Grids.ipynb b/UI_UX/Introduction_to_Figma/Part_4_Creating_Grids.ipynb
deleted file mode 100644
index c849ca8895..0000000000
--- a/UI_UX/Introduction_to_Figma/Part_4_Creating_Grids.ipynb
+++ /dev/null
@@ -1,339 +0,0 @@
-{
- "nbformat": 4,
- "nbformat_minor": 0,
- "metadata": {
- "colab": {
- "name": "Creating Grids.ipynb",
- "provenance": []
- },
- "kernelspec": {
- "name": "python3",
- "display_name": "Python 3"
- },
- "language_info": {
- "name": "python"
- }
- },
- "cells": [
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "A3TIwjJHLVX0"
- },
- "source": [
- "# **Creating Grids**"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "Ze-JL-eGdhbz"
- },
- "source": [
- "###**What are Grids in Figma**"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "g9hK--pElImZ"
- },
- "source": [
- "In design, a grid may help with organisation and uniformity, readability, and emphasis and hierarchy. You may establish structure, hierarchy, and rhythm in your design by carefully designing a grid that is appropriate for your content. Grid scaffolding, when done correctly, may remove the guesswork from many elements of your workflow. Grids of various sorts can also benefit in the rationalization of type scales, placement, size, and spacing."
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "xD8g4clBkDM1"
- },
- "source": [
- "Basically, Layout Grids in Figma helps the users to align objects within a Frame. \n",
- "It is easier to give the designs a visual structure with the use of Layout Grids.\n",
- "They help us in keeping our designs rational and consistent across platforms and devices."
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "RL5U3g0AkAlB"
- },
- "source": [
- "The pixel grid isn't required for layout grids. This implies they aren't constrained by a certain resolution or size."
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "rlVvUz07mMpl"
- },
- "source": [
- "Grids for layout allow you to:\n",
- "\n",
- "* Ensure that your branding is consistent across all platforms.\n",
- "\n",
- "* When creating layouts, make fewer choices.\n",
- "\n",
- "* Reduce the time it takes to create mock-ups or wireframes by reducing the time required to specify layouts.\n",
- "\n",
- "* Support a variety of layout methods, including galleries, icons, and full-page layouts."
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "3zEoMuf6mXUr"
- },
- "source": [
- "### **Applying layout grids**"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "9U6Y_ShQmmvW"
- },
- "source": [
- "Layout grids may only be applied to frames, which means they can be applied to any top-level frames scaled for a device (desktop, mobile, tablet), nested frames inside your design, or even frames within your components. \n",
- "\n",
- "*Keep in mind that components are also frames*."
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "FMzIUTBknhcJ"
- },
- "source": [
- "The layout grid settings are located in the right sidebar\n",
- "\n",
- "To use a layout grid, follow these steps:\n",
- "\n",
- "\n",
- "\n",
- "1. Select the canvas frame or the Layers panel in the left sidebar\n",
- "\n",
- "\n",
- "\n",
- "2. In the right sidebar, click + next to Layout grids\n",
- "\n",
- "\n",
- "\n",
- "3. By default, a uniform grid will be applied to the frame\n",
- "\n",
- "\n",
- "\n",
- "4. Then click the button next to Grid with the nine dots in a square shape to view the layout grid options and make any necessary changes"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "6QtL_00iDYJK"
- },
- "source": [
- ""
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "rh10UhFRLpSN"
- },
- "source": [
- "The visibility of your layout grids may be toggled. This is useful when you need to hide your layout grids without completely deleting them.\n",
- "\n",
- "Even if the layout grids aren't visible, they'll still work."
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "U1T8bGEI9hhQ"
- },
- "source": [
- "[Video demo](https://drive.google.com/file/d/1X2FbVT2ZpQqtCnmghXsnCsWxs_N7CMem/view?usp=sharing)\n"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "0Ch6EfKJ9f02"
- },
- "source": [
- "### **Types of grids**"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "85nWBX7--WZv"
- },
- "source": [
- "A uniform square grid, columns, and rows are the three types of layout grids available.\n",
- "\n",
- "Uniform grids generate a set of equally spaced fields across your frame (think of a sheet grid paper) at whatever size you choose. Uniform grids allow you to customize the grid's size and color. Square grids are ideal for instances when accuracy is required, such as when drawing symbols or icons.\n",
- "\n",
- "\n",
- "\n",
- "You may customize the width and height of the grid, as well as the gutter and margins, using column and row grids. They're great for creating web and mobile responsive interfaces.\n",
- "\n",
- "\n",
- "\n",
- "Grids can be used alone or in combination to provide more sophisticated layouts."
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "DSvAYAjT_f8u"
- },
- "source": [
- ""
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "UWdEnaw-_nbx"
- },
- "source": [
- "[Watch a demo here](https://drive.google.com/file/d/1QCQ4xspLD5Ajc4SZoZK8jcNXpMatccv8/view?usp=sharing)"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "FSeEFxHJCUX8"
- },
- "source": [
- "### **Properties of a grid**"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "RpfTPo3ZFILe"
- },
- "source": [
- "The characteristics of your grid may be defined as follows:\n",
- "\n",
- "The **Count** specifies the number of columns or rows in the grid.\n",
- "\n",
- "The **Gutter** is the line that separates each column or row.\n",
- "\n",
- "The **Margin** is the space between the beginning of the column or row and the edge. Only Stretch grids are affected.\n",
- "\n",
- "The **Offset** specifies how far the column or row starts from the top or left. This is true for rows that are set to the top and columns that are set to the left."
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "XGBesnV4FWp_"
- },
- "source": [
- "**Fixed** and **stretchy** grids are the two types of layout grids.\n",
- "\n",
- "You may set the Width (column width) and Height (row height) of **Fixed layout grids**, as well as the Count (number) of columns and rows.\n",
- "\n",
- "\n",
- "\n",
- "The grid for the layout may be set to:\n",
- "\n",
- "\n",
- "\n",
- "* For Rows, the top or centre of the frame\n",
- "\n",
- "* Columns should be placed to the left or centre of the frame."
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "qgH4JFOXFzHT"
- },
- "source": [
- "**Stretchy grids** will adapt to the size of the frame. This allows your designs to respond accordingly when the frame is resized.\n",
- "\n",
- "The Width or Height of the grid will be automatically determined, based on the frame size."
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "yrE64JOFJRuE"
- },
- "source": [
- "A layout grid's default **colour** is red (#FF0000), and it has an opacity of 10%.\n",
- "\n",
- "Any layout grid can have its colour and opacity changed:\n",
- "\n",
- "\n",
- "\n",
- "1. In the right sidebar, click the button with the nine dots in a square shape.\n",
- "\n",
- "2. To use the colour swatch, simply click on it:\n",
- "\n",
- "3. Pick a new colour using the colour picker.\n",
- "\n",
- "4. Adjust the opacity if needed."
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "ub7sa-LvJ58l"
- },
- "source": [
- ""
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "_vyOQ321KZ2p"
- },
- "source": [
- "### **Combine layout grids**"
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "SIzfV0oUKykq"
- },
- "source": [
- "You may use many layout grids on a single frame. When creating more complicated Layouts, this comes in helpful.\n",
- "\n",
- "For example, if you want additional flexibility over vertical and horizontal alignment, you may use both Column and Row layout grids."
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "WwOqvdVcK92s"
- },
- "source": [
- "1. Choose the frame to which you want to add another layout grid.\n",
- "\n",
- "2. In the right sidebar, click next to Layout grids.\n",
- "\n",
- "3. Choose a layout grid from the dropdown menu.\n",
- "\n",
- "4. Define any extra characteristics that are appropriate.\n",
- "\n",
- "5. Add more layout grids to the frame by repeating the process."
- ]
- },
- {
- "cell_type": "markdown",
- "metadata": {
- "id": "1ME6nOEtLdQF"
- },
- "source": [
- ""
- ]
- }
- ]
-}
\ No newline at end of file
diff --git a/UI_UX/Introduction_to_Figma/Part_4_Introduction_to_Figma_Creating_Grids.md b/UI_UX/Introduction_to_Figma/Part_4_Introduction_to_Figma_Creating_Grids.md
deleted file mode 100644
index 671c99f3d3..0000000000
--- a/UI_UX/Introduction_to_Figma/Part_4_Introduction_to_Figma_Creating_Grids.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# Introduction to Figma - Creating Grids
-
-
-
-Layout grids help us to align objects within a frame. They provide visual structure to our designs. They help our designs remain logical and consistent across different platforms and devices.
-
-Layout grids aren't reliant on the pixel grid. This means they aren't dependent on a specific resolution or dimensions.
-
-You can only apply layout grids to frames. This could be a top-level frame, or a frame nested within another frame.
-
-Layout grids let you:
-
-- Establish consistency across multiple platforms.
-- Make fewer decisions when defining layouts.
-- Reduce the time taken to define layouts for mock-ups or wireframes.
-- Support diverse layout techniques like galleries, icons, or entire page layouts.
-
-## Layout grid basics
-
-Before I dive into the more advanced use cases, let's cover the basics of where and how you apply grids. If you're a grid pro, skip ahead to the next section.
-
-- Apply a layout grid to any frame - Layout grids can only be applied to frames; this means you can apply them to any top level frames sized for a device (desktop, mobile, tablet), frames nested within your design, or even frames inside your components.
-
-- Multiple grids on a frame - You can add as many different layout grids to a frame. This means you could stack different types of grids on a single frame. Each of those grids can also be selected and pasted onto other frames since they are applied like other properties in the right hand sidebar.
-
-- Grid appearance - You can control the appearance (color and opacity) of each grid so they are easily differentiated.
-
-https://user-images.githubusercontent.com/85386116/133922040-21e411e0-685b-4f83-b3ad-965b2ad6572a.mp4
-
-# How to Create Grid in Figma?
-
-In order to apply Layout Grid, a user needs to follow the following steps:
-
-- At first, select the Frame in the canvas or the Layers Panel where the user is prototyping.
-- Then in the Properties Panel, user will see a "+" icon beside the Layout Grid.
-- Atomatically, a Uniform Grid will appear and applied to the Frame, it is a default move by Figma.
-- Users can then click on to the Grid icon to update any of the properties from the Layout Grid settings.
-Now, Layout Grids are available in three forms as Grid, Rows and Columns in a uniform square. Users can easily define the size or the color of their choice to the grid. For Rows and Columns, user can easily define the height and width they’d prefer, and the same thing can be done margins and gutters.
-
-Now, in order to change the Layout Grid, these are the following steps:
-
-- Click on to the Grid icon present in the Properties Panel then click on the Grid drop down menu present in the Layout Grid Properties section.
-- After this, users will be given options to choose a Grid with Columns, Grid with Rows and Uniform Grid
-- Further a user can choose to customize the Layout Grid however they prefer it to be.
-Uniform Grids can be chosen of any size, it will later determine the pixels each of the squares will contain. When a user clicks on the Grid icon and open the Layout Grid setting, they can also update the size field as preferred and the user can just click on the "X" sign to return to the can canvas.
-
-
-Colum and Rows Grids can be applied together, it provides extra flexibility and control to the users over the layout. Users can very easily define the properties of the grid by simply understanding that "Count" determines the number of Rows and Columns in the Grid, "Gutter" determines the space which will be between each Row and Column, "Margin" determines the space between the Column or the Row from the edge, however it is only applicable to Stretch grids and lastly "Offset" determines the space between Row or Column from the Top or the Left.
-
-
diff --git a/UI_UX/Introduction_to_Figma/Part_5_Introduction_to_Figma_Plugin_Unsplash.md b/UI_UX/Introduction_to_Figma/Part_5_Introduction_to_Figma_Plugin_Unsplash.md
deleted file mode 100644
index 79c85fe21f..0000000000
--- a/UI_UX/Introduction_to_Figma/Part_5_Introduction_to_Figma_Plugin_Unsplash.md
+++ /dev/null
@@ -1,73 +0,0 @@
-# Introduction to Figma Plugin - Unsplash
-
-
-
-Figma plugins are a designing platform that provides additional tools to UI designers, and the plugins collections of it built by different communities. With Figma, you can extend your working capacity for designing work, and it also provides helpful features in the form of exciting plugins with their time to time update format. If you explore Figma on the internet, you will find a number of the plugin in it, and here we will see some of them with their proper explains. You will get knowledge about how you can connect with these plugins and use them in the right way for your design work.
-
-Like Figma and FigJam, plugins are powered by web technologies. You’ll need an understanding of these technologies to develop plugins. You’ll write plugins in JavaScript and build any UI using HTML. Explore [required knowledge →](https://www.figma.com/plugin-docs/prerequisites/)
-
-Plugins interact with the Figma application via a dedicated Plugin API. They can also leverage external Web APIs. You can build plugins that run immediately, or build plugins that require user’s to input information via a user interface (UI). [Explore how plugins are run →](https://www.figma.com/plugin-docs/how-plugins-run/)
-
-The [API reference](https://www.figma.com/plugin-docs/api/api-reference/) and this accompanying documentation has the information you need to build plugins for Figma and FigJam. To ask questions, give feedback, or connect with other plugin developers: [Join the Figma Plugins Slack →](https://figmaplugins.slack.com/join/shared_invite/zt-8sv6h6hy-vJ0t3G8uT7l~g2KuY_6WvQ#/shared-invite/email)
-
-So let us go through these plugin :point_down:
-
-
-# Unsplash
-
-
- Unsplash is internet’s source of freely usable images.
-
-
-
-
-## Make something awesome
-
-Unsplash was born from the pain we had in finding great, usable imagery. And we weren’t alone. Which is why, today—millions of creators from around the world have downloaded over 2 billion Unsplash images to create presentations, artwork, mockups, and more.
-
-## Is it really free? Yes.
-
-Unsplash is a platform powered by an amazing community that has gifted hundreds of thousands of their own photos to fuel creativity around the world. So sign up for free, or don’t. Either way, you’ve got access to over a million photos under the Unsplash license—which makes them free to do-whatever-you-want with.
-
-
- Anyone can join the Unsplash community
-
-You don’t need to know someone, or have an agent, or have a name to contribute to Unsplash. We’re the place where creators meet their audience, where individuals become a community and where anyone can become a source for creativity. So whether you’re new to photography or consider yourself a pro—your images are welcome here.
-(https://unsplash.com/community)
-
-
-
-
-Making its way from a photography website to a Figma plugin, Unsplash is one of the most celebrated Figma plugins amongst UI/UX designers. What makes it efficient is, however, the drag and drop function of using any image that you like directly to your frames. Unsplash consists of more than 1 million high-quality images from different categories like nature, technology, portrait, creatures, designs, and whatnot.
-
-
-
-
-
-Our setup guide takes you through the process of setting up your environment and running a sample plugin. Get started with the plugin API
-
-# How to Install Figma Plugins?
-
-Now we will see the installation process of Figma plugins. You will find many plugins on Figm.com, but we will show you by installing of one plugin for your knowledge and by the same way, you can install other plugins of Figma.com according to your requirement.
-
-The first thing you have to do is search for Figma.Com on any search engine, and you will find this website page, which is the Figma plugins home page.
-
-
-
-Now go to the community tab of this page and click on the scroll down box’s plugins option.
-
-
-
-Now here you will find a number of list of plugins. We will install Unsplash for your understanding so click on the Install button of it.
-
-
-
-After login, you have to once again click on your desired plugin’s install button.
-
-
-
-And once it installed, there will be an Installed button in place of the Install button.
-
-
-
-This way, you can install any plugin of Figma for using it for your designing purpose.
\ No newline at end of file
diff --git a/UI_UX/Redesign/Grocery_App.md b/UI_UX/Redesign/Grocery_App.md
new file mode 100644
index 0000000000..c8017ca033
--- /dev/null
+++ b/UI_UX/Redesign/Grocery_App.md
@@ -0,0 +1,26 @@
+
Grocery App Redesign
+
+## Challenge: Showing the whole user journey map - > from user onboarding to final payments.
+
+## Initial Design: 
+
+## New Design: User journey
+#### Splash Screens
+
+
+- These are the user onboarding splash screen. It shows the onboarding preview of the grocery app.
+
+#### Home Screen
+
+
+- After the Splash Screen, They are redirected to main interaction menu.
+
+#### Register user-details screen
+
+
+#### MockUps
+
+
+
+Check my Figma Prototype
+
🎉 Hope you have got some idea to redesign a Grocery App 🎉
diff --git a/templates/directory_index/index.md b/templates/directory_index/index.md
deleted file mode 100644
index e03b8109fc..0000000000
--- a/templates/directory_index/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-# Title (name of the field)
-
-## Index
-
-
-
-- [HTML](./html)
-- [CSS](./css)
-- [JavaScript](./javascript)
-
-## Learning path
-
-
-
-1. HTML
-2. CSS
-3. JavaScript
diff --git a/templates/subdirectory_index/index.md b/templates/subdirectory_index/index.md
deleted file mode 100644
index c40f268c31..0000000000
--- a/templates/subdirectory_index/index.md
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-# Title (name of the topic)
-
-# Description
-Small description of the topic
-
-## Index
-
-
-
-- [HTML](./html)
-- [CSS](./css)
-- [JavaScript](./javascript)
-
-
-
-
-
-
-
-
-
-
-
- 
