Framer Module Boilerplate

When publishing a Framer module, it's helpful to begin from a template which already includes all the files you'll need. You can use this boilerplate package as your own starting point.

For tips on writing a user-friendly module, see our Framer Module Style Guide. If you've never written a Framer module before, have a look at Developing a Framer Module.

Customizing

If your module is a class module:

Copy your module code to MyClassModule.coffee and rename the file with your module name (retain the .coffee extension).

If your module is a utility functions module:

Copy your module code to MyFunctionsModule.coffee and rename the file with your module name (retain the .coffee extension).

Readme

Fill out MyREADME.md -- name and description, installation, API, example link, known issues, and social links -- and rename it to README.md.

License

If you wish to use the MIT license, simply add the <year> and <copyright holders> to the LICENSE document.

Otherwise, replace with the desired license and change the license badge in MyREADME.md to match.

Example code

Duplicate your module to the example.framer/modules directory.

Write some example code that makes use of your module. Copy this code to example.framer/app.coffee but retain one of the require statements. Change the name of the module in both places in the require statement.

Replace the code in example.coffee with the same example code, but leave out any require statement. This file will be used below.

Framer Modules app

If you'd like to list your module with the Framer Modules app, you'll need to provide module.json and thumbnail.png along with example.coffee.

Update thumbnail.png to represent your module.

In module.json, replace the name, description and author with the correct information. Change the name of the module in both places in the require statement, and in the install array.

For more information on module.json, see Publish Your Module.

npm

If you intend to publish your module to the npm package manager, you'll need to make sure the package.json file is up to date.

Information you'll want to supply:

• name (of the package as it will appear in npm)
• description
• homepage (often the git repository URL)
• repository URL
• bugs URL (the git repository issues URL)
• main (the module coffeescript file)
• author
• license
• keywords (add any relevant to your module, in a comma-delimited array)

For more information on package.json, see the documentation.

---

Website: blackpixel.com  ·  GitHub: @bpxl-labs  ·  Twitter: @blackpixel  ·  Medium: @bpxl-craft