Wolfr

// sass-lint:disable force-element-nesting placeholder-in-extend
.vl-typography ul,
.ul {
  list-style-type: disc;
}
.vl-typography ol,
.ol {
  list-style-type: decimal;
}
.vl-typography ol,

Wolfr

{
  "records": [
    {
      "id": "recqk05WCliPoNTw5",
      "fields": {
        "optimizedImage": [
          {
            "id": "attFyUkYRxrRX0lAc",
            "url": "https://dl.airtable.com/seMnqW5nQa2Z5k2Jywto_blade-runner-2049.jpg",
            "filename": "blade-runner-2049.jpg",

Wolfr

export default {
 title: "Film",
 name: "film",
 type: "document",
 fields: [
   {
     title: "Name",
     name: "name",
     type: "string",
   },

Wolfr

// Change this to your AI files folder (Be sure to end with a /)
var location = "/Users/Downloads/my-file/";

function getFiles() {
  var folder = new Folder(location);
  if (folder.exists) {
    return folder.getFiles("*.svg");
  } else {
    alert("Unable to find SVG Files Folder");
  }

Wolfr

// About the shortest code I could write to render an image out from the Figma API and make it clear whether it is loading/has loaded.
// https://github.com/wolfr

// If you use this code please change to your own access token
const PERSONAL_ACCESS_TOKEN = ''; // Your personal access token here

function apiRequest(endpoint) {
    return fetch('https://api.figma.com/v1' + endpoint, {
        method: 'GET',
        headers: { "x-figma-token": PERSONAL_ACCESS_TOKEN }

Wolfr

each category, id in icons.svg
    if id
        h3 #{id}
    each icon in category
        .svg-icon
            +icon(icon.category+'/'+icon.name)
            p #{icon.name}

Wolfr

// Here is the simplest component I could write

import * as React from "react";
import { PropertyControls, ControlType } from "framer";

export class test extends React.Component<Props> {

    render() {
        return (
            <div>Hey</div>

Wolfr

// Here is a basic Framer X component where we use CSS directly

import * as React from "react";
import { PropertyControls, ControlType } from "framer";

// Define type of property
interface Props {
    width: number
    height: number
}

Wolfr

/* ==========================================================================
  Colors
  Only define colors here. Don't use sass color functions, stick to hex values,
  or the color component in styleguide won't regenerate automatically anymore.
 ========================================================================== */

/* Red
 ========================================================================== */

$material-color-red-50: #ffebee;

Wolfr

each category in colorCategories
    h4= category.name
    ul.br-color-swatch-list
        each color in category.colors
            li.br-color-swatch-item
                .br-color-swatch-preview(style=`background-color: ${color.value}`)
                .br-color-swatch-data
                    .swatch-name= color.name
                    .swatch-value= color.value