This is a Figma plugin/widget that helps designers capture design rationale.

This plugin/widget is built with Create Figma Plugin.*

• Node.js – v16
• Figma desktop app

• Go to widget/ folder by cd widget and install the widget following the install guide in README.md. This will run a widget that appears as a lightbulb and allows people record design rationale with it.

• Go to plugin/ folder by cd plugin and install the plugin following the install guide in README.md. This will run a plugin Lightbulb Switch that create a new lightbulb widget.

You will need an IDE to build this plugin/widget. We recommend using Visual Studio Code if you don't know which one to choose.

1. Click the green "<> Code" button to open a dropdown menu. Choose "Download ZIP" and save it to a location of your choice.

2. Unzip the file and open the folder in your IDE.

3. Open the terminal in your IDE, type cd widget and press enter. To open terminal in Visual Studio Code, see Opening terminal in VS Code.

4. You should see [~/.../Design_Rationale_Lightbulb/widget] (main) $ . Now type npm install and press enter.

5. The terminal will run for a bit, installing necessary packages. Wait for it to finish.

6. Type npm run build and press enter. This will create a /build folder under /widget.

7. Go to Figma Desktop and open a file. In the toolbar, select Widgets > Development > Import widget from Manifest... .

8. Select manifest.json in Design_Rationale_Lightbulb/widget.

9. Voila! You have successfully installed the widget. To install the plugin, follow the same steps from step 3 and replace widget with plugin in each step.

1. Go to a location of your choice on the canvas and right-click. Select Widgets > Development > (Choose the option with no name.)

2. The lightbulb widget will appear on the canvas!

3. Click on the + sign to open up input forms. To open or close the lightbulb pane, click the lightbulb itself.

1. Create a lightbulb with the widget first. Go to a location of your choice on the canvas and right-click. Select Widgets > Development > (Choose the option with no name.)

2. A lightbulb widget will appear on the canvas. Move it to a location on the canvas that is unused. Hide and lock the widget.

3. Select a frame that you want to attach the lightbulb to. Run the plugin by going to Plugins > Development > Lightbulb Switch.

4. The plugin will make a copy of the lightbulb widget and attach it to the upper right corner of the frame.

• The plugin might continue to show a message at the bottom of the screen. This is a known bug, but doesn't affect the functionality. Click cancel if needed.