diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a086c4f700..71972f8320 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -600,6 +600,9 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + sharp: + specifier: ^0.33.5 + version: 0.33.5 react-hot-toast: specifier: ^2.4.1 version: 2.4.1(csstype@3.1.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -9932,13 +9935,11 @@ snapshots: dependencies: color-name: 1.1.4 simple-swizzle: 0.2.2 - optional: true color@4.2.3: dependencies: color-convert: 2.0.1 color-string: 1.9.1 - optional: true colord@2.9.3: {} @@ -11430,8 +11431,7 @@ snapshots: is-arrayish@0.2.1: {} - is-arrayish@0.3.2: - optional: true + is-arrayish@0.3.2: {} is-async-function@2.0.0: dependencies: @@ -13414,7 +13414,6 @@ snapshots: '@img/sharp-wasm32': 0.33.5 '@img/sharp-win32-ia32': 0.33.5 '@img/sharp-win32-x64': 0.33.5 - optional: true shebang-command@2.0.0: dependencies: @@ -13453,7 +13452,6 @@ snapshots: simple-swizzle@0.2.2: dependencies: is-arrayish: 0.3.2 - optional: true sirv@3.0.0: dependencies: diff --git a/sites/next.skeleton.dev/package.json b/sites/next.skeleton.dev/package.json index 1103566734..dc06eb0eb7 100644 --- a/sites/next.skeleton.dev/package.json +++ b/sites/next.skeleton.dev/package.json @@ -43,6 +43,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.18.0", "svelte-check": "^4.1.1", diff --git a/sites/next.skeleton.dev/src/components/docs/FigmaBuyNow.astro b/sites/next.skeleton.dev/src/components/docs/FigmaBuyNow.astro new file mode 100644 index 0000000000..d6d4b650d9 --- /dev/null +++ b/sites/next.skeleton.dev/src/components/docs/FigmaBuyNow.astro @@ -0,0 +1,113 @@ +--- +import { Check as IconCheck } from 'lucide-react'; +--- + + + + + + +
+
+ Figma UI Kit for Skeleton includes: +
+
+
+ +
+

Figma Skeleton v3 Components library

+
+
+
+ +
+

Lucide Icons

+
+
+
+ +
+

Dark / Light Support

+
+
+
+ +
+

Custom Theme Support

+
+
+
+ +
+

Figma Plugin to import your custom Theme

+
+
+
+ +
+

Tutorials

+
+
+
+
+
+ License for 1 person +
+
+ $109 + +1 year of updates +
+ Buy +
+
+
+ License for 25 people + +
+
+ $219 + +1 year of updates +
+ Buy +
+
+
+
diff --git a/sites/next.skeleton.dev/src/components/docs/Header.astro b/sites/next.skeleton.dev/src/components/docs/Header.astro index c472682a67..6b1ed7b446 100644 --- a/sites/next.skeleton.dev/src/components/docs/Header.astro +++ b/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' } ]; --- diff --git a/sites/next.skeleton.dev/src/components/docs/HideHeader.astro b/sites/next.skeleton.dev/src/components/docs/HideHeader.astro new file mode 100644 index 0000000000..2670aab133 --- /dev/null +++ b/sites/next.skeleton.dev/src/components/docs/HideHeader.astro @@ -0,0 +1,5 @@ + diff --git a/sites/next.skeleton.dev/src/content/docs/get-started/figma.mdx b/sites/next.skeleton.dev/src/content/docs/get-started/figma.mdx deleted file mode 100644 index 5271503213..0000000000 --- a/sites/next.skeleton.dev/src/content/docs/get-started/figma.mdx +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: '@layouts/LayoutDoc.astro' -title: Figma -description: A Figma UI Kit for Skeleton. -order: 60 ---- - -export const components = componentSet; - -The Skeleton Figma UI Kit has been designed in coordination between [Bohdan Karplyak](https://www.linkedin.com/in/bohdan-karplyak-659a41162/), [Micha Mailänder](https://www.linkedin.com/in/micha-mail%C3%A4nder-548aba16a/), and [Skeleton Labs](https://www.skeletonlabs.co/). - -figma-preview - -## Get Access - -> Maintainer Note: this will be made available alongside the stable release of Skeleton v3. - -
- -
diff --git a/sites/next.skeleton.dev/src/content/docs/guides/figma.mdx b/sites/next.skeleton.dev/src/content/docs/guides/figma.mdx new file mode 100644 index 0000000000..eee1fb1c08 --- /dev/null +++ b/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'; + +

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.

+ +Discover all the benefits of Skeleton Figma UI library: +
+ + Get the Figma UI Kit → + +
+ + diff --git a/sites/next.skeleton.dev/src/content/docs/guides/figma/chapter-1.mdx b/sites/next.skeleton.dev/src/content/docs/guides/figma/chapter-1.mdx new file mode 100644 index 0000000000..495d20ea1f --- /dev/null +++ b/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 Figma Professional Team Plan (or higher) is recommended. + + + + ### Purchase the Figma Asset + +
+
+ Skeleton +
+
Skeleton Figma Design System
+

Complete set of themed components for Skeleton v3

+
+
+ Purchase +
+ + + + ### 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`⁴. + + Create New Project + + + + ### 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. + + Import Project + + + + ### 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. + + Publish + + Once published, you can access the Skeleton Figma Library in any of your projects. + + + +--- + +## How to Use the Figma Library + + + + ### 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`². + + Create New File + + + + ### Add the Library to Your Project + + In the left sidebar, click `Assets`³, then click the ⁴ 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. + + Select Library + + + + ### 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. + + Use Library + + + +--- + +## Guides + + diff --git a/sites/next.skeleton.dev/src/content/docs/guides/figma/chapter-2.mdx b/sites/next.skeleton.dev/src/content/docs/guides/figma/chapter-2.mdx new file mode 100644 index 0000000000..8da5531ef0 --- /dev/null +++ b/sites/next.skeleton.dev/src/content/docs/guides/figma/chapter-2.mdx @@ -0,0 +1,155 @@ +--- +layout: '@layouts/LayoutDoc.astro' +title: 2 - Import Themes +description: Customize Your Design with Skeleton Themes +order: 10 +--- + +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 SvgSkeleton from '@images/tutorials/figma/skeletonFileIcon.svg'; +import ImgOpenProject from '@images/tutorials/figma/chapter-2/01_openProject.webp'; +import ImgOpenSkeleton from '@images/tutorials/figma/chapter-2/01_openSkeleton.webp'; +import ImgOpenThemePlugin from '@images/tutorials/figma/chapter-2/02_openThemePlugin.webp'; +import ImgSetStage from '@images/tutorials/figma/chapter-2/02_setStage.webp'; +import ImgAddNewTheme from '@images/tutorials/figma/chapter-2/03_addNewTheme.webp'; +import ImgSwitchTheme from '@images/tutorials/figma/chapter-2/03_switchTheme.webp'; +import ImgSwitchThemeResult from '@images/tutorials/figma/chapter-2/03_switchThemeResult.webp'; +import ImgSelectTheme from '@images/tutorials/figma/chapter-2/04_selectTheme.webp'; +import ImgSwitchColorScheme from '@images/tutorials/figma/chapter-2/04_switchColorScheme.webp'; +import ImgSwitchColorSchemeResult from '@images/tutorials/figma/chapter-2/04_switchColorSchemeResult.webp'; +import ImgCopyTheme from '@images/tutorials/figma/chapter-2/05_copyTheme.webp'; +import ImgPasteTheme from '@images/tutorials/figma/chapter-2/06_pasteTheme.webp'; +import ImgPublish from '@images/tutorials/figma/chapter-2/07_publish.webp'; +import ImgPublishUpdates from '@images/tutorials/figma/chapter-2/07_publishUpdates.webp'; + +--- + +**Prerequisites:**
+● Completed [Chapter 1: Set-up Skeleton Figma Library](chapter-1) + +## Import Custom Theme + + + + ### Open Skeleton v3 Figma Library + + + Create New Project + + + + ### Open Skeleton themes plugin + + Click on the `Actions`¹ button in the toolbar, search for `Skeleton Themes`², and click on the `Skeleton Themes`³ plugin when it appears. + > **Important:** The plugin is compatible only with the Skeleton v3 Figma Library. + + Create New Project + + + + ### Add new theme + + The library includes a default theme, `Cerberus`. To add your theme, click `Add theme`⁴. + + Import Project + + + + ### Select theme + + Copy your theme code by visiting the [Skeleton theme creator](https://themes.skeleton.dev/themes/create). Click `Import`⁵, then select a theme⁶, or compose your own. + + Publish + + + + ### Copy theme + + Open the `Code` tab in the right panel⁷ and copy the theme code⁸. + + Create New File + + + + ### Paste theme + + Return to the `Skeleton Themes` plugin in Figma, paste the theme code⁹, and click `Upload`¹⁰. + + > **Note:** Uploading the theme may take 3–5 minutes, depending on your device. + + Select Library + + + + ### Publish updates + + After uploading, publish the library to make the new theme accessible. In the left panel, click the `Book` icon¹¹, then click the `Publish...` button¹². When the modal appears, click `Publish` again¹³. + + > **Note:** Publishing may take 5–7 minutes. + + Use Library + Use Library + + + +--- + +## Apply Custom Theme in Project + +### Prerequisites: +- Completed [Chapter 1: Set-up Skeleton Figma Library](chapter-1#how-to-install-the-figma-library) +- Completed [Chapter 2: Import Custom Theme](#import-custom-theme) + + + + ### Open Project + + Open the project where the `Skeleton Figma Library` is applied. + + Use Library + + + + ### Set the stage + + Add `page examples` components on the canvas to preview your theme. + + Use Library + + + + ### Switch theme + + In the `Pages` section⁴ on the right panel, click `Apply variable mode`, hover over `Theme`, and select your imported theme⁵. + + Use Library + + Voilà! Your theme is now applied to the components. + + Use Library + + + + ### Switch modes + + Skeleton themes include `light` and `dark` modes by default. Switch modes the same way you switch themes: in the `Pages` section⁶, click `Apply variable mode`, hover over `Color Scheme`, and select the scheme⁷. + + Use Library + + Your components are now in the `Dark` `Color Scheme`. + + Use Library + + + +--- + +## Guides + + diff --git a/sites/next.skeleton.dev/src/content/docs/guides/figma/chapter-3.mdx b/sites/next.skeleton.dev/src/content/docs/guides/figma/chapter-3.mdx new file mode 100644 index 0000000000..1b4ec77a1b --- /dev/null +++ b/sites/next.skeleton.dev/src/content/docs/guides/figma/chapter-3.mdx @@ -0,0 +1,88 @@ +--- +layout: '@layouts/LayoutDoc.astro' +title: 3 - Update Figma library +description: Keep Your Skeleton Library Up to Date +order: 20 +--- + +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 SvgSkeleton from '@images/tutorials/figma/skeletonFileIcon.svg'; +import ImgImport from '@images/tutorials/figma/chapter-3/02_import.webp'; +import ImgPublishLib from '@images/tutorials/figma/chapter-3/03_publishLibrary.webp'; +import ImgOpenFile from '@images/tutorials/figma/chapter-3/04_openFile.webp'; +import ImgSelectSkeleton from '@images/tutorials/figma/chapter-3/04_selectSkeleton.webp'; +import ImgSelectNewSkeleton from '@images/tutorials/figma/chapter-3/04_selectNewSkeleton.webp'; +import ImgRemoveOld from '@images/tutorials/figma/chapter-3/removeOld.webp'; +import { ChevronDown, BookOpen } from 'lucide-svelte'; + + +--- + +

Skeleton is continually evolving, and to ensure that your design remains in harmony with it, it's essential to keep the Skeleton Figma UI library up to date.

+ +## How to update the library + + + + ### Download the latest version of the Skeleton Figma UI library + + Download + + + + ### Import the new version to your Figma library + + 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. + Import + + + + ### Publish new version + + Double-click the new version of Skeleton v3 Figma UI Library to open it. + +

At the top left, next to the library file name, click the ⁵ icon and select `Publish library…` ⁶. In the modal, click `Publish` ⁷ and wait for the library to finish publishing.

+ Publish library + + + + ### Swap libraries + + Open the project that uses the old version of Skeleton v3 Figma UI library. Open the `Assets`⁸ tab and click on the ⁹ icon to open the `Manage libraries`¹⁰ popup. + + In the `Libraries added to this file` section, select the old version of the Skeleton v3 Figma UI library¹¹. + Publish library + +

Click the `Swap Library`¹² button in the bottom right corner of the popup.

+ Publish library + +

In the top right corner of the popup, click `Choose library`¹³, select the latest Skeleton v3 Figma UI library¹⁴, and then click `Swap library`¹⁵.

+ Publish library + +

Your library will be updated, and all components using the Skeleton Figma library will refresh automatically.

+ + + +--- + +### Remove previous version + +After updating the Skeleton Figma library, please remove previous versions. Keeping multiple versions can create multiple copies of the same components, leading to design inconsistencies. + +Open the project that utilizes the old version of Skeleton v3 Figma UI library. Open `Assets`¹ tab and click on ² icon to open `Manage libraries` popup. + +In the `Libraries added to this file` section, click the `Remove`³ button next to the old version of the Skeleton v3 Figma UI library. + +Publish library + +--- + +## Guides + + diff --git a/sites/next.skeleton.dev/src/images/get-started/figma/components.png b/sites/next.skeleton.dev/src/images/get-started/figma/components.png new file mode 100644 index 0000000000..178e1f272b Binary files /dev/null and b/sites/next.skeleton.dev/src/images/get-started/figma/components.png differ diff --git a/sites/next.skeleton.dev/src/images/get-started/figma/components.webp b/sites/next.skeleton.dev/src/images/get-started/figma/components.webp new file mode 100644 index 0000000000..eb532d0bf1 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/get-started/figma/components.webp differ diff --git a/sites/next.skeleton.dev/src/images/get-started/figma/hero-dark.webp b/sites/next.skeleton.dev/src/images/get-started/figma/hero-dark.webp new file mode 100644 index 0000000000..398c63a621 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/get-started/figma/hero-dark.webp differ diff --git a/sites/next.skeleton.dev/src/images/get-started/figma/hero-light.webp b/sites/next.skeleton.dev/src/images/get-started/figma/hero-light.webp new file mode 100644 index 0000000000..0fde2e3417 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/get-started/figma/hero-light.webp differ diff --git a/sites/next.skeleton.dev/src/images/get-started/figma/hero.webp b/sites/next.skeleton.dev/src/images/get-started/figma/hero.webp new file mode 100644 index 0000000000..a10ab5a346 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/get-started/figma/hero.webp differ diff --git a/sites/next.skeleton.dev/src/images/get-started/figma/plugin.png b/sites/next.skeleton.dev/src/images/get-started/figma/plugin.png new file mode 100644 index 0000000000..dabb001bdc Binary files /dev/null and b/sites/next.skeleton.dev/src/images/get-started/figma/plugin.png differ diff --git a/sites/next.skeleton.dev/src/images/get-started/figma/plugin.webp b/sites/next.skeleton.dev/src/images/get-started/figma/plugin.webp new file mode 100644 index 0000000000..8a67f85e68 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/get-started/figma/plugin.webp differ diff --git a/sites/next.skeleton.dev/src/images/get-started/figma/tutorials.png b/sites/next.skeleton.dev/src/images/get-started/figma/tutorials.png new file mode 100644 index 0000000000..bccf1f8f2f Binary files /dev/null and b/sites/next.skeleton.dev/src/images/get-started/figma/tutorials.png differ diff --git a/sites/next.skeleton.dev/src/images/get-started/figma/tutorials.webp b/sites/next.skeleton.dev/src/images/get-started/figma/tutorials.webp new file mode 100644 index 0000000000..7b15bf5cf6 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/get-started/figma/tutorials.webp differ diff --git a/sites/next.skeleton.dev/src/images/get-started/figma/ui-kit.webp b/sites/next.skeleton.dev/src/images/get-started/figma/ui-kit.webp new file mode 100644 index 0000000000..3f87edbcec Binary files /dev/null and b/sites/next.skeleton.dev/src/images/get-started/figma/ui-kit.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/01_createNewProject.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/01_createNewProject.webp new file mode 100644 index 0000000000..6794a3a804 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/01_createNewProject.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/02_importProject.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/02_importProject.webp new file mode 100644 index 0000000000..7044384247 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/02_importProject.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/03_publish.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/03_publish.webp new file mode 100644 index 0000000000..a0b393539c Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/03_publish.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/04_createNewFile.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/04_createNewFile.webp new file mode 100644 index 0000000000..00d77bcbcb Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/04_createNewFile.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/05_selectLibrary.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/05_selectLibrary.webp new file mode 100644 index 0000000000..e59abf80dc Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/05_selectLibrary.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/06_useLibrary.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/06_useLibrary.webp new file mode 100644 index 0000000000..ea414ad06d Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-1/06_useLibrary.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/01_openProject.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/01_openProject.webp new file mode 100644 index 0000000000..4b36e98a66 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/01_openProject.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/01_openSkeleton.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/01_openSkeleton.webp new file mode 100644 index 0000000000..d948aac99a Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/01_openSkeleton.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/02_openThemePlugin.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/02_openThemePlugin.webp new file mode 100644 index 0000000000..8fc3f3aeb4 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/02_openThemePlugin.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/02_setStage.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/02_setStage.webp new file mode 100644 index 0000000000..c430047da9 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/02_setStage.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/03_addNewTheme.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/03_addNewTheme.webp new file mode 100644 index 0000000000..d133f98013 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/03_addNewTheme.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/03_switchTheme.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/03_switchTheme.webp new file mode 100644 index 0000000000..be6b50ea76 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/03_switchTheme.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/03_switchThemeResult.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/03_switchThemeResult.webp new file mode 100644 index 0000000000..8533a9a4e9 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/03_switchThemeResult.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/04_selectTheme.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/04_selectTheme.webp new file mode 100644 index 0000000000..dafc5dc916 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/04_selectTheme.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/04_switchColorScheme.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/04_switchColorScheme.webp new file mode 100644 index 0000000000..d14a05403e Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/04_switchColorScheme.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/04_switchColorSchemeResult.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/04_switchColorSchemeResult.webp new file mode 100644 index 0000000000..6107fefd2b Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/04_switchColorSchemeResult.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/05_copyTheme.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/05_copyTheme.webp new file mode 100644 index 0000000000..4630ffe26a Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/05_copyTheme.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/06_pasteTheme.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/06_pasteTheme.webp new file mode 100644 index 0000000000..04118d6b82 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/06_pasteTheme.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/07_publish.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/07_publish.webp new file mode 100644 index 0000000000..a5df7f5964 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/07_publish.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/07_publishUpdates.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/07_publishUpdates.webp new file mode 100644 index 0000000000..d9d4e0d99f Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-2/07_publishUpdates.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/02_import.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/02_import.webp new file mode 100644 index 0000000000..373e81daa6 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/02_import.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/03_publishLibrary.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/03_publishLibrary.webp new file mode 100644 index 0000000000..83fbb5bcd5 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/03_publishLibrary.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/04_openFile.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/04_openFile.webp new file mode 100644 index 0000000000..826b05d31d Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/04_openFile.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/04_selectNewSkeleton.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/04_selectNewSkeleton.webp new file mode 100644 index 0000000000..ba0aaac214 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/04_selectNewSkeleton.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/04_selectSkeleton.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/04_selectSkeleton.webp new file mode 100644 index 0000000000..52e4faf924 Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/04_selectSkeleton.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/removeOld.webp b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/removeOld.webp new file mode 100644 index 0000000000..fa7fb070fc Binary files /dev/null and b/sites/next.skeleton.dev/src/images/tutorials/figma/chapter-3/removeOld.webp differ diff --git a/sites/next.skeleton.dev/src/images/tutorials/figma/skeletonFileIcon.svg b/sites/next.skeleton.dev/src/images/tutorials/figma/skeletonFileIcon.svg new file mode 100644 index 0000000000..c1177c7e87 --- /dev/null +++ b/sites/next.skeleton.dev/src/images/tutorials/figma/skeletonFileIcon.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/sites/next.skeleton.dev/src/pages/figma/index.astro b/sites/next.skeleton.dev/src/pages/figma/index.astro index 86b0868fb0..7f7bfa81ae 100644 --- a/sites/next.skeleton.dev/src/pages/figma/index.astro +++ b/sites/next.skeleton.dev/src/pages/figma/index.astro @@ -5,6 +5,17 @@ import LayoutRoot from '@layouts/LayoutRoot.astro'; import Header from '@components/docs/Header.astro'; import Footer from '@components/docs/Footer.astro'; +import FigmaBuyNow from '@components/docs/FigmaBuyNow.astro'; +import NavGrid from '@components/docs/NavGrid.astro'; + +import { Image } from 'astro:assets'; +import ImgHeroDark from '@images/get-started/figma/hero-dark.webp'; +import ImgHeroLight from '@images/get-started/figma/hero-light.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, Shapes, SwatchBook, MessageCircle } from 'lucide-react'; + const layoutProps = {}; --- @@ -12,10 +23,149 @@ const layoutProps = {};
-
+
-

Coming soon!

+
+

Design faster. Align better. Deliver consistently.

+

+ Turn Figma into your superpower for creating apps that look stunning, align with clients and developers, and stay on-brand with + ease. +

+
+ +
+ + Get Access + +
+
+ + hero +
+
+

Are you struggling to create consistent designs?

+ +
+
+
+ +

+ Spending hours recreating components in Figma? +

+
+
+ +
+
+ +

+ Finding it + hard to align with developers or clients? +

+
+
+ +
+
+ +

+ Unsure how your design will look with a custom theme? +

+
+
+
+ +
+

You’re not alone. We know these frustrations, and we’re here to help.

+
+ +

We streamline your workflow by bringing design, development and your customers into perfect harmony.

+ +
+
+
+ components +
+
+
Align quickly with prebuilt Skeleton components.
+

+ All components from Skeleton have been recreated in Figma, saving you time and helping establish consistency. +

+
+
+ +
+
+
Ensure consistency with theme imports and customizations.
+

+ Import your custom Skeleton themes directly into Figma using our plugin. Switch between dark and light modes or preview your + design with your theme instantly. +

+
+ +
+ components +
+
+ +
+
+ components +
+
+
Iterate faster with tutorials designed for every step of the design process.
+

Learn how to:

+
    +
  • Customize themes for your brand.
    • +
  • Create wireframes for quick iteration and client feedback.
    • +
  • Design developer-ready assets to streamline handoffs.
    • +
+
+
+
+ +
+
+ "...the Figma is very well put together and the most robust that I could find out of all the UI kits so our company chose to go + with Skeleton 🙂" +
+ +
+ Rob, Skeleton community member + Join over 4500+ people + + Get access now + +
+
+ +

Get Access

+ + + +

+ Created with ❤️ from Micha, + Bohdan, and Skeleton Labs. +

+ +

Guides

+ + +