Ex No: 09

Create a sample library for that product (Mood board, Fonts, Colors Based on UI
principles)
AIM
To create and publish sample library for that product (Mood board, Fonts, Colors
Based on UI principles.
LIBRARY:
A UI library, in the simplest terms, is a collection of materials, or components, that
you can readily use or modify to meet your needs.
In Figma, a library is a collection of design assets, like components, styles, and
variables. These design assets live in a single file, but can be reused across different files or
projects. People often use libraries for sharing common design elements, like buttons, icons,
pieces of UI, colors, or values for certain properties.
At the moment, there are a few ways to incorporate design system documentation in your
Figma libraries:

➢ Give styles, components, and variables meaningful names

➢ Add short descriptions to styles, components, and variables
➢ Add links to external documentation to components
➢ Add descriptions to any library updates
Name:
Naming is very important to identify the style or components in library. You can
name the style and other components based on your needs. Other teammates can picks the
components or styles easily by using their names.
Description:
You can also add descriptions when publishing updates to your library. These
descriptions show in both the library modal and in the file’s version history and are great for
communicating high-level changes to your library.
Properties:
Figma allows you to edit the properties (like color, font, etc.,) of a style or
components even after you have added to the library.
Also you can edit the name and description of the style whenever you want to
change.
 1. STEPS TO CREATE AND ADD THE STYLES LIBRARY:
Create a new file and publish it as a Library. Once a new file is created, click on the
Assets tab, click the Library icon, and then click Publish. This publishes the Styles and
Components in the library file so they can be used in other files.
➢ Select the object’s style and click the “Four Dot” button in right side panel.
➢ Add Style by the “+” symbol on the dialogue box.
➢ Give meaningful name and description to that style to be added in library.
➢ Finally the style was created and added in the library by clicking “Create style”
button.

OUTPUT:
CREATE STYLE AND ADD TO LIBRARY

2. STEPS TO APPLY THE STYLE TO OTHER COMPONENTS BY USING LIBRARY:

➢ Create an object and go to properties of an particular object.

➢ To change the color of an object as exact color of an already existing object.
➢ Ensure that color of an already existing object was created and added to the library.
➢ Pick the library from the right side panel.
➢ It show number of styles were created
➢ You can pick the styles what you want to apply for n object.
OUTPUT:
GET COLOR FROM LIBRARY

APPLY THE COLOR FROM LIBRARY

 3. STEPS TO PUBLISHING LIBRARY:
Create a new file and publish it as a Library. Once a new file is created, click on
the Assets tab, click the Library icon, and then click Publish. This publishes the Styles and
Components in the library file so they can be used in other files.
1. Go to “assets” in Right side panel.
2. Click an Book symbol or “Exploring library”.
3. It shows the all the available styles in library and Publish button.
4. The libraries are published after clicking the button “PUBLISH”.

OUTPUT:

RESULT:
Hence the creation and publishing of sample library for that product was
successfully executed with help of the tool called figma.