Дизайн-система у Figma. Частина 3

Ми продовжуємо серію вебінарів, присвячених створенню дизайн-системи з використанням Figma. Перша зустріч відбулася 19 травня, і ви можете переглянути її у записі. Друга — 9 червня (запис).
Теми, розглянуті у Частині 1: основи та теорія, як вибудувати роботу над дизайн-системою, як підтримувати дизайн-систему, філософія та принципи дизайн-системи, початок роботи над дизайн-системою та основа інтерфейсу (тексти, типографіка), бібліотека стилів тексту + плагіни та інструментарій.
Теми, розглянуті у Частині 2: Figma Mirror, фрейми та авто-лейаути, колір в інтерфейсі, кольорові палітри (створення стилів, плагіни та інструменти), сітки, робота з Components, первинні елементи (поля, форми).
На третьому вебінарі ми створимо кнопки, таби, картки, розберемо функцію Variants у Figma. Поговоримо про те, як розробити інклюзивний інтерфейс, як писати документацію до дизайн-системи, обговоримо передачу макетів розробникам. Розберемо, що таке дизайн-токени, навіщо і кому вони потрібні, а також, як працювати з вібровіддачею в девайсах і з анімаціями.
План вебінару:
- Кнопки, таби, картки.
- Variants у Figma.
- Haptic feedback (вібровіддача) та анімації.
- Доступність та інклюзивність дизайн-системи, а також інтерфейсу.
- Документація та робота з розробниками.
- Код, дизайн-токени.
- Q&A.
Цільова аудиторія:
Даний вебінар буде цікавий досвідченим UX/UI та продуктовим дизайнерам, які хочуть покращити комунікацію з розробленням, зробити процес дизайну та доставки фіч прозорим і масштабованим.
Він також буде корисним менеджерам та фронтендерам, які хочуть почерпнути best practice по роботі з дизайн-відділом та закрити можливі прогалини у розумінні процесів дизайну.
Ви на практиці дізнаєтесь, як створювати просунуті та комплексні дизайн-елементи, а також, як передати дизайн команді розроблення.



































