Hello everyone, I'm happy to share an update on X UI KIT, our newest UI kit for Framer.

In this update, we've reworked the core components and implemented suggestions from our beta users. We've also added a new Framer template to help start a blog or a portfolio site.

Here's a breakdown of what's new:

Improved Components

We've refined our core components, including Tabs, Buttons, Checkboxes, Radios, and Toggles. New components are now much more usable. This means more intuitive snapping within the Framer layout and easier-to-change component properties.

New Pricing Component

Easily add professional-looking pricing sections to your sites with the new pricing component.

The Pricing includes adaptable card designs with variants to display your price packages clearly and in style.

New Navigation Dock Component

The Dock component adds bottom navigation to your Framer site. It consists of multiple connected buttons that help users navigate.

You can adjust the individual state and the number of buttons available using variants.

Smart Theme Image Component

This new code component handles images in light and dark modes. It automatically switches images based on the user's active theme. If your template or site supports color themes, you will have even more flexibility when styling images for each theme.

You can see this component in action on our website by toggling your operating system color theme.

Text Styles Improvement in X UI KIT

Finding and applying text styles is now more efficient with X UI KIT. We've implemented a clearer hierarchy, organizing styles into dedicated folders instead of one long list.

Each group serves its purpose in the UI kit, playing a crucial role in the component's structure.

There are four major Text style groups: Buttons, Titles (H1...H6), Body text, and Captions. Every group's name is self-explanatory; however, the caption might be a tricky one, as this group is used only for text styles that won't adapt to responsive breakpoints.

Caption styles can ensure that text elements look the same across your entire site, allowing you to change the style definition only once for all instances. This is very helpful when working with Framer.

New Product: Groenn - Blog & Portfolio Template

We've built our first template to showcase the power of X UI KIT!

Groenn provides a minimal and sleek foundation for your blog or portfolio Framer site.

It includes multiple CMS collections for easy content management, and it is structured as a proffesional blog with implemented SEO best practices for better ranking. The new template uses a calm color palette for comfortable reading on any screen, making Groeen a great foundation for your blog or personal website.

The template is built to demonstrate how easy, fast, and flexible X UI KIT is with only a few components.

X UI KIT keeps getting better! This is just the first of many new templates. Get your Version of X UI KIT now and receive all future updates and templates for free.

Preview Groenn Template ↗

Purchase X UI KIT

Free Version Updated 🎁

The free Version of X UI KIT has also been updated with new components and core improvements. Download the free UI Kit and explore the changes right away.

Try the Free Version ↓

We look forward to what you create with X UI KIT!

0 comments

A Better Way to Design Tables in Figma

Parametric Components in Figma

Frames X v3.0: React Components and Design Tokens 🚀

Frames X v2.9: Leveling-up Figma UI Kit ⇪

Frames X v2.9: Leveling-up Figma UI Kit ⇪

See all posts from Dmitriy Bunin