Sync UI Kit with Pages & Blocks
.jpg)
Introduction
Before we begin, it's important to mention again that Koala operates with 2 separate files: the UI Kit and the Blocks & Pages. We recommend reading the previous article "get started" to understand why.
That said, in Koala, we use the Libraries format provided by Figma (you can read its documentation at this link). Therefore, what we have done is establish the UI Kit as a public document, which will affect all other documents with all styles and components.
Therefore, what we recommend is creating a team within Figma, and within the UI Kit document, click on "publish". Subsequently, in the file where you want this document to apply, click on "add". We'll explain step by step how to do it.
UI Kit · Publish Changes
As you work, you'll realize that you'll need to make certain changes or customize it to your needs. Therefore, afterward, you'll need to publish the changes so that they apply to all documents.
Once you've published the changes in the first document, in the document where the changes will apply, you'll see a message like "component updates available," followed by "update."
It's always advisable to update to the latest version; otherwise, you'll be working with an outdated version in other documents. For small changes, working with an outdated document isn't a problem, but if the changes you've published include significant alterations in measurements, sizes, or colors, updating may cause the design to change radically.
Therefore, make sure to always have the document updated and that there are no more options to "publish" in the library. You'll notice it's the latest version precisely because the document won't let you publish changes anymore.
If you've made changes and it won't let you publish them, and thus suspect the document is bugged, we recommend:
- Using the desktop version of Figma.
- Restarting the document.
- Checking the status of Figma; it might be down.
How to sync Koala UI into a project (all documents)
Finally, it's important to mention that when working on a project and wanting to use Koala UI, what you'll need to do is import both libraries into a project, both the UI Kit and the blocks. It's necessary to always use both separately.
As we've mentioned several times, we separate them because you may not be interested in using the pages and blocks and only want the basic styles and components. But if you do want to use the pages and blocks in a project, you'll need to publish these two documents as libraries together.
Unpublished Components
In Koala UI, we are utilizing the basic principles of Figma components. Whenever you have any doubts, we recommend consulting Figma's official documentation.
If you read Figma's documentation, you'll see that there's a property for components called "unpublish components," which allows you to precisely omit certain components, not publish certain components.
Components are divided into structures:
- Atoms
- Molecules
- Organisms
- Pages
- Templates
In Koala, we're only publishing molecules, organisms, and pages in the library. We're not publishing atoms because then the library would become too large.
In other words, we'll show you an example of what would be published and what wouldn't be.
For example, in a real scenario, when we want to use a radio button, we always use the radio button with a label. We never use just the circle; it's always followed by something. Therefore, the circular component, which is just the circle, is not being published in the library. Only the radio button group, which is what's actually used, is published.
If you look through the entire document, you'll notice that certain components have "_" or "." in front of them. According to Figma's documentation, if you use these two resources, "_button" or ".button", by putting them in front, you'll exclude the component from the library.
And here we show you an example of what would indeed be published.
Why do we explain this? Simply because, as we've mentioned, there are components that aren't being published. So, when you're in the project and trying to import components from the library, if you don't see the component available for import, it's most likely because that component has an "_" in front of it, meaning you're trying to use a component that is outside of the library.
If you want to use that component, it's as simple as going to the original component, checking the name, and removing the "_" or "." in front of the name. Then you publish the changes, update the changes in the other document, and you'll see it's available.
If you don't see certain components, it's because we've deemed they shouldn't be in the library but rather within a group. You can adjust this as you like.