https://github.com/bryanberger/discord-figma-project-scaffold-generator

A Figma plugin for generating a consistent project page structure at Discord.
https://github.com/bryanberger/discord-figma-project-scaffold-generator

figma figma-plugin

Last synced: 4 months ago
JSON representation

A Figma plugin for generating a consistent project page structure at Discord.

• Host: GitHub
• URL: https://github.com/bryanberger/discord-figma-project-scaffold-generator
• Owner: bryanberger
• Created: 2021-06-16T14:37:32.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-05-07T16:02:09.000Z (over 2 years ago)
• Last Synced: 2023-03-30T08:17:44.502Z (almost 2 years ago)
• Topics: figma, figma-plugin
• Language: TypeScript
• Homepage:
• Size: 17 MB
• Stars: 16
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Project Scaffold Generator

![banner](.github/banner.png?raw=true)

![demo](.github/demo.gif?raw=true)

## Why?

This plugin aims to improve consistency across the team by generating a starting page structure and templates to work from. It offers flexibility in the creative process by allowing a designer to opt-in to generating a structure suitable for the project at hand.

## How to use

- Create a new Figma file, make it a library.

- Add `master` components for each page template. You are basically creating a template layout and making the entire thing 1 master component (so it easily be inserted into a new project file).

- Enable this library by default for all of your current/future projects. This ensures the templates are accessible to insert anywhere in your org. At Discord we have a file called `Tools - Design File Template` that resides in the `Design System` team. It's important that the file is accessible and not "private" or "hidden" in any way.

- Run the plugin, select the page templates you want to generate.

## How to update

#### 1. Add/Remove Pages

See `src/constants.ts`

Simply add a new index to the `PAGES` object and fill in the relevant properties.

| Property                       | Description                                                                                                                                                      | Type   |

| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |

| **pageName**                   | The name of the page to generate. This will show up in the plugin UI itself, and also acts as the default pageName in Figma (overridable by `displayPageName`).  | string |

| **componentKey**               | The `component.key` for the master component of the template in the `Tools - Design File Template` Figma file. (hint: use the Figma Inspector plugin to find it) | string |

| **description**                | A brief description of the page. This is used as the checkbox hover `title` in the plugin UI.                                                                    | string |

| **displayPageName** (optional) | An optional "pretty" display name for the page in Figma.                                                                                                         | string |

### 2. Update Templates

The pages that are generated are based off of template pages in the library you created (`Tools - Design File Template` here at Discord). These page templates can be updated to however the team see's fit, remember to publish when done. Upon next use of the plugin, it will reference and generate from the latest updated template.

## Development

- Run `yarn` to install dependencies.

- Run `yarn build:watch` to start webpack in watch mode.

- Open `Figma` -> `Plugins` -> `Development` -> `New Plugin...` and choose `manifest.json` file from this repo.

## Build

- Run `yarn build` to build a production version.