NEXT Figma Documentation and Guide #2899
Conversation
Co-authored-by: Bohdan Karpliak <[email protected]>
|
|
@mmailaender is attempting to deploy a commit to the Skeleton Labs Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
lucide-svelte was making problems if used in .astro file
Modify Figma sections, implement Image component
|
We've changed the |
|
Pull request is ready for review. |
There was a problem hiding this comment.
@mmailaender Again this may look like a lot, but it's a lot of little things. If you have any questions about this feedback please let me know here or in Discord.
I have to say, everything is looking great! Tons of information and screenshots is always nice. I'm sure users will really appreciate this!
As each item is completed, hit the "resolve" button below each thread. Or if you don't see that, just leave a comment and let me know when the work is done and I'll resolve each item for you. That'll help keep track of what is or isn't implemented yet.
| import ImgTutorial from '@images/get-started/figma/tutorials.webp'; | ||
|
|
||
| <div class="relative"> | ||
| <Image src={ImgHero} class="rounded-container" alt="hero" /> |
There was a problem hiding this comment.
There's a number of images on all three pages that use transparency. My assumption is this is to try to make the adopt a bit of the theme color. Unfortunately I think we may need to change this as it has two major downsides:
- The text color contrast is not very accessible. We can't bill the Skeleton as an a11y-friendly library if we don't follow our own rules
- Transparency tends to inflate the size of the images.
My suggestion is to go with a fixed/solid background, either pure white or black. That way we can ensure all content within the canvas is legible.
| <div class="relative"> | ||
| <Image src={ImgHero} class="rounded-container" alt="hero" /> | ||
| <a | ||
| class="btn btn-lg preset-filled-primary-500 flex items-center gap-2 whitespace-nowrap absolute top-6 right-6 shadow-lg w-48" |
There was a problem hiding this comment.
The current standard for CTA (calls to action) throughout the documentation is done using primary-filled (a neutral style button). This is the only exception.
Make sure to account for the change to the images to ensure the button remains visible in both light/dark modes. You may need to hardcode a particular set of styles as a one-off here.
There was a problem hiding this comment.
That is interesting. What are your thoughts over having a neutral style button as a CTA?
The CTA is the primary goal what the user should do on the page. In our case it's buying the Figma assets. So having a neutral style button (White and black) leads to no hierarchy differentiation between the CTA and the surrounding content.
Companies that have optimized their CTA color contrast have seen substantial increases in conversion rates:
- Shopify reported a 12% increase in conversions after adjusting their CTA buttons for higher contrast.
- HubSpot experienced a 20% boost in user interactions by using bold orange against a white background.
- Booking.com improved accessibility and conversion rates by 15% through contrasting blue buttons on a white background
There was a problem hiding this comment.
It's not an issue of contrast here. It's an issue of assigning meaning. Neutral doesn't mean low contrast. For example, the "Get Started" button is still clearly visible, right? But we reserve color for even more critical items on a level above that. Such as the announcement, various alerts, etc.
It's similar to the comment I made the other day, we can't make every single action on the page the "most important" on the page. Otherwise nothing is important. Instead, think in terms of levels or grades.
- Most critical items (announcements, alerts, etc) - colored and really catch your eye
- Positive actions (CTAs) - neutral, but still high contrast
- Neutral actions - still clearly visible, but not the most attention grabbing
There was a problem hiding this comment.
From a design perspective we're also trying to keep a cohesive design. We need the Figma section to match the aesthetic of the rest of the app. If we decide to change the aesthetic, we'll do it across the board. Not at a one-off.
There was a problem hiding this comment.
I appreciate the structured approach to design coherence across the app and understand the intent behind using neutral styles for positive actions. My main point is that, especially for CTAs driving conversions, a colored primary button has shown to be highly effective in boosting user engagement.
As noted, companies like Shopify, HubSpot, and Booking.com have seen clear conversion improvements with distinct, colored CTAs, rather than neutral styles, helping those actions stand out as a focal point. Since our primary goal on the Figma page is conversion, perhaps it’s worth exploring how a similar approach could benefit us here. Would love to hear your thoughts on this!
There was a problem hiding this comment.
I do believe the Figma page is already fairly unique. Lots of big images, the "buy now" panel looks great, and I don't think anyone will have any trouble locating how to purchase if they are interested. But I'm happy to work with you on that once I have more bandwidth.
I have at least one more cosmetic pass in mind before launch. The homepage especially, which is currently a placeholder. We'll have something much more detailed, much informative and interactive, not unlike the v2 site (but hopefully even better). That can also include an additional call to action pointing at the Figma section.
| import ImgPlugin from '@images/get-started/figma/plugin.webp'; | ||
| import ImgTutorial from '@images/get-started/figma/tutorials.webp'; | ||
|
|
||
| <div class="relative"> |
There was a problem hiding this comment.
The first thing I want to know as a user is what this page all about. For example, see the large prominent text on the Layouts page. It would be great to have something like this. A quick suggestion:
"Skeleton Labs has coordinated with professional designers to provide a premium Figma UI Kit. This implements all available Skeleton features and components, while also providing a dedicated theme import feature to help your designers get started quickly."
(feel free to improve as desired)
| <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`⁴. |
There was a problem hiding this comment.
I feel like we're way overusing the code highlighting, which feels very busy and a bit harder to read. Basically: "if everything is important, nothing is". So I'd suggest trying to strip this down to simpler and more straight forward text. Maybe use italics instead?
Additionally the super/sub text should probably be markup rather than unicode characters. This isn't possible in markdown, but MDX supports HTML, which should enable:
<sup></sup><sub></sub>
Alternatively, I think the small numerals may get lost with certain fonts and font sizes from various themes. Maybe consider rewriting using bulleted lists:
Follow these steps in Figma:
1. Go to the Home icon (top-left).
2. Select the All Projects option from the left sidebar.
3. Select Project from the right-side of the page.
4. Provide your project name in the dialog prompt.
There was a problem hiding this comment.
-
Highlighted text can be unfamiliar at first, but it's a best practice that we're using to improve cross-reading and teach
terms.The given example is 30% highlighted, meaning your brain can save up to almost 70% capacity during cross-reading (Depending on whether you read it the first or second time). -
The superscript numbers are on purpose, as they should be a subtle connection to the images. The idea is to preserve natural reading flow without being overly instructive. I would like to gather more feedback from the community and then recycle.
sites/next.skeleton.dev/src/content/docs/tutorials/figma/chapter-2.mdx
Outdated
Show resolved
Hide resolved
sites/next.skeleton.dev/src/content/docs/tutorials/figma/chapter-2.mdx
Outdated
Show resolved
Hide resolved
sites/next.skeleton.dev/src/content/docs/tutorials/figma/chapter-2.mdx
Outdated
Show resolved
Hide resolved
|
|
||
| ## Import Custom Theme in Project | ||
|
|
||
| ### Prerequisites: |
There was a problem hiding this comment.
Given we're going to have so many chapters and this is meant to be read in a linear fashion, the requisite list feels redundant. If a step is optional, then indicate it plainly upfront. We do this with titles sometimes too so it's visible in the Table of Contents:
1. Do Something
2. Optional: Do Something Else
3. Wrapping up
There was a problem hiding this comment.
Most people do not follow orders (except you enforce it which also increases churn) instead they are problem/affect driven. So we're designing our tutorials in a way to reflect that people jumping directly to e.g. chapter 4 without reading the chapters before (Because the headline catches them, or they searched for something specific):
- Every chapter has eventually a prerequisite section
- only a limited amount of chapters are a hard prerequisite
- we have implemented an additional fallback system to cover people who jump directly to e.g. Chapter 4 without reading e.g. Chapter 3.
It will start making a lot more sense with our upcoming tutorials, so stay tuned 🙂
Description
Adjust the Figma Landing page + add Tutorials to the docs to prepare for the v3 launch.
Progress
Figma UI Kit for testing: https://discord.com/channels/1003691521280856084/1217864742643957832/1303390206946316310
Updates
.pngimages to.webpto 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).The following tutorials are not MVP relevant and will be delivered afterwards:
Checklist
Please read and apply all contribution requirements.
docs/,feature/,chore/,bugfix/nextbranch (NEVERdevormaster)pnpm checkin the root of the monorepopnpm formatin the root of the monorepopnpm lintin the root of the monorepopnpm testin the root of the monorepo/packageprojects, please supply a ChangesetChangsets
View our documentation to learn more about Changesets. To create a Changeset:
pnpm changesetand follow the prompts