Best Practices Flashcards
What are Components?
These are reusable objects in your design. They can be as simple as an individual button, or as complex as an entire navigation header (comprised of instances of other components like logos, avatars, buttons and menu items).
What are Component Instances?
Once you make something a component, you can create instances of it, which are essentially connected copies of that component—so if you update the design of the original component, the instances will reflect that change.
For example, if you change the color of a button component to red, and then publish those changes, any file that used instances of that button will get a notification. They can then choose whether to update their instances to red.
What are Styles?
These are reusable collections of properties that you can easily apply to elements in your design.
In Figma, you can create styles for text, colors, grids, and effects like shadows and blurs. If components are reusable objects, think of styles as the attributes you might apply to those objects.
What are Libraries?
In Figma, you can share components and styles by publishing them. This turns your file into a library, so you can use instances of those components in other files.
Updates to the design of your components can be published and pushed out to other documents where instances of your components live. Users have the choice to accept those updates or continue working with an old version (if required).
You can create libraries for anything you need to repeatedly use.
How do you structure your components atomically?
When you begin creating high-quality components, especially with the intention of sharing them, consider starting with smaller atomic components that can be used as building blocks. You’ll notice patterns in your design that you want to be consistent. For example, the shape of a card, or the shape of a button.
A good strategy is to turn these repeated elements into a component that you can reuse by nesting instances of them inside other components. Imagine turning a simple button shape into a component (to be used as an atom), and nesting it within every button component that you create. The result: all buttons use the exact same starting point; if that shape were to change, it can be updated by changing that single atomic component.
y prefixing component names with a ‘_’ or a ‘.’, they will be…
excluded from publishing
By nesting of the original component, into another main one,…
you can override the properties and have variations that stay connected as the design evolves.
The text override is preserved when switching between related components if
text layers are named the same.
What are Effect Styles?
Effect styles allow you to consistently reuse effects like layer blurs, background blurs, drop shadows, and inner shadows.
For example: the Material design system includes an entire set of drop shadows to coincide with different layers that are stacked in the UI—shadows are repeatedly used used to create the effect of different “elevations” tied to certain elements like modals and buttons.
What are Grid Styles?
Often overlooked, grid styles can help standardize layout grids across multiple projects and viewports. If you have specific grids you use from desktop down to mobile phones, consider defining grid styles so they can be easily shared.
What are Style Names?
Style names are critical for alignment with predefined properties in your design system.
You can also use prefixes separated by a forward slash in the names to
group styles in the style picker (note: you can only add one level of hierarchy).
For example, if you add “Alerts/” before several styles, they will all appear together under the subheading “Alerts”.
You might use these prefixes to:
group colors by hue group colors by theme or type group accessible colors together group type styles by font family or size group grid styles by viewport size
What are Style Descriptions?
Add descriptions to your styles—these will appear in tooltips in much the same way they do for components. The descriptions can help clarify their intended usage by surfacing additional information to help designers select the right style.
What are Image Fills for Placeholder Images?
You can create styles for image fills. Lets say you have some user avatars, or placeholder photos you commonly use. You may not know what shape, aspect ratio, or size they will need to be applied to. By creating image fills, you can easily apply them to any shape.
