LekoArts / Figma Theme Ui
Licence: mit
Convert a Theme UI config to Figma Styles
Stars: ✭ 122
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Figma Theme Ui
Magane
Bringing LINE's sticker to Discord in a chaotic way.
Stars: ✭ 81 (-33.61%)
Mutual labels: plugin, svelte
Vim Svelte
Vim syntax highlighting and indentation for Svelte 3 components.
Stars: ✭ 158 (+29.51%)
Mutual labels: plugin, svelte
Vime
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
Stars: ✭ 1,928 (+1480.33%)
Mutual labels: svelte
Craft Blitz
Intelligent static page caching for creating lightning-fast sites with Craft CMS.
Stars: ✭ 118 (-3.28%)
Mutual labels: plugin
Jetty Runner
A plugin that allows you to run Jetty from IntelliJ
Stars: ✭ 119 (-2.46%)
Mutual labels: plugin
Vue Cli Plugin P11n
🔌 Vue CLI 3 plugin to pluginize your Vue project
Stars: ✭ 117 (-4.1%)
Mutual labels: plugin
Nvim Lspconfig
Quickstart configurations for the Nvim LSP client
Stars: ✭ 3,410 (+2695.08%)
Mutual labels: plugin
Activity Log
Get aware of any activities that are taking place on your dashboard! Imagine it like a black-box for your WordPress site.
Stars: ✭ 119 (-2.46%)
Mutual labels: plugin
Qqlight Websocket
QQLight机器人WebSocket-RPC插件,让你能够使用任何语言编写QQ机器人程序
Stars: ✭ 118 (-3.28%)
Mutual labels: plugin
Vite ruby
⚡️ Vite.js in Ruby, bringing joy to your JavaScript experience
Stars: ✭ 112 (-8.2%)
Mutual labels: plugin
Eleventy Starter
ARCHIVED: An Eleventy starting point with Tailwind and Svelte preconfigured.
Stars: ✭ 118 (-3.28%)
Mutual labels: svelte
Tfsnotificationrelay
An extensible plugin for TFS that sends notifications to Slack, HipChat and IRC
Stars: ✭ 120 (-1.64%)
Mutual labels: plugin
Xcode Build Times
This BitBar/SwiftBar plugin shows the time you spend waiting for Xcode to do your builds
Stars: ✭ 122 (+0%)
Mutual labels: plugin
Theme UI Plugin for Figma
Convert a Theme UI config to Figma Styles.
Usage
Choose a .js
file that only contains an export and your theme. Example:
module.exports = {
fonts: {
body:
'-apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
heading: "inherit",
},
fontSizes: [12, 14, 16, 20, 24, 32],
fontWeights: {
body: 400,
heading: 700,
},
lineHeights: {
body: 1.5,
heading: 1.125,
},
colors: {
text: "#000",
background: "#fff",
brand: {
primary: "#07c",
secondary: "#30c",
},
teal: [null, "#e6fffa", "#b2f5ea", "#81e6d9"],
},
};
The shape of the theme has to follow the theme specification. Otherwise the plugin can't find your styles. More specifically, you'll need to bring the theme into the following shape (as shown above):
- One
module.exports
export, nothing more in the file -
fonts
,fontWeights
andlineHeights
have to have the same keys (above:body
andheading
) -
fontSizes
has to be defined asArray<number>
-
fontWeights
andlineHeights
need to have anumber
as property
Lastly, click "Add Styles" to create your Figma Styles.
Development
Install the dependencies:
yarn install
And build the plugin:
yarn build
Go to your "Plugins" tab inside Figma and press the "+" button on "Development". Choose the manifest.json
file inside public
folder.
You now can open the plugin in any project. Run yarn dev
to have rollup watch your changes. You'll need to re-open the plugin after every change.
Acknowledgements
- Thanks to Figsvelte for his cool boilerplate to start a Figma plugin with Svelte
- Thanks to tailwindcss-figma-plugin for giving me an idea on how to use Figma's API
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].