Introduction to Figma Libraries
Figma Libraries is just like a collection of different type of component and styles which we can use in any other designing project work any time. In Figma you can publish these components and styles for using them and then you can share them also. You can generate multiple instances of one component in figma Library and update them by single master component. Libraries are necessary for the maintenance of design component for long term with ease and with Figma libraries you can do this.
Main Terms for Figma Libraries
We have two main terms for figma libraries.
1. Component
Component is reusable objects which you use in your design. It may be simple same as a button or complex as whole navigation panel (which includes components like icon or buttons of avatars, logos and other menu buttons). These component works similarly as symbols of sketch software or same as other designing tools but the component of figma library has their unique features also.
You can turn following things into component of this library:
- Device mockups.
- UI components.
- Company logos and brand assets.
- Icons.
- Platform OS components (it includes Android, IOS, Linux, OSX etc).
- Cursors.
- Flowchart shapes and flow arrow.
And many more things you can use as components.
Component Instances: Once you use any thing as components and made that thing as component of library with your required parameters then in future you may need some changes in your component according to need of time so if you have created Instance for that component then whatever change you made in original component it will also convey to your used component in different project work such as if you change parameters of shape or object which you use as component of library then after publishing your update of changing parameters of object or shape, a notification will reach to the project file which has used this component and then it is designers choice whether he/she want to update that change in their project or not.
2. Style
Style is reusable collection of properties of different elements which we have in our Figma library. You can change style of any text, grids, color or can add effects to any object which make it blur or can add shadow and so on. You can use these components and styles with free tier of Figma as in individual file, with Figma Professional tier you can use it in different files and projects and if you want to use these components across team then you can go with Figma Organization tier.
After having component and style with your desired parameters you have to collect and organize them in right way so that it may become library. The collection of component should be on single page so that navigation of each component will be smooth during our working.
For example, a design library is one of the libraries which must have sample page and design documentation for these component or style. In design document it may have color sample, text sample, and master component and so on.
Steps Need to Create a Figma Library
Given below are the steps that are needed to create a figma library:
10 Online Courses | 7 Hands-on Projects| 100+ Hours| Verifiable Certificate of Completion
4.7
View Course
1. Typography Scale
In this step we focus on the size and line of text according to which text will grow in our system which we will make component for library. Scale of text depends on the end use of it such as for website platform it is usually used big ratio by the web designer and digital products designer go with smaller ratio of text. There is some pixel value for text that is for main title it may be 36 px, for secondary tile it may be 24 px, and for description text we go with 16 px.
2. Color Scheme
In color scheme we choose color for system and for this selection of color we generally use minimum colors so that in future we can handle staff of our design with ease if any changes happen in our library component so we should design our project with four or five colors. We also manage color for User interface as Lighten and Darken color systems and for this purpose we go with Sass functions.
3. Effects
During designing of interface of our project we have to add some effect elements such as some pattern for tabs, shadows for button and many more effect you can add to it. So for this type of elements we create effects component and mange parameters of that effect as per our requirement then make libraries of that element. You can also make changes in these effect elements of libraries same as we can do in color scheme and scale then your changes will update in all elements of different files of project.
After settings parameters of typography scale, color scheme and effects we use them for define Library styles and this is the actual step for creating library. By this step you can use single set of properties for multiple elements.
Conclusion
You can now create components and style for library of Figma which you can use in your different project and can also make changes in original element for fulfilling client’s requirement.
Recommended Articles
This is a guide to Figma Libraries. Here we discuss the introduction, main terms for figma libraries and steps need to create it. You may also have a look at the following articles to learn more –
