laf v0.3.4

Automate asset retrieval from lingoapp.com

Changelog

Install

npm install laf -g

Usage

In order to use LAF you will need two files in your current working directory:

1. .laf.json

   This is your config file.

2. .env

   You might already have this file. If that's the case, you just need to add your SpaceID & API Token. Both are supplied by LingoApp.com.

SPACE_ID=''
API_TOKEN=''

1. Generate Config File

Video Tutorial (1/2): laf gen

Config file is required. Using generator to create the config file is optional.

\$ laf gen

Sample Config

Generated (Partial)

{
  "kits": [
    {
      "name": "",
      "sections": [
        {
          "name": "",
          "headers": [""]
        }
      ]
    }
  ]
}

Generated & Edited (Complete)

{
  "name": ".laf.json",
  "value": {
    "kits": [
      {
        "name": "Capswan - Mobile App - Style Guide",
        "sections": [
          {
            "name": "Illustrations"
          },
          {
            "name": "Icons",
            "headers": ["Icons", "Components"]
          }
        ]
      },
      {
        "name": "Test Me",
        "sections": [
          {
            "name": "Illustrations",
            "headers": ["Lined"]
          }
        ]
      }
    ]
  }
}

Output at this point

• .laf.json with semi-filled config

  The tutorial in "Fetch files" walks you through finalizing this config

• .env with empty SPACE_ID & API_TOKEN keys

2. Fetch files

Video Tutorial (2/2): laf fetch

\$ laf fetch

CLI Flags

You can call laf fetch without specifying flags. Flag defaults are listed below.

Visit here to read more about Lingo's available file cuts. This will show you what you conversion possibilities.

Examples

• \$ laf fetch --out "./downloads" --cut "JPG"
• \$ laf fetch --out "./assets/foo" --cut "PNG"

Output at this point

All of your files downloaded to the output directory you've specified

Appendix

A. How file names are constructed

Downloaded filenames are a concatenation of asset name & tag names. Consider the following image:

The highlighted "down arrow" would be named: down_arrow_black.png as you can see here:

B. Sketch + Lingo + LAF - Workflow Comparisons

C. Related

This CLI wraps lingo-asset-fetcher-lib

• @github: lingo-asset-fetcher-lib
• @npm: laf-lib

D. Video Tutorials

1. laf gen
2. laf fetch

E. Blog

Explores the thought process behind LAF + future plans:

Image download automation with Lingo & LAF

Shoutout

Thanks to WCByrne and bjudson for making this possible!