Figma Tutorial: Components - The Basics

i cnat cancel the component xd

It was very useful. Thank you!

Great video but can we also list the shortcuts for PC as well? it would improve accessibility for more users since I'm sure not everyone owns or can afford a Mac.

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.

Super, neat and clear

Tip is helpful but the voice over is boring

this voice is so annoying.

a bit outdated interface

That button to create the component isn't actually in the toolbar in the real application.

Even in the application itself, it's telling me to click the same button, but it isn't there.

I can only assume Figma are doing a terrible job at updating help text and documentation to match the current state of the application, and the current way to create components and the like is all obfuscated.

Meanwhile, if I pick up Matisse, I can start building a Swing UI in 5 seconds. What makes it so hard for things like Material UI?

Isn't it way too complicated to delete a component by making an instance first, especially when you have multiple components?

Good explanation.

What if I don't have that button at the top in the middle of my figma to create a set?

very helpful, thank youu!

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

Love your calm voice and smooth explanation.

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

Thanks super explanation.

i have a whole website as a component in figma cause i didnt know what i was doing! How do i make it NOT a component! I cant find anything that would do that! Thanks!

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?

My component do not appear under the "assets" or "local components". What should I do?

All jargon

Amazing! Back to 2018

You are the best!

I am unable to edit the placement of layers inside my component. Are we also blocked from moving the composition of the component after it's become a component?

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.

Thank you

Thanks!

I'm switching to Figma from Adobe XD. I hope it can help me more as a design tool

how do I make my "design, prototype and code" bar look like this?

I found that the volume was too low in the video (i maxed YT and PC volume and still struggled a little)

If I make components like these, I can't use smart animate at all. I don't know why or what's happening.

But I seriously hate it.

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.

Now the components are in the 'Assets' tab, it took me a while to find them because this video came out 3 yrs ago

Is possible to make component only with prototype style? I have 40 different icons and I want the same hovering effect on each of them. Or maybe I can copy/paste effects? how?

May I know, how to undo the created component in figma?

I'm just moving all the layers out of the component that I've made? is this the optimal way of doing it?

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?

Poor tutorial

thanks a lot but mine is till not working and i tired over an hour anyone can help? thankssss

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

Awesome video.

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! 😊

very useful. thanks!

TL DR: its a class

Thank you very much!

How to delete the component

This was a great tutorial. I love figma.