Today I want to talk briefly about my initial experience attempting to provide some better processes for our design work with nerd.vision. We have explored a few different options but have always been drawn to Figma and what it can provide. With the team being primarily focused on development, it is always a daunting task trying to accommodate design into our workflow but we have been improving gradually and seeing results because of it.

‍

So I took on the task of diving head first into Figma. At an initial glance the software seems very simple and it can be difficult to understand the power that it provides as the UI and its features are tucked away. But after a few initial guides and videos I was up and running.

‍

I set myself a goal. "Attempt to automate the process of design so that a non designer could build basic mock ups for future development work". Well the first thing I noticed is that the software itself seemed to be slightly more in favour of website design over software design, but I could see the benefits of us using it also.

‍

To begin I wanted to achieve a state of consistency within our design process, so I set out to use our pre-existing colour palette across multiple themes and provide them as an option for any team member to pick from when creating components in Figma. After a bit of research I was able to find a plugin called Themer

I was able to create a simple art-board, drop in some shapes, then apply the css colours onto these and name them appropriately according to the variable names we use in our theme css file. Themer then allowed me to select the contents of the art-board and save the colours before publishing them to our team library. I should point out that in order to utilise the team library you must have a professional account or above with Figma. But this allows any team member to log into their own FIgma account and access these global collective assets.

‍

Now anyone using Figma on our team account can select these colours as an option using the fill/stroke dropdown.

‍

Now that this was set up and running, I was also able to learn another cool feature of using Themer. If you are able to create it as two different art-boards, and apply the same name to each colour so for example theme-primary-variant is in both the light theme and dark theme, Then any team member using the colour palette and Themer can toggle themes with the click of a button

‍

As you can see above, simple selecting apply to page and selecting your theme now toggles the theme for a design allowing you to build these components and test out multiple themes with ease and simplicity.

‍

My next task is going to be building some generic components that can be re-used throughout our design work. I will be able to report my findings and things I have learnt in the next part of this blog post, but I am feeling confident and am starting to see the power of using a tool like Figma in our design process. In such a short amount of time, being able to get a collaborative team library with themes and colour palettes coming from our product seems like it is a big step towards achieving my original goal!

‍

https://www.figma.com/

‍