Skip to content

Instantly share code, notes, and snippets.

Avatar

Cristiano Rastelli didoo

View GitHub Profile
@alexjlockwood
alexjlockwood / print-unlinked-colors.ts
Created Feb 3, 2020
Prints nodes that have fill/stroke colors that aren't linked to a style.
View print-unlinked-colors.ts
figma.root.children
.flatMap(pageNode => pageNode.findAll(n => true))
.forEach(node => {
if ('fills' in node && 'fillStyleId' in node) {
if (node.fills !== figma.mixed && node.fills.length > 0 && node.fillStyleId !== '') {
print(`${node.name}'s fill color is not linked to a style`);
}
}
if ('strokes' in node && 'strokeStyleId' in node) {
if (node.strokes.length > 0 && node.strokeStyleId !== '') {
View ds-controls.js
static propertyControls: PropertyControls = {
text: { type: ControlType.String, title: 'Text' },
fontSize: {
type: ControlType.FusedNumber,
toggleKey: 'fontPerBP',
toggleTitles: ['Font', 'Font per BP'],
valueKeys: ['font1', 'font2', 'font3', 'font4'],
valueLabels: theme.breakpoints.map(s => s.replace('px', '')),
min: 0,
title: 'Font Size',
@aalokt89
aalokt89 / LayerComponent.tsx
Created Aug 26, 2018
Framer X Data and props Animation
View LayerComponent.tsx
import * as React from "react";
import {
Frame,
Data,
Animatable,
animate,
PropertyControls,
ControlType
} from "framer";
@romannurik
romannurik / tab-widget.tsx
Created Aug 23, 2018
A proof-of-concept Tab widget for Framer X
View tab-widget.tsx
import { ControlType, PropertyControls } from "framer";
import * as React from "react";
interface TabWidgetProps {
selectedTab: number;
accentColor: string;
}
@aalokt89
aalokt89 / ImagePost.tsx
Last active Jun 16, 2019
Framer X Stack with design and code components
View ImagePost.tsx
import * as React from "react";
import { Frame, Stack, PropertyControls, ControlType } from "framer";
import { Avatar, PostHeader, PostImage, PostButtonGroup } from "./canvas";
// Define type of property
interface Props {
username: string;
timeStamp: string;
postText: string;
width: number;
@davo
davo / Grid.tsx
Last active Sep 15, 2018
CSS Grid for Framer X
View Grid.tsx
import * as React from 'react'
const container: React.CSSProperties = {
width: '100%',
height: '100%',
display: 'grid',
gridTemplateColumns: '10rem 10rem 10rem 10rem'
}
const item: React.CSSProperties = {
@oliverturner
oliverturner / extensions.txt
Created Jun 9, 2018
VSCode extensions for general web dev
View extensions.txt
Orta.vscode-jest
Shan.code-settings-sync
christian-kohler.npm-intellisense
christian-kohler.path-intellisense
codezombiech.gitignore
dbaeumer.vscode-eslint
esbenp.prettier-vscode
jasonlhy.vscode-browser-sync
jpoissonnier.vscode-styled-components
kumar-harsh.graphql-for-vscode
@stevenkaspar
stevenkaspar / CustomIframe.jsx
Created Oct 27, 2017
React Iframe for Writing to contentDocument
View CustomIframe.jsx
/**
* This has a specific use case for writing to the contentDocument allowing for a separated scope
*
* There are probably other ways to do this with ShadowDom but this works well for my purposes
*
* USAGE:
*
* <CustomIframe html={<head><title>Doc Title</title></head><body>Hello React User</body>} />
*
*/
@busypeoples
busypeoples / FlowReactTutorial.js
Last active Mar 5, 2020
Flow Fundamentals For ReactJS Developers
View FlowReactTutorial.js
//
// MIT License
//
// Copyright (c) 2018 Ali Sharif
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
@piotrf
piotrf / lines.js
Created Sep 18, 2017
Fluid-type typography and spacing (border, margin, padding) for `styled-components`.
View lines.js
export const lines = {
h: '1.8em',
l: '1.6em',
m: '1.4em',
s: '1.2em',
x: '1',
n: '0',
}
export const _line = lines;