{"id":13715121,"url":"https://github.com/kysely/framer-modules","last_synced_at":"2025-05-07T04:30:42.722Z","repository":{"id":95960967,"uuid":"100325642","full_name":"kysely/framer-modules","owner":"kysely","description":"Discover, install and save your favorite modules at one place","archived":true,"fork":false,"pushed_at":"2019-01-04T20:16:09.000Z","size":11035,"stargazers_count":332,"open_issues_count":12,"forks_count":18,"subscribers_count":24,"default_branch":"master","last_synced_at":"2024-11-14T03:34:24.370Z","etag":null,"topics":["framer","framer-modules","framer-prototype","framer-snippets","framer-studio","manager","modules","registry"],"latest_commit_sha":null,"homepage":"https://www.framermodules.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kysely.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-08-15T01:37:18.000Z","updated_at":"2024-09-20T10:54:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"b7409019-6a1b-4b59-abc7-e56e048e33d9","html_url":"https://github.com/kysely/framer-modules","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kysely%2Fframer-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kysely%2Fframer-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kysely%2Fframer-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kysely%2Fframer-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kysely","download_url":"https://codeload.github.com/kysely/framer-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252813611,"owners_count":21808359,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framer","framer-modules","framer-prototype","framer-snippets","framer-studio","manager","modules","registry"],"created_at":"2024-08-03T00:00:54.360Z","updated_at":"2025-05-07T04:30:38.669Z","avatar_url":"https://github.com/kysely.png","language":"JavaScript","funding_links":[],"categories":["Other"],"sub_categories":[],"readme":"\u003ca id='docs'\u003e\u003c/a\u003e\n\n\u003cbr /\u003e\n\n### Development Discontinued\n#### Please use the official [Framer Store](https://store.framer.com) for new [Framer X](https://framer.com).\n\n---\n\n\u003cbr /\u003e\n\n\u003ch3 align='center'\u003e\n    \u003ca href='#docs'\u003e\n        \u003cimg src='./resources/framer-modules-icon.png' width='50' alt='Framer Modules Icon' /\u003e\n    \u003c/a\u003e\n\u003c/h3\u003e\n\n\u003ch1 id='framer-modules' align='center'\u003eFramer Modules\u003c/h1\u003e\n\u003ch3 align='center'\u003eCommunity-driven modules registry and manager for Framer\u003c/h3\u003e\n\n\u003ch4 align='center'\u003e\n    \u003ca href='https://github.com/kysely/framer-modules/releases/latest'\u003e\n        \u003cimg src='./resources/download-button@2x.png' width='270' alt='Download Framer Modules' /\u003e\n    \u003c/a\u003e\n\u003c/h4\u003e\n\u003cp align='center'\u003e\n    \u003ca href='https://github.com/kysely/framer-modules/blob/master/PUBLISH.md'\u003e\n        \u003cimg src='./resources/publish-button@2x.png' width='270' alt='Download Framer Modules' /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n## :sparkles: Discover\nLooking for the right module used to be time-consuming and annoying—you didn't know if\na module for the job exists, you weren't sure where to look for it and you had to\nmanually download and move the files just to try things out.\n\nNot anymore. Search for what you need and discover new useful modules without\ndisrupting your workflow during prototyping. Not sure what's available? Try **'all'**\n\n![Screenshot of listing the whole registry](./resources/feature-discover.png)\n\n\u003cbr /\u003e\n\n## :zap: Install\nTired of downloading and copying modules to the prototype on your own?\nWe all are. That's why installing modules is now so easy even your grandma\ncan do it. Seriously, it's just “press \u003ckbd\u003eEnter\u003c/kbd\u003e”.\n\nAll modules ship with example code snippets. When you're not yet familiar with\nhow a module works, press \u003ckbd\u003eCmd\u003c/kbd\u003e \u003ckbd\u003eC\u003c/kbd\u003e and paste the code in Framer.\n\n\nFound out you don't need the module anymore? Press \u003ckbd\u003eCmd\u003c/kbd\u003e \u003ckbd\u003eBackspace\u003c/kbd\u003e\nand say bye *(the latter is optional)*.\n\n###### Please make sure your prototype is saved before installing a module.\n\n![Screenshot of 'Installed' tab](./resources/feature-install.png)\n\n\u003cbr /\u003e\n\n## :heart: Save\nYes, it's true. You can now save your favorite or regularly used modules in presets\nand install them to the prototype in batch with one button. Making wireframe prototype?\nInstall these. Doing VR? Install those. Anything you need.\n\nJust press \u003ckbd\u003eCmd\u003c/kbd\u003e \u003ckbd\u003eS\u003c/kbd\u003e on a selected module, add it to a preset\nor create new one and save even more time!\n\n![Screenshot of adding module to a preset](./resources/feature-save.png)\n\n\u003cbr /\u003e\n\n### All the shortcuts you'll ever need\n\n| Action                                    | Shortcut                            |\n| ------------------------------------------|-------------------------------------|\n| **Open Framer Modules window**            | \u003ckbd\u003eCmd\u003c/kbd\u003e \u003ckbd\u003e;\u003c/kbd\u003e         |\n| Switch between individual tabs            | \u003ckbd\u003eTab\u003c/kbd\u003e                      |\n| Close the window                          | \u003ckbd\u003eEsc\u003c/kbd\u003e                      |\n| **Selected module**                       |                                     |\n| Install selected module                   | \u003ckbd\u003ereturn\u003c/kbd\u003e                   |\n| Copy the code snippet for selected module | \u003ckbd\u003eCmd\u003c/kbd\u003e \u003ckbd\u003eC\u003c/kbd\u003e         |\n| Save the module to a preset               | \u003ckbd\u003eCmd\u003c/kbd\u003e \u003ckbd\u003eS\u003c/kbd\u003e         |\n| Go to module's GitHub repository          | \u003ckbd\u003eCmd\u003c/kbd\u003e \u003ckbd\u003eG\u003c/kbd\u003e         |\n| Remove module                             | \u003ckbd\u003eCmd\u003c/kbd\u003e \u003ckbd\u003eBackspace\u003c/kbd\u003e |\n| **Selected preset**                       |                                     |\n| Install modules from preset               | \u003ckbd\u003ereturn\u003c/kbd\u003e                   |\n| Delete preset                             | \u003ckbd\u003eCmd\u003c/kbd\u003e \u003ckbd\u003eBackspace\u003c/kbd\u003e |\n| Edit preset modules                       | \u003ckbd\u003eCmd\u003c/kbd\u003e \u003ckbd\u003eE\u003c/kbd\u003e         |\n\n\u003ca id='contribute'\u003e\u003c/a\u003e\n\n[![It's what we make it. So let's make it great!](./resources/feature-community@2x.png)](#contribute)\n\nThe “community-driven” part in the description is not just an empty phrase.\nThis app is developed by the same people who are using it. If you are\none of them (actually... us) and want to make our modules registry/manager even\nbetter, **you're more than welcome to contribute**.\n\nThis part of the docs will hopefully acquaint you with the inner workings of\nthe whole system.\n\n## Architecture\n\n### Hosting the modules and `module.json`\nDue to this project's open-source nature, the modules' management was designed\nto be as easy as possible and seamlessly integrated with other technologies\navailable.\n\nThat's why there is **no own** server **hosting** the actual modules files.\nInstead, **modules are hosted on GitHub** and recognized by their **`module.json`**\nmetadata file. Upon the installation, module files are pulled from the GitHub\nrepository as specified in *module.json* and installed to the prototype.\n\nThat is why we don't need our own fileserver and why the **Framer Modules registry\nis basically just a database holding modules' `module.json` files**.\n\n![Modules Hosting Scheme](./resources/modules-hosting@2x.png)\n\nHosting on GitHub also provides us the perks of **not needing user accounts**.\nWhen the module is published to the registry, it carries the information\nabout the author in its repository link. This is enough to recognize the author\nand give them the permissions to update and overwrite. Publishing or updating\na module with the same name from a different GitHub user is automatically rejected.\n\n### System Components \u0026 Technology stack\nYou can say the whole system consists of 3 major parts:\n\n- **[Framer Modules app](#framer-modules-app)** — The main app for the designer\n                                            that handles the prototype management\n- **[Server](#server)** — Small server for communication with the modules registry\n- **[Modules Registry](#modules-registry-database)** — Collection of modules\n                                            metadata in database\n\n\u003ch3 id='framer-modules-app'\u003e\n    \u003cimg src='./resources/component-app@2x.png' width='30'\n    alt='Framer Modules Icon' align='absmiddle' /\u003e\n    Framer Modules App\n\u003c/h3\u003e\n\nIs built on [**`Electron`**](https://electron.atom.io) and handles all actions\nrelated to prototype management. The app is split into two parts that communicate\nwith each other using `ipcMain` and `ipcRenderer` modules from Electron.\n\n#### Core\nThe `main` Electron process that is responsible for all 3 main types of actions being taken.\n\nFirst is communication with the renderer process via `ipc`. Literally all methods for this\nare defined in self-titled `Actions.js`. Some methods also preprocess the responses\nbefore sending them back to renderer process, but otherwise they're pretty straightforward.\n\nSecond type of actions is HTTP requests. Although the requests are being used throughout\nthe whole core and aren't defined at one place, they all use\n[**`request`**](https://www.npmjs.com/package/request) package to make the calls.\nHowever, methods for making the requests to the Framer Modules server share many properties\nand thus are defined in `ServerRequest.js`.\n\nAnd last but not least, the actions that actually handle the prototype are to be found\nin `prototype-actions` subdirectory. The functions are fed `module.json`\n(or an array of those) and prototype's path. Using `request`, they then **pull the files**\nfrom the corresponding GitHub repository as defined in the JSON and **pipe them** to\nthe module-specific subfolder in prototype's `modules` directory.\n\nIf the un/installation is successful, the core will update prototype's\n`app.coffee` (by adding/removing `require()` statement) and\n`framer/config.json` (by recalculating folded code ranges). If any error occurs during\nthe installation, the whole module gets removed.\n\nInstalled modules are also recognized by directory name and `module.json` inside.\nAny loose files or directories without `module.json` will result in “unmanaged” modules.\n\n#### Interface\nInterface is written with [**`React`**](https://facebook.github.io/react/) and\nalthough we are *not* using any “single source of truth” state container,\n**the state** for the most of the app **is stored within a single**, highest-level,\ncomponent. There are two components that have their own state, `Splash` and\n`ModalWindow`, and the reasons for those are pretty obvious in use.\n\nPlease note that because I couldn't get `webpack` to bundle `ipcRenderer` module\nfrom Electron, the methods for communication between the two processes are defined\nin the separate `Action.js` file loaded to the page via `\u003cscript\u003e`.\n\nTo further inspect the React component structure, use `electron-react-devtools`.\nThe package is installed as a dev dependency, you'll just need to\n[require it](https://github.com/firejune/electron-react-devtools#installing)\nin the app window's console.\n\nStyles are written in [**`Sass`**](http://sass-lang.com/guide) and split into\nindividual files corresponding to React components. All SVG assets are Base64-encoded\nand saved as data URIs in `_assets.sass` file.\n\n\n\u003ch3 id='server'\u003e\n    \u003cimg src='./resources/component-server@2x.png' width='30'\n    alt='Server Icon' align='absmiddle' /\u003e\n    Server\n\u003c/h3\u003e\n\nSmall REST server for communication with the modules registry and data\npreprocessing. Separating this functionality from the app enables using the\nregistry in more general ways.\n\nThe server is written in [**`Express.js`**](https://expressjs.com) and uses\n[**`Mongoose`**](http://mongoosejs.com) for easier data modeling, validation, etc.\n\nCurrently deployed on the [Heroku](https://www.heroku.com/home) Free Dyno.\nThe source code for the server lies in its own repository.\n\n\u003ca href='https://github.com/kysely/framer-modules-server'\u003e\n    \u003cimg src='./resources/server-button@2x.png'\n    align='absmiddle' width='30' /\u003e\n    Go to server's repository\n\u003c/a\u003e\n\n\u003ch3 id='modules-registry-database'\u003e\n    \u003cimg src='./resources/component-database@2x.png' width='30'\n    alt='Database Icon' align='absmiddle' /\u003e\n    Modules Registry (Database)\n\u003c/h3\u003e\n\nSimple as it sounds. The database of choice is\n[**`MongoDB`**](https://www.mongodb.com/what-is-mongodb)\nand is currently deployed on the free\n[MongoDB Atlas](https://www.mongodb.com/cloud/atlas) cluster.\nData modeling of the collection is very straightforward and you will be able to\nto understand it from the Mongoose Schema in the server's source code or docs.\n\n\n### How it looks together?\n![System Architecture Blueprint](./resources/system-architecture@2x.png)\n\n## Design\nThe whole app is designed in **Sketch** and you can find the source file\nin `resources` folder in this repository.\n\n![WCAG and keyboard-first icons](./resources/design-features@2x.png)\n\nPlease comply to **WCAG 2.0 Level AA**. Although the app is supposed to be\nused by fairly small group of people, standard accessibility concepts will make\nthe experience better for everyone. For color scheme checking, using\n[Stark](http://www.getstark.co) is recommended.\n\nSince the app is most useful to the user in Framer Code view, it's **designed\nto be mainly operated from the keyboard.** Current design is heavily inspired by\n[macOS Spotlight](https://support.apple.com/en-us/HT204014) and\n[Sketch Runner](http://sketchrunner.com) (which are both keyboard-first utilities)\nand you are welcome to redesign it from scratch if you have better design\nin mind. Please just make sure the app is always operable from the keyboard.\n\n## Related Repositories\n- [Framer Modules server](https://github.com/kysely/framer-modules-server)\n- [FramerModules.com (including subdomains)](https://github.com/kysely/framermodules.com)\n\n## Got questions about your contribution?\n[Open an issue](https://github.com/kysely/framer-modules/issues) |\n[Send me an e-mail](mailto:kyselyradek@gmail.com) |\n[Reach me on Messenger](https://m.me/kysely)\n\n---\n\n## Disclaimer\nThis is a third-party project and is not affiliated with [Motif Tools BV](https://framer.com).\n\n## License\n[MIT](https://github.com/kysely/framer-modules/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkysely%2Fframer-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkysely%2Fframer-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkysely%2Fframer-modules/lists"}