Other documents:
📔 Getting Started
👷🏻 In deep
📣 Modify component
📂 Deploy components
📝 Document component
Steps to Create Components in Figma:
- Design the Element:
Start by designing the element you want to make into a component. This can be anything from a button to a card to a drop down menu.
- Select the Element:
Once you have designed the element, select it by clicking on it in the Figma canvas.
- Create a Component:
At the top of the screen, you will see a button called "Create Component". Click on it. You can also use the keyboard shortcut "Ctrl" + "Alt" + "K" (Windows) or "Cmd" + "Option" + "K" (Mac).
- Name and Save the Component:
You will be prompted to give the component a name. Choose a descriptive name that indicates its function. Once you have named the component, click "Create".
- Access the Master Component:
You will now see that the original element has become a master component. You can always access this master component in the "Assets" section of the layers panel.
- Instance Customization:
You can customize individual instances of the component using overrides. For example, you can change the text or colors of an instance without affecting the master component.
- Automatic Updates:
Any changes you make to the master component will automatically be reflected in all instances of the component in your design.
Nomenclature used for component naming
PascalCase" style is another naming convention used in programming and software development. Unlike "camelCase", in "PascalCase" the first letter of each word is capitalized, including the first word. This is similar to how proper nouns are spelled.
For example, in "PascalCase", the phrase "user name" would be written as "UserName".
This naming convention is also commonly used to name variables, functions, methods, methods, properties, and classes in programming. Like "camelCase", it helps make names more readable and avoids the use of spaces or special characters that can cause problems in some programming languages.
By applying "PascalCase" in the context of creating components in Figma, you could use it to name components, pages or any other important element in your design system. For example, if you have a header component, you could name it "Header" in "PascalCase".
In summary, "PascalCase" is another naming convention that is widely used in software development and can be applied in digital product design and development contexts to maintain clear, consistent and easily identifiable names.