https://github.com/smartface/smartface-zeplin-extension

Generates Smartface themes from colors and text styles. 📱
https://github.com/smartface/smartface-zeplin-extension

smartface zeplin zeplin-extension

Last synced: about 2 months ago
JSON representation

Generates Smartface themes from colors and text styles. 📱

• Host: GitHub
• URL: https://github.com/smartface/smartface-zeplin-extension
• Owner: smartface
• Created: 2020-02-27T13:51:30.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T02:48:30.000Z (almost 2 years ago)
• Last Synced: 2024-04-15T01:06:45.553Z (5 months ago)
• Topics: smartface, zeplin, zeplin-extension
• Language: JavaScript
• Homepage:
• Size: 1.53 MB
• Stars: 4
• Watchers: 5
• Forks: 0
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  



# Smartface Zeplin Extension

Generating Smartface themes from Zeplin projects has never been easier!

- Install Smartface extension from Zeplin [extension center](https://extensions.zeplin.io/)

- Go to styleguide of your Zeplin project

- Select **Color Palette**

- See **Smartface** tab on the right



- If you click **Export** button on the right, [variables.json](https://developer.smartface.io/docs/using-themes-in-apps#section-inheritance-with-variables) will be created automatically which is ready to use in your Smartface app themes

- Same also applies for text styles as well



Sample variables output:

```js

{

  "black": "rgba(0,0,0,1)",

  "black60": "rgba(0,0,0,0.6)",

  "white": "rgba(255,255,255,1)",

  "gray": "rgba(220,220,220,1)",

  "slategray": "rgb(112,128,144,1)"

}

```

Sample text style output:

```js

{

  ".headline": {

    "font": {

      "family": "SFProText",

      "style": "bold",

      "size": 20

    },

    "textColor": "${gray}"

  },

  ".genericTitle": {

    "font": {

      "family": "SFProText",

      "style": "semibold",

      "size": 17

    },

    "textColor": "${black}"

  }

}

```

## Development

Smartface extension is developed using [zem](https://github.com/zeplin/zem), Zeplin Extension Manager. zem is a command line tool that lets you quickly create and test extensions.

To learn more about zem, [see documentation](https://github.com/zeplin/zem).