Create an org chart in Figma from a JSON or a YAML file. Try it here.

• Clone the repository: git clone https://github.com/mamuso/figma-orgchart.git
• Go to the directory: cd figma-orgchart
• Install dependencies: npm i
• Build the plugin: npm run watch
• In the Figma desktop app, open a Figma document, and go to Plugins > Development > Import plugin from manifest
• Select the figma-orgchart/manifest.json file

If you run the plugin locally, you can edit src/defautChartData.json to change the default chart data.

You need to provide a JSON or a YAML with your team structure. You can use the following keys:

• team: name of the team
• manager: will be represented at the top of the team
• members: array of members of a team
• teams: array of teams
• section: it will create a label with the text that you provide

Each manager and member can have the following keys:

• name: name of the person
• alias: title alias of the person. By default, it will expect a GitHub alias and will try to fill the avatar
• meta: additional information that you'll like to provide
• avatar: you can override the avatar providing a URL of an image

By default, the plugin assumes the following configuration:

{
  "avatar": true,
  "name": true,
  "alias": true,
  "meta": true,
  "ogurl": "https://github.com/",
  "color": {
    "border": "EEECF3",
    "background": "FFFFFF",
    "primarytext": "444D56",
    "secondarytext": "A1A6AA"
  },
  "text": {
    "label": { "family": "Helvetica Neue", "style": "Bold", "size": 20 },
    "section": { "family": "Helvetica Neue", "style": "Bold", "size": 18 },
    "name": { "family": "Helvetica Neue", "style": "Bold", "size": 16 },
    "alias": { "family": "Helvetica Neue", "style": "Regular", "size": 12 },
    "meta": { "family": "Helvetica Neue", "style": "Regular", "size": 12 }
  }
}

You can change the default configuration by adding a config key to the root of the JSON/YAML file. Check some of the examples below to learn how to change the design of the chart.

• 001-avatar-name-alias-meta-github.json
• 001-avatar-name-alias-meta-github.yml

• 002-avatar-name-alias-meta-twitter.json
• 002-avatar-name-alias-meta-twitter.yml

• 003-avatar-name-github.json
• 003-avatar-name-github.yml

• 004-name.json
• 004-name.yml

• 005-custom-avatar.json
• 005-custom-avatar.yml

• 006-custom-colors.json
• 006-custom-colors.yml

• 007-custom-fonts.json
• 007-custom-fonts.yml

• 008-section.json
• 008-section.yml