How to use Figma styles in Tabris.js
Here at EclipseSource we love Figma. It is a great tool for UI design and prototyping. With its powerful layouting, prototyping and collaboration features, iterating on a design is a pleasure. In the end, however, you want to put your design into practice. Luckily, with Tabris.js it is simple to take what you have created in Figma and move its styles into a Tabris.js app.
Figma lets you create styles for various resources like fonts and colors. They can be easily mapped to the Tabris.js resource system. The following screenshot shows an example of styles in Figma.
To map these resources to a Tabris.js app you create corresponding font.json file:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "$schema": "node_modules/tabris/schema/fonts.json", "hOne": { "size": 96, "family": ["dax-condensed-regular"] }, "hTwo": { "size": 60, "family": ["dax-condensed-regular"] }, ... } |
And a colors.json file:
|
1 2 3 4 5 6 7 8 9 |
{ "$schema": "node_modules/tabris/schema/colors.json", "primary": "#D49C60", "secondary": "#4ABD8D", "onBgHighEm": "rgba(0, 0, 0, 0.87)", "onBgMediumEm": "rgba(0, 0, 0, 0.6)", "onBgLowEm": "rgba(0, 0, 0, 0.38)", ... } |
And a later one in your app, you consume the Tabris.js resource as usual:
|
1 2 3 4 5 |
import * as colorData from './colors.json'; export const colors = ColorResources.from(colorData); composite.background = colors.primary; |
This wraps up this little tip on how to bring your Figma styles to Tabris.js.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
Leave a Reply
Want to join the discussion?Feel free to contribute!