Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
77 lines (66 sloc) 2.59 KB
extends ../docs-base
block doc
h1 Getting started
h2 Introduction
p.
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
#[a(href='https://github.com/nikersify/fig-compiler') 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
#[a(href='https://github.com/nikersify/fig-compiler#connect-middleware') here].
h2 Download
p.
Fig provides a #[a(href='https://github.com/umdjs/umd') 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.
p.
Installing with npm: #[code npm install --save figjs]
p.
Pulling from a CDN: #[code= '<script src="https://unpkg.com/figjs">']
h2 Browserify
p.
Setting up browserify is a relatively easy process. Fig provides a
browserify transform -
#[a(href='https://github.com/nikersify/figify') figify],
which automatically transforms all required .fig and .pug files into
easy by fig to consume objects.
p.
Install browserify globally (might have to be ran with admin privileges):
#[code npm install -g browserify]
p.
Get the figify transform: #[code npm install --save figify]
p.
Building your bundle:
#[code= 'browserify <input> -t figify -o <output>']
h2 Development
p.
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):
h3 Sublime Text
p.
Open a .fig file, in the menu go to
#[b View -> Syntax -> Open all with current extension as...]
h3 Atom
p.
Use the #[a(href='https://atom.io/packages/file-types') file-types]
package.
h3 Vim
p.
Add #[code au BufRead,BufNewFile *.fig setfiletype pug] to your .vimrc
file.
h3 Visual Studio Code
p.
Press #[code ctrl] + #[code ,] to open settings.json, add
#[code "files.associations": {"*.fig": "pug"}].