Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lichin-lin/fitty
Zeplin pop out feature on Windows, MacOS, and Linux, currently support design wireframe from Zeplin and Figma
https://github.com/lichin-lin/fitty
designops electron figma zeplin
Last synced: 2 months ago
JSON representation
Zeplin pop out feature on Windows, MacOS, and Linux, currently support design wireframe from Zeplin and Figma
- Host: GitHub
- URL: https://github.com/lichin-lin/fitty
- Owner: lichin-lin
- License: mit
- Created: 2020-03-24T10:31:41.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-15T23:36:54.000Z (about 2 years ago)
- Last Synced: 2024-07-30T21:08:20.163Z (5 months ago)
- Topics: designops, electron, figma, zeplin
- Language: JavaScript
- Homepage:
- Size: 29.2 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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
## 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
```bash
yarn install
```
## Starting Development
Start the app in the `dev` environment. This starts the renderer process in [**hot-module-replacement**](https://webpack.js.org/guides/hmr-react/) mode and starts a webpack dev server that sends hot updates to the renderer process:
```bash
yarn dev
```
## Packaging for Production
To package apps for the local platform:
```bash
yarn package
```
## License
MIT © [Electron React Boilerplate](https://github.com/electron-react-boilerplate)