

Throughout the designing process, I will tell you everything you need to know to replicate the designs yourself. These designs might not necessarily make it into the actual project, but they will be fun to create. Makes sense?įor this article, I thought it would be fun to share the process of designing prototypes, or mockups, for different pages of the application. And after establishing that design, our front-end developers will merely translate the design to HTML & CSS. In other words, we should establish what visual components should be present on the page - like input boxes and submit buttons - and how they should look. It is now time to actually code the front-end and back-end of the application.īut before we do any of that, we should create wireframes and/or prototypes. Recently, we finished our preparation stage - which mostly consisted of sprint planning and creating user stories.

This way, you can install and use plugins of Figma for enhancing your designer work ability.So for my senior project, my team is building a chat application called MataChat. Once your desired image open, you can use that opened image in an exported file of your design in Figma. You can choose anyone from this list, or you can search your desired image in the search box of it. Because Unsplash offers you images so here is the list of the image in the Unsplash plugin dialog box.

We opened Unsplash plugin, so it will open like this. Now, after installation of your desired plugin, go to this scroll down list by clicking on this Search button and go to the Plugins option of this list, then click on your desired installed plugin. Given below shows how to use Figma Plugins: This way, you can install any plugin of Figma for using it for your designing purpose. If you have not created an account on it, click on the Sign Up button of this dialog box, or if you have already an account on, click on the Login button of this box.Īfter login, you have to once again click on your desired plugin’s install button.Īnd once it installed, there will be an Installed button in place of the Install button. If you are not logged in, then you have to login into. We will install Unsplash for your understanding so click on the Install button of it.

Now here you will find a number of list of plugins. Now go to the community tab of this page and click on the scroll down box’s plugins option. 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. You will find many plugins on, but we will show you by installing of one plugin for your knowledge and by the same way, you can install other plugins of according to your requirement. Now we will see the installation process of Figma plugins. Now let us see how we can install them in our personal computer for using them in our designing purposes. These were some important plugins of Figma, which we have seen above. That means it automatically compares your chosen layer’s contrast and gives you knowledge about their color difference for the proper work flow of your design. This plugin works for the differentiation of color contrast between layers. It aligns our element and renames them during rendering of them on the layer in sequence, and this sequence based on their position or distribution on canvas. Super Tidy is one of a plugin of Figma which align our design element very quickly on the basic of their distribution on canvas. In designing, there is an important role of alignment because we need the exact alignment of different elements of our design every time. Figma ChatĪs its name shows chat, that means it is like a chatting application so you can interact with people regarding your design file with it, and in this interaction, you can share elements of your design for getting solutions for your problems. When you extract color from any image in Figma by this plugin, it gives 5 color ranges from that extraction. You can develop solid color from this for your UI design. You can also do any manipulation work in an image taken by this plugin. You can also search for your specific type of image requirement in the search box of it. Unsplash is a beautiful collection of almost every type of image with high resolution, and you can use images of it in your designing work without worry. You just have to select layers in your design file and export them in Figma (you may select one or more layers according to you), then choose avatars, text, and other things from this plugin that you want to use in your design. Content ReelĪs we can understand by its name, content reel provides contents, but which type of content? It involves avatars, text strings, different type of icons which you can use in your designing work. So let us go through these plugins one by one. 3D animation, modelling, simulation, game development & others
