https://github.com/parkerhendo/figma-interface-language

A simple DSL for describing interfaces that can be compiled to build a Figma mockup using both existing and new components.
https://github.com/parkerhendo/figma-interface-language

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/parkerhendo/figma-interface-language
• Owner: parkerhendo
• Created: 2021-10-25T19:29:37.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-01-05T23:46:59.000Z (about 3 years ago)
• Last Synced: 2024-08-01T21:50:59.463Z (7 months ago)
• Language: HTML
• Size: 670 KB
• Stars: 16
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

• awesome-github-repos - parkerhendo/figma-interface-language - A simple DSL for describing interfaces that can be compiled to build a Figma mockup using both existing and new components. (HTML)

README

        
# === 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](https://twitter.com/parkerhendo/status/1452407181106614280?s=20))

```javascript

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. |