Figma Co-pilot

Introduction

Find and fix errors in your designs with Figma Co-pilot , a plugin for Figma which help in following proper Design Guidelines to carve a better UI.

Figma Co-pilot finds guideline erros within your designs on all your layers. Ensure your designs are ready for development or design collaboration by fixing inconsistencies.

While it's running, Figma Co-pilot will update automatically as you fix errors. Clicking on layer will also select that layer in your design. Navigating between each error is fast and much easier than trying to find errors on your own.

Table of contents

• Team members
• Team Id
• Features
• To Run Locally use following commands
• Tooling / Tech stacks

Team members

@akhil-tj	@rafitc	@Suvarnesh K M	@Sreemikil T Manoharan	@AkshayBenny

Team Id

• THEKKINI

Features

• Selecting a layer with an error will also select the layer in Figma, letting you navigate your page and fix errors with full context.
• Figma Co-pilot polls for changes and will update as you fix errors.
• "Ignore" or "Ignore All" buttons let you skip special layers inorder to provide freedom for the designer.
• Use the "Select All" option to fix multiple errors at once that share the same value.
• Need to skip layers like illustrations? Locked layers in Figma will be skipped from linting.

To Run Locally use following commands

• Run yarn to install dependencies.
• Run yarn build:watch to start webpack in watch mode.

What does Figma Co-pilot check for by default?

Out of the box, Figma Co-pilot only checks for guideline and layout erros in each layer. In Figma, the best practice is to use styles and proper naming (also referred to as design tokens) on all of your layers, so your type, colors, spacing etc are all consistent and it will help the developer easily identify the elements and components.

That being said, Figma Co-pilot is ready for you to write custom rules for your team. For example, if you wanted to ensure that no text layers are using background specific colors, you can check out the example is provided below.

Tooling / Tech Stacks

• Figma
• TypeScript
• ReactJs
• Node.Js
• Webpack