figma-theme - Generate development-ready theme JSON files from Figma Styles

  •        33

Generate development-ready theme JSON files from Figma Styles

https://github.com/jxnblk/figma-theme

Dependencies:

chalk : ^2.4.1
chroma-js : ^1.3.7
dot-prop : ^4.2.0
dotenv : ^6.0.0
figma-js : ^1.4.0
meow : ^5.0.0
pkg-conf : ^2.1.0
superstruct : ^0.5.4
update-notifier : ^2.5.0

Tags
Implementation
License
Platform

   




Related Projects

figma-api-demo

  •    Javascript

This project contains demo apps using the Figma API. They are meant to demonstrate how to get started with the various aspects of the API.

rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

  •    Javascript

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

Framer - Framer - Design Everything

  •    Javascript

Framer Library is an open source JavaScript framework for high fidelity prototyping. Use it to design animations and interactions without any limitations. Make use of real spring physics or animate with 3D effects, anything is possible. There are 2 ways to use Framer Library. To get most out of Library download Framer; a design tool for the Mac. The other way you can leverage Framer Library is with generator; an app that imports your layers from Sketch, Photoshop and Figma. The following features are included with each option.

styled-components-theme - Defines themes via flexible color selectors for use with styled-components

  •    Javascript

styled-components-theme generates selectors for colors in your styled-components theme that allows color manipulation, using the color library via calls on the selectors themselves. A selector, in this context, is defined as a function that looks like (props) => props.theme.myColor that the styled-components library accepts as a template variable.


grid-styled - Responsive React grid system built with styled-system

  •    Javascript

The Box component handles width, margin and padding. All grid-styled components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.

style-dictionary - A build system for creating cross-platform styles.

  •    Javascript

Style once, use everywhere. A Style Dictionary is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.

nodejs

  •    TypeScript

Nodejs.dev site built using Gatsby.js with React.js, TypeScript, Emotion, and Remark. You can find the latest Figma design protype here.

octicons - A scalable set of icons handcrafted with <3 by GitHub

  •    Javascript

Octicons are a set of SVG icons built by GitHub for GitHub. This repository is a mono repository that contains distribution libraries for other platforms/languages. The vectors for all the icons are stored in a Figma file. Read through our contributing guide if you're planning on adding or updating one of the icons.

design-system - Priceline.com Design System

  •    Javascript

If you'd like to contribute to the design system, we'd love to have your help. If you work at Priceline.com, please join the #design-system Slack channel and let us know what you'd like to work on. For all contributors, please be sure to read the Contributing doc.

todc-bootstrap - Google-styled theme for Bootstrap.

  •    CSS

This is a Google-styled theme for Bootstrap. Because I'm a fan of the new Google UI seen in Gmail, Docs, Calendar, etc, I decided to reproduce the look of these new UI elements for my own personal use. The project's goal isn't UI parity with Google Apps -- it's feature parity with Bootstrap, themed with Google's UI in mind. TODC Bootstrap was created by Tim O'Donnell, and maintained with the support and involvement of the community.

react-with-styles - Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

  •    Javascript

Use CSS-in-JavaScript for your React components without being tightly coupled to one implementation (e.g. Aphrodite, Radium, or React Native). Easily access shared theme information (e.g. colors, fonts) when defining your styles.Create a module that exports an object with shared theme information like colors.

bootstrap-map-js - A light-weight JS/CSS extension for building awesome mapping apps with Bootstrap and ArcGIS

  •    HTML

NOTE: If you are looking for a modern Bootstrap framework to build map apps with a fully integrated Sass build and newer styles, please see Calcite Maps. Calcite Maps will replace this project over time. A light-weight extension for building responsive web mapping apps with the ArcGIS API for JavaScript and Bootstrap (ver 3.x). Maps will automatically resize and recenter as the screen size changes or they can be set to a fixed size. Pop-ups will stay within the screen view and are styled to match Bootstrap. Apps can be developed with Dojo and jQuery or just pure Dojo.

react-inline - Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e

  •    Javascript

Note: Thanks to the new possibilities of Babel v6+, there's also my babel-plugin-css-in-js project, which works exactly the same but doesn't require a separate CLI/API. If you're using Babel for code transpilation, just put babel-plugin-css-in-js in your build pipeline. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the className prop of React elements.

glamorous-native - React Native component styling solved💄

  •    Javascript

glamorous for React Native. React component styling solved with an elegant (inspired) API, small footprint, and great performance. For full feature documentation, see the glamorous docs. In React Native, we write styles within our JS, but you don't like having to create entire component functions just for styling purposes. You don't want to give a name to something that's purely style-related. And it's kind of annoying to do the StyleSheet.create, conditionals, and props-forwarding song and dance.

styled-tools - Useful interpolated functions for CSS-in-JS

  •    Javascript

Useful interpolated functions for styled-components 💅, emotion 👩‍🎤, JSS and other CSS-in-JS libraries. Same as prop, except that it returns props.theme[path] instead of props[path].

bootstrap-material-design - Material design theme for Bootstrap 3 and 4

  •    CSS

Material Design for Bootstrap is the best way to use Material Design guidelines by Google in your Bootstrap 4 based application. Since this is a fully customizable version of Bootstrap, just include Material Design for Bootstrap CSS instead of Bootstrap CSS, and include the JavaScript at the end of your document (just before the </body> tag), and everything will be converted to Material Design.The things to do are a lot and the time is little, if you are a passionate developer with experience with Bootstrap and Material Design for Bootstrap and you have some spare time, please consider becoming a contributor of this project! If you are interested contact @FezVrasta or just adopt one of our issues.

office-ui-fabric-js - JavaScript components for building experiences for Office and Office 365.

  •    CSS

Fabric JS is a JavaScript front-end framework which provides visuals-focused components to extend, re-work and use in your Office and Office 365 experiences. Fabric JS uses styles from the Office UI Fabric Core project. Fabric JS is a collection of responsive, mobile-first styles and tools designed to make it quick and simple for you to create web experiences using the Office Design Language.Latest version: Fabric JS 1.4.0, which uses Fabric Core 5.0.1.

styled-jsx - Full CSS support for JSX without compromises

  •    Javascript

Full, scoped and component-friendly CSS support for JSX (rendered on the server or the client).Code and docs are for v2 which we highly recommend you to try. Looking for styled-jsx v1? Switch to the v1 branch.

party-mode - An experimental music visualizer using d3.js and the web audio api.

  •    Javascript

Using the web audio api, I can get an array of numbers which corresponds to the waveform of the sound an html5 audio element is producing. There's a good tutorial on how to do this. Then, using requestAnimationFrame (with a little frame limiting for performance reasons) I'm updating that array as the music changes. I then normalize the data a bit (or transform it slightly depending on the visualization) and redraw the screen based on the updated array. I'm using d3.js to draw and redraw SVG based on this normalized data. Each visualization uses the data a bit differently -- it was mostly trial and error to get some stuff I liked looking at. Since I'm using D3 -- which is just drawing SVG -- I was able to style everything in CSS (no images are used at all, including icons). There are a handful of differently colored themes for each visualization, and I do some rudimentary CSS namespacing by updating a class applied to the html element. eg. <html class='theme_1'>. This lets me override or substitute CSS rules pretty trivially. I can add some additional variation to each theme by messing with pseudo selectors. For example, I can use :nth-of-type to hide every nth SVG rectangle or making every odd child have a different stroke-dasharray, etc.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.