https://github.com/brianlovin/figma-github-data

Populate data from GitHub into Figma mocks
https://github.com/brianlovin/figma-github-data

figma plugin

Last synced: about 2 months ago
JSON representation

Populate data from GitHub into Figma mocks

• Host: GitHub
• URL: https://github.com/brianlovin/figma-github-data
• Owner: brianlovin
• Archived: true
• Created: 2020-02-21T19:21:08.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-02-16T17:28:58.000Z (over 1 year ago)
• Last Synced: 2024-09-25T07:02:35.954Z (about 2 months ago)
• Topics: figma, plugin
• Language: CSS
• Size: 2.14 MB
• Stars: 184
• Watchers: 2
• Forks: 17
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# GitHub Data

Quickly populate mocks with real data from GitHub!

### Usage

To populate data from GitHub, layers need to describe what data they should render.

You can do this by naming your layers with the following syntax:

`__{fieldname}`, e.g. `__bio`, or `__avatar_url`

For nested values, use dot syntax:

`__owner.avatar_url`

For example field names, see the following examples:

- user: https://api.github.com/users/brianlovin

- org: https://api.github.com/orgs/github

- repo: https://api.github.com/repos/withspectrum/spectrum

- issues: https://api.github.com/repos/withspectrum/spectrum/issues

- pull requests: https://api.github.com/repos/withspectrum/spectrum/pulls

### Running locally

1. Clone the repository: `git clone https://github.com/brianlovin/figma-github-data.git`

1. Go to the directory: `cd figma-github-data`

1. Install dependencies with `yarn`

1. Build the plugin: `yarn run build:watch`

1. Go to the `plugins` directory in Figma

1. Add a new development plugin

1. Select the `figma-github-data/manifest.json` file as the manifest