Application Design Part 2 - Figma Libraries and Components - Tokens
In the second part of our application design series, we'll learn about libraries, their benefits, and how to upload and update them. We'll create a preliminary design so we can use tokens during the design process. We'll also work with an icon library and learn how to link design files to libraries.
We'll start with the first component: the text field. We'll move away from the traditional way of building it and explore a method using variables to build it without moving the file and impacting performance, thus speeding up our workflow.
Chapters
00:00 Intro
00:40 Business Requirements and ChatGPT Wireframe
02:24 Initial Design, Tokens, and Library Uploading
11:00 Icon Library and Library Linking
13:46 Building the Text Field
46:25 Outro
27:22 Outro
----
Previous Videos:
App Design Foundations Part 1
• تصميم ابلكيشن ج1 الاساسات - App Design Fou...
Grid Update
• ابديت الـ Grid فيجما - Figma Grid Update
Information Architecture
• هيكلة المعلومات - Information Architecture
Understanding Business: When to Start Designing?
• امتى نبدأ التصميم وليه نفهم البزنس؟
Grid Explained in Figma:
• شرح الـ Grid في فيجما - Figma Grid
Establishing and Structuring a Design Using Auto Layout
• تأسيس وهيكلة التصميم في فيجما - Design Str...
The Fastest Way to Copy and Move Content in Figma
• أسرع طريقة لنسخ ونقل المحتوي في فيجما؟ - M...
Nested Components
• ليه تعمل Nested Components في فيجما
A Simple Way to Change the Design Language in Figma - LTR to RTL Using Boolean
• طريقة بسيطة لتغيير لغة التصميم في فيجما - ...
What Should You Ask a Client in the First Meeting?
• أسئلة العميل في اول ميتنج - Questions to a...
UX Design Process Playlist
• UX Design Process - خطوات تصميم تجربة المس...
Colors - 60- 30-10
• استخدام الألوان - قاعدة 60/30/10 - Colors ...
Typography
• أساسيات استخدام ال Typography في مجال ال U...
Figma Update & Fear of AI
• القلق من ال AI - ملخص تحديثات فيجما Config...
Design System Playlist
• Design System
Figma Variables
• شرح المتغيرات في فيجما - Variables In Figma
Developer Tools, HTML, CSS
• Developer Tools - HTML - CSS | هل هيفيدوك ...
Contrast
• يعني ايه Contrast؟
Spacing
• شرح كل حاجة عن الـ Spacing في التصميم - De...
Smart Animate
• شرح Smart Animate في فيجما - Figma Carouse...
Prototyping
• شرح الـ Prototype في فيجما - Figma Prototy...
Breakpoints Plugin
• شرح Responsive Design بإستخدام Breakpoints...
Responsive Design
• شرح الـ Responsive Design و الـ Constraint...
Responsive Grid
• شرح الـ Layout Grid في فيجما - Responsive ...
Boolean property
• ازاي تعمل تصميم واحد باكتر من لغة في فيجما...
Auto Layout
• كل حاجة عن اوتو لاي اوت في فيجما - Everyth...
Components in Figma
• شرح الـ Components في فيجما | Figma Compon...
VariantsVideo
• شرح الـ Variants في فيجما | Figma Variants