Figma Tutorial: Components - The Basics

In this video we'll cover the basics of Components and how they can be a powerful addition to your design workflow.

0:00 - What are components and instances
0:40 - How to create components
1:25 - How to create a component instance
2:00 - How to view components
2:20 - How to use components
2:52 - How to override an instance
3:36 - How to reset instances
3:51 - How to detach an instance
4:23 - How to restore a master component
4:36 - How to resize a component
5:05 - Outro

#Figma #FigmaDesign #FigmaTutorial #Components

[talenodigital]

Wow! Thanks for this two year old resource. I'm just getting started with Figma particularly learning about Design Systems! Oh what a time to be an indie maker! 😊

[paritejdan]

He explained it soooo simple and easy to understand! Great video

[j.]

Best, most simple, easy to understand (and follow) video I have come across on YouTube. Thank you.

[NanditaDa]

Wish I could find all the videos by this particular person. So soothingly organized and explained.

[nahwinchedoe]

Thanks for this great tutorial. Makes my life much easier!

[abbeyyuyingwang]

Explicitly explained! thank you for the video, especially love the review part at the end

[lakshmimadabattula]

Thank you for a detailed explanation and making life easier :)

[divyadsilva]

Love your calm voice and smooth explanation.

[JeanLuemusic]

Thank you sir. You Just Changed my workflow.
This will allow me to work extremely fast. Please make more tips like this. Thank you

[romanscharkov]

I'd be cool to have parameterizable components where you can define typed properties and probably even slots to make components reusable throughout the mockup

[daltanionwaves]

I was going to comment on what a pleasant and concise tutorial this is and then I saw the video is actually from the Figma team... 😶👍 Now it makes more sense. Quality.

[Ivy_Tran]

Vietsub:
Chào mừng bạn đến với hướng dẫn tiếp theo về Figma. Trong video này, chúng ta sẽ tìm hiểu
khái niệm cơ bản về các component (thành phần), chúng ta sẽ tìm hiểu cách chúng có thể là một bổ sung mạnh mẽ cho thiết kế của bạn.


Components là các phần tử giao diện người dùng có thể được sử dụng lại trên các tệp thiết kế của ta
chúng giúp làm cho thiết kế nhất quán hơn và cho phép thực hiện thay đổi
nhanh chóng, bạn có thể tạo một component từ các layer (lớp), group (nhóm) và frame (khung)


Khi chúng ta nghĩ về component, chúng ta cũng cần nghĩ về các instance (thực thể)


Master component (thành phần chủ) hay chỉ gọi tắt là component được tạo trước và chịu trách nhiệm
xác định nhiều style (kiểu) của phần tử giao diện người dùng, một component instance là
sự xuất hiện duy nhất của master component. Khi master component được cập nhật, tất cả
các instance được cập nhật tự động. Để tạo component mới, trước tiên chúng ta cần
chọn các layer được đưa vào. Ở đây, chúng ta có một hình chữ nhật màu cam và một text layer (layer văn bản)
mà chúng ta muốn sử dụng để tạo button component (thành phần nút) mà chúng ta có thể kéo đến
chọn cả hai layer và nhấp vào biểu tượng component trong thanh công cụ để tạo
một component đầu tiên, chúng ta cũng có thể sử dụng phím tắt Option + Command + K hoặc nhấp chuột phải
và chọn "Create component" trong menu.

Trong bảng điều khiển layer, chúng ta thấy
biểu tượng master component màu tím cho biết rằng chúng ta đã tạo một component. Chúng ta cũng có thể

thấy rằng hai layer được lồng trong component mới được tạo.

Bạn có thể có nhiều component trong một tệp. Để xem tất cả các component trong một tập tin,
chọn tab component ở cuối bảng điều khiển layer hoặc sử dụng
phím tắt Option + 2.
Làm cách nào chúng ta sử dụng lại một component? Chúng ta thực hiện việc này bằng cách tạo
một component instance hay nói ngắn gọn là một instance, có một số cách để
tạo các instance từ các component. Sau khi chọn các component, chúng ta có thể tạo
bản sao của một master component bằng cách chọn và sử dụng phím tắt
Command + D, nhấn giữ phím Alt, nhấp và kéo ra một instance từ component.
Sao chép và dán nó vào một vị trí khác bằng phím tắt Command + C và Command + V.

Hoặc từ tab component, nhấp và kéo một bản sao vào canvas.
Chúng tôi có thể thấy trong bảng điều khiển layer, các master component có biểu tượng 4 hình kim cương,
một instance có biểu tượng một kim cương. Cuối cùng, ta có thể có nhiều instance
của các component trong tệp. Để nhanh chóng xác định vị trí master component, nhấp chuột phải
vào một instance và chọn "go to master component" hoặc chọn nó từ
bảng thuộc tính.

Hãy xem mối quan hệ giữa các component và
instance hoạt động như thế nào. Ở bên trái, chúng ta có component và ở bên phải là các instance
của component. Khi chúng tôi thay đổi nền của nút bên trong
master component, instance được cập nhật tự động, hãy tưởng tượng chúng ta đang
thiết kế một trang web trong đó sử dụng một số nút. Để thực hiện việc này mà không cần
các component, chúng ta sẽ cần thay đổi màu nền thủ công tất cả các nút.

Tuy nhiên, khi sử dụng các component, chỉ master component
cần được thay đổi và tất cả các instance được cập nhật.

Thay đổi được thực hiện với property của instance được gọi là override (ghi đè).
Override cho phép các nhà thiết kế tạo các biến thể trên component ban đầu.

Nếu các thay đổi được thực hiện đối với master component, các override trên instance giữ nguyên.
Ví dụ các thuộc tính có thể thay đổi là Text property (thuộc tính văn bản), Fill (phần điền)
Stroke, shadow (hiệu ứng như đổ bóng) hay blur (làm mờ) và bounding box (hộp kích thước giới hạn).

Tuy nhiên, các thuộc tính ảnh hưởng đến bố cục của các layer trong một instance
không thể bị override. Ví dụ có thể về các loại thuộc tính này bao gồm size (kích thước),
position (vị trí), rotation (xoay), constraint (ràng buộc), layer hierarchy (phân cấp lớp), vị trí điểm và đường cong Bézier.

Nếu chúng ta muốn xóa ghi đè khỏi các instance, ta có thể chọn
những thứ ta muốn đặt lại và chọn "Reset instance" từ thanh công cụ ở trên cùng.

Ta cũng có thể đặt lại instance trong bảng thuộc tính, ta có thể
tách một component instance khỏi master component của nó, làm điều này sẽ ngăn
instance không kế thừa các thay đổi được thực hiện đối với component.

Khi đang chọn một instance, sử dụng Option + Command + B hoặc chọn Detatch instance trong phần instance
trong bảng thuộc tính hoặc nhấp chuột phải vào
instance và chọn Detatch instance. Nếu bạn vô tình tạo một component và
muốn tách hoặc hoàn tác hành động đó, bạn có thể tạo một instance của component
chọn detatch instance sau đó xóa component.

Nếu một master component vô tình bị xóa, ta dễ dàng khôi phục nó bằng cách tìm
instance của component, nhấp vào Restore master component trong phần instance
của bảng thuộc tính. Nếu chúng ta thay đổi kích thước một layer trong một component
là giảm hoặc tăng kích thước của component, chúng ta nhận thấy kích thước ban đầu
của bounding box của component vẫn giữ nguyên. Để thay đổi kích thước
component, hãy chọn nó và nhấp vào Resize to fit (thay đổi kích thước để phù hợp) trong bảng property.

Bạn cũng có thể nhấp đúp vào bounding box, điều này sẽ thay đổi kích thước
bounding box của component và bất kỳ instance nào để vừa với các layer bên trong.
Việc thay đổi kích thước để phù hợp không khả dụng cho các instance. Hãy xem lại những gì chúng ta đã
học hôm nay: tạo các master component bằng cách sử dụng phím tắt Option + Command + K
các instance của component là sự xuất hiện của một bản master và cập nhật tự động,
mở tab component bằng cách sử dụng phím tắt Option + 2.
Override (Ghi đè) thay đổi thuộc tính của các instance, sử dụng Resize to fit để thay đổi kích thước bounding box
của một master component.

[fuad]

resize to fit was what i deadly needed finally came out tutorial

[naitikkathiriya]

so learnt from the origin..
thank u for the components aa very usable one as i didn't knowledge of it, first taken from you!!✨
#Original #Official #Figma

[edupooter]

I like your nice and very calm way of speaking.

[lararedmer]

How do I enable the components tab in the layers panel? Or is it not part of the layers panel anymore in the latest version?

[jazzybeat]

Is this video outdated? Trying to create an instance of the component using Command-D, but I get a component duplicated.


To brake/detach the component is a 3-step process. You have to create an instance, detach the instance and then delete the component. Strange that they not using the same options or shortcuts to detach the main components. It's a bit extra overcomplicated if I have to compare it with Sketch and it took me 30 min to find a video to understand how to do this.

[Underhills]

So, if you use a component from a library that is placed in another team by dragging it out from the asset panel, will I get updates from the main component if I choose to edit it for my use without detaching the component? For instance add my own text menu on a meny component but keep the bg color, width and shape?

[GuitarreroDaniel]

This was a great tutorial. I love figma.

[darshana]

I have a set of three components. When I use one and want to swap to another, how do I do it without doing the traditonal copy + paste? When I right click and try swap component it doesn't really show me the list of the other two components. Am I doing something wrong?