jacopocolo

// let's get a hold on the Sketch API
const sketch = require('sketch');
//let's expose these globally
var document = sketch.fromNative(context.document);
var page = document.selectedPage;
var Rectangle = require('sketch/dom').Rectangle;
var Shape = require('sketch/dom').Shape;
var Style = require('sketch/dom').Style;
var Group = require('sketch/dom').Group;

jacopocolo

Earth from space
https://www.youtube.com/embed/Xjs6fnpPWy4?&autoplay=1&controls=0&iv_load_policy=3&t=1m&mute=1

Sea
https://www.youtube.com/embed/SxWKffqBjMM?&autoplay=1&controls=0&iv_load_policy=3

jacopocolo

import * as React from "react";
import Avatar from "@collab-ui/react/lib/Avatar";
import "@collab-ui/core/css/collab-ui.min.css";
import "@collab-ui/icons/css/collab-ui-icons.css";
import { PropertyControls, ControlType, Data } from "framer";

const style: React.CSSProperties = {
    margin: "0 0 20px 20px",
    objectFit: "cover"
};

jacopocolo

Quick guide on how to get started with Framer X and the collab-ui components

This guide assumes that you have yarn and a code editor installed on your computer (Visual Studio Code is the recommended one for Framer X, use that). If you don't, get installing:

• Yarn: https://yarnpkg.com/en/
• Visual Studio Code: https://code.visualstudio.com/

One you are done:

1. Create a new project in Framer X

2. Save it

jacopocolo

{
	"main": "build/index.js",
	"license": "MIT",
	"devDependencies": {
		"@types/react": "^16.0.31",
		"framer": "^0.8.0"
	},
	"peerDependencies": {
		"framer": "^0.8.0",
		"react": "^16.3.0",

jacopocolo

Deep Sleep state
  detect proximity -> Half wake with name
  detect presence -> Half wake without names
  
Half wake state
  
  Half wake without names 
    tap -> Awake
    detect proximity -> Awake with names
    

jacopocolo

.SearchNavigation-canopy,.u-bgUserColor {
    display: none;
}

.AdaptiveFiltersBar {
    display: none;
}

.SidebarFilterModule {
    display: none;

jacopocolo

.bsa-native-ad {
    background-color: #efefef;
}

jacopocolo

.split-wrapper:first-of-type {
    display: none;
}

.split-wrapper:nth-of-type(5) {
    width: 75% !important;
}

.split-wrapper:nth-of-type(3) {
    width: 25% !important;

jacopocolo

function setup() {
  createCanvas(200,200);
  background(0);
}

function draw() {
  ellipse(0,0,100,100);
}