Figma Kit PoC [Unofficial]

[mmailaender]

[Update]
Full Figma Kit launch: #2162

---

Link to Skeleton UI library

We're excited (my excellent colleague @bohdank1995 and me) to share the Figma library for Skeleton UI with you today. This is the first version with limited components.
We would love to get your feedback and ideas to improve it.

Features

• Component variants
• Theme support with variables
• Composable with slots
• Tutorial (Only Alerts at the moment)
• Playground

Components

• Forms: Input, Text Area, Select, Checkbox, Radio, Material Style Input, Input Group, Range
• Alert
• Badges
• Breadcrumbs
• Button, Button Group
• Cards
• Chips
• Avatar

Maintainance

Many open-source projects have problems actively maintaining and including user requests because they don't have the financial freedom to invest more in the project.

For us, it's a heart project to maintain the Figma library on a high-quality level and include many more features down the road.

We have considered splitting the Figma library into a lite and a full Version. With the lite version, you can discover if the library adds value to you and includes a limited component set. The full version includes all components. Our idea is to have a license that includes updates on a yearly base and per user for the full version (like Material UI) so that we have the financial resources to maintain the project long-term and professionally.

I'm sharing everything I have written above for you to talk about. We love open-source, and in our ideal world, we could share it for free and still have the resources to maintain them fully. But until we reach that, the above approach feels like a fitting compromise. We would be happy to hear your thoughts on this.

Roadmap

• polish the library based on your feedback
• launch the full version
• create a Figma to Code plugin
  • Import your theme from Code or Skeleton website easily
  • Export Code from Figma to clipboard or GitHub

[endigo9740]

@mmailaender First off, congrats on the launch. We've seen a lot of interest in this in the community, so it's great to see someone in the community contribute something like this.

That said, I have to admit I'm a bit disappointed you never reached out to me or the core team to give us a heads up on this. We found a couple random posts in a support thread on Discord mentioning this, but I don't believe you and I have ever communicated directly on this. This would have been a great courtesy and been a nice good faith gesture. We likely would have been keen to contribute feedback and share resources where relevant in the spirit of open source.

There is also two other issues with your post above:

1. I've inserted the word "Unofficial" into the title of this post to make it clear this is not coming from the Skeleton core team members or provided by Skeleton Labs LLC. This was not clear previously.
2. Given you're charging money for the full version of this, I would urge caution on using any of our branding and especially from framing this as being an officially condoned or supported project.

Skeleton Labs LLC is the only company that officially tends to Skeleton. We gather all earnings through sponsorship, ads, services, and our recently launched store and we use this to cover the day to day costs of maintaining the Skeleton project. Your project does not contribute any portion of this to the Skeleton project, which is fine. Just again, make it clear who is building this, that you're not directly related to Skeleton/Labs, and that any earnings go directly to you and your partner - they do not directly support the Skeleton project.

If you have any questions about this and would like to speak directly, I'm available in DM on Discord or via [email protected].

[mmailaender]

Hi @endigo9740,

One and a half months passed. The library got a lot of love from the community. Unfortunately, we haven't yet received improving feedback for the library or how people would like to have the distribution. Nevertheless, we have continued to finish the rest of the Figma library, and it's ready for shipping.

Still, I would appreciate your feedback and thoughts to plan the next steps (if any other maintainer/user is reading this, your input and ideas are also more than welcome).

We likely would have been keen to contribute feedback and share resources where relevant in the spirit of open source.

---

I want to emphasize again that we are open to any good solution and do not have to remain set in stone. We're interested in a win-win solution.

[moutonnoireu]

Hi @mmailaender, It's been 3 weeks after this message, where is the full version available ?

[chitombo]

Hi @mmailaender, I am also interested in the full version. How do I get a hold of it?

[mmailaender]

Almost two weeks passed after the release of the Figma library, and over 90 people got their copy 🚀
If you have any Feedback/Inspiration on how to improve the library, we're only waiting for it! :)

[Elliott-Green]

I'm not really a designer, so I did check this out for the latest project I'm working on which is gonna require wireframes.
It's good but without having the full range of components in the free version, it's very very limiting to what you can do.
If you run into a component which you need like a navbar, then it's kinda frustrating. So whilst I did get a copy, it's lacking in what I can do with it.

[mmailaender]

Thanks a lot for the feedback - we're trying to solve this gap soon 🙂

[chantlong]

How are you currently importing the Theme Colors from the generated css to Figma as Variables?

[mmailaender]

At the moment this is a manual process.

A solution I could think off, would be to create a Figma plugin.

Either, this would first fetch the created theme from the Website and then calls the Figma variable API
to add the custom theme to Figma (Not sure if this is possible without changes to the theme generator, because I assume we would need a persitent URL based on the generated theme to fetch it from the plugin)
OR
it would embed the theme creator directly and then calls the Figma variable API
OR
it would fetch the theme from your repository and then calls the Figma variable API (Probably the nicest solution, because we could extend it long-term to a two-way sync)

@endigo9740 do you also have some thoughts how to accomplish this? 🙂

[endigo9740]

Personally I use Sketch over Figma, so I'm not sure what technical options they provide. Given that themes in v2 are now in a JS format, it would be my hope that it would be easier to retrieve the colors out of the file though.

[mmailaender]

Great news - we launched the full version @moutonnoireu @chitombo @Elliott-Green