{"id":262,"date":"2023-11-02T13:56:30","date_gmt":"2023-11-02T13:56:30","guid":{"rendered":"https:\/\/www.nua-ux.design\/saalihah-sajjad\/blog\/?p=262"},"modified":"2024-02-15T23:53:10","modified_gmt":"2024-02-15T23:53:10","slug":"figma-2","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/saalihah-sajjad\/blog\/workshops\/figma-2\/","title":{"rendered":"Figma"},"content":{"rendered":"\n

With this being our third Figma workshop we explored components, variants and variables. The first half of the workshop we were taught about text styles and colour styles. This picture show my notes in relation of how to navigate in Figma to create new text styles and set them so they can be easily applied to text. This can also be similarly done for colour styles. Once you edit the style itself, it applies the change instead of going through and manually changing it. <\/p>\n\n\n\n

As a class Dave demonstrated how to create this component, doing it alongside him, step by step. I personally found it quite easy to do and didn’t require much hassle. <\/p>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
\"\"<\/figure>
\n

After completing the first task as a class, we were then told to select a component to create on our own. I decided to create the tick box, when you click it turn into a cross and when you click again it turns back into a tick. I found this is be quite simple to achieve as it was similar to the component concept we did together as a class. <\/p>\n<\/div><\/div>\n\n\n\n

As a final task we were told to create this variable that would increase the number by clicking on the + and – signs. Variables are any piece of information that can change. I prefer when we go through the workshop together which is what we did for the components, however for the variables we were shown how to do it and by the end of it I had forgotten some of the steps. Luckily some of my friends were able to help guide me when I had forgotten a step, which led to this being the end design<\/p>\n\n\n

\n
\"\"<\/figure><\/div>","protected":false},"excerpt":{"rendered":"

With this being our third Figma workshop we explored components, variants and variables. The first half of the workshop we were taught about text styles and colour styles. This picture […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/saalihah-sajjad\/blog\/wp-json\/wp\/v2\/posts\/262"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/saalihah-sajjad\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/saalihah-sajjad\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/saalihah-sajjad\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/saalihah-sajjad\/blog\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":6,"href":"https:\/\/www.nua-ux.design\/saalihah-sajjad\/blog\/wp-json\/wp\/v2\/posts\/262\/revisions"}],"predecessor-version":[{"id":482,"href":"https:\/\/www.nua-ux.design\/saalihah-sajjad\/blog\/wp-json\/wp\/v2\/posts\/262\/revisions\/482"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/saalihah-sajjad\/blog\/wp-json\/wp\/v2\/media?parent=262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/saalihah-sajjad\/blog\/wp-json\/wp\/v2\/categories?post=262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/saalihah-sajjad\/blog\/wp-json\/wp\/v2\/tags?post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}