Web Design » Figma » How Do You Make a Checklist on Figma?

How Do You Make a Checklist on Figma?

Last updated on September 29, 2022 @ 12:34 am

When it comes to design, there are few tools as versatile as Figma. You can use it for everything from wireframing to creating high-fidelity prototypes.

And one of the things that makes Figma so versatile is the ability to create custom plugins.

In this article, we’re going to show you how to create a custom plugin that will help you manage your design projects more effectively. We’ll be creating a simple plugin that will allow you to create a checklist within Figma. This plugin will be particularly useful for those who often work with team members on design projects.

Creating a checklist plugin will require some basic knowledge of HTML and JavaScript. If you’re not familiar with these programming languages, don’t worry! We’ll provide all the code you need to get started.

To create a checklist plugin:

  1. Create a new file in Figma. To do this, click on the “+” icon in the left sidebar and select “New File” from the dropdown menu.
  2. Add a Rectangle frame. Next, you’ll need to add a Rectangle frame to your file. This will serve as the container for your checklist items. To do this, click on the “Rectangle” tool in the left toolbar and then click and drag on your canvas to create a frame.
  3. Add some text. Now that you have a frame, you can add some text to it. To do this, click on the “Text” tool in the left toolbar and then click inside your frame and type out some text. For this example, we’ll just add some placeholder text.
  4. Style your text. Once you’ve added your text, you may want to style it to make it more readable. To do this, select your text by clicking on it and then use the formatting options in the right sidebar to change the font family, size, color, etc.
  5. Add more frames and text.

    Repeat steps 2-4 until you have added all of the items you want to include in your checklist.

  6. Select all of your frames. Once you have all of your frames and text added, you’ll need to select them all so that we can turn them into a plugin. To do this, press “Shift” on your keyboard and then click on each frame one by one until they are all selected.
  7. Create a new component. Now that we have all of our frames selected, we can turn them into a component. Components are like reusable pieces of code that we can use over and over again in our designs. To create a new component from our selected frames, click on the “Components” tab in the right sidebar and then click on the “+” icon.
  8. Name your component. Once you’ve created your new component, give it a name so that you can easily find it later. We’ll name ours “Checklist. “
    • (Optional): If you want to be able to reuse this component in other files, make sure to check the “Allow this component to be reused across files” option.


< conclusion > < / conclusion > How Do You Make a Checklist on Figma? < / b > < / p > Creating a custom plugin

PRO TIP: This article provides instructions on how to make a checklist on Figma. However, it is important to be aware thatFigma checklists are not currently supported on mobile devices. This means that if you need to access your checklist while you are away from your computer, you will not be able to do so.
Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.