Bento

Leo Lin

Bento

Introduction

Bento is a mini design system built with a single design token file (based on theme-ui’s spec). It comes with a speicial component called “Themer”, which can be used to tweak and export your own theme in .json format.

Customization

  • Design as usual
  • Drag one Themer components to the canvas (only one is supportted if you choose online source)
  • Link a frame to preview in Themer.
  • Choose “Online” in the source, and go to the URL.
  • Log in and obtain your UID, paste it back into the UID field.
  • Change some properties, and you’ll see the json file are changed on the fly.
  • When done, copy your json from the website and save it as .json file.
  • If you want to design with your own tweaked theme, choose “Source -> Local” and use your own json file.

The problem here is, if you want to design with your own theme, you’ll have to wrap every screen in a Themer component. Currently I can’t find a way around this.

Another way to do it is to use my source .framerx file and replace the default theme with yours.

Known Issues

Fonts seemed off / different on Framer Web.

I don’t know why. It was okay before the new Framer release.

SF Symbols not working on Framer Web even if fonts are correctly installed.

SF Symbol won’t display in Safari for some reason. Switch to Edge or Chrome.

Theme Settings seemed override each other.

Only one instance of online Themer is supported.

Updates

  • 6/18: Fixed Text components lineHeight issues.
  • 6/16: Add card text padding, added overlay blur for cards
  • 6/15: Fixes Label text clipping in small sizes, improved tooltip spacing
  • 6/9: Tweak Eva icon size to 1.1x
  • 6/6: Added new Tooltip component
  • 6/5: Text block overflow hidden.
  • 6/4: Colors updated; fixed font size scale; fixed button lineHeight
  • 6/2: All svg icons are now components
  • 5/15: Supports local json theme
  • 5/15: Added seperate theme control for each components