UI components and workspaces in Figma
Added to the Museum of Data by Sherry Chan on Monday, November 14, 2022. Museum of Data Collection ID: 1377.
Public description: This is a snapshot of my design workspace in Figma, a prototyping tool used to design and animate user interfaces to simulate digital product concepts and functions. Please contact the owner at sherry.chan@mahachem.com for access to the interactive prototype. The connection lines represent flows from one screen to another, as well as micro-interactions within components. To streamline design workflows, UI elements are created as a base/master components with variants to be reused as instances (that inherits parent properties i.e. appearance) in different screens. This is important especially for large prototypes so that style changes e.g. different colour/font weight are easily be applied across all instances by only editing the master component. Figma also facilitates collaboration with developers by enabling an 'Inspect' mode that translate drawn objects into CSS code and display their applied styles. It is in the Museum of Data because the workspace is where designers create the data and 'materialise' the components (objects) that are eventually experienced by users in the final prototype compiled by Figma. They are ultimately made up of data of vector coordinates, keyframes, graphics, images, style properties etc.
Materials used: vector graphics, colours, coordinates, code, animation, layout frames, browsers, computer peripherals, user feedback, URLs, flows, business processes, skype discussions, design jams
Credit: I am the main owner of this object, but edits are made according to feedback from many users and stakeholders.
Language: An understanding of the Figma terms (or within UI design) is needed
Size: File size not provided by Figma, but this design file consists of two other digital products and it is the biggest among other project files
Creation date: 2021/12/01 09:00:00