···

    Trello and Figma

    Trello is a task and project management tool. Trello’s boards, lists, and cards enable you to organize and prioritize your projects.

    Power-ups allow you to extend the functionality of Trello. The Figma Power-up allows you to add live Figma files and prototypes to your cards in Trello.

    This allows you to communicate your designs to designers, developers, and other stakeholders.

    Add the Figma Power-Up

    Add the Figma Power-Up to personal boards, or boards within a team. Anyone in your Trello team can add the Figma Power-Up to a team board.

    1. Open the board in your Trello team.
    2. Click Show Menu in the upper right corner.
    3. In the Power-Ups section, click Add Power-Up:

      Open_Power_Ups.png

    4. Search for the Figma Power-Up and click Add to select:

      Add_Figma_Power_Up.png

    5. Click Add to confirm and enable the Power-Up:
    6. When you view a card in Trello, you can access Figma in the Power-ups section.

    Note: Trello will only add the Power-Up to the current board. You will need to repeat the process to add the Figma Power-Up to any other Trello boards.

    Embed a file or prototype

    Figma Live Embeds allow you to add live Figma files or prototypes into other websites or apps.

    Embed files or prototypes in Trello card, regardless of the file's sharing settings. This allows you to share private files within a team, or public files with the world.

    Collaborators can interact with embeds based on their team or Organization permissions.

    Tip! You can add more than one embed to a Trello card. When you have more than one embed on a Trello card, you can click Show all attachments to view all embeds.

    In Trello

    Attach Figma files or prototypes from the card in Trello.

    1. Open the card you want to add the embed to.

    2. In the Power-Ups section, click on the Figma Power-Up.

      Select_Figma_Power-Up.png

    3. Choose between:

      • Attach a file
      • Attach a prototype

      Attach_a_file_or_prototype.png

    4. Search for the file or prototype you want to add, by name. Click on the file or prototype name to attach it to the card.

      Select_file.png

    5. You can now view the file or prototype in Trello. 

      Active_embed.png

    Note: Trello may prompt you to log in to your Figma account before you can select a file or prototype.

    Remove Figma from Trello

    Remove an embed

    If you want to delete a specific file or prototype, you can remove it from the card in Trello.

    1. Open the card you want to remove the embed from.

    2. Click Remove above the embed.

      Click_Remove.png

    3. Confirm you would like to Remove attachment.

      Confirm_Remove.png

    4. Trello will remove only that embed from the card.

    Remove your login details

    When you set up the Power-Up, you will have logged in to your Figma account. Trello will keep your Figma account linked to the Power-Up, so you don't have to login every time you use it.

    You can remove your personal settings, while keeping the Figma Power-Up active. This will prompt others to log in to Figma when they next use the Power-Up.

    1. Open the board in your Trello team.
    2. Click Show Menu in the upper right corner.
    3. In the Power-Ups section, click on the Figma Power-Up.
    4. Select Remove Personal Settings from the list.
    5. Click Clear data to confirm and remove your authentication from the Power-Up.
    6. Trello will prompt everyone to log in to Figma when they next use the Figma Power-Up.

    Remove_personal_settings.png

    Remove the Figma Power-Up

    If you want to disconnect your Figma account from Trello, you can disable the Figma Power-Up. This will also remove any file or prototype embeds from your board, for all team members.

    1. Open the board in your Trello team.
    2. Click Show Menu in the upper right corner.
    3. In the Power-Ups section, click on the Figma Power-Up.
    4. Select Disable from the list.

    Disable_Power-Up.png

    Related Videos

    See more