|
| 1 | +# Publish Your Module |
| 2 | + |
| 3 | +## 1. Create an example code (snippet) |
| 4 | +People who will use your module need to know how it works. For these purposes, |
| 5 | +*create a code snippet* that shows how to use your module and save it |
| 6 | +in a `.coffee` file. |
| 7 | + |
| 8 | +Please don't include `require()` statement in your example. |
| 9 | + |
| 10 | +## 2. Create `module.json` |
| 11 | +Module.json holds all important metadata about your module. |
| 12 | + |
| 13 | +| key | type | description | |
| 14 | +| ---------------|:-----------------:|---------------------------------------| |
| 15 | +| `name` | *String* | Human readable name of your module that is seen in the app. <br /><br />*Do know that a `unique_name` **will be automatically created** from the `name` and used as the main identificator for the directory name, dependency link, etc.<br /><br />[Check for name availability and `unique_name` before publishing](https://checkname.framermodules.com)* |
| 16 | +| `description` | *String* | Brief description of what your module does *(recommended 100 characters).* <br /><br />*Keep in mind including keywords in description greatly increases chances of being found via the app search.* |
| 17 | +| `author` | *String* | Your name, right? |
| 18 | +| `require` | *String* | A `require()` statement that will load your module to the prototype.<br /><br />*Please avoid using path to the module file that includes `.framer`. Framer won't be able to recognize the module.* |
| 19 | +| `install` | *String or Array* | Path to the file(s) you'd like to be downloaded and installed to the prototype. Please note it's only possible to define exact files, not full directories. |
| 20 | +| `example` | *String* | Path to the file with the snippet created in step 1. |
| 21 | +| `thumb` *(optional)* | *String* | Path to the thumbnail. Thumbnails are shown at `80×80px` (@2x is recommended). <br />Please use a thumbnail with opaque background (`#1D1D1F` is recommended). Allowed filetypes are `mp4` `mov` `png` `jpg` `gif`. |
| 22 | +| `dependencies` *(optional)* | *Array* | Array of dependencies' *unique names*. Please note each dependency will be installed inside a subdirectory named after their `unique_name`. |
| 23 | + |
| 24 | +### Example `module.json` |
| 25 | +Taken from [this module](https://github.com/kysely/framer-bidirectional-cycle). |
| 26 | +```javascript |
| 27 | +{ |
| 28 | + "name": "Bidirectional Cycle", |
| 29 | + "description": "Extension that will make Utils.cycle() iterate in both directions", |
| 30 | + "author": "Radek Kysely", |
| 31 | + |
| 32 | + "require": "Utilscycle = require 'Utilscycle'", |
| 33 | + "install": "Utilscycle.coffee", |
| 34 | + "example": "example.coffee", |
| 35 | + |
| 36 | + "thumb": "bidirectional-cycle-thumb.mov" |
| 37 | +} |
| 38 | +``` |
| 39 | + |
| 40 | +### Note |
| 41 | +To maintain clean prototype directories hierarchy, modules will be installed to |
| 42 | +a subdirectory in `modules` folder named after their `unique_name`. If you need |
| 43 | +to reach parent directories from your code, please use one more set of `../`. |
| 44 | + |
| 45 | +Please note the `require()` command *will be automatically updated* to reach |
| 46 | +module's actual directory. |
| 47 | + |
| 48 | +*Example: A module named `iOS Status Bar` will get a unique name `ios-status-bar` |
| 49 | +and will be installed to `<PATH_TO_PROTOTYPE>/modules/ios-status-bar/`. |
| 50 | +All paths inside your repository will be preserved under the modules's directory.* |
| 51 | + |
| 52 | +## 3. Push to GitHub |
| 53 | +And keep it there. Your module will always be installed from its GitHub repository. |
| 54 | + |
| 55 | +### Add the badge to your README |
| 56 | +*If you want to* that show your module can be discovered and installed |
| 57 | +via Framer Modules, you can include the following badge to your `README.md`. |
| 58 | +Clicking the badge will also automatically open the app and redirect the |
| 59 | +user to your module! |
| 60 | + |
| 61 | +< a href= '#add-the-badge-to-your-readme'><img alt='Install with Framer Modules' |
| 62 | +src=' https://www.framermodules.com/assets/[email protected]' width='160' height='40' /></ a> |
| 63 | + |
| 64 | +Just copy one of the snippets and replace `<MODULE NAME>` with yours as defined in `name` key. |
| 65 | + |
| 66 | +HTML **(recommended, will use @2x)** |
| 67 | +```html |
| 68 | +<a href='https://open.framermodules.com/<MODULE NAME>'> |
| 69 | + <img alt='Install with Framer Modules' |
| 70 | + src= 'https://www.framermodules.com/assets/[email protected]' width= '160' height= '40' /> |
| 71 | +</a> |
| 72 | +``` |
| 73 | + |
| 74 | +Markdown (will use @1x) |
| 75 | +```md |
| 76 | +[](https://open.framermodules.com/<MODULE NAME>) |
| 77 | +``` |
| 78 | + |
| 79 | +## 4. Publish to Framer Modules |
| 80 | +Open Framer Modules, click Publish button in the top right corner, |
| 81 | +enter your GitHub repository link and follow the instructions on the screen. |
| 82 | + |
| 83 | +## Okay, how do I update? |
| 84 | +Just push the changes to GitHub. If you make some changes to `module.json`, |
| 85 | +please re-publish in Framer Modules as described in step #4. |
| 86 | + |
| 87 | +--- |
| 88 | +## Questions? |
| 89 | +[Open an issue](https://github.com/kysely/framer-modules/issues) | |
| 90 | +[Send me an e-mail ](mailto:[email protected]) | |
| 91 | +[Reach me on Messenger](https://m.me/kysely) |
| 92 | + |
| 93 | +--- |
| 94 | + |
| 95 | +### [← Return to the main page](https://github.com/kysely/framer-modules) |
0 commit comments