This week, we continued with our Figma training. We focused more in interactive features this week, such as links and components.
Pages are the ‘base’ of Figma, essentially the background that everything including frames is placed on. Linking pages can be useful for organising work, as having everything on one page can get confusing when there is a lot of work.
Linking two pages is simple and something that I believe will come in very useful during my studies and work. Under the page you want to be brought to, select ‘copy link to page’ and enter this as an object to the page you want to be brought to, under a text, object, etc.
Of course, this is very basic and available on most platforms. For example: to link pages on Notion!
Triggers can also be used to create interactive content. This takes place when a user does something, such as clicking. This feature is under prototyping on Figma’s website version. To experiment with this, I linked a few simple frames and was very happy with how this turned out, and quite shocked at how easy it is.
One of the main components of todays lecture was looking at components and variants. These are a key way of creating interactive features such as buttons on Figma.
A component refers to the group of items related to an object. When paired with variants, a component can be inserted like a button.
Variants refer to the different versions of an object. The main variant is automatically named ‘default’. This default variant is what appears when there are no interactions made and it sits statically. Additional variant can be made to appear after some form of interaction. this may be inverting colours, adding a colour, making something bold, larger and much more. As an example, I created a simple button with an inverted colour variant.
The component can be made interactive by selecting on default and going to prototype then interactions. For this button, I selected ‘while hovering’ ‘change to’ and the variant I wanted it to change to.
The aspect that confused me the most about this was how to actually add a working version of by button to my Figma file. I made the mistake at first of trying to add my master component to the frame I wanted it in which, of course, didn’t work. Instead, components are added by selecting it within the assets section, which adds a working version to the page which can be repositioned and remains functional.