Apr 4, 2021
Figma components- Chips
What is Figma?
Figma is a solid tool with a free plan available for starters. It’s worth trying for anyone who has working knowledge of primary means to make them more marketable to clients and employers.
- It helps to design right in the browser, and everything lives online. Hence, it is accessible anywhere, anytime to anyone.
- Customization of other vector-based elements or graphic design assets made possible with powerful features.
Why use Figma?
- The only tool to date for UX/UI design that unites everyone in the creative process to bring ideas to life.
- It has a version history that lets you know everything that has changed.
- Figma allows stakeholders to give feedback and comments on your project.
Using components in Figma
Figma components are personalized UI elements that we can reuse across our design projects. A component can be a button, an icon, or even something complex like a data table. There is only one master component. Later, we can have the instances of this master component. The advantage of using components is that anytime we make changes to a master component, it updates all component instances automatically. Component assures the consistency of design throughout the project.
What are Chips?
Nowadays, we often notice chips used for various purposes on websites and apps. Chips allow users to enter information, make selections, filter content, or trigger actions. Chips can have multiple choices and appear dynamically as a group of interactive elements, whereas buttons remain consistent everywhere.
Eventually, it was challenging to construct chips in Figma as chips don’t have fixed width. The width of chips depends on the content inside. But, “Auto Layout,” one more feature of Figma, managed the chips’ width dimensions.
What is Auto Layout in Figma?
Auto Layout is one of the best features of Figma that allows us to design responsively. There will be minor manual resizing of elements and content after using auto layout while moving them around in the frames. Moreover, the auto layout component can stretch to fill the content left and right(or top and bottom). Surprisingly, the directions, spacing, and padding of elements have an easy code handoff. The auto-layout is a beneficial feature for complex structures like lists or data tables.
The process to construct chips.
- Create a new frame and rename it as ‘Chips’ in the layers panel.
- Create a rectangle for the chips container with the specified height and rename it as “chips container” in the layers panel.
- Now, type label text of required font size and weight and rename it as “label text.” Keep it above the chips container.
- Select both the layers to center align them and group them. Rename the group as “chips” in the layers panel.
- Now, click on the “auto layout” option present in the design panel to the right, and set the layout direction as “horizontal” with required spacing between items and required padding around the items.
- Create component of chips by clicking the “Create Component” button or ‘Ctrl + Alt + K’ or ‘⌥ Option -⌘ Command-K.’ Rename it as “chips/default”
- Now, create instances from the master component and change the attributes for different styles like while hovering or selected state. (if needed)
- Finally, make those styles a component and rename them as “chips/(style name).
Figma Live View
About Me
I am a UX/UI designer possessing an analytical character towards web design. Exploring new techniques and outcomes of improving user experience is the vital interest I desire. I have been attempting various tools like Adobe Photoshop, Adobe Illustrator, Adobe Indesign, Adobe After effects, Adobe XD, Figma, Invision Studio, and Fontlab used for graphic and web designing. I cherish working on various projects like illustrating, poster making, developing fonts, publication design, signage design, wireframing, prototyping, and many more. I found that these projects’ learnings are very supportive in web design as everything is linked to each other somehow. It has been great for me to drown deep into this field as each day is becoming worthwhile spending time in the process.
To know more about me or my projects, you can find me on,
Behance: behance.net/salonishah27
Linkedin: linkedin.com/in/salonishah27
Website: www.salonishah.in
You can also read:
