Figma - жизнь до и после

Кто я
Кунаев Сергей
Directum

Будет про дизайн,
я правильно понимаю?
Что за инструмент и почему на него перешли
Какие правила внутри команды
За что отвечает дизайнер при передаче макета

Figma. WTF
Figma — кросс-платформенный онлайн-сервис для дизайнеров интерфейсов и веб-разработчиков.

Что использовали до
Макеты в psd, jpeg
Документация по проекту
(кошмар для дизайнера)
Неразбериха в макетах

Почему надо было что-то делать
Конфликт «дизайнер-разработчик»

Почему надо было что-то делать
Конфликт «дизайнер-разработчик»
Война за пиксели
Поддержание актуальных макетов
Логика переходов/навигации
Слабое понимание работы друг-друга
в ходе проекта
Не те цвета/шрифты/состояния

Почему надо было что-то делать
Много времени на взаимодействия

Почему надо было что-то делать
Технические ресурсы
Гигабайты, гигагерцы, общий доступ…

Что еще рассматривали

Что еще рассматривали
Еще плюсы
Режим просмотра
Режим презентации
Панель Сode
Интеграция с Zeplin, Avocode
Библиотека компонентов
Условная бесплатность
Google Fonts
Плагины

Как работаем мы,
все ли делаем правильно?

С чем столкнулись при переходе
Привычка работать в Ps и Ai
Фреймы, группы, компоненты
UI kit как неотъемлемая часть интерфейса
Перевод всех макетов в Figma
Дифференциация инструментов по видам работ – Ai, Ps, Figma
Обучение

С чем столкнулись при переходе

Правила внутри команды

Правила внутри команды
8. Думать об использовании эффектов
9. Аккуратное использование прозрачности
1. Используй сетку
2. Осознанные размеры для текстовых блоков + grow vertically
3. Боковые отступы
4. Целые значения
5. Использовать компоненты
6. Названия групп и фреймов
7. Растр с запасами по размеру
8. Аккуратное использование прозрачности
9. Думать об использовании эффектов
10. Использование стилей и страница для исходных компонентов всех иконок частей интерфейса
Про эффекты

Дизайнер виновен
или за что его можно попинать

За что можно пинать дизайнера
Ничего непонятно по организации
Названия слоев

За что можно пинать дизайнера
Ничего непонятно по организации
Что, куда, как

За что можно пинать дизайнера
Нет стилей, UI kit
Нет разных состояний – hover, press, disable

За что можно пинать дизайнера
Разные отступы

За что можно пинать дизайнера
Обрезанные растры

За что можно пинать дизайнера
Слишком много эффектов

За что можно пинать дизайнера

Продолжать
или стоит что-то менять?

Планы
1. Выстроить свою дизайн-систему
2. Распробовать плагины