frame-style-generator

v1.0.0

This tool allows a user to export a scss file containing all the font, gradient, and color variables for a given page.

NPM

README

Latest version published 10 months ago

    npm install frame-style-generator

We couldn't find any similar packages Browse all packages

Package Health Score

39 / 100

Popularity
Limited
Maintenance
Inactive
Security
Security review needed
Community
Limited

Make sure the open source you're using is safe to use

Secure my Project

Popularity

Limited

Weekly Downloads (0)

Dependents: 1
GitHub Stars: ?
Forks: ?
Contributors

The npm package frame-style-generator receives a total of 0 downloads a week. As such, we scored frame-style-generator popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package frame-style-generator, we found that it has been starred ? times, and that 1 other projects on the ecosystem are dependent on it.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Security

Security review needed

Security and license risk for significant versions

All Versions

Direct Vulnerabilities

1.0.0

Indirect Vulnerabilities

1.0.0

License Risks

1.0.0

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security Policy: No

Snyk detected that the latest version of frame-style-generator has a security vulnerability.

We highly advise you to review these security issues.

You can connect your project's repository to Snyk to stay up to date on security alerts and receive automatic fix pull requests.

    # Install the Snyk CLI and test your project
npm i snyk && snyk test frame-style-generator

Fix it in your project with Snyk!

Maintenance

Inactive

Commit Frequency

Unavailable commit data

Open Issues: ?
Merged PR: ?
Open PR: ?
Last Commit: unknown

Further analysis of the maintenance status of frame-style-generator based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

We found that frame-style-generator demonstrates a positive version release cadence with at least one new version released in the past 12 months.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Community

Limited

Readme.md: No
Contributing.md: No
Code of Conduct: No
Contributors: 0
Funding: No
License: Unknown

This project has seen only 10 or less contributors.

Embed Package Health Score Badge

Package

Node.js Compatibility: not defined

Age: 10 months
Dependencies: 12 Direct / 412 Total
Versions: 2
Install Size: 42.1 kB
Dist-tags: 1
# of Files: 21
Maintainers: 1
TS Typings: No

We detected a total of 412 direct & transitive dependencies for frame-style-generator. See the full dependency tree of frame-style-generator

frame-style-generator has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Figma Stylesheet Exporter

A CLI tool used to extract CSS values from a Figma file into stylesheet files.

Requirements

You’ll want to ensure you have the following already installed on your local machine before getting started with Starter theme:

Figma Client ID: We will need the Client ID from the Figma file that you will be exporting values from. This client ID is found in the URL of the file.
Typescript: Typescript is a superset of JavaScript. You will need Typescript to compile the code. Simply install Typescript with the following command:

$ npm install -g typescript

Node: The current LTS (long-term support) release. We like to use a Node Version Manager like NVM.
NPM 5+ or Yarn: Both of these package managers have ups and downs, choose whichever you prefer. Follow the installation instructions for Yarn or NPM to make sure you're using the latest version.

Getting started

Nuxt.js is a higher-level framework that builds on top of Vue. It simplifies the development of universal or single page Vue apps.

# install dependencies in root directory
$ yarn

# begin CLI tool
$ yarn start

What next?

You should now have an export of typography base styling, color variables and icons in snippets.

You will now need to format the spacing and commenting of these files manually and paste into your Frame project.
The typography will still require you to edit the replace font-size or any hard-coded pixels values to use a font variable. Either the modular scale or a type scale variable in your configuration.
All icons files except the icon-styleguide.liquid will need to be placed inside your src/snippets directory.
The contents inside icon-styleguide.liquid will need to overwrite the icons section in the src/snippets/styleguide-styles.liquid.

Although this doesn't yet fully automate the process - it does a lot of tedious copy and pasting from Figma. You will still need to review manually and ensure the fonts are rendering properly, spacing is consistent and your project Styleguide is ready for use.