Export Elements Theme from Sketch - Plugin Case Study

Elements Feedback
1

Hi,

as mentioned I am working on another plugin. Here are the first steps. Not yet done and I will need to review the changes of the next update. But it seems to work so far :smiley:

2 Likes
2

The screen sizes seems to be global and not theme specific.

3

Oh this is very cool, well done! I’d be very interested to see more on this when you get it working.

Yes, screen sizes are global or I should say project specific. I can’t recall the exact reason, but I remember that having screens tied to themes made responsive settings significantly more complex. Also, it didn’t seem logical for breakpoints to change when switching themes, since themes primarily handle style settings.

4

Yeah that makes sense. But I would then maybe set the menu not under the Theme settings?

CleanShot 2025-03-19 at 06.16.15
CleanShot 2025-03-19 at 06.16.15447×480 30.3 KB

5

Yeah, good point — it’s misleading to have it within the theme settings.

6

Hi @tpbradley

I got the colors to work. But what I realized is that you guys are using a different algorithm for the shades. Can be seen by the end of the video.

Oh yeah and in case there is no export layer for the image that below is the fallback:

CleanShot 2025-03-19 at 09.07.45
CleanShot 2025-03-19 at 09.07.45437×279 16.5 KB

2 Likes
7

This is so cool! I’m definitely going to have to get more familiar with Sketch so I can support your efforts.

Are you planning on offering your plugins for sale at some point in the future as I would like to support you.

Very exciting stuff. What an awesome community that is growing around Elements.

1 Like
8

Hi @handshaper

not sure how to sell plugins for Sketch. But yeah I will see how I will do that. Maybe just a PayPal button on the page.

But I won’t release anything before Elements has a final release candidate. Also if I sell it … it means I need to support it :exploding_head: :water_pistol:

So yeah we will see. The Sketch documentation is really out of date and most example code you find online is like 5-7 years old. So no idea where Sketch is heading.

1 Like
9

It might be tricky to try and match the algorithm. However, you can use custom swatches to specify the exact color of each shade. In the theme.json file, add this to a color.

"customSwatches" : {
    "700" : "#c600d6",
    "300" : "#ff96fd",
    "900" : "#86028b",
    "500" : "#fe19ff",
    "100" : "#fee2ff",
    "600" : "#e900ff",
    "950" : "#5d0061",
    "800" : "#a300ae",
    "400" : "#ff57fc",
    "200" : "#fdc3ff",
    "50" : "#fff1ff"
},
"useCustomSwatches" : true,
10

Got that already :smiley:
I am adding the colors to both .. so as long no one is changing the colors all good.

Small Performance issue:
I realized when all switched for custom are one … for all tailwind colors + brand, accent, surface and so on .. it takes a moment till the theme loads

1 Like
11

+1 for purchasing your plugin! I’d love to use it along with a sketch file to help build out themes — Bring it on :clap: