How to Use the Color Picker Tool in Figma?

We have seen many designers working on websites, applications but they face a very big problem with colors. To get the exact color as they desire, designers put on so much time and effort. Even after putting this much effort and time sometimes they are unable to get that. Making the exact color required is an work of art and time consuming. Therefore to deal with this problem we have Color Picker or Eye Dropper tool in Figma.

In this article we will go through the Color Picker or Eye Dropper tool in detail.

What is an Color Picker tool in Figma?

Figma has a Color Picker tool or “Eye Dropper tool” that allows you to pick any color from your screen. It make the color selection very easy and makes the effective utilization of time. By using this tool the designers can make their design process faster as it doesn’t make them to spend time on color selection. We can upload any picture and select any color from that picture and make use of it.

We can drag and drop the Eye Dropper tool i.e. we can drag the tool to the required color in the picture and drop it into our design. This feature is not available on most of the design applications.

How to use the Color Picker tool in Figma?

Follow the below steps to know how to use the Color Picker or Eye Dropper tool in Figma.

  • At first login to your figma account and open the dashboard.

Figma Dashboard

  • Go to drafts to create a new Design File.

Draft Section

  • On the top right you can see the “Design File” option.

Design File

  • Now take a frame in which you want to design.

Design Frame

  • Now you want the color which is present in the image to be in your design. So at first you must upload the image. To upload image go to the top menu. In which you can choose the “File” option. After selecting that choose the option “Place Image”. Now you can upload the images into your design.

File Option

  • After dropping the image now you can choose the color by choosing the page section.

Page Color Option

  • Once you have visited the page section on the bottom you can see that there is dropper icon. That is a colour picker tool in Figma. Now click on the Dropper icon so that you can drag it on to the image and select the color.

Dropper Icon

  • Now drag the Dropper icon on to the image from which you want to obtain the colour.

Dropper Icon Menu

Selecting Color using Dropper tool

  • You can observe that the color of the circle is been changed.
  • In the above example you can see that beside the frame there is a picture on which I have dragged the Eye dropper tool to get the exact colour to my circle.

Color changed to selected color from the picture

  • In the same way you can add colours to your design or the design elements just by dragging and dropping the colors from the uploaded image.
  • You can upload any picture from your gallery and try this out.

Advantages of Eye Dropper Tool

  • Accurate Color : By using the Color picker tool(Eye drop tool) we can get the exact color from the uploded image. In most to the design applications you have to adjust the color palatte by yourself and it dosen’t garentee the exact color.
  • Time Saving : This tool in figma actually saves your time as it uses the drag and drop method. You don’t have to spend time on finding or making the color palatte.
  • Easy color sampling : The idea of a tool allows you to easily sample colours from other elements in your design or even from outside of Figma.

Conclusion

Figma has a collection of tools and features out of which the Eye Dropper Tool stands out to be one of the best. It makes the design easy with its drag and drop feature. This saves out the designer’s time and effort on designing things. In the fast moving world this tends to be the best tool to make the design process faster. You can explore in detail when you try it yourself. Now it’s your turn to try this fabulous tool by yourself.



Contact Us