NEXT Figma Documentation and Guide

[mmailaender]

Description

Adjusts the Figma Landing page + add Tutorials to the docs as a preparation for the v3 launch.

Progress

• [x] Figma Landing page
• Tutorials
  • [x] Chapter 1: Set-up the Figma UI Kit
  • [ ] Chapter 2: How to use the Figma Plugin
  • [ ] Chapter 3: Wireframes
  • [ ] Chapter 4: Component
  • [ ] Chapter 5: Colors
  • [ ] Chapter 6: Typography
  • [ ] Chapter 7: Slots and Properties

To discuss:

1. I have seen, that images are hosted via GitHub CDN, as we don't have access to it, we have put them for now into an assets folder co-located to the docs, so Astro can optimize them. @endigo9740 Will you move them to the CDN or how to proceed here?
2. We have reworked the Figma landing page and added the first Chapter of the tutorial page. Before we continue with the next Chapters we would like to have Feedback on the current implementation, to keep future reworks to a minimum.
3. ~~I have no idea how to remove the pnpm-lock.yml change (We had in between installed explicitly the astro image dependency sharp). I've tried reverting it with git checkout origin/next -- pnpm-lock.yml, but somehow it's still there... Maybe you guys have some more skillz with git to fix this 🤔~~ Seems time was fixing it

Checklist

Please read and apply all contribution requirements.

• [x] Your branch should be prefixed with: docs/, feature/, chore/, bugfix/
• [x] 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
• [x] 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[bot]]

⚠️ No Changeset found

Latest commit: e8494d5de527df266373bc629acbaf1b0933cc69

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[bot]]

@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[bot]]

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

Name	Status	Preview	Updated (UTC)
skeleton-docs	❌ Failed (Inspect)		Jan 18, 2025 8:37am

[mmailaender]

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).

[mmailaender]

Pull request is ready for review. Figma UI Kit for testing: https://discord.com/channels/1003691521280856084/1217864742643957832/1303390206946316310

[mmailaender]

Ready for another round of review @endigo9740 ✌️

1. We've reworked the whole landing page and implemented a conversion journey. We start with the Why (product's purpose and value proposition), transition to How (we solve the user's problem), and what (is the concrete product), a social proof section, and then finish off with the pricing and final CTA. Ideally, this page would be its own landing page as it conflicts a bit with the structure of the docs (as we also discussed), but for now, we have fitted it in to have a starting solution.
2. Addressed or fixed open comments

[endigo9740]

Hey @mmailaender @bohdank1995, so after doing a bit of review of this I have a couple ideas I want to run by you...

Per the Promo Page

First, regarding the core Figma page /docs/get-started/figma. I can see now what you guys are going for with this - it's more of a promotional or landing page that discusses the benefits of the Figma Kit and works to convert folks to paying users.

That totally makes sense, but it's a bit outside the original intention. Originally I just this to be another documentation page that work would push users to to a standalone promo/landing page. Be that on Polar, etc. So, what I'm proposing is we move away from the MDX-based content page, and instead implement a new top-level page.

This would look like this:

• Temporarily disable /src/content/get-started/figma by renaming to _figma. Underscore means ignored.
• Create a new page in /src/pages/figma/index.astro. Astro pages fully support HTML, just like components.
• We then rework the navigation to include Figma as a top-level link in the header (Docs | News | Themes | Figma)
• Once everything is moved, you are then free to delete the /content version

Just make sure to include the wrapping <LayoutRoot> component like the 404 and other pages.

This then gives you guys full reign over the page structure and HTML for the design, much like how we're handling News. Plus you can still insert the existing <FigmaBuyNow> and <NavGrid> components as you see fit. The only things you will lose is the left/right columns for navigation and table of contents. And image paths may need to be modified a bit. But I think this should be more in the ballpark of what you seem to be after.

Per Tutorials

Additionally, I think we do keep the tutorials in MDX/documentation format, but we can go ahead and implement a new Top-Level category in the left hand sidebar called Tutorials. Think something like this:

Get Started
- Introduction
- ...
- Tailwind Guide

Tutorials <--- New top level section
- Dark Mode
- Layouts
- Figma UI Kit <--- Figma tutorials live here

Design
- Themes
- ...

That way discovery comes from either the top level link, or from some browsing to the tutorial. The promo page and tutorial should likely feature a CTA for quick navigation to and from.

Upcoming Design Refresh

Finally, as for the promo page design - feel free to be creative, but know I do have plans to revise the homepage and overall aesthetic prior to launch to something more intricate and informative. Think our v2 homepage for example. We should ideally keep these in sync so everything looks uniform. Unfortunately I likely won't have a chance to implement those revisions until after the 1st of the year, leading up to the full launch. So maybe keep you design conservative and nimble for now, so we can revise asap.

My Help

Finally, I could probably implement the majority of these structural changes a matter of an hour or two. If you are down for this let me know and I'll get started right away! Either way, just let me know what you think on Discord and we'll go from there!

[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.