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
-
Login to your zeplin account on Zeplin.
-
Go to Developer section for your profile.
-
Create your Personal access tokens.
-
Paste it into Fitty > ControlPanel > Figma Section >
TokenField
-
Login to your Figma account on Figma.
-
Head to the Account Settings from the top-left menu inside Figma.
-
Find the Personal Access Tokens section, click Create new token.
-
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.
-
Paste it into Fitty > ControlPanel > Figma Section >
TokenField
| key | type | Description |
|---|---|---|
| Opacity | Number | value from 0 ~ 1 for frame's opacity |
| Scale | Number | value is the percantage for the frame's scaling |
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 |
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) |
yarn installStart 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 devTo package apps for the local platform:
yarn package