This weeks lecture was ‘work at home’ which my Lecturer provided a video guide on how to create a interface inventory and component library in Figma.

Going into this creating a interface inventory is completely new to me which I am still very new to components but I have a small amount of experience using them.

As for this project I have to redesign a excising bank app and apply my branding to it, I took screenshots of the bank app I am with Santander to create the interface inventory with.

During the video demo it was explained to create different pages in a single Figma file which is something I need to practice more as I usually only use the one page and it gets very busy. This did make the work flow a lot easier for me to navigate and find what I wanted.

Following the tutorial, to create the interface inventory I created frames of the device I use then imported screenshots I took of different pages of the bank app I use. To create the actual inventory I had to ensure my zoom was set to 100% so the screenshots would be ‘true to size’, screenshot all the interactive elements of different pages and put them all together into a inventory.

Once I created the interface library I then went to the component library by importing one of the screen shots and tracing over it. For my first one I went with the medium sized ‘debit card’ button as I have designed my own credit card I thought I could bring this into my design the same way Santander has. As I wanted my buttons to be the blue colour of my branding and my card is blue I wanted to create a split to turn it to white so the card was more visible. To do this I used the diamond shape from my logo mark to create consistency which I am quite pleased at how this turned out.

As mentioned before creating components is fairly new to me which I have only used them for animation so I was interested to see what else I could do with them and what they are used for. Following the tutorial to create the component I ensured everything was selected then clicked the ‘create component’ button which is like a diamond. I then had to create variants of the single button using different shades and unique titles, to create different shades I used the website mentioned on the video which I just had to get the hex code of my brands blue which it then provided different shades with different percentages.

https://maketintsandshades.com

Once I had the component made with variants I then went to the prototype option which is what I am more familiar with and added different settings such as ‘when hovering and ‘when pressed’ and what variant they will display.

Going to the ‘App Design’ page I was then able to drag the button in from the ‘assets’ option. I found this very useful as it keeps the scale of everything and will allow for consistency rather than me having to copy and paste lots of times or using guides, which takes time and can lead for different scales. Once my button was dragged in I was then able to prototype my file which when hovering and pressing the button it changed tone which is something I didn't know was possible in Figma.