Visual Designer Resource
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (122.64 KB, 14 trang )
Visual Designer Resource
Created by Rebo Vietnam
Date Created: 01 Jul 2021
Mục lục
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Giới thiệu
Design System
Color Tools for UI Design
Component Document
Plugin Figma
Icon Links
Illustration Link
Create Flow tool
UX Learning Website
Figma, Sketch free UI Template and Kits
Giới thiệu
👉 Đây là bộ tài liệu được biên soạn bởi Rebo Agency với mục đích phục vụ tìm hiểu sâu và
nâng cao kỹ năng của một Visual Designer hơn.
Đăng ký nhận tài liệu Thư viện Ánh sáng dành cho Beginners
*Thư viện bao gồm tổng hợp các nội dung như UX Research, Design System, UX Design, UI Kit, … được cập nhật liên
tục. Đây là tài liệu hoàn toàn miễn phí nhằm giúp các Beginners tìm hiểu sâu và khai phá về UX UI
👇 Theo dõi Rebo và cập nhật các tài liệu hay thông qua
- Cộng đồng Facebook: Học Figma Thật Đơn Giản
- Kênh Youtube: Học Figma Thật Đơn Giản
📚 Thơng tin về khóa học Figma Thực Chiến
- [1.000.000 VNĐ] Khóa học Figma Thực Chiến:
Main Syllabus
Design System
Name
Officially Link
Figma Link
Google Material Design
/>
/>e/778763161265841481
Apple Human Interface
Guidelines
/design/
Microsoft Fluent Design
System
/>design/fluent
/>
IBM Carbon Design
System
bondesigns
ystem.com/
/>BcrE3DF44Aynpi/Carbon-Design-Syst
em
Uber Design System
ign/
/>e/805195278314519508
Shopify Polaris Design
System
/>
/>e/930504625460155381
Mailchimp Design
System
/>atterns/color
Atlassian Design
System
ign/
/>e/857042449394640587
Salesforce Lightning
Design System
htningdesign
system.com/
/>e/854593583696357016
Airbnb Design System
ign/buildin
g-a-visual-language/
GOV.UK Design System
vi
ce.gov.uk/
Spotify Design
ign/
/>e/850673348101741100
Ant Design System
ign/docs/spe
c/introduce
/>e/831698976089873405
Color Tools
Tools
Coolors
Mơ tả
Cơng cụ tìm nhanh các dải
màu phối cùng với nhau,
bên cạnh đó cho phép phân
tích màu để đưa ra các cặp
màu phù hợp với tính năng
pick color
Link
/>
- Contrast Checker
- Color Picker
-...
Google Material Color
uiGradients
Tạo, chia sẻ và áp dụng
bảng màu cho giao diện
người dùng của bạn, cũng
như đo lường mức độ trợ
năng của bất kỳ sự kết hợp
màu nào.
Cho phép truy cập nhanh
các dải màu Gradient một
cách cụ thể và thuận tiện
/>view.left=0&view.right=0&primary.col
or=6002ee
Picular
Cách nó hoạt động như
một Google dành riêng cho
bảng màu, nhiệm vụ của
bạn là nhập từ khố thơi, ví
dụ: summer, airbnb,.. nó sẽ
qt màu từ google và đưa
ra gam màu cụ thể cho bạn
/>
Color Zilla
Chrome Extension - phòng
cho trường hợp bạn cần lấy
/>detail/colorzilla/bhlhnicpbhignbdhedg
một mã màu từ website mà
khơng biết cách lấy
jhgdocnmhomnp?hl=vi
Colorsafe
Có rất nhiều cơng cụ kiểm
tính tương phản, những
thằng này đơn giản và dễ
dùng, hơn nữa là chỉ tập
trung vào những mã cần
thiết thơi
/>
Color leap
Con tool này khá thú vị vì
nó cho phép người dùng
chọn các bản phối màu
theo giai đoạn lịch sử từ
những năm trước công
nguyên cho tới nay.
/>
EggGradient
Tool này cũng bổ trợ tìm
kiếm màu Gradient khá tốt
/>
Component Documents
/>
Top 7 Plugin Figma tối ưu thiết kế
Tools
Mô tả
Iconfy
Cho phép truy cập vào kho
Icon lớn nhất Figma
Unsplash
Lấy ảnh thực, rõ nét và từ
cộng đồng xịn sò nhất
Content Reel
Cho phép truy cập bạn thay
đổi nội dung trên lượng lớn
element đã chọn
Link
/>
/>view.left=0&view.right=0&primary.col
or=6002ee
Autoflow
Cho phép tạo ra đường
flow bằng cách chọn 2 màn
hình một cách nhanh nhất
/>
A11 - Color Contrast
Checker
Kiểm định tính tương phản
trong thiết kế của bạn
/>detail/colorzilla/bhlhnicpbhignbdhedg
jhgdocnmhomnp?hl=vi
Lorem Ipsum
Cho phép thay placeholder
nhanh và tiện
/>
Color Pallette
Bạn chỉ cần mở nhanh
Plugin lên để check xem
màu của minh phù hợp để
mới với màu nào mà không
cần phải mở tool UI
/>ugin/740832935938649295/Color-Pal
ettes
Icon
Name
Iconscout
Iconsax
Free Ui Design
Iconic
Font Google
Mô tả
Trang này cung cấp một hệ thống
thiết kế từ icon, illustration đến
animation, tất tần tật các loại asset
dành cho designer
4500+ icon các designer có thể
down về dùng trên figma. Style
icon này khá là gọn, đơn giản, và
nhìn rất sạch sẽ
Download nhiều bộ icon set dành
cho designers. Ngồi ra cịn có
nhiều UI Design Inspire, và các
Mockups
Link
/>
/>
ign/category/icons/
/> />
Illustration
Name
Mơ tả
Link
Pixeltrue
+500 Free Vector Illustration, sẽ
tính phí nếu muốn truy cập tất cả
các illustration
/>ations
Undraw
Tuỳ chỉnh màu và down free nhiều
dạng feature illustration
/>
Pixabay
Freepik
Drawkit
Kho ảnh vector miễn phí
/>Tìm vector, ảnh ở nhiều dạng file
/>Kho illustration theo chủ đề
/>
Creating flow tool
Name
Miro
Whimsical
Figjam
Link
/>
/> />
UX learning website
Name
Law of UX
Growth Design
UX Starter Pack
Cant unsee
Daily UI
Mô tả
Link
Tất tần tật các nguyên tắc, và quy
luật về UX
/>
Tổng hợp nhiều case study phân
tích về UX, và các tài liệu về tâm lý
người dùng
ign/
Tổng hợp các guide cho UX
beginner
/>
Luyện tập nhìn nhận các lỗi về UI
ce/
Luyện tay với nhiều chủ đề về UI
/>
Free UI Kit
Name
UI Kit now
UI8
UI Freebies
Sketch App Source
Invision Free UI
Figma Team
Link
/>
/> />
/> /> />
