davo

{
	"workbench.colorCustomizations": {
		"titleBar.activeBackground": "#05f",
		"titleBar.inactiveBackground": "#09f",
		"titleBar.inactiveForeground": "#262626",
		"titleBar.activeForeground": "#ffffff"
	}
}

davo

import * as React from 'react'
import { fonts } from './fonts'

const fontNames = fontArray => {
	let fontList = []
	fontArray.forEach((elem, index) => fontList.push(elem.family))
	return fontList
}

const filterFontsByCategory = (category: string) => {

davo

Framer X

Designer/Developer Experience Pain Points

Code Components

• Classes as the only way to create Code Components to Framer X.

  • ES6 Classes are awesome but hardly the only way to code reusable components in React. If I wanted to create a stateless functional component there is no way for Framer X to view or create an instance of such component inside the Components panel.

• Examples on how to Extend a Framer X Class component (ie: PageComponent)

  • This might be solved with a little documentation effort. I’m doing that to understand the relationship between the core components of Framer X and external community driven components (FX/React/JS).

davo

{
	"compatibleVersion": 3,
	"bundleVersion": 1,
	"commands": [
		{
			"name": "SVG",
			"identifier": "main",
			"script": "./svg.js"
		}
	],

davo

https://www.nngroup.com/articles/ten-usability-heuristics/

• Visibility of system status
• Match between system & the real world
• User control & freedom
• Consistency & standards
• Error prevention
• Recognition rather than recall
• Flexibility & efficiency of use
• Aesthetic & minimalist design

davo

license: mit

davo

import * as React from 'react'

const container: React.CSSProperties = {
	width: '100%',
	height: '100%',
	display: 'grid',
	gridTemplateColumns: '10rem 10rem 10rem 10rem'
}

const item: React.CSSProperties = {

davo

import * as React from 'react'
import { ControlType } from 'framer'
import styled, { injectGlobal } from 'styled-components'

injectGlobal`
  @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
`

interface iconProps {
	stretch: boolean

davo

import * as React from 'react'
import { Frame, PropertyControls, ControlType } from 'framer'

interface Props {
	color: string
}

export class componentName extends React.Component<Props> {
	static defaultProps = {
		width: 1600,

davo

tell application "Safari"
	
	set tab_list to every tab in the front window
	
	repeat with the_tab in tab_list
		set the_url to the URL of the_tab
		tell application "Google Chrome" to open location the_url
	end repeat
	
end tell