Modules allow you to separate and organize parts of your prototype across different files. They're JavaScript or CoffeeScript files, which you can include (require) within your prototype. They help you organize your code, and choose what parts to focus on.
Modules는 다른 파일들에 나뉘어져 있는 프로토타입을 분리하고 조직화하는 것을 허용한다. 그들은 JavaScript 혹은 CoffeeScript 파일이며, 프로토타입 내에 포함시킬 수 있다. 그들은 여러분이 코드를 조직화하도록 돕고, 어떤 부분에 포커스하고 있는지 선택한다.

You can find them in the /modules folder of your prototype. Modules are based on JavaScript and Node.js standards. Everything that you've prefixed with exports in your module will be available in your prototype. The require keyword imports your module.
여러분은 그들을 /modules 폴더에서 찾을 수 있다. 모듈은 JavaScript와 Node.js 표준에 기반한다. 여러분은 이를 exports를 붙여 프로토타입에서 사용할 수 있다. require 키워드를 사용하며 모듈을 import할 수 있다.

If you want to add modules to an older project, we advice to create a new project in the latest Framer Studio, and copy over your files.
만약 여러분이 예전 프로젝트에 모듈을 추가하고싶다면, 우리는 가장 최신의 Framer Studio 내에서 새로운 프로젝트를 만들거나 파일들을 복사할 것을 권한다.

Get Started


  • Create a new project in Framer Studio
  • Navigate to the /modules folder and open the file in a text-editor.
  • To include the module within your project, add the following:
  • Framer Studio에서 새로운 프로젝트 생성하기
  • /modules 폴더를 찾아 들어가서 파일을 텍스트 에디터로 열기
  • 모듈을 프로젝트에 추가하기
# To include in our prototype  
# 파일을 우리 프로토타입에 추가하기  
module = require "myModule"

Make sure to save your file and refresh your prototype to see changes. Modules can contain anything. For example, you can create Layers within your modules, or define specific interactions within functions.
추가한 후엔 파일을 저장하고 새로고침하여 프로토타입이 바뀌었는지 확인한다. 모듈은 어떤 것이든 포함할 수 있다. 예를 들어, 여러분은 모듈 내에 레이어를 생성할 수 있고, 특정한 인터렉션들을 함수 내에 정의할 수 있다.

# Store variables  
# 변수 저장하기     
exports.myVar = "myVariable"

# Create functions  
# 함수 생성하기   
exports.myFunction = ->
    print "I'm running!"

# Create Arrays  
# Array 생성하기  
exports.myArray = [1, 2, 3]

# Create Layers  
# 레이어 생성하기  
exports.mylayerA = new Layer
    backgroundColor: "#fff"

In the example above, a new layer is automatically created and included within our prototype. To also run the function, you can write:
예를 들어, 새로운 레이어는 자동으로 생성되어 프로토타입에 추가된다. 또, 함수를 실행하려면 여러분은 이렇게 쓸 수 있다:

# To include  
# 포함하기 
module = require "myModule"

# Run the function, printing "I'm running!"  
# 함수 실행하고 "I'm running!" 출력하기  

Example: Interactions

사례: Interactions

Let's create a simple draggable interaction within a module. In our file, we include the following function. It takes a layer, makes it draggable, and snaps it back to its original position on DragEnd.
모듈 안에 간단한 드래깅 인터렉션을 만들자. 우리는 파일 안에 following function을 포함한다.

# A draggable function without our module
exports.makeDraggable = (layer) ->
    layer.draggable.enabled = true

    # Store current x and y position
    startX = layer.x
    startY = layer.y

    # Animate back on DragEnd
    layer.on Events.DragEnd, ->
                x: startX
                y: startY
            curve: "spring(300,20,0)"

Now, within our prototype, we can call the makeDraggable function from our module to include the dragging interaction.

# Include module
module = require "myModule"

# Set background
bg = new BackgroundLayer
    backgroundColor: "#28AFFA"

# Create a new layer
layerA = new Layer
    backgroundColor: "#fff"
    borderRadius: 4

# Add the dragging interaction to layerA

Example: NPM

Framer Studio modules work with NPM, a package manager where thousands of JavaScript packages are published. Let's import the Backbone library. Make sure you already have NPM installed.

# In your terminal
cd ~/my-framer-project
npm install backbone

Create a new module in /modules, and name it Beware that if you name the file the same as the NPM module (like, you could run into a recursive import problem.

# File: modules/
exports.backbone = require "backbone"
After a refresh, you can import underscore into your project.

# Import the backbone module from your npm index
backbone = require("npm").backbone

# Or use this nice shortcut, which is the exact same
{backbone } = require "npm"