Skip to content

Latest commit

 

History

History
48 lines (40 loc) · 1.34 KB

Readme.md

File metadata and controls

48 lines (40 loc) · 1.34 KB

=== Work In Progress ===

Figma interface language: Grammar

Overview

A simple DSL for describing interfaces that can be compiled to build a Figma mockup using both existing and new components.

file extension: .fil

Example (Tweet)
define ButtonColor = "#000000"

declare Component as "Header" {
  group(direction: "column", alignment: "center") {
    Logo
    Title(title)
    Subtitle(subtitle)
  } 
}

describe Interface as "Sign up" for OnboardingFlow {
  Header(
    title="Welcome to Acme"
    subtitle="Create an account to get started"
  )
  Form {
    Row {
      Input["First name"]
      Input["Last name"]
    }
    Input["Email address"]
    Input["Create password"]
    Input["Confirm password"]
    Spacer[tokens("space8")]
    Button["Create account"].apply(buttonColor, background);
  }
}

Keyword Description
define Keyword for defining and referencing color and type styles
declare Keyword for declaring a reusable component
describe Keyword for describing an interface. This is for when you want to build out an entire "screen" (i.e. adding multiple components) as part of a flow.
group Native element for declaring an auto-layout frame. Exposes the entire auto-layout API to the user.