Getting started


Fig uses something called "components", which are ought to be contained in files with a .fig extension. Before being able to use them in a browser environment, they need to be processed by the fig-compiler package. Luckily, you don't have to compile them manually, as fig provides two other ways of accomplishing that task - the browserify way and the express middleware way. The latter one is simpler to set up if you just want to mess around without getting into browserify, but not really meant to be used outside of development - you can read more about it here.


Fig provides a UMD build, which means that you can use it as an AMD module (RequireJS), require it with CommonJS (Browserify), or even include a plain script tag in your html and use it globally.

Installing with npm: npm install --save figjs

Pulling from a CDN: <script src="">


Setting up browserify is a relatively easy process. Fig provides a browserify transform - figify, which automatically transforms all required .fig and .pug files into easy by fig to consume objects.

Install browserify globally (might have to be ran with admin privileges): npm install -g browserify

Get the figify transform: npm install --save figify

Building your bundle: browserify <input> -t figify -o <output>


As previously mentioned, you can use the .fig extension for fig components. The syntax is 100% compatible with ordinary .pug, so no editor plugin or any complicated config is required. The only thing you have to do is set an alias for the extension, so that your editor can highlight .fig files properly. Here're suggestions for how to do it in some of the trending editors (assuming you have pug syntax already installed/available):

Sublime Text

Open a .fig file, in the menu go to View -> Syntax -> Open all with current extension as...


Use the file-types package.


Add au BufRead,BufNewFile *.fig setfiletype pug to your .vimrc file.

Visual Studio Code

Press ctrl + , to open settings.json, add "files.associations": {"*.fig": "pug"}.