Figma components- Chips

What is Figma?

  • 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

What are Chips?

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?

The process to construct chips.

  1. Create a new frame and rename it as ‘Chips’ in the layers panel.
  2. Create a rectangle for the chips container with the specified height and rename it as “chips container” in the layers panel.
  3. Now, type label text of required font size and weight and rename it as “label text.” Keep it above the chips container.
  4. Select both the layers to center align them and group them. Rename the group as “chips” in the layers panel.
  5. 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.
  6. Create component of chips by clicking the “Create Component” button or ‘Ctrl + Alt + K’ or ‘⌥ Option -⌘ Command-K.’ Rename it as “chips/default”
  7. Now, create instances from the master component and change the attributes for different styles like while hovering or selected state. (if needed)
  8. Finally, make those styles a component and rename them as “chips/(style name).
Example of filter options- Chips

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:

--

--

UX/UI Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store