NEXT Figma Documentation and Guide

sites/next.skeleton.dev/package.json

@@ -42,6 +42,7 @@
 		"nanostores": "^0.11.3",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"sharp": "^0.33.5",
 		"react-hot-toast": "^2.4.1",
 		"svelte": "^5.6.2",
 		"svelte-check": "^4.1.1",

sites/next.skeleton.dev/src/components/docs/FigmaBuyNow.astro

@@ -0,0 +1,113 @@
+---
+import { Check as IconCheck } from 'lucide-react';
+---
+
+<!-- Load the Polar checkout script -->
+<script src="https://cdn.jsdelivr.net/npm/@polar-sh/[email protected]/dist/embed.global.js" defer data-auto-init></script>
+
+<script>
+	const htmlElement = document.documentElement;
+
+	const buyButtons = document.querySelectorAll('[data-polar-checkout]');
+
+	/**
+	 * Updates the theme of the buy buttons based on the presence of the 'dark' class on the HTML element
+	 */
+	function updateTheme() {
+		const theme = htmlElement.classList.contains('dark') ? 'dark' : 'light';
+
+		buyButtons.forEach((button) => {
+			button.setAttribute('data-polar-checkout-theme', theme);
+		});
+	}
+
+	// Initial update of the theme
+	updateTheme();
+
+	// Create a MutationObserver to observe changes to the class attribute of the HTML element
+	new MutationObserver(() => {
+		updateTheme();
+	}).observe(htmlElement, {
+		// Observe changes to attributes
+		attributes: true,
+		// Only observe changes to the class attribute
+		attributeFilter: ['class']
+	});
+</script>
+
+<div class="flex flex-col bg-transparent rounded-container border-[1px] border-surface-200-800 shadow-lg overflow-hidden">
+	<div class="flex flex-col p-6 w-full">
+		<span class="text-xl font-semibold h-full pb-6">Figma UI Kit for Skeleton includes:</span>
+		<div class="flex flex-col gap-3">
+			<div class="flex flex-row items-center gap-3">
+				<div class="flex w-5 h-5 preset-tonal-primary rounded-full justify-center items-center">
+					<IconCheck size="12" />
+				</div>
+				<p>Figma Skeleton v3 Components library</p>
+			</div>
+			<div class="flex flex-row items-center gap-3">
+				<div class="flex w-5 h-5 preset-tonal-primary rounded-full justify-center items-center">
+					<IconCheck size="12" />
+				</div>
+				<p>Lucide Icons</p>
+			</div>
+			<div class="flex flex-row items-center gap-3">
+				<div class="flex w-5 h-5 preset-tonal-primary rounded-full justify-center items-center">
+					<IconCheck size="12" />
+				</div>
+				<p>Dark / Light Support</p>
+			</div>
+			<div class="flex flex-row items-center gap-3">
+				<div class="flex w-5 h-5 preset-tonal-primary rounded-full justify-center items-center">
+					<IconCheck size="12" />
+				</div>
+				<p>Custom Theme Support</p>
+			</div>
+			<div class="flex flex-row items-center gap-3">
+				<div class="flex w-5 h-5 preset-tonal-primary rounded-full justify-center items-center">
+					<IconCheck size="12" />
+				</div>
+				<p>Figma Plugin to import your custom Theme</p>
+			</div>
+			<div class="flex flex-row items-center gap-3">
+				<div class="flex w-5 h-5 preset-tonal-primary rounded-full justify-center items-center">
+					<IconCheck size="12" />
+				</div>
+				<p>Tutorials</p>
+			</div>
+		</div>
+	</div>
+	<div class="flex flex-col md:flex-row bg-transparent w-full border-t border-surface-200-800">
+		<div class="flex flex-col gap-1 p-6 border-r md:border-t-0 border-b md:border-b-0 border-surface-200-800 w-full">
+			<span class="text-lg font-semibold"><span class="text-surface-600-400">License for</span> 1 person</span>
+			<div class="flex flex-col h-full pt-12">
+				<div class="flex flex-row gap-1 items-end pb-4">
+					<span class="text-4xl font-semibold">$109</span>
+					<span class="opacity-60">+1 year of updates </span>
+				</div>
+				<a
+					href="https://buy.polar.sh/polar_cl_4Wd2CxwXfx-g5z-87D2PNRkdamIiohCLnxH3UqaAqGA"
+					data-polar-checkout
+					data-polar-checkout-theme="dark"
+					class="btn btn-lg self-end preset-filled flex items-center gap-2 w-full">Buy</a
+				>
+			</div>
+		</div>
+		<div class="flex flex-col gap-1 p-6 w-full">
+			<span class="text-lg font-semibold"><span class="text-surface-600-400">License for</span> 25 people</span>
+
+			<div class="flex flex-col h-full pt-12">
+				<div class="flex flex-row gap-1 items-end pb-4">
+					<span class="text-4xl font-semibold">$219</span>
+					<span class="opacity-60">+1 year of updates </span>
+				</div>
+				<a
+					href="https://buy.polar.sh/polar_cl_vLLsRrjP5rIuLgp6Loez6lPjyg1vrAhH435-MVhIpIk"
+					data-polar-checkout
+					data-polar-checkout-theme="dark"
+					class="btn btn-lg self-end preset-filled flex items-center gap-2 w-full">Buy</a
+				>
+			</div>
+		</div>
+	</div>
+</div>

sites/next.skeleton.dev/src/components/docs/Header.astro

@@ -12,8 +12,8 @@ import Navigation from '@components/docs/Navigation.astro';
 const coreLinks = [
 	{ href: '/docs/get-started/introduction', label: 'Docs', target: '_self' },
 	{ href: '/news', label: 'News', target: '_self' },
-	{ href: 'https://themes.skeleton.dev/', label: 'Themes', target: '_blank' }
-	// { href: '/figma', label: 'Figma', target: '_self' }
+	{ href: 'https://themes.skeleton.dev/', label: 'Themes', target: '_blank' },
+	{ href: '/figma', label: 'Figma', target: '_self' }
 ];
 ---
 

sites/next.skeleton.dev/src/components/docs/HideHeader.astro

@@ -0,0 +1,5 @@
+<style is:global>
+	header[data-pagefind-body] {
+		display: none;
+	}
+</style>

sites/next.skeleton.dev/src/components/docs/ProcessStep.astro

@@ -7,7 +7,7 @@ const { step } = Astro.props;
 	<div class="type-scale-2 preset-filled-surface-200-800 -ml-4 flex size-7 items-center justify-center rounded-full">
 		{step !== 'check' ? step : <Check size={16} />}
 	</div>
-	<article class="[&>.h2]:!type-scale-4 space-y-4">
+	<article class="[&>.h2]:!type-scale-4 [&>.h3]:!type-scale-4 space-y-4">
 		<slot />
 	</article>
 </div>

sites/next.skeleton.dev/src/content/docs/guides/figma.mdx

@@ -0,0 +1,36 @@
+---
+layout: '@layouts/LayoutDoc.astro'
+title: Figma UI kit
+description: Welcome to the Skeleton Figma Design System Tutorials!
+order: 60
+---
+
+export const components = componentSet;
+
+import FigmaBuyNow from '@components/docs/FigmaBuyNow.astro';
+import NavGrid from '@components/docs/NavGrid.astro';
+
+import { Image } from 'astro:assets';
+import ImgHero from '@images/get-started/figma/hero.webp';
+import ImgComponents from '@images/get-started/figma/components.webp';
+import ImgPlugin from '@images/get-started/figma/plugin.webp';
+import ImgTutorial from '@images/get-started/figma/tutorials.webp';
+import ImgKit from '@images/get-started/figma/ui-kit.webp';
+import { Clock3 } from 'lucide-react';
+import { Shapes } from 'lucide-react';
+import { SwatchBook } from 'lucide-react';
+
+<p class="type-scale-5">Explore step-by-step guides to unlock the full potential of Skeleton in your design workflow. Whether you're setting up for the first time or mastering advanced features, these tutorials will guide you every step of the way.</p>
+
+Discover all the benefits of Skeleton Figma UI library:
+<figure class="card-filled-enhanced flex justify-center p-8">
+	<a
+		class="btn preset-filled"
+		href="/figma#get-access"
+		target="_blank"
+	>
+		Get the Figma UI Kit &rarr;
+	</a>
+</figure>
+
+<NavGrid collection="docs" path="figma/" classes="md:grid-cols-1" />

sites/next.skeleton.dev/src/content/docs/guides/figma/chapter-1.mdx

@@ -0,0 +1,111 @@
+---
+layout: '@layouts/LayoutDoc.astro'
+title: 1 - Setup & Usage
+description: Get Started with Skeleton.
+order: 0
+---
+
+export const components = componentSet;
+
+import Process from '@components/docs/Process.astro';
+import ProcessStep from '@components/docs/ProcessStep.astro';
+import NavGrid from '@components/docs/NavGrid.astro';
+
+import { Image } from 'astro:assets';
+import { BookOpen } from 'lucide-svelte';
+import SvgSkeleton from '@images/tutorials/figma/skeletonFileIcon.svg';
+import ImgCreateNewProject from '@images/tutorials/figma/chapter-1/01_createNewProject.webp';
+import ImgImportProject from '@images/tutorials/figma/chapter-1/02_importProject.webp';
+import ImgPublish from '@images/tutorials/figma/chapter-1/03_publish.webp';
+import ImgCreateNewFile from '@images/tutorials/figma/chapter-1/04_createNewFile.webp';
+import ImgSelectLibrary from '@images/tutorials/figma/chapter-1/05_selectLibrary.webp';
+import ImgUseLibrary from '@images/tutorials/figma/chapter-1/06_useLibrary.webp';
+
+---
+
+## How to Install the Figma Library
+
+For best results, a <a href="https://www.figma.com/pricing/#figma" class="chip preset-filled mx-1" target="_blank">Figma Professional Team Plan</a> (or higher) is recommended.
+
+<Process>
+    <ProcessStep step="1">
+        ### Purchase the Figma Asset
+
+        <div class="card-enhanced border-[1px] border-surface-200-800 space-y-2 p-4 md:p-8 flex flex-row justify-between items-center">
+            <div className="flex flex-row gap-4 items-center">
+            <Image src={SvgSkeleton} class="rounded-container" alt="Skeleton" />
+            <div className="flex flex-col gap-1">
+                <h6 className="h6">Skeleton Figma Design System</h6>
+                <p>Complete set of themed components for Skeleton v3</p>
+            </div>
+            </div>
+            <a href="https://polar.sh/skeleton-kit/" type="button" class="btn preset-filled-primary-500" target="_blank">Purchase</a>
+        </div>
+    </ProcessStep>
+
+    <ProcessStep step="2">
+        ### Create a New Project
+
+        In Figma, go to `Home`¹ and select `All projects`² from the left sidebar². On the right side, click `+ Project`³ and name the project `Libraries`⁴.
+
+        <Image src={ImgCreateNewProject} class="rounded-container" alt="Create New Project" />
+    </ProcessStep>
+
+    <ProcessStep step="3">
+        ### Import Skeleton Design System
+
+        From the project page, click `Create new` in the top-right corner⁵ and select `Import`⁶. Then, choose `Import from computer`⁷ and select the Skeleton Figma file.
+
+        <Image src={ImgImportProject} class="rounded-container" alt="Import Project" />
+    </ProcessStep>
+
+    <ProcessStep step="4">
+        ### Publish Skeleton Figma Library
+
+        To use the library across all Figma files, it must be published.
+
+        Double-click the Skeleton Library to open it. At the top left, next to the library file name, click the chevron `v`⁸ and select `Publish library…`⁹. In the modal, click `Publish`¹⁰ and wait for the library to finish publishing.
+
+        <Image src={ImgPublish} class="rounded-container" alt="Publish" />
+
+        Once published, you can access the Skeleton Figma Library in any of your projects.
+    </ProcessStep>
+</Process>
+
+---
+
+## How to Use the Figma Library
+
+<Process>
+    <ProcessStep step="1">
+        ### Open or Create a Project to Use the Library
+
+        Open an existing project, or create a new one by clicking `+ Create new`¹ and selecting `Design file`².
+
+        <Image src={ImgCreateNewFile} class="rounded-container" alt="Create New File" />
+    </ProcessStep>
+
+    <ProcessStep step="2">
+        ### Add the Library to Your Project
+
+        In the left sidebar, click `Assets`³, then click the <span class="badge-icon preset-filled"><BookOpen size={16} /></span> ⁴ icon. A modal will appear with the `Libraries` tab active. Search for `skeleton`⁵ and click `Add to file`⁶.
+
+        The library is now added to your file, and its assets are ready for use.
+
+        <Image src={ImgSelectLibrary} class="rounded-container" alt="Select Library" />
+    </ProcessStep>
+
+    <ProcessStep step="3">
+        ### Use Assets (Components)
+
+        You can now access the Skeleton Design library. In the `Assets` tab, you’ll see a list of Skeleton Components. Drag components onto the canvas or search for specific ones.
+
+        <Image src={ImgUseLibrary} class="rounded-container" alt="Use Library" />
+    </ProcessStep>
+</Process>
+
+---
+
+## Guides
+
+<NavGrid collection="docs" path="figma/" classes="md:grid-cols-1" />