Skip to content

Zeplin pop out feature on Windows, MacOS, and Linux, currently support design wireframe from Zeplin and Figma

License

Notifications You must be signed in to change notification settings

lichin-lin/fitty

Repository files navigation


Fitty is a helper for you to use Zeplin pop out feature on Windows, MacOS, and Linux, currently support design wireframe from Zeplin and Figma




Fitty Demo

How to start fitty for zeplin wireframe

  1. Login to your zeplin account on Zeplin.

  2. Go to Developer section for your profile.

  3. Create your Personal access tokens.

  4. Paste it into Fitty > ControlPanel > Figma Section > Token Field

How to start fitty for figma wireframe

  1. Login to your Figma account on Figma.

  2. Head to the Account Settings from the top-left menu inside Figma.

  3. Find the Personal Access Tokens section, click Create new token.

  4. A token will be generated. This will be your only chance to copy the token, so make sure you keep a copy of this in a secure place.

  5. Paste it into Fitty > ControlPanel > Figma Section > Token Field

Variables

General

key type Description
Opacity Number value from 0 ~ 1 for frame's opacity
Scale Number value is the percantage for the frame's scaling

Zeplin

open the target page on web, you can get the variables from the URL (for example: https://app.zeplin.io/project/5d3961af5fd2632e5d62fc/screen/5e995dc1de21117e66ea7b/)

key type Description
Project ID String for the URL above, project ID is 5d3961af5fd2632e5d62fc
Section ID String for the URL above, screen ID is 5e995dc1de21117e66ea7b

Figma

select the frame on Figma, you can get the variables from the URL (for example: https://www.figma.com/file/RRpJmU5bfidxMFboh65ZaX/contra-wireframe-kit-(Community)?node-id=2%3A9167)

key value Description
File ID String for the URL above, file ID is RRpJmU5bfidxMFboh65ZaX
Frame ID String for the URL above, frame ID is 2:9167, (%3A is the Escape Code for : Character)

Install

yarn install

Starting Development

Start the app in the dev environment. This starts the renderer process in hot-module-replacement mode and starts a webpack dev server that sends hot updates to the renderer process:

yarn dev

Packaging for Production

To package apps for the local platform:

yarn package

License

MIT © Electron React Boilerplate

About

Zeplin pop out feature on Windows, MacOS, and Linux, currently support design wireframe from Zeplin and Figma

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages