├── .gitignore ├── README.md └── framerContentFromFigma.framer ├── .gitignore ├── app.coffee ├── framer ├── .bookmark ├── coffee-script.js ├── config.json ├── design.vekter ├── framer.generated.js ├── framer.init.js ├── framer.js ├── framer.js.map ├── framer.modules.js ├── framer.vekter.js ├── images │ ├── cursor-active.png │ ├── cursor-active@2x.png │ ├── cursor.png │ ├── cursor@2x.png │ ├── icon-120.png │ ├── icon-152.png │ ├── icon-180.png │ ├── icon-192.png │ └── icon-76.png ├── style.css └── version ├── images ├── .gitkeep ├── ff.svg └── figma.svg ├── index.html └── modules └── secret.coffee /.gitignore: -------------------------------------------------------------------------------- 1 | # Framer Git Ignore 2 | 3 | # General OSX 4 | 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | 13 | # Thumbnails 14 | ._* 15 | 16 | # Files that might appear in the root of a volume 17 | .DocumentRevisions-V100 18 | .fseventsd 19 | .Spotlight-V100 20 | .TemporaryItems 21 | .Trashes 22 | .VolumeIcon.icns 23 | 24 | # Directories potentially created on remote AFP share 25 | .AppleDB 26 | .AppleDesktop 27 | Network Trash Folder 28 | Temporary Items 29 | .apdisk 30 | 31 | # Framer Specific 32 | .*.html 33 | .app.js 34 | framerContentFromFigma.framer/framer/*.old* 35 | framerContentFromFigma.framer/framer/.*.hash 36 | framerContentFromFigma.framer/framer/backup.coffee 37 | framerContentFromFigma.framer/framer/backups/* 38 | framerContentFromFigma.framer/framer/manifest.txt 39 | framerContentFromFigma.framer/framer/preview.png 40 | framerContentFromFigma.framer/framer/social-*x*.png 41 | framerContentFromFigma.framer/modules/secret.coffee 42 | 43 | assets/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Figma API Wrapper for Framer - Work in progress 2 | 3 | ![Importing Figma artwork in Framer. Images on this prototype were requested using the new Figma API.](https://user-images.githubusercontent.com/76307/37884359-9d48eb8c-307d-11e8-9b3f-2c87b52e7789.gif) 4 | 5 | ### Documentation 6 | Purpose: This demo aims to show how to fetch content from a Figma File. 7 | 8 | # API Methods (Demo WIP) 9 | 10 | - `requestFigmaFile` this will fetch all the Canvas objects from the file url & loop to get the IDs for each Canvas. 11 | 12 | - `requestFigmaImage` this function will fetch an image from a canvas ID. 13 | 14 | - `addToFigmaImageObject` (WIP) this function will append the response from requestFigmaImage() and it will create a new Figma Image Layer. 15 | 16 | - `loadImageFromFigmaCDN` (WIP) this function will create a new Figma Image Layer and it will preload the image into the session cache. 17 | 18 | - `setImageInFigmaImageLayer` (WIP) this function include the image into the already created Figma Image Layer and it will push the Image Layer into the Page Component. 19 | 20 | ### Configuration 21 | 22 | 1. Open the secret.coffee in /modules and add your own Figma Personal Token 23 | 24 | ```coffeescript 25 | exports.token = 'ai3-57wg5gbhe9-cspl-gclno-deheq-1qfrpxq6ax7x' 26 | exports.fileurl = 'https://www.figma.com/file/FileKey/YourFile' 27 | ``` 28 | 29 | ## For more documentation 30 | 31 | - [Figma Web API](https://www.figma.com/developers) 32 | 33 | - [Figma API Documentation](https://www.figma.com/developers/docs) 34 | 35 | - [Figma API Global Props](https://www.figma.com/developers/docs#global-properties) 36 | 37 | ## Todo 38 | 39 | * [ ] Create API Wrapper Module. 40 | * [ ] Fetch GET single `file` from URL. 41 | * [ ] Parse canvas from a given figma JSON file. 42 | * [ ] Parse props from a `FRAME` node type. 43 | * [ ] Parse props from a `VECTOR` node. 44 | * [ ] Parse props from a `LINE` vector. 45 | * [ ] Parse props from a `ELLIPSE` vector. 46 | * [ ] Parse props from a `RECTANGLE` vector. 47 | * [ ] Parse props from a `TEXT` object. 48 | * [ ] Parse props from a `TypeStyle` node. 49 | * [ ] Fetch GET `images` from node. 50 | * [ ] Fetch GET `projects`. 51 | * [ ] Fetch GET `comments`. 52 | * [ ] Fetch POST `comments`. 53 | 54 | 55 | ## Notes 56 | 57 | - Scale: The `/v1/images/:key` ENDPOINT provides a set of path parameters to have in mind. For instance `scale` will need to be exposed to the current screen density on the prototype. 58 | -------------------------------------------------------------------------------- /framerContentFromFigma.framer/.gitignore: -------------------------------------------------------------------------------- 1 | # Framer Git Ignore 2 | 3 | # General OSX 4 | 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | # Thumbnails 13 | ._* 14 | 15 | # Files that might appear in the root of a volume 16 | .DocumentRevisions-V100 17 | .fseventsd 18 | .Spotlight-V100 19 | .TemporaryItems 20 | .Trashes 21 | .VolumeIcon.icns 22 | 23 | # Directories potentially created on remote AFP share 24 | .AppleDB 25 | .AppleDesktop 26 | Network Trash Folder 27 | Temporary Items 28 | .apdisk 29 | 30 | # Framer Specific 31 | .*.html 32 | .app.js 33 | framer/*.old* 34 | framer/.*.hash 35 | framer/backup.coffee 36 | framer/backups/* 37 | framer/manifest.txt 38 | framer/preview.png 39 | framer/social-*x*.png 40 | -------------------------------------------------------------------------------- /framerContentFromFigma.framer/app.coffee: -------------------------------------------------------------------------------- 1 | # Documentation 2 | # Purpose: This demo aims to show how to fetch content from a Figma File. 3 | 4 | # API 5 | 6 | # requestFigmaFile 7 | # This will fetch all the Canvas objects from the file url & loop to get the IDs for each Canvas. 8 | 9 | # requestFigmaImage 10 | # This function will fetch an image from a canvas ID. 11 | 12 | # addToFigmaImageObject (WIP) 13 | # This function will append the response from requestFigmaImage() and it will create a new Figma Image Layer. 14 | 15 | # loadImageFromFigmaCDN (WIP) 16 | # This function will create a new Figma Image Layer and it will preload the image into the session cache. 17 | 18 | # setImageInFigmaImageLayer (WIP) 19 | # This function include the image into the already created Figma Image Layer and it will push the Image Layer into the Page Component. 20 | 21 | # Configuration 22 | 23 | # 1. Open the secret.coffee in /modules and add your own Figma Personal Token 24 | 25 | # Token 26 | 27 | { token, fileurl } = require 'secret' 28 | 29 | 30 | 31 | # FigmaImageLayer 32 | 33 | class FigmaImageLayer extends Layer 34 | constructor: (@options={}) -> 35 | 36 | @options.backgroundColor = "white" 37 | @options.size = Screen.size 38 | @options.x = 0 39 | @options.y = 0 40 | 41 | super @options 42 | 43 | ## Figma Object 44 | # Problem, Figma exports images and host them in AWS 45 | # When fetching the images the order is based on the images 46 | # that loads faster. 47 | 48 | # Attempt to order the images coming from Figma API 49 | 50 | figmaImages = {} 51 | 52 | addToFigmaImageObject = (image, nodeId, name) -> 53 | figmaImages[name] = {image, nodeId, name} 54 | loadImageFromFigmaCDN image, nodeId, name 55 | return figmaImages 56 | 57 | loadImageFromFigmaCDN = (imageUrl, nodeId, name) -> 58 | 59 | figmaImageLayer = new FigmaImageLayer 60 | name: 'figmaImageLayer'+name 61 | 62 | _.sortBy(figmaImages, ['name']) 63 | 64 | figmaImage = new Image() 65 | figmaImage.onload setImageInFigmaImageLayer(figmaImageLayer, name) 66 | figmaImage.src = imageUrl 67 | 68 | 69 | setImageInFigmaImageLayer = (figmaImageLayer, name) -> 70 | 71 | updateStatus 'Creating Image Layers...' 72 | 73 | switch 74 | when name is '01' 75 | figmaImageLayer.image = figmaImages[name].image 76 | slide?.addPage figmaImageLayer, 'right' 77 | 78 | when name is '02' 79 | figmaImageLayer.image = figmaImages[name].image 80 | slide?.addPage figmaImageLayer, 'right' 81 | 82 | when name is '03' 83 | figmaImageLayer.image = figmaImages[name].image 84 | slide?.addPage figmaImageLayer, 'right' 85 | 86 | when name is '04' 87 | figmaImageLayer.image = figmaImages[name].image 88 | slide?.addPage figmaImageLayer, 'right' 89 | 90 | 91 | when name is '05' 92 | figmaImageLayer.image = figmaImages[name].image 93 | slide?.addPage figmaImageLayer, 'right' 94 | 95 | when name is '06' 96 | figmaImageLayer.image = figmaImages[name].image 97 | slide?.addPage figmaImageLayer, 'right' 98 | 99 | # Figma API 100 | 101 | imagesFromEndpoint = null 102 | 103 | getFileKey = (pageUrl) -> 104 | # updateStatus 'Getting file key for: '+pageUrl 105 | parser = document.createElement('a') 106 | parser.href = pageUrl 107 | parser.pathname.replace('/file/', '').replace /\/.*/, '' 108 | 109 | getNodeId = (pageUrl) -> 110 | # updateStatus 'Getting page for: '+pageUrl 111 | parser = document.createElement('a') 112 | parser.href = pageUrl 113 | decodeURIComponent(parser.search).replace '?node-id=', '' 114 | 115 | apiRequest = (endpoint) -> 116 | # updateStatus 'Fetching from: '+endpoint 117 | fetch('https://api.figma.com/v1' + endpoint, 118 | method: 'GET' 119 | headers: 'x-figma-token': token).then((response) -> 120 | # updateStatus 'Resolving promises from API...' 121 | response.json() 122 | ).catch (error) -> 123 | { err: error } 124 | 125 | requestFigmaFile = (url) -> 126 | updateStatus 'Request Figma File: '+url 127 | nodeId = getNodeId(url) 128 | apiRequest('/files/' + getFileKey(url) + '?ids=' + nodeId).then (response) -> 129 | updateStatus 'Parsing response...' 130 | response.document.children.forEach (canvas) -> 131 | updateStatus 'Parsing canvas IDs...' 132 | canvas.children.forEach (id) -> 133 | imagesFromEndpoint = imagesFromEndpoint + 1 134 | requestFigmaImage fileurl+'?node-id='+id.id, id.id, id.name 135 | 136 | 137 | requestFigmaImage = (url, nodeId, name) -> 138 | updateStatus 'Requesting images from Figma...' 139 | nodeId = getNodeId(url) 140 | apiRequest('/images/' + getFileKey(url) + '?ids=' + nodeId).then((response) -> 141 | image = response.images[nodeId] 142 | addToFigmaImageObject image, nodeId, name 143 | 144 | 145 | ).catch (error) -> 146 | { err: error } 147 | 148 | # Loading Animation 149 | 150 | matrix = [30, -30, 45, -45, 60, -60, 90, -90] 151 | 152 | animateLogo = false 153 | 154 | figmaStates = {} 155 | framerStates = {} 156 | 157 | 158 | figmaColors = [ 159 | 'rgb(0, 208, 128)', 160 | 'rgb(162, 81, 255)', 161 | 'rgb(3, 187, 255)', 162 | 'rgb(244, 77, 2)', 163 | 'rgb(255, 114, 93)' 164 | ] 165 | 166 | framerColors = [ 167 | 'rgb(5, 77, 255)', 168 | 'rgb(4, 169, 255)', 169 | 'rgb(4, 169, 255)', 170 | 'rgb(132, 220, 255)', 171 | 'rgb(132, 220, 255' 172 | ] 173 | 174 | loadingState = () -> 175 | 176 | animateLogo = true 177 | 178 | 179 | figma.children.forEach (f) -> 180 | 181 | 182 | 183 | # print (f._svgLayer._properties.fill).toRgbString() 184 | 185 | figmaStates[f.id] = f.props 186 | f.animate 187 | x: f.x + _.sample matrix 188 | y: f.y + _.sample matrix 189 | rotationY: _.sample matrix 190 | rotationX: _.sample matrix 191 | # opacity: Math.random() * 1 192 | options: 193 | delay: Math.random() * 0.5 194 | time: 0.2 195 | 196 | f.onAnimationEnd -> 197 | unless animateLogo is false 198 | Utils.delay 0.1, -> 199 | f.animate 200 | x: f.x + _.sample matrix 201 | y: f.y + _.sample matrix 202 | rotationY: _.sample matrix 203 | rotationX: _.sample matrix 204 | options: 205 | delay: Math.random() * 0.5 206 | time: 0.2 207 | 208 | framer.children.forEach (f) -> 209 | 210 | #print (f._svgLayer._properties.fill).toRgbString() 211 | 212 | framerStates[f.id] = f.props 213 | f.animate 214 | x: _.sample matrix 215 | y: _.sample matrix 216 | rotationY: _.sample matrix 217 | rotationX: _.sample matrix 218 | options: 219 | delay: Math.random() * 0.5 220 | time: 0.2 221 | f.onAnimationEnd -> 222 | unless animateLogo is false 223 | Utils.delay 0.1, -> 224 | f.animate 225 | x: _.sample matrix 226 | y: _.sample matrix 227 | rotationY: _.sample matrix 228 | rotationX: _.sample matrix 229 | options: 230 | delay: Math.random() * 0.5 231 | time: 0.2 232 | 233 | start = () -> 234 | 235 | animateLogo = false 236 | 237 | updateStatus 'Ready' 238 | 239 | pageIndicator = slide.selectChild 'pageIndicator' 240 | 241 | pageIndicator.animate opacity: 1 242 | 243 | # Animate individual indicators? 244 | # pageIndicator.children.forEach (i) -> 245 | # print i 246 | 247 | figma.children.forEach (f, i) -> 248 | id = f.id 249 | f.animateStop() 250 | Utils.delay 0.5, -> 251 | figma.animate 252 | scale: 0.5 253 | y: 339 254 | options: 255 | delay: 0.5 256 | time: 1.25 257 | f.animate 258 | x: figmaStates[id].x + 90 259 | y: figmaStates[id].y 260 | rotationY: figmaStates[id].rotationY 261 | rotationX: figmaStates[id].rotationX 262 | backgroundColor: figmaColors[i] 263 | opacity: 1 264 | options: 265 | delay: 0.25 * i 266 | time: 0.35 * i 267 | 268 | framer.children.forEach (f, i) -> 269 | id = f.id 270 | f.animateStop() 271 | Utils.delay 0.5, -> 272 | framer.animate 273 | scale: 0.5 274 | y: 339 275 | options: 276 | delay: 0.5 277 | time: 1.25 278 | f.animate 279 | x: framerStates[id].x - 90 280 | y: framerStates[id].y 281 | rotationY: framerStates[id].rotationY 282 | rotationX: framerStates[id].rotationX 283 | backgroundColor: framerColors[i] 284 | opacity: 1 285 | options: 286 | delay: 0.25 * i 287 | time: 0.35 * i 288 | 289 | 290 | 291 | # Page Component 292 | 293 | slide = new PageComponent 294 | size: Screen.size 295 | scrollVertical: false 296 | backgroundColor: 'white' 297 | 298 | slide.content.backgroundColor = 'white' 299 | 300 | loading.parent = slide.content 301 | 302 | createPageIndicator = (parent, pages, y) -> 303 | 304 | indicatorColor = framerColors[2] 305 | 306 | currentIndex = 0 307 | 308 | 309 | 310 | pageIndicator = new Layer 311 | parent: parent 312 | name: 'pageIndicator' 313 | x: 0 314 | y: y 315 | width: Screen.width 316 | height: 8 317 | backgroundColor: null 318 | 319 | 320 | movingIndicator = new Layer 321 | parent: parent 322 | name: '.movingIndicator' 323 | x: Align.center(0-((pages/2 - 0.5))*18) 324 | y: y 325 | backgroundColor: framerColors[1] 326 | size: 8 327 | borderRadius: 4 328 | opacity: 0 329 | 330 | 331 | for i in [0...pages] 332 | 333 | indicator = new Layer 334 | parent: pageIndicator 335 | x: Align.center((i - (pages/2 - 0.5))*18) 336 | y: Align.center 337 | size: 8 338 | borderRadius: 4 339 | name: '.indicator'+i 340 | backgroundColor: indicatorColor 341 | opacity: 0.5 342 | 343 | indicator.states = 344 | active: 345 | opacity: 1 346 | backgroundColor: framerColors[1] 347 | 348 | pageIndicator.children[0].stateSwitch('active') 349 | 350 | parent.on 'change:currentPage', -> 351 | pageIndicator.children[currentIndex].stateSwitch('default') 352 | currentIndex = parent.horizontalPageIndex(parent.currentPage) 353 | pageIndicator.children[currentIndex].stateSwitch('active') 354 | movingIndicator.animate 355 | opacity: 0.5 356 | x: pageIndicator.children[currentIndex].x 357 | options: 358 | time: 0.25 359 | 360 | status = loading.selectChild 'status' 361 | 362 | updateStatus = (message) -> 363 | status.template = 364 | status: message 365 | 366 | 367 | 368 | # Initialize 369 | 370 | Utils.domComplete -> 371 | 372 | createPageIndicator slide, 7, Align.bottom(-24) 373 | 374 | pageIndicator = slide.selectChild 'pageIndicator' 375 | 376 | pageIndicator.opacity = 0 377 | loadingState() 378 | updateStatus 'Pinging Figma API...' 379 | Utils.delay 0.5, -> 380 | requestFigmaFile(fileurl) 381 | 382 | Utils.delay 2, -> 383 | start() 384 | -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/.bookmark: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davo/FigmaAPI-Framer/1eb552b2a094ced47c050d442cf109c6e0ddf743/framerContentFromFigma.framer/framer/.bookmark -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "orientation" : 0, 3 | "updateDelay" : 2, 4 | "designModeSelected" : 0, 5 | "cachedDeviceHeight" : 812, 6 | "contentScale" : 1, 7 | "cachedDeviceWidth" : 375, 8 | "fullScreen" : false, 9 | "deviceType" : "apple-iphone-x-silver", 10 | "sharedPrototype" : true, 11 | "propertyPanelToggleStates" : { 12 | 13 | }, 14 | "projectId" : "B566CC34-8A6B-446B-A2FA-B54F286C9733", 15 | "deviceOrientation" : 0, 16 | "selectedHand" : "", 17 | "showBezel" : true, 18 | "foldedCodeRanges" : [ 19 | "{836, 49}", 20 | "{886, 1672}", 21 | "{2559, 1481}", 22 | "{4041, 2754}", 23 | "{6796, 1459}", 24 | "{8256, 301}" 25 | ], 26 | "deviceScale" : "fit" 27 | } -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/design.vekter: -------------------------------------------------------------------------------- 1 | { 2 | "root" : { 3 | "__class" : "CanvasNode", 4 | "children" : [ 5 | { 6 | "__class" : "FrameNode", 7 | "aspectRatioLocked" : true, 8 | "blendingEnabled" : 0, 9 | "blendingMode" : "normal", 10 | "blur" : 12, 11 | "blurEnabled" : 0, 12 | "blurType" : "layer", 13 | "borderBottom" : 1, 14 | "borderColor" : "#222", 15 | "borderEnabled" : 0, 16 | "borderLeft" : 1, 17 | "borderPerSide" : false, 18 | "borderRight" : 1, 19 | "borderStyle" : "solid", 20 | "borderTop" : 1, 21 | "borderWidth" : 1, 22 | "bottom" : null, 23 | "boxShadows" : [ 24 | 25 | ], 26 | "brightness" : 100, 27 | "brightnessEnabled" : 0, 28 | "centerAnchorX" : 0, 29 | "centerAnchorY" : 0, 30 | "children" : [ 31 | { 32 | "__class" : "FrameNode", 33 | "aspectRatioLocked" : true, 34 | "blendingEnabled" : 0, 35 | "blendingMode" : "normal", 36 | "blur" : 12, 37 | "blurEnabled" : 0, 38 | "blurType" : "layer", 39 | "borderBottom" : 1, 40 | "borderColor" : "#222", 41 | "borderEnabled" : 0, 42 | "borderLeft" : 1, 43 | "borderPerSide" : false, 44 | "borderRight" : 1, 45 | "borderStyle" : "solid", 46 | "borderTop" : 1, 47 | "borderWidth" : 1, 48 | "bottom" : null, 49 | "boxShadows" : [ 50 | 51 | ], 52 | "brightness" : 100, 53 | "brightnessEnabled" : 0, 54 | "centerAnchorX" : 0.49866666666666665, 55 | "centerAnchorY" : 0.27032019704433496, 56 | "children" : [ 57 | { 58 | "__class" : "PathNode", 59 | "aspectRatioLocked" : false, 60 | "boxShadows" : [ 61 | 62 | ], 63 | "exportOptions" : [ 64 | 65 | ], 66 | "fillColor" : "rgba(0, 208, 128, 1.00)", 67 | "fillEnabled" : true, 68 | "fillGradient" : { 69 | "__class" : "LinearGradient", 70 | "alpha" : 1, 71 | "angle" : 0, 72 | "end" : "rgba(0,0,0,0)", 73 | "start" : "black" 74 | }, 75 | "fillImage" : null, 76 | "fillImagePixelHeight" : null, 77 | "fillImagePixelWidth" : null, 78 | "fillImageResize" : "fill", 79 | "fillType" : "color", 80 | "height" : 45, 81 | "id" : "qAetWgAv2", 82 | "lineCap" : "butt", 83 | "lineJoin" : "miter", 84 | "locked" : false, 85 | "name" : "shape", 86 | "opacity" : 1, 87 | "parentid" : "YEcJhhgCF", 88 | "pathClosed" : true, 89 | "pathSegments" : [ 90 | { 91 | "__class" : "PathSegment", 92 | "handleInX" : 0, 93 | "handleInY" : 0, 94 | "handleMirroring" : "straight", 95 | "handleOutX" : 0, 96 | "handleOutY" : 0, 97 | "radius" : 0, 98 | "x" : 0, 99 | "y" : 0 100 | }, 101 | { 102 | "__class" : "PathSegment", 103 | "handleInX" : 0, 104 | "handleInY" : 0, 105 | "handleMirroring" : "straight", 106 | "handleOutX" : 0, 107 | "handleOutY" : 0, 108 | "radius" : 0, 109 | "x" : 45, 110 | "y" : 0 111 | }, 112 | { 113 | "__class" : "PathSegment", 114 | "handleInX" : 0, 115 | "handleInY" : 0, 116 | "handleMirroring" : "straight", 117 | "handleOutX" : 0, 118 | "handleOutY" : 0, 119 | "radius" : 0, 120 | "x" : 45, 121 | "y" : 45 122 | } 123 | ], 124 | "rotation" : 0, 125 | "strokeAlignment" : "center", 126 | "strokeColor" : "#0AF", 127 | "strokeDashArray" : "0", 128 | "strokeDashOffset" : 0, 129 | "strokeEnabled" : 0, 130 | "strokeMiterLimit" : 4, 131 | "strokeWidth" : 1, 132 | "targetName" : null, 133 | "visible" : true, 134 | "width" : 45, 135 | "x" : 0, 136 | "y" : 90 137 | }, 138 | { 139 | "__class" : "PathNode", 140 | "aspectRatioLocked" : false, 141 | "boxShadows" : [ 142 | 143 | ], 144 | "exportOptions" : [ 145 | 146 | ], 147 | "fillColor" : "rgba(162, 81, 255, 1.00)", 148 | "fillEnabled" : true, 149 | "fillGradient" : { 150 | "__class" : "LinearGradient", 151 | "alpha" : 1, 152 | "angle" : 0, 153 | "end" : "rgba(0,0,0,0)", 154 | "start" : "black" 155 | }, 156 | "fillImage" : null, 157 | "fillImagePixelHeight" : null, 158 | "fillImagePixelWidth" : null, 159 | "fillImageResize" : "fill", 160 | "fillType" : "color", 161 | "height" : 45, 162 | "id" : "ve3jPUQ2E", 163 | "lineCap" : "butt", 164 | "lineJoin" : "miter", 165 | "locked" : false, 166 | "name" : "shape", 167 | "opacity" : 1, 168 | "parentid" : "YEcJhhgCF", 169 | "pathClosed" : true, 170 | "pathSegments" : [ 171 | { 172 | "__class" : "PathSegment", 173 | "handleInX" : 0, 174 | "handleInY" : 0, 175 | "handleMirroring" : "straight", 176 | "handleOutX" : 0, 177 | "handleOutY" : 0, 178 | "radius" : 0, 179 | "x" : 0, 180 | "y" : 0 181 | }, 182 | { 183 | "__class" : "PathSegment", 184 | "handleInX" : 0, 185 | "handleInY" : 0, 186 | "handleMirroring" : "straight", 187 | "handleOutX" : 0, 188 | "handleOutY" : 0, 189 | "radius" : 0, 190 | "x" : 45, 191 | "y" : 0 192 | }, 193 | { 194 | "__class" : "PathSegment", 195 | "handleInX" : 0, 196 | "handleInY" : 0, 197 | "handleMirroring" : "straight", 198 | "handleOutX" : 0, 199 | "handleOutY" : 0, 200 | "radius" : 0, 201 | "x" : 45, 202 | "y" : 45 203 | }, 204 | { 205 | "__class" : "PathSegment", 206 | "handleInX" : 0, 207 | "handleInY" : 0, 208 | "handleMirroring" : "straight", 209 | "handleOutX" : 0, 210 | "handleOutY" : 0, 211 | "radius" : 0, 212 | "x" : 0, 213 | "y" : 45 214 | } 215 | ], 216 | "rotation" : 0, 217 | "strokeAlignment" : "center", 218 | "strokeColor" : "#0AF", 219 | "strokeDashArray" : "0", 220 | "strokeDashOffset" : 0, 221 | "strokeEnabled" : 0, 222 | "strokeMiterLimit" : 4, 223 | "strokeWidth" : 1, 224 | "targetName" : null, 225 | "visible" : true, 226 | "width" : 45, 227 | "x" : 0, 228 | "y" : 45 229 | }, 230 | { 231 | "__class" : "PathNode", 232 | "aspectRatioLocked" : false, 233 | "boxShadows" : [ 234 | 235 | ], 236 | "exportOptions" : [ 237 | 238 | ], 239 | "fillColor" : "rgba(3, 187, 255, 1.00)", 240 | "fillEnabled" : true, 241 | "fillGradient" : { 242 | "__class" : "LinearGradient", 243 | "alpha" : 1, 244 | "angle" : 0, 245 | "end" : "rgba(0,0,0,0)", 246 | "start" : "black" 247 | }, 248 | "fillImage" : null, 249 | "fillImagePixelHeight" : null, 250 | "fillImagePixelWidth" : null, 251 | "fillImageResize" : "fill", 252 | "fillType" : "color", 253 | "height" : 45, 254 | "id" : "c19RLBWFd", 255 | "lineCap" : "butt", 256 | "lineJoin" : "miter", 257 | "locked" : false, 258 | "name" : "shape", 259 | "opacity" : 1, 260 | "parentid" : "YEcJhhgCF", 261 | "pathClosed" : true, 262 | "pathSegments" : [ 263 | { 264 | "__class" : "PathSegment", 265 | "handleInX" : 0, 266 | "handleInY" : 0, 267 | "handleMirroring" : "straight", 268 | "handleOutX" : 0, 269 | "handleOutY" : 0, 270 | "radius" : 0, 271 | "x" : 0, 272 | "y" : 0 273 | }, 274 | { 275 | "__class" : "PathSegment", 276 | "handleInX" : 0, 277 | "handleInY" : 0, 278 | "handleMirroring" : "straight", 279 | "handleOutX" : 0, 280 | "handleOutY" : 0, 281 | "radius" : 0, 282 | "x" : 45, 283 | "y" : 45 284 | }, 285 | { 286 | "__class" : "PathSegment", 287 | "handleInX" : 0, 288 | "handleInY" : 0, 289 | "handleMirroring" : "straight", 290 | "handleOutX" : 0, 291 | "handleOutY" : 0, 292 | "radius" : 0, 293 | "x" : 0, 294 | "y" : 45 295 | } 296 | ], 297 | "rotation" : 0, 298 | "strokeAlignment" : "center", 299 | "strokeColor" : "#0AF", 300 | "strokeDashArray" : "0", 301 | "strokeDashOffset" : 0, 302 | "strokeEnabled" : 0, 303 | "strokeMiterLimit" : 4, 304 | "strokeWidth" : 1, 305 | "targetName" : null, 306 | "visible" : true, 307 | "width" : 45, 308 | "x" : 45, 309 | "y" : 45 310 | }, 311 | { 312 | "__class" : "PathNode", 313 | "aspectRatioLocked" : false, 314 | "boxShadows" : [ 315 | 316 | ], 317 | "exportOptions" : [ 318 | 319 | ], 320 | "fillColor" : "rgba(244, 77, 2, 1.00)", 321 | "fillEnabled" : true, 322 | "fillGradient" : { 323 | "__class" : "LinearGradient", 324 | "alpha" : 1, 325 | "angle" : 0, 326 | "end" : "rgba(0,0,0,0)", 327 | "start" : "black" 328 | }, 329 | "fillImage" : null, 330 | "fillImagePixelHeight" : null, 331 | "fillImagePixelWidth" : null, 332 | "fillImageResize" : "fill", 333 | "fillType" : "color", 334 | "height" : 45, 335 | "id" : "gm27qwKem", 336 | "lineCap" : "butt", 337 | "lineJoin" : "miter", 338 | "locked" : false, 339 | "name" : "shape", 340 | "opacity" : 1, 341 | "parentid" : "YEcJhhgCF", 342 | "pathClosed" : true, 343 | "pathSegments" : [ 344 | { 345 | "__class" : "PathSegment", 346 | "handleInX" : 0, 347 | "handleInY" : 0, 348 | "handleMirroring" : "straight", 349 | "handleOutX" : 0, 350 | "handleOutY" : 0, 351 | "radius" : 0, 352 | "x" : 0, 353 | "y" : 0 354 | }, 355 | { 356 | "__class" : "PathSegment", 357 | "handleInX" : 0, 358 | "handleInY" : 0, 359 | "handleMirroring" : "straight", 360 | "handleOutX" : 0, 361 | "handleOutY" : 0, 362 | "radius" : 0, 363 | "x" : 45, 364 | "y" : 0 365 | }, 366 | { 367 | "__class" : "PathSegment", 368 | "handleInX" : 0, 369 | "handleInY" : 0, 370 | "handleMirroring" : "straight", 371 | "handleOutX" : 0, 372 | "handleOutY" : 0, 373 | "radius" : 0, 374 | "x" : 45, 375 | "y" : 45 376 | } 377 | ], 378 | "rotation" : 0, 379 | "strokeAlignment" : "center", 380 | "strokeColor" : "#0AF", 381 | "strokeDashArray" : "0", 382 | "strokeDashOffset" : 0, 383 | "strokeEnabled" : 0, 384 | "strokeMiterLimit" : 4, 385 | "strokeWidth" : 1, 386 | "targetName" : null, 387 | "visible" : true, 388 | "width" : 45, 389 | "x" : 0, 390 | "y" : 0 391 | }, 392 | { 393 | "__class" : "PathNode", 394 | "aspectRatioLocked" : false, 395 | "boxShadows" : [ 396 | 397 | ], 398 | "exportOptions" : [ 399 | 400 | ], 401 | "fillColor" : "rgba(255, 114, 93, 1.00)", 402 | "fillEnabled" : true, 403 | "fillGradient" : { 404 | "__class" : "LinearGradient", 405 | "alpha" : 1, 406 | "angle" : 0, 407 | "end" : "rgba(0,0,0,0)", 408 | "start" : "black" 409 | }, 410 | "fillImage" : null, 411 | "fillImagePixelHeight" : null, 412 | "fillImagePixelWidth" : null, 413 | "fillImageResize" : "fill", 414 | "fillType" : "color", 415 | "height" : 45, 416 | "id" : "efhjv7rzE", 417 | "lineCap" : "butt", 418 | "lineJoin" : "miter", 419 | "locked" : false, 420 | "name" : "shape", 421 | "opacity" : 1, 422 | "parentid" : "YEcJhhgCF", 423 | "pathClosed" : true, 424 | "pathSegments" : [ 425 | { 426 | "__class" : "PathSegment", 427 | "handleInX" : 0, 428 | "handleInY" : 0, 429 | "handleMirroring" : "straight", 430 | "handleOutX" : 0, 431 | "handleOutY" : 0, 432 | "radius" : 0, 433 | "x" : 0, 434 | "y" : 0 435 | }, 436 | { 437 | "__class" : "PathSegment", 438 | "handleInX" : 0, 439 | "handleInY" : 0, 440 | "handleMirroring" : "straight", 441 | "handleOutX" : 0, 442 | "handleOutY" : 0, 443 | "radius" : 0, 444 | "x" : 45, 445 | "y" : 0 446 | }, 447 | { 448 | "__class" : "PathSegment", 449 | "handleInX" : 0, 450 | "handleInY" : 0, 451 | "handleMirroring" : "straight", 452 | "handleOutX" : 0, 453 | "handleOutY" : 0, 454 | "radius" : 0, 455 | "x" : 45, 456 | "y" : 45 457 | }, 458 | { 459 | "__class" : "PathSegment", 460 | "handleInX" : 0, 461 | "handleInY" : 0, 462 | "handleMirroring" : "straight", 463 | "handleOutX" : 0, 464 | "handleOutY" : 0, 465 | "radius" : 0, 466 | "x" : 0, 467 | "y" : 45 468 | } 469 | ], 470 | "rotation" : 0, 471 | "strokeAlignment" : "center", 472 | "strokeColor" : "#0AF", 473 | "strokeDashArray" : "0", 474 | "strokeDashOffset" : 0, 475 | "strokeEnabled" : 0, 476 | "strokeMiterLimit" : 4, 477 | "strokeWidth" : 1, 478 | "targetName" : null, 479 | "visible" : true, 480 | "width" : 45, 481 | "x" : 45, 482 | "y" : 0 483 | } 484 | ], 485 | "clip" : false, 486 | "constraintsLocked" : false, 487 | "contrast" : 100, 488 | "contrastEnabled" : 0, 489 | "deviceType" : null, 490 | "exportIncludesBackground" : true, 491 | "exportOptions" : [ 492 | 493 | ], 494 | "fillColor" : "rgba(255, 255, 255, 0.9)", 495 | "fillEnabled" : false, 496 | "fillGradient" : { 497 | "__class" : "LinearGradient", 498 | "alpha" : 1, 499 | "angle" : 0, 500 | "end" : "rgba(0,0,0,0)", 501 | "start" : "black" 502 | }, 503 | "fillImage" : null, 504 | "fillImagePixelHeight" : null, 505 | "fillImagePixelWidth" : null, 506 | "fillImageResize" : "fill", 507 | "fillType" : "color", 508 | "grayscale" : 0, 509 | "grayScaleEnabled" : 0, 510 | "height" : 135, 511 | "heightFactor" : null, 512 | "hueRotate" : 0, 513 | "hueRotateEnabled" : 0, 514 | "id" : "YEcJhhgCF", 515 | "intrinsicHeight" : null, 516 | "intrinsicWidth" : null, 517 | "invert" : 0, 518 | "invertEnabled" : 0, 519 | "left" : null, 520 | "locked" : false, 521 | "name" : "framer", 522 | "opacity" : 1, 523 | "parentid" : "IKj3JB40o", 524 | "radius" : 0, 525 | "radiusBottomLeft" : 0, 526 | "radiusBottomRight" : 0, 527 | "radiusIsRelative" : false, 528 | "radiusPerCorner" : false, 529 | "radiusTopLeft" : 0, 530 | "radiusTopRight" : 0, 531 | "right" : null, 532 | "rotation" : 0, 533 | "saturate" : 100, 534 | "saturateEnabled" : 0, 535 | "sepia" : 0, 536 | "sepiaEnabled" : 0, 537 | "targetName" : "framer", 538 | "top" : 152, 539 | "visible" : true, 540 | "width" : 90, 541 | "widthFactor" : null 542 | }, 543 | { 544 | "__class" : "FrameNode", 545 | "aspectRatioLocked" : true, 546 | "blendingEnabled" : 0, 547 | "blendingMode" : "normal", 548 | "blur" : 12, 549 | "blurEnabled" : 0, 550 | "blurType" : "layer", 551 | "borderBottom" : 1, 552 | "borderColor" : "#222", 553 | "borderEnabled" : 0, 554 | "borderLeft" : 1, 555 | "borderPerSide" : false, 556 | "borderRight" : 1, 557 | "borderStyle" : "solid", 558 | "borderTop" : 1, 559 | "borderWidth" : 1, 560 | "bottom" : null, 561 | "boxShadows" : [ 562 | 563 | ], 564 | "brightness" : 100, 565 | "brightnessEnabled" : 0, 566 | "centerAnchorX" : 0.49866666666666665, 567 | "centerAnchorY" : 0.27032019704433496, 568 | "children" : [ 569 | { 570 | "__class" : "PathNode", 571 | "aspectRatioLocked" : true, 572 | "boxShadows" : [ 573 | 574 | ], 575 | "exportOptions" : [ 576 | 577 | ], 578 | "fillColor" : "rgba(5, 77, 255, 1.00)", 579 | "fillEnabled" : true, 580 | "fillGradient" : { 581 | "__class" : "LinearGradient", 582 | "alpha" : 1, 583 | "angle" : 0, 584 | "end" : "rgba(0,0,0,0)", 585 | "start" : "black" 586 | }, 587 | "fillImage" : null, 588 | "fillImagePixelHeight" : null, 589 | "fillImagePixelWidth" : null, 590 | "fillImageResize" : "fill", 591 | "fillType" : "color", 592 | "height" : 45, 593 | "id" : "EHQoaPAho", 594 | "lineCap" : "butt", 595 | "lineJoin" : "miter", 596 | "locked" : false, 597 | "name" : "shape", 598 | "opacity" : 1, 599 | "parentid" : "vzKoJZKZg", 600 | "pathClosed" : true, 601 | "pathSegments" : [ 602 | { 603 | "__class" : "PathSegment", 604 | "handleInX" : 0, 605 | "handleInY" : 0, 606 | "handleMirroring" : "straight", 607 | "handleOutX" : 0, 608 | "handleOutY" : 0, 609 | "radius" : 90, 610 | "x" : 0, 611 | "y" : 0 612 | }, 613 | { 614 | "__class" : "PathSegment", 615 | "handleInX" : 0, 616 | "handleInY" : 0, 617 | "handleMirroring" : "straight", 618 | "handleOutX" : 0, 619 | "handleOutY" : 0, 620 | "radius" : 0, 621 | "x" : 45, 622 | "y" : 0 623 | }, 624 | { 625 | "__class" : "PathSegment", 626 | "handleInX" : 0, 627 | "handleInY" : 0, 628 | "handleMirroring" : "straight", 629 | "handleOutX" : 0, 630 | "handleOutY" : 0, 631 | "radius" : 90, 632 | "x" : 45, 633 | "y" : 0 634 | }, 635 | { 636 | "__class" : "PathSegment", 637 | "handleInX" : 0, 638 | "handleInY" : 0, 639 | "handleMirroring" : "straight", 640 | "handleOutX" : 0, 641 | "handleOutY" : 0, 642 | "radius" : 0, 643 | "x" : 45, 644 | "y" : 0 645 | }, 646 | { 647 | "__class" : "PathSegment", 648 | "handleInX" : 0, 649 | "handleInY" : 0, 650 | "handleMirroring" : "straight", 651 | "handleOutX" : 0, 652 | "handleOutY" : 0, 653 | "radius" : 90, 654 | "x" : 45, 655 | "y" : 45 656 | }, 657 | { 658 | "__class" : "PathSegment", 659 | "handleInX" : 0, 660 | "handleInY" : 0, 661 | "handleMirroring" : "straight", 662 | "handleOutX" : 0, 663 | "handleOutY" : 0, 664 | "radius" : 90, 665 | "x" : 0, 666 | "y" : 45 667 | } 668 | ], 669 | "rotation" : 0, 670 | "strokeAlignment" : "center", 671 | "strokeColor" : "#0AF", 672 | "strokeDashArray" : "0", 673 | "strokeDashOffset" : 0, 674 | "strokeEnabled" : 0, 675 | "strokeMiterLimit" : 4, 676 | "strokeWidth" : 1, 677 | "targetName" : null, 678 | "visible" : true, 679 | "width" : 45, 680 | "x" : 0, 681 | "y" : 90 682 | }, 683 | { 684 | "__class" : "OvalShapeNode", 685 | "aspectRatioLocked" : true, 686 | "boxShadows" : [ 687 | 688 | ], 689 | "exportOptions" : [ 690 | 691 | ], 692 | "fillColor" : "rgba(4, 169, 255, 1.00)", 693 | "fillEnabled" : true, 694 | "fillGradient" : { 695 | "__class" : "LinearGradient", 696 | "alpha" : 1, 697 | "angle" : 0, 698 | "end" : "rgba(0,0,0,0)", 699 | "start" : "black" 700 | }, 701 | "fillImage" : null, 702 | "fillImagePixelHeight" : null, 703 | "fillImagePixelWidth" : null, 704 | "fillImageResize" : "fill", 705 | "fillType" : "color", 706 | "height" : 45, 707 | "id" : "phKAOV_I2", 708 | "lineCap" : "butt", 709 | "lineJoin" : "miter", 710 | "locked" : false, 711 | "name" : "shape", 712 | "opacity" : 1, 713 | "parentid" : "vzKoJZKZg", 714 | "rotation" : 0, 715 | "strokeAlignment" : "center", 716 | "strokeColor" : "#0AF", 717 | "strokeDashArray" : "0", 718 | "strokeDashOffset" : 0, 719 | "strokeEnabled" : 0, 720 | "strokeMiterLimit" : 4, 721 | "strokeWidth" : 1, 722 | "targetName" : null, 723 | "visible" : true, 724 | "width" : 45, 725 | "x" : 45, 726 | "y" : 45 727 | }, 728 | { 729 | "__class" : "RectangleShapeNode", 730 | "aspectRatioLocked" : true, 731 | "boxShadows" : [ 732 | 733 | ], 734 | "exportOptions" : [ 735 | 736 | ], 737 | "fillColor" : "rgba(4, 169, 255, 1.00)", 738 | "fillEnabled" : true, 739 | "fillGradient" : { 740 | "__class" : "LinearGradient", 741 | "alpha" : 1, 742 | "angle" : 0, 743 | "end" : "rgba(0,0,0,0)", 744 | "start" : "black" 745 | }, 746 | "fillImage" : null, 747 | "fillImagePixelHeight" : null, 748 | "fillImagePixelWidth" : null, 749 | "fillImageResize" : "fill", 750 | "fillType" : "color", 751 | "height" : 45, 752 | "id" : "A4q08kSrs", 753 | "lineCap" : "butt", 754 | "lineJoin" : "miter", 755 | "locked" : false, 756 | "name" : "shape", 757 | "opacity" : 1, 758 | "parentid" : "vzKoJZKZg", 759 | "radius" : 0, 760 | "radiusBottomLeft" : 90, 761 | "radiusBottomRight" : 0, 762 | "radiusPerCorner" : true, 763 | "radiusTopLeft" : 90, 764 | "radiusTopRight" : 0, 765 | "rotation" : 0, 766 | "strokeAlignment" : "center", 767 | "strokeColor" : "#0AF", 768 | "strokeDashArray" : "0", 769 | "strokeDashOffset" : 0, 770 | "strokeEnabled" : 0, 771 | "strokeMiterLimit" : 4, 772 | "strokeWidth" : 1, 773 | "targetName" : null, 774 | "visible" : true, 775 | "width" : 45, 776 | "x" : 0, 777 | "y" : 45 778 | }, 779 | { 780 | "__class" : "RectangleShapeNode", 781 | "aspectRatioLocked" : true, 782 | "boxShadows" : [ 783 | 784 | ], 785 | "exportOptions" : [ 786 | 787 | ], 788 | "fillColor" : "rgba(132, 220, 255, 1.00)", 789 | "fillEnabled" : true, 790 | "fillGradient" : { 791 | "__class" : "LinearGradient", 792 | "alpha" : 1, 793 | "angle" : 0, 794 | "end" : "rgba(0,0,0,0)", 795 | "start" : "black" 796 | }, 797 | "fillImage" : null, 798 | "fillImagePixelHeight" : null, 799 | "fillImagePixelWidth" : null, 800 | "fillImageResize" : "fill", 801 | "fillType" : "color", 802 | "height" : 45, 803 | "id" : "VNzJ8N59l", 804 | "lineCap" : "butt", 805 | "lineJoin" : "miter", 806 | "locked" : false, 807 | "name" : "shape", 808 | "opacity" : 1, 809 | "parentid" : "vzKoJZKZg", 810 | "radius" : 0, 811 | "radiusBottomLeft" : 90, 812 | "radiusBottomRight" : 0, 813 | "radiusPerCorner" : true, 814 | "radiusTopLeft" : 90, 815 | "radiusTopRight" : 0, 816 | "rotation" : 0, 817 | "strokeAlignment" : "center", 818 | "strokeColor" : "#0AF", 819 | "strokeDashArray" : "0", 820 | "strokeDashOffset" : 0, 821 | "strokeEnabled" : 0, 822 | "strokeMiterLimit" : 4, 823 | "strokeWidth" : 1, 824 | "targetName" : null, 825 | "visible" : true, 826 | "width" : 45, 827 | "x" : 0, 828 | "y" : 0 829 | }, 830 | { 831 | "__class" : "RectangleShapeNode", 832 | "aspectRatioLocked" : true, 833 | "boxShadows" : [ 834 | 835 | ], 836 | "exportOptions" : [ 837 | 838 | ], 839 | "fillColor" : "rgba(132, 220, 255, 1.00)", 840 | "fillEnabled" : true, 841 | "fillGradient" : { 842 | "__class" : "LinearGradient", 843 | "alpha" : 1, 844 | "angle" : 0, 845 | "end" : "rgba(0,0,0,0)", 846 | "start" : "black" 847 | }, 848 | "fillImage" : null, 849 | "fillImagePixelHeight" : null, 850 | "fillImagePixelWidth" : null, 851 | "fillImageResize" : "fill", 852 | "fillType" : "color", 853 | "height" : 45, 854 | "id" : "UpF_Cnj__", 855 | "lineCap" : "butt", 856 | "lineJoin" : "miter", 857 | "locked" : false, 858 | "name" : "shape", 859 | "opacity" : 1, 860 | "parentid" : "vzKoJZKZg", 861 | "radius" : 0, 862 | "radiusBottomLeft" : 0, 863 | "radiusBottomRight" : 90, 864 | "radiusPerCorner" : true, 865 | "radiusTopLeft" : 0, 866 | "radiusTopRight" : 90, 867 | "rotation" : 0, 868 | "strokeAlignment" : "center", 869 | "strokeColor" : "#0AF", 870 | "strokeDashArray" : "0", 871 | "strokeDashOffset" : 0, 872 | "strokeEnabled" : 0, 873 | "strokeMiterLimit" : 4, 874 | "strokeWidth" : 1, 875 | "targetName" : null, 876 | "visible" : true, 877 | "width" : 45, 878 | "x" : 45, 879 | "y" : 0 880 | } 881 | ], 882 | "clip" : false, 883 | "constraintsLocked" : false, 884 | "contrast" : 100, 885 | "contrastEnabled" : 0, 886 | "deviceType" : null, 887 | "exportIncludesBackground" : true, 888 | "exportOptions" : [ 889 | 890 | ], 891 | "fillColor" : "rgba(255,255,255,1)", 892 | "fillEnabled" : false, 893 | "fillGradient" : { 894 | "__class" : "LinearGradient", 895 | "alpha" : 1, 896 | "angle" : 0, 897 | "end" : "rgba(0,0,0,0)", 898 | "start" : "black" 899 | }, 900 | "fillImage" : null, 901 | "fillImagePixelHeight" : null, 902 | "fillImagePixelWidth" : null, 903 | "fillImageResize" : "fill", 904 | "fillType" : "color", 905 | "grayscale" : 0, 906 | "grayScaleEnabled" : 0, 907 | "height" : 135, 908 | "heightFactor" : null, 909 | "hueRotate" : 0, 910 | "hueRotateEnabled" : 0, 911 | "id" : "vzKoJZKZg", 912 | "intrinsicHeight" : null, 913 | "intrinsicWidth" : null, 914 | "invert" : 0, 915 | "invertEnabled" : 0, 916 | "left" : null, 917 | "locked" : false, 918 | "name" : "figma", 919 | "opacity" : 1, 920 | "parentid" : "IKj3JB40o", 921 | "radius" : 0, 922 | "radiusBottomLeft" : 0, 923 | "radiusBottomRight" : 0, 924 | "radiusIsRelative" : false, 925 | "radiusPerCorner" : false, 926 | "radiusTopLeft" : 0, 927 | "radiusTopRight" : 0, 928 | "right" : null, 929 | "rotation" : 0, 930 | "saturate" : 100, 931 | "saturateEnabled" : 0, 932 | "sepia" : 0, 933 | "sepiaEnabled" : 0, 934 | "targetName" : "figma", 935 | "top" : 152, 936 | "visible" : true, 937 | "width" : 90, 938 | "widthFactor" : null 939 | }, 940 | { 941 | "__class" : "TextNode", 942 | "autoSize" : true, 943 | "blendingEnabled" : 0, 944 | "blendingMode" : "normal", 945 | "blur" : 12, 946 | "blurEnabled" : 0, 947 | "blurType" : "layer", 948 | "bottom" : 144, 949 | "brightness" : 100, 950 | "brightnessEnabled" : 0, 951 | "centerAnchorX" : 0.49866666666666665, 952 | "centerAnchorY" : 0.81650246305418717, 953 | "constraintsLocked" : false, 954 | "contrast" : 100, 955 | "contrastEnabled" : 0, 956 | "editable" : false, 957 | "exportOptions" : [ 958 | 959 | ], 960 | "grayscale" : 0, 961 | "grayScaleEnabled" : 0, 962 | "height" : 10, 963 | "heightFactor" : null, 964 | "hueRotate" : 0, 965 | "hueRotateEnabled" : 0, 966 | "id" : "L8tmPeQuB", 967 | "invert" : 0, 968 | "invertEnabled" : 0, 969 | "left" : null, 970 | "locked" : false, 971 | "name" : "status", 972 | "opacity" : 1, 973 | "parentid" : "IKj3JB40o", 974 | "right" : null, 975 | "rotation" : 0, 976 | "saturate" : 100, 977 | "saturateEnabled" : 0, 978 | "sepia" : 0, 979 | "sepiaEnabled" : 0, 980 | "shadows" : [ 981 | 982 | ], 983 | "styledText" : { 984 | "__class" : "StyledTextDraft", 985 | "blocks" : [ 986 | { 987 | "data" : { 988 | "emptyStyle" : [ 989 | "LETTERSPACING:0", 990 | "LINEHEIGHT:1.2", 991 | "FONT:__SF-UI-Display-Regular__", 992 | "SIZE:9", 993 | "COLOR:rgba(0, 0, 0, 1.00)", 994 | "ALIGN:center" 995 | ] 996 | }, 997 | "depth" : 0, 998 | "entityRanges" : [ 999 | 1000 | ], 1001 | "inlineStyleRanges" : [ 1002 | { 1003 | "length" : 8, 1004 | "offset" : 0, 1005 | "style" : "LETTERSPACING:0" 1006 | }, 1007 | { 1008 | "length" : 8, 1009 | "offset" : 0, 1010 | "style" : "LINEHEIGHT:1.2" 1011 | }, 1012 | { 1013 | "length" : 8, 1014 | "offset" : 0, 1015 | "style" : "FONT:__SF-UI-Display-Regular__" 1016 | }, 1017 | { 1018 | "length" : 8, 1019 | "offset" : 0, 1020 | "style" : "SIZE:9" 1021 | }, 1022 | { 1023 | "length" : 8, 1024 | "offset" : 0, 1025 | "style" : "COLOR:rgba(0, 0, 0, 1.00)" 1026 | }, 1027 | { 1028 | "length" : 8, 1029 | "offset" : 0, 1030 | "style" : "ALIGN:center" 1031 | } 1032 | ], 1033 | "key" : "1jui5", 1034 | "text" : "{status}", 1035 | "type" : "unstyled" 1036 | } 1037 | ], 1038 | "cached" : { 1039 | "html" : "{status}<\/span><\/span>", 1040 | "os" : "10_13", 1041 | "size" : { 1042 | "height" : 10, 1043 | "width" : 30 1044 | }, 1045 | "width" : 0 1046 | }, 1047 | "entityMap" : { 1048 | 1049 | } 1050 | }, 1051 | "targetName" : null, 1052 | "top" : null, 1053 | "visible" : true, 1054 | "width" : 30, 1055 | "widthFactor" : null 1056 | } 1057 | ], 1058 | "clip" : true, 1059 | "constraintsLocked" : false, 1060 | "contrast" : 100, 1061 | "contrastEnabled" : 0, 1062 | "deviceType" : "apple-iphone-x-space-gray", 1063 | "exportIncludesBackground" : true, 1064 | "exportOptions" : [ 1065 | 1066 | ], 1067 | "fillColor" : "hsl(0, 0%, 100%)", 1068 | "fillEnabled" : true, 1069 | "fillGradient" : { 1070 | "__class" : "LinearGradient", 1071 | "alpha" : 1, 1072 | "angle" : 0, 1073 | "end" : "rgba(0,0,0,0)", 1074 | "start" : "black" 1075 | }, 1076 | "fillImage" : null, 1077 | "fillImagePixelHeight" : null, 1078 | "fillImagePixelWidth" : null, 1079 | "fillImageResize" : "fill", 1080 | "fillType" : "color", 1081 | "grayscale" : 0, 1082 | "grayScaleEnabled" : 0, 1083 | "height" : 812, 1084 | "heightFactor" : null, 1085 | "hueRotate" : 0, 1086 | "hueRotateEnabled" : 0, 1087 | "id" : "IKj3JB40o", 1088 | "intrinsicHeight" : null, 1089 | "intrinsicWidth" : null, 1090 | "invert" : 0, 1091 | "invertEnabled" : 0, 1092 | "left" : 0, 1093 | "locked" : false, 1094 | "name" : "loading", 1095 | "opacity" : 1, 1096 | "parentid" : "okas88Arz", 1097 | "radius" : 0, 1098 | "radiusBottomLeft" : 0, 1099 | "radiusBottomRight" : 0, 1100 | "radiusIsRelative" : false, 1101 | "radiusPerCorner" : false, 1102 | "radiusTopLeft" : 0, 1103 | "radiusTopRight" : 0, 1104 | "right" : null, 1105 | "rotation" : 0, 1106 | "saturate" : 100, 1107 | "saturateEnabled" : 0, 1108 | "sepia" : 0, 1109 | "sepiaEnabled" : 0, 1110 | "targetName" : "loading", 1111 | "top" : 0, 1112 | "visible" : true, 1113 | "width" : 375, 1114 | "widthFactor" : null 1115 | } 1116 | ], 1117 | "id" : "okas88Arz", 1118 | "parentid" : null 1119 | }, 1120 | "version" : 21 1121 | } -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/framer.generated.js: -------------------------------------------------------------------------------- 1 | // This is autogenerated by Framer 2 | 3 | 4 | if (!window.Framer && window._bridge) {window._bridge('runtime.error', {message:'[framer.js] Framer library missing or corrupt. Select File → Update Framer Library.'})} 5 | if (DeviceComponent) {DeviceComponent.Devices["iphone-6-silver"].deviceImageJP2 = false}; 6 | if (window.Framer) {window.Framer.Defaults.DeviceView = {"deviceScale":"fit","selectedHand":"","deviceType":"apple-iphone-x-silver","contentScale":1,"hideBezel":false,"orientation":0}; 7 | } 8 | if (window.Framer) {window.Framer.Defaults.DeviceComponent = {"deviceScale":"fit","selectedHand":"","deviceType":"apple-iphone-x-silver","contentScale":1,"hideBezel":false,"orientation":0}; 9 | } 10 | window.FramerStudioInfo = {"deviceImagesUrl":"\/_server\/resources\/DeviceImages","documentTitle":"framerContentFromFigma.framer"}; 11 | 12 | Framer.Device = new Framer.DeviceView(); 13 | Framer.Device.setupContext(); -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/framer.init.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function isFileLoadingAllowed() { 4 | return (window.location.protocol.indexOf("file") == -1) 5 | } 6 | 7 | function isHomeScreened() { 8 | return ("standalone" in window.navigator) && window.navigator.standalone == true 9 | } 10 | 11 | function isCompatibleBrowser() { 12 | return Utils.isWebKit() 13 | } 14 | 15 | var alertNode; 16 | 17 | function dismissAlert() { 18 | alertNode.parentElement.removeChild(alertNode) 19 | loadProject() 20 | } 21 | 22 | function showAlert(html) { 23 | 24 | alertNode = document.createElement("div") 25 | 26 | alertNode.classList.add("framerAlertBackground") 27 | alertNode.innerHTML = html 28 | 29 | document.addEventListener("DOMContentLoaded", function(event) { 30 | document.body.appendChild(alertNode) 31 | }) 32 | 33 | window.dismissAlert = dismissAlert; 34 | } 35 | 36 | function showBrowserAlert() { 37 | var html = "" 38 | html += "
" 39 | html += "Error: Not A WebKit Browser" 40 | html += "Your browser is not supported.
Please use Safari or Chrome.
" 41 | html += "Try anyway" 42 | html += "
" 43 | 44 | showAlert(html) 45 | } 46 | 47 | function showFileLoadingAlert() { 48 | var html = "" 49 | html += "
" 50 | html += "Error: Local File Restrictions" 51 | html += "Preview this prototype with Framer Mirror or learn more about " 52 | html += "file restrictions.
" 53 | html += "Try anyway" 54 | html += "
" 55 | 56 | showAlert(html) 57 | } 58 | 59 | function loadProject(callback) { 60 | CoffeeScript.load("app.coffee", callback) 61 | } 62 | 63 | function setDefaultPageTitle() { 64 | // If no title was set we set it to the project folder name so 65 | // you get a nice name on iOS if you bookmark to desktop. 66 | document.addEventListener("DOMContentLoaded", function() { 67 | if (document.title == "") { 68 | if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) { 69 | document.title = window.FramerStudioInfo.documentTitle 70 | } else { 71 | document.title = window.location.pathname.replace(/\//g, "") 72 | } 73 | } 74 | }) 75 | } 76 | 77 | function init() { 78 | 79 | if (Utils.isFramerStudio()) { 80 | return 81 | } 82 | 83 | setDefaultPageTitle() 84 | 85 | if (!isCompatibleBrowser()) { 86 | return showBrowserAlert() 87 | } 88 | 89 | if (!isFileLoadingAllowed()) { 90 | return showFileLoadingAlert() 91 | } 92 | 93 | loadProject(function(){ 94 | // CoffeeScript: Framer?.CurrentContext?.emit?("loaded:project") 95 | var context; 96 | if (typeof Framer !== "undefined" && Framer !== null) { 97 | if ((context = Framer.CurrentContext) != null) { 98 | if (typeof context.emit === "function") { 99 | context.emit("loaded:project"); 100 | } 101 | } 102 | } 103 | }) 104 | } 105 | 106 | init() 107 | 108 | })() 109 | -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/framer.modules.js: -------------------------------------------------------------------------------- 1 | require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<\/path><\/svg>"});var __layer_1__ = new SVGLayer({"parent":framer,"name":".SVGLayer","backgroundColor":"rgba(162, 81, 255, 1.00)","width":45,"strokeWidth":1,"htmlIntrinsicSize":{"height":45,"width":45},"rotation":null,"height":45,"fill":"rgba(162, 81, 255, 1.00)","opacity":null,"y":45,"svg":"<\/path><\/svg>"});var __layer_2__ = new SVGLayer({"parent":framer,"name":".SVGLayer","backgroundColor":"rgba(3, 187, 255, 1.00)","width":45,"strokeWidth":1,"x":45,"htmlIntrinsicSize":{"height":45,"width":45},"rotation":null,"height":45,"fill":"rgba(3, 187, 255, 1.00)","opacity":null,"y":45,"svg":"<\/path><\/svg>"});var __layer_3__ = new SVGLayer({"parent":framer,"name":".SVGLayer","backgroundColor":"rgba(244, 77, 2, 1.00)","width":45,"strokeWidth":1,"htmlIntrinsicSize":{"height":45,"width":45},"rotation":null,"height":45,"fill":"rgba(244, 77, 2, 1.00)","opacity":null,"svg":"<\/path><\/svg>"});var __layer_4__ = new SVGLayer({"parent":framer,"name":".SVGLayer","backgroundColor":"rgba(255, 114, 93, 1.00)","width":45,"strokeWidth":1,"x":45,"htmlIntrinsicSize":{"height":45,"width":45},"rotation":null,"height":45,"fill":"rgba(255, 114, 93, 1.00)","opacity":null,"svg":"<\/path><\/svg>"});var figma = new Layer({"parent":loading,"name":"figma","backgroundColor":null,"width":90,"x":142,"height":135,"constraintValues":{"left":null,"aspectRatioLocked":true,"height":135,"centerAnchorX":0.49866666666666665,"width":90,"top":152,"centerAnchorY":0.27032019704433496},"blending":"normal","clip":false,"borderStyle":"solid","y":152});var __layer_5__ = new SVGLayer({"parent":figma,"name":".SVGLayer","backgroundColor":"rgba(5, 77, 255, 1.00)","width":45,"strokeWidth":1,"htmlIntrinsicSize":{"height":45,"width":45},"rotation":null,"height":45,"fill":"rgba(5, 77, 255, 1.00)","opacity":null,"y":90,"svg":"<\/path><\/svg>"});var __layer_6__ = new SVGLayer({"parent":figma,"name":".SVGLayer","backgroundColor":"rgba(4, 169, 255, 1.00)","width":45,"strokeWidth":1,"x":45,"htmlIntrinsicSize":{"height":45,"width":45},"rotation":null,"height":45,"fill":"rgba(4, 169, 255, 1.00)","opacity":null,"y":45,"svg":"<\/path><\/svg>"});var __layer_7__ = new SVGLayer({"parent":figma,"name":".SVGLayer","backgroundColor":"rgba(4, 169, 255, 1.00)","width":45,"strokeWidth":1,"htmlIntrinsicSize":{"height":45,"width":45},"rotation":null,"height":45,"fill":"rgba(4, 169, 255, 1.00)","borderRadius":{"bottomLeft":90,"topLeft":90,"bottomRight":0,"topRight":0},"opacity":null,"y":45,"svg":"<\/path><\/svg>"});var __layer_8__ = new SVGLayer({"parent":figma,"name":".SVGLayer","backgroundColor":"rgba(132, 220, 255, 1.00)","width":45,"strokeWidth":1,"htmlIntrinsicSize":{"height":45,"width":45},"rotation":null,"height":45,"fill":"rgba(132, 220, 255, 1.00)","borderRadius":{"bottomLeft":90,"topLeft":90,"bottomRight":0,"topRight":0},"opacity":null,"svg":"<\/path><\/svg>"});var __layer_9__ = new SVGLayer({"parent":figma,"name":".SVGLayer","backgroundColor":"rgba(132, 220, 255, 1.00)","width":45,"strokeWidth":1,"x":45,"htmlIntrinsicSize":{"height":45,"width":45},"rotation":null,"height":45,"fill":"rgba(132, 220, 255, 1.00)","borderRadius":{"bottomLeft":0,"topLeft":0,"bottomRight":90,"topRight":90},"opacity":null,"svg":"<\/path><\/svg>"});var __layer_10__ = new TextLayer({"parent":loading,"name":"status","backgroundColor":null,"width":30,"x":172,"styledText":{"blocks":[{"inlineStyles":[{"css":{"fontSize":"9px","WebkitTextFillColor":"rgba(0, 0, 0, 1.00)","whiteSpace":"pre","letterSpacing":"0px","lineHeight":"1.2","tabSize":4,"fontFamily":"\".SFNSDisplay\", \"SFProDisplay-Regular\", \"SFUIDisplay-Regular\", \".SFUIDisplay\", sans-serif"},"startIndex":0,"endIndex":8}],"text":"{status}"}],"alignment":"center"},"height":10,"constraintValues":{"left":null,"height":10,"centerAnchorX":0.49866666666666665,"width":30,"bottom":144,"top":null,"centerAnchorY":0.81650246305418717},"blending":"normal","autoSize":true,"y":658});if(figma !== undefined){figma.__framerInstanceInfo = {"framerClass":"Layer","hash":"#vekter|figma","targetName":"figma","vekterClass":"FrameNode"}};if(__layer_9__ !== undefined){__layer_9__.__framerInstanceInfo = {"hash":"#vekter|__layer_9__","vekterClass":"RectangleShapeNode","framerClass":"SVGLayer"}};if(__layer_7__ !== undefined){__layer_7__.__framerInstanceInfo = {"hash":"#vekter|__layer_7__","vekterClass":"RectangleShapeNode","framerClass":"SVGLayer"}};if(__layer_8__ !== undefined){__layer_8__.__framerInstanceInfo = {"hash":"#vekter|__layer_8__","vekterClass":"RectangleShapeNode","framerClass":"SVGLayer"}};if(__layer_2__ !== undefined){__layer_2__.__framerInstanceInfo = {"hash":"#vekter|__layer_2__","vekterClass":"PathNode","framerClass":"SVGLayer"}};if(__layer_10__ !== undefined){__layer_10__.__framerInstanceInfo = {"framerClass":"TextLayer","hash":"#vekter|__layer_10__","vekterClass":"TextNode","text":"{status}"}};if(__layer_0__ !== undefined){__layer_0__.__framerInstanceInfo = {"hash":"#vekter|__layer_0__","vekterClass":"PathNode","framerClass":"SVGLayer"}};if(__layer_4__ !== undefined){__layer_4__.__framerInstanceInfo = {"hash":"#vekter|__layer_4__","vekterClass":"PathNode","framerClass":"SVGLayer"}};if(__layer_1__ !== undefined){__layer_1__.__framerInstanceInfo = {"hash":"#vekter|__layer_1__","vekterClass":"PathNode","framerClass":"SVGLayer"}};if(__layer_6__ !== undefined){__layer_6__.__framerInstanceInfo = {"hash":"#vekter|__layer_6__","vekterClass":"OvalShapeNode","framerClass":"SVGLayer"}};if(loading !== undefined){loading.__framerInstanceInfo = {"deviceName":"Apple iPhone X","framerClass":"Layer","hash":"#vekter|loading","targetName":"loading","vekterClass":"FrameNode","deviceType":"apple-iphone-x-space-gray"}};if(__layer_3__ !== undefined){__layer_3__.__framerInstanceInfo = {"hash":"#vekter|__layer_3__","vekterClass":"PathNode","framerClass":"SVGLayer"}};if(framer !== undefined){framer.__framerInstanceInfo = {"framerClass":"Layer","hash":"#vekter|framer","targetName":"framer","vekterClass":"FrameNode"}};if(__layer_5__ !== undefined){__layer_5__.__framerInstanceInfo = {"hash":"#vekter|__layer_5__","vekterClass":"PathNode","framerClass":"SVGLayer"}};if (scope["__vekterVariables"]) { scope["__vekterVariables"].map(function(variable) { delete scope[variable] } ) };Object.assign(scope, {loading, framer, figma});scope["__vekterVariables"] = ["loading", "framer", "figma"];if (typeof Framer.CurrentContext.layout === 'function') {Framer.CurrentContext.layout()};})(window); -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/images/cursor-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davo/FigmaAPI-Framer/1eb552b2a094ced47c050d442cf109c6e0ddf743/framerContentFromFigma.framer/framer/images/cursor-active.png -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/images/cursor-active@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davo/FigmaAPI-Framer/1eb552b2a094ced47c050d442cf109c6e0ddf743/framerContentFromFigma.framer/framer/images/cursor-active@2x.png -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/images/cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davo/FigmaAPI-Framer/1eb552b2a094ced47c050d442cf109c6e0ddf743/framerContentFromFigma.framer/framer/images/cursor.png -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/images/cursor@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davo/FigmaAPI-Framer/1eb552b2a094ced47c050d442cf109c6e0ddf743/framerContentFromFigma.framer/framer/images/cursor@2x.png -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/images/icon-120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davo/FigmaAPI-Framer/1eb552b2a094ced47c050d442cf109c6e0ddf743/framerContentFromFigma.framer/framer/images/icon-120.png -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/images/icon-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davo/FigmaAPI-Framer/1eb552b2a094ced47c050d442cf109c6e0ddf743/framerContentFromFigma.framer/framer/images/icon-152.png -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/images/icon-180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davo/FigmaAPI-Framer/1eb552b2a094ced47c050d442cf109c6e0ddf743/framerContentFromFigma.framer/framer/images/icon-180.png -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/images/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davo/FigmaAPI-Framer/1eb552b2a094ced47c050d442cf109c6e0ddf743/framerContentFromFigma.framer/framer/images/icon-192.png -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/images/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davo/FigmaAPI-Framer/1eb552b2a094ced47c050d442cf109c6e0ddf743/framerContentFromFigma.framer/framer/images/icon-76.png -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | border: none; 5 | -webkit-user-select: none; 6 | -webkit-tap-highlight-color: rgba(0,0,0,0); 7 | } 8 | 9 | body { 10 | background-color: #fff; 11 | font: 28px/1em "Helvetica"; 12 | color: gray; 13 | overflow: hidden; 14 | } 15 | 16 | a { 17 | color: gray; 18 | } 19 | 20 | body { 21 | cursor: url('images/cursor.png') 32 32, auto; 22 | cursor: -webkit-image-set( 23 | url('images/cursor.png') 1x, 24 | url('images/cursor@2x.png') 2x 25 | ) 32 32, auto; 26 | } 27 | 28 | body:active { 29 | cursor: url('images/cursor-active.png') 32 32, auto; 30 | cursor: -webkit-image-set( 31 | url('images/cursor-active.png') 1x, 32 | url('images/cursor-active@2x.png') 2x 33 | ) 32 32, auto; 34 | } 35 | 36 | .framerAlertBackground { 37 | position: absolute; top:0px; left:0px; right:0px; bottom:0px; 38 | z-index: 1000; 39 | background-color: #fff; 40 | } 41 | 42 | .framerAlert { 43 | font:400 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; 44 | -webkit-font-smoothing:antialiased; 45 | color:#616367; text-align:center; 46 | position: absolute; top:40%; left:50%; width:260px; margin-left:-130px; 47 | } 48 | .framerAlert strong { font-weight:500; color:#000; margin-bottom:8px; display:block; } 49 | .framerAlert a { color:#28AFFA; } 50 | .framerAlert .btn { 51 | font-weight:500; text-decoration:none; line-height:1; 52 | display:inline-block; padding:6px 12px 7px 12px; 53 | border-radius:3px; margin-top:12px; 54 | background:#28AFFA; color:#fff; 55 | } 56 | 57 | ::-webkit-scrollbar { 58 | display: none; 59 | } -------------------------------------------------------------------------------- /framerContentFromFigma.framer/framer/version: -------------------------------------------------------------------------------- 1 | 13 -------------------------------------------------------------------------------- /framerContentFromFigma.framer/images/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davo/FigmaAPI-Framer/1eb552b2a094ced47c050d442cf109c6e0ddf743/framerContentFromFigma.framer/images/.gitkeep -------------------------------------------------------------------------------- /framerContentFromFigma.framer/images/ff.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /framerContentFromFigma.framer/images/figma.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /framerContentFromFigma.framer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /framerContentFromFigma.framer/modules/secret.coffee: -------------------------------------------------------------------------------- 1 | exports.token = '' 2 | 3 | exports.fileurl = 'https://www.figma.com/file/NlSvIpXvpmE0mtmBUMMTENKr/FramerFigma' --------------------------------------------------------------------------------