Figma gratis untuk digunakan. Daftar di sini: Dalam video ini, kami akan membahas dasar-dasar Komponen dan bagaimana Komponen dapat menjadi tambahan yang kuat untuk alur kerja desain Anda. 0:00 – Apa itu komponen dan instance 0:40 – Cara membuat komponen 1:25 – Cara membuat instance komponen 2:00 – Cara melihat komponen 2:20 – Cara menggunakan komponen 2:52 – Cara mengganti sebuah instance 3:36 – Cara mereset instance 3:51 – Cara melepaskan instance 4:23 – Cara memulihkan komponen master 4:36 – Cara mengubah ukuran komponen 5:05 – Outro Jika Anda memiliki pertanyaan selama proses kunjungi forum pengguna kami ( dan terhubung dengan pengguna Figma lainnya. #Figma #FigmaDesign #FigmaTutorial #Components .
source
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?
😠You broke the cardinal rule of tutorials, which is calling something "the basics" while completely skipping over the initial steps that a beginner needs to make this work. First you show a button, as it it magically appears there with a new design file. The absolute beginner (ie. me) doesn't know you have to create that from scratch first (make a rectangle, add text), and I've spent the last 15 minutes looking for where the "add button" field is. No such thing. At least you should somewhere (in the description) refer beginner to any videos that are needed to prepare them for this video.
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 have the latest Figma and I don't see the menu footer on the left sidebar to show all components. How do I turn this on? 1:42
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.
How to duplicate
I like your nice and very calm way of speaking.
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
great tutorial but extremely boring
How do we 'uncomponent' a component without doing undo?
Muantul
太强了
thanks