NEXT Figma Documentation and Guide

[mmailaender]

Description

Adjust the Figma Landing page + add Tutorials to the docs to prepare for the v3 launch.

Progress

• Figma Landing page
• Tutorials
  • Chapter 1: Set-up the Figma UI Kit
  • Chapter 2: How to use the Figma Plugin
  • Chapter 3: How to update the Figma UI Kit

Figma UI Kit for testing: https://discord.com/channels/1003691521280856084/1217864742643957832/1303390206946316310

---

Updates

• We've changed the .png images to .webp to have smaller and more performant images while keeping the transparent background to provide some semi-dark/light image support (We will later provide dark and light images, but for now, we're keeping it lean).
• We're sticking with numbering in the file names, as the files are adjusted individually for the tutorials, and the numbering increases clarity.

---

The following tutorials are not MVP relevant and will be delivered afterwards:

• Chapter 3: Wireframes
• Chapter 4: Component
• Chapter 5: Colors
• Chapter 6: Typography
• Chapter 7: Slots and Properties

Checklist

Please read and apply all contribution requirements.

• Your branch should be prefixed with: docs/, feature/, chore/, bugfix/
• Skeleton v3 contributions must target the next branch (NEVER dev or master)
• Documentation should be updated to describe all relevant changes
• Run pnpm check in the root of the monorepo
• Run pnpm format in the root of the monorepo
• Run pnpm lint in the root of the monorepo
• Run pnpm test in the root of the monorepo
• If you modify /package projects, please supply a Changeset

Changsets

View our documentation to learn more about Changesets. To create a Changeset:

1. Navigate to the root of the monorepo in your terminal
2. Run pnpm changeset and follow the prompts
3. Commit and push the changeset before flagging your PR review for review.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3553583

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@mmailaender is attempting to deploy a commit to the Skeleton Labs Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
skeleton-docs	❌ Failed (Inspect)		Dec 17, 2024 8:17pm

[endigo9740]

@micha.mailaender @bohdank1995

I called this out on Discord, but wanted to repeat it here.

---

One thing I did notice. We've now moved the Figma tutorials section under /docs/guides/figma:
https://skeleton-next-krbzc29ja-skeleton-labs.vercel.app/docs/guides/figma

But it looks like the tutorial pages themselves are still under /docs/tutorials/figma/chapter-1
https://skeleton-next-krbzc29ja-skeleton-labs.vercel.app/docs/tutorials/figma/chapter-1

All three chapters will need to be moved under /docs/guides/figma/chapter-{number}. This will help ensure the Breadcrumb links are functional.

[endigo9740]

A few more things here. Most of these should be quick fixes.

[endigo9740]

We need some kind of contact information below the Buy Now component. If users are having trouble, we don't want our contributors or community members being forced to deal with this. They should have a direct link of communication with you guys.

This can take one of more forms here:

• A direct support email list (add an anchor with a mailto: URL)
• A company website with your contact information
• We can also setup a #figma-ui-kit channel under Skeleton Labs on Discord.

I'd recommend something like this:

The Skeleton Figma UI Kit is created with ❤️ from Micha, Bohdan, and Skeleton Labs. If you have questions about your purchase or need support, please contact us at [email protected].

If you guys don't have an email handy to use, then we can use [email protected] temporarily. But I'd prefer you guys managed this asap.

[mmailaender]

I like the suggestion with the #figma-ui-kit so we have one source for the community, and it has a search function, making it easier to deal with repeating questions 👍

[endigo9740]

Note the #figma-kit-support channel has been added on Discord, but will remain private until the Kit launches.