When creating a component, text properties can indicate which text layers should or can be edited by the designer who’s using the instance in their work. Here’s what that looks like in practice: Text Properties (new ✨) As a result, the instance swapping action is surfaced within the Properties Panel as soon as the button is selected, and there’s no longer a need to deep-click into the button just to swap out the icon. Instance swap properties allow you to now indicate that the icon can be swapped for another icon. Here’s a quick example of what this new property allows for: let’s imagine you’re creating a button that has an icon inside, and that icon is an instance, perhaps from a larger component library. Instance swap properties, which are part of the new component properties feature, allow the creator of a component to easily indicate which instances used within the component can be swapped. If you’re working with a button component, an example of a property might be state with corresponding values such as default or hover. Properties are the controllable variables for the component, while values are the options available within each property variable, and there can be an unlimited number of each. They’re the items responsible for creating an individual component within a variant group, and as a part of the variant, two modifiers can be assigned: properties and values. Variant properties represent the variants that many of us have come to know and rely on. Here are the four types: Variant Properties There are now four different property types to work with when creating a component set, and while each one provides something unique and powerful on its own, they can also be combined! What’s so great about each of these is that they can be configured directly at the instance level, and for all types except variant properties, they can be created without needing an actual variant group. If you’re feeling confused, try not to worry! To help clear this up, let’s talk about the different types of properties and how they can each be used. What has helped me the most has been to think of this new feature as an additional way, not a separate way, to further organize and create components and variants that scale with the library and system. In the past few weeks, I’ve had the chance to become more comfortable creating components that contain component properties. I asked myself if component properties should be used instead of the previous variant experience. Component properties or variants?Īdmittedly, I had some trouble getting started with using component properties because I wasn’t sure how to best think about the new feature in comparison to the previous experience of using and creating variants. At its core, reducing this complexity is what component properties aim to help address. Even for a component as simple as a button, tens, if not hundreds, of combinations may be required. The complexity is manageable for something like that notification component, but it doesn’t take much to imagine just how many variants might be required for components that contain more visual items with more configurable states. With that component, six variants were then necessary: one for each of the three states, and each state needed both a close button is visible, and a close button is hidden option. For example, imagine you were working on a notification component with success, warning, and error states, and you wanted to include the ability to either hide or show a close button. Variants are a handy tool to help designers create extensive and customizable component libraries within the design tool, but because each variant had to visually exist and therefore be represented on the canvas to exist, much more component maintenance and overhead were required. Variants provided the ability to turn several separate but related components, into a single asset, with properties and values that can adjust at the instance level. Figma’s introduction of variants changed how many designers, including myself, approach creating components.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |