lekoarts/figma-theme-ui

Convert a Theme UI config to Figma Styles

Hi, I'm Lennart 👋

I'm a product-focused full stack engineer with years of experience in leading large-scale open source projects and shipping high-quality work to millions of users. Adept at building delightful, inclusive, and well-documented solutions to customers' needs.

Currently I'm working at Clerk. Previously I worked at Netlify and Gatsby.

I enjoy working on open source projects & making the web more inclusive through them. My OSS code has been used by thousands of people & I regularly share educational content in the form of posts, presentations, and videos.

You can also find me on Twitter at @lekoarts_de or on Mastodon at mastodon.social/@lekoarts.

figma-theme-ui's Issues

Themes not applying...

Hi Tom,

Not sure if its a specific problem but we've been using your plugin for a while now but lately we have noticed our new/updated themes are not being applied. They sync, and appear in the selection menu, but when we apply nothing is happening.

I did some digging and in the json file the older themes are saved like so:

"name": "Text / Text 50 Bold",

Whereas the newer themes are saving like this

"name": "Text/Text 50 Bold",

I'm not sure if its a bug exactly but its different so it is causing issues for those using the plugin for longer. I guess this means I need to update our themes (7 of them) to the new way of doing things...

Adding only colors/typography doesn't work

Description

When trying to only add either colors or typography the plugin doesn't do anything. Currently only both options work.

feat: Convert Figma styles to Theme UI config

Summary

The current functionality but the other way round.

Basic example

Write text, color styles to Theme UI config. Prior art with just a Figma file:
https://github.com/antonvasin/styled-system-figma

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

feat: Convert Theme UI shadows to Figma's Effect Styles

Summary

Convert shadows from Theme UI to shadows in Figma.

Basic example

lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',

Should become:

Override styles

Summary

Override styles that already exist in the Figma file.

Basic example

1. You upload a file with primary colour red.
   module.exports = { colors: { primary: "#F00" };
2. You apply this primary colour to a Frame
3. You upload a file where you changed the primary colour to blue
   module.exports = { colors: { primary: "#00F" };
4. The current Primary style should be overridden and the colour of the Frame should be blue.

Motivation

This would let me work with styles in a much easier manner keeping all styling in code.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency @types/node to ^18.19.31
• chore(deps): update dependency @figma/plugin-typings to ^1.91.0
• chore(deps): update dependency node to v20.12.2

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update rollup (rollup-plugin-svelte, rollup-plugin-terser)
• chore(deps): update dependency cssnano to v6
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency svelte to v4
• chore(deps): update dependency typescript to v5
• chore(deps): update eslint (major) (eslint, eslint-config-prettier, eslint-plugin-prettier)
• chore(deps): update rollup (major) (@rollup/plugin-commonjs, rollup)
• chore(deps): update types (major) (@types/node, @typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/build.yml

• actions/checkout v4
• actions/setup-node v4

.github/workflows/release.yml

• actions/checkout v4
• actions/setup-node v4

.github/workflows/test.yml

• actions/checkout v4
• actions/setup-node v4

npm

package.json

• @changesets/changelog-github ^0.5.0
• @changesets/cli ^2.27.1
• @figma/plugin-typings ^1.89.0
• @rollup/plugin-commonjs ^24.1.0
• @rollup/plugin-html ^1.0.3
• @rollup/plugin-node-resolve ^15.2.3
• @rollup/plugin-replace ^5.0.5
• @rollup/plugin-typescript ^11.1.6
• @types/jest ^29.5.12
• @types/node ^18.19.28
• @types/theme-ui ^0.6.0
• @typescript-eslint/eslint-plugin ^5.62.0
• @typescript-eslint/parser ^5.62.0
• cssnano ^5.1.15
• csstype ^3.1.3
• eslint ^8.57.0
• eslint-config-prettier ^8.10.0
• eslint-plugin-import ^2.29.1
• eslint-plugin-prettier ^4.2.1
• figma-plugin-ds-svelte ^1.4.3
• jest ^29.7.0
• parse-color ^1.0.0
• postcss ^8.4.38
• prettier ^2.8.8
• rollup ^3.29.4
• rollup-plugin-postcss ^4.0.2
• rollup-plugin-svelte ^7.1.6
• rollup-plugin-svg ^2.0.0
• rollup-plugin-terser ^7.0.2
• superstruct 1.0.4
• svelte ^3.59.2
• ts-jest ^29.1.2
• ts-node ^10.9.2
• tslib ^2.6.2
• typescript ^4.9.5

nvm

.nvmrc

• node 20

---

• Check this box to trigger a request for Renovate to run again on this repository

Add styles appears to fail during config parse

Hello, I'm trying to use the plugin to import a theme into Figma but when I add the config and click 'Add Styles', nothing happens. I get no verification in the UI and nothing in the console to suggest an error has occured. Whilst running the plugin in dev mode, I have traced the issue to the JSON5.parse method used in parseConfig. It seems to be failing silently and I cannot log the result and futher execution seems to stop. As a result, the type check in code.ts doesn't appear to be reached.

There is perhaps something else going on as I haven't had all that much time to verify, but I have been using the config file in your Readme to test this with.

I will be able to further investigate soon, but for now if you have any ideas as to why this is happening, any help would be great!

Here is the config object I am using:

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"]
  }
};