July Update [V2.5]

Introduction

Hello everyone!

Welcome to the July update. If you're new and don't know how this works—every month at Koala UI, we release an update where we incorporate new layouts, fix issues, and make improvements.

As always, I bring you this month's update.

Before starting with this month's update, I want to thank all the new users who are joining us every month. It makes us very happy to see the new websites you are launching thanks to what we are creating at Koala.

What’s new in June?

🤝 UI Kit + Pages & Blocks are MERGED

This was something many of you had been requesting. Until now at Koala, we had:

• UI Kit
• Pages & Blocks

In this July update, we have decided to combine them into one. Why? Basically, because to use everything correctly, you need Figma's premium plan, and not all Koala users are willing to pay for Figma Premium.

Combining everything into one will make it so that you only need one file instead of having to manage two different ones, and you can use the document with Figma's free version.

All styles, variables, and basic components have been moved to a single document that we have named “Koala UI” with nothing else added.

Important message!

P.S.: It is possible that during the migration, some styles may not have fully synchronized. We have reviewed it in detail, but something might have slipped through. If there is anything that does not work as expected, please report it as soon as possible, and we will release an update during the week!

Introducing typography variables

We have linked the typography with the variable system in Figma. However, we have only linked the typeface family.

This means that with one click, you can change the font style in the body text and headings.

Simply go to local variables, select typography, and from there, enter the name of the font. If you want to use Roboto, you need to type "Roboto"; if you want to use "DM Sans," you need to type "DM Sans."

Make sure to write the name exactly as it is to ensure the string works correctly.

💡 Added the "Remember Me" Checkbox in Modals

This is a small detail, but we want to give you as many customization options as possible. From now on, you have the option to include a "Remember Me" checkbox in this modal component.

👨‍👩‍👧‍👦 3 New Team Section Added

🖌️ New portfolio layouts

You had requested it a lot, so here it is. Even though Koala UI is focused on landing pages designed for marketing performance, we wanted to provide this feature for you.

↘️ Introducing swipers

We are introducing swipers for the first time in our product. Swipers are elements that indicate continuation. You will see these in most sections where the content overflows, but their use is completely optional. You can choose whether to display them or not, and you can even change their style.

🏹 Swiper arrows to testimonials

As mentioned above with the swipers, we have introduced swipers in many components, including testimonials.

You can choose to hide or show the arrows depending on whether you want the user to interact with these elements.

💡 Introducing Popovers in Breadcrumbs

💖 New Features Section

🖼️ New logos section

⁉️ New state for toggles

We are introducing the "focused" state for toggles.

📚 New pagination items

❌ Added a closable icon to all banners

📅 Introducing 3 New Timeline Section

🖼️ 3 New Gallery Section

🪄 We have added softened shadows to buttons and inputs

👆🏻 Introducing Voting Section

🏠 Added 2 new home pages

⚠️ Added new Colored Alerts

🚦 Added CTA’s to features + Boolean properties

Now you can toggle on or off whether you want the CTA & logos to be visible in the styles panel.

🪄 Tiny but Mighty Changes

• Fixed an issue with login modals: a missing property has been resolved.
• Improved the spacing between testimonials and the forward and backward arrows.
• Adjusted the height of toggles to fit within a 24px box for better alignment with typography.
• In login modals, the disabled state for buttons has been removed; now buttons are always enabled. When there is an error, the input turns red with a tooltip indicating the issue.
• Adjusted the spacing of checkboxes and radio buttons from 8px to 16px to improve readability in smaller dimensions.
• Renamed several layers for clarity.
• Enhanced naming conventions in the side properties panel for blog articles.
• Reordered dynamic links and author information in the sidebar of blogs for a better user experience.
• Added a boolean option (true or false) for tooltip arrow visibility.
• Added primary and secondary variants to alerts.
• Introduced a new pagination item.
• Ensured consistent distances for toggles, checkboxes, and radio buttons.
• Implemented new styles for cookies.
• Simplified toggle variants by removing some options.
• Added a new team card item.
• Adjusted avatar sizes from:
  • 16px and 14px to
  • 18px and 16px