v.1 Beta, 256 стр. 23 главы.

Книга «Руководство по Figma»

Приложение: проект в Фигме

Сегодня большой день. Я публикую свою первую книгу. Это труд последних нескольких месяцев. В компактном виде собран солидный набор технических знаний, который позволит эффективно создавать интерфейсы и иллюстрации. Книга напичкана горячими клавишами, практикой, вдохновением и лайфхаками.

Сравнение Фигмы и Скетча
Я подробно анализирую основные функции, а также их аналоги в Скетче. Разбираю реализацию символов и компонентов, стилей и ограничителей.

Что внутри
Рассматриваю 23 темы, среди которых: обзор интерфейса, шейпы, перо и векторные сети, градиенты всех типов с примерами, кадрирование и цветокоррекция, булевы группы, адаптивность, общие стили, компоненты, оверрайды и много чего ещё.

Начинающие найдут здесь для себя правильный технический фундамент дальнейшего развития в дизайне. А те, кто работал в Скетче, смогут максимально быстро перестроиться на новый редактор.

Это бета
В эту версию вошло далеко не всё, что я хотел и её можно было бы бесконечно улучшать. Новые главы обязательно будут появляться. Это самая первая публичная версия. Я буду рад получить обратную связь о книге лично или на сайте. Прошу сообщать об опечатках.

Эта книга бесплатна
Поблагодарить меня можно через PayPal и Я Соберу. Задавать вопросы, которые возникнут по книге — в Фигма-чате.
Книга адаптирована для чтения на планшетах. Закачай её в айпад, чтобы иметь под рукой.

slashdesigner.ru/figma-guide

#первые_шаги #Руководство #Figma

Впечатления от ProfsoUX и воркшопа

Рад был поучаствовать в питерской конференции @ProfsoUX. Отличная организация, хорошее место и доброжелательная публика. Отчёт с конференции планирую выложить позже, там сильные лекторы.

Провёл часовой воркшоп, на котором спроектировал лоуфай-прототип для сценария регистрации в типичном банковском приложении.

Встал перед дилеммой: успеть показать целый сценарий от начала и до конца, или больше уделить время совместной работе с залом. Выбрал первое, поэтому взаимодействия с залом было меньше, чем мне хотелось. Не успел показать работу с правками через комментарии в Фигме и продемонстрировать тестирование. Приняли тепло, задавали много дельных вопросов. Например, про версионирование прототипов, бардак в компонентах и лапшу из связей. Понял, с какими проблемами сталкиваются ребята и теперь смогу разобрать их в канале.

Это было моё первое такое выступление на полный зал в 50 человек. Вдохновляющий опыт. Ушёл прокачивать ораторские навыки, чтобы повторить его на других площадках или в виде трансляции. Уж лучше запинаться, рассказывать меньше и своими словами, чем идти по рельсам готового напечатанного текста и перегрузить аудиторию. Между расслабленной записью видеоуроков дома и живым выступлением огромная пропасть.

Жду видеозапись, которую выложу на YouTube, одновременно выложу тезисы. На мою камеру удалось записать большую часть. Записать экран через ScreenFlow не удалось: тот подвёл и заглючил.

Спасибо тем, кто пришёл!

—
#для_профи

Пост | Сайт Design Line

Design Line Workshop

Мои хорошие знакомые The Promotion снова организуют серию стримов Design Line Workshop. Год назад я уже о них рассказывал и с интересом послушал, было здорово и народ хвалил.

Каждый из воркшопов будет длиться по два выходных дня и даст возможность поработать над своим проектом вместе с крутыми чуваками. Это очень помогает встряхнуться и узнать новые подходы в работе.

Все воркшопы будут проходить в выходные в виде интерактивных прямых трансляций.

23-24 марта — «Поиск и реализация визуального решения. Теория и практика»
Сергей Гуров

30-31 марта — «Огонь суровых бизнес-задач. Находим решения для реального веб-проекта»
Гриша Коченов и Костя Кислейко из AGIMA. Гриша произвёл на меня большое впечатление своим выступлением на G8 «Зона отчуждения».
Промо-код на 10% — agima.

6-7 апреля — «Экспериментальная типографика: там, где кончается форма и начинается смысл»
Денис Башев.

13-14 апреля — «Digital-айдентика. Как сделать фирменный стиль, живущий в цифровой среде»
Саша Медвинский и Анна Сваровская из Creative People
Промо-код на 10% — cpeople.

20-21 апреля — «Как дизайнеру грамотно вести клиентские проекты: от брифинга до презентации»
Сергей Свиридов из Red Collar.
Промо-код на 10% — sviridov.

Сам с удовольствием поучаствую.

Подробности и билеты →

—
#для_профи #анонсы

Обновлённая версия книги — v.1.1

PDF | Внешняя ссылка →

Минорный апдейт. Исправлено много опечаток и неточностей, о которых написали читатели. Добавлены некоторые клавиши для Windows и новые скриншоты. По всей книге исправлен стиль нумерованных списков.

Спасибо Виктору Шишко, Кириллу Олейниченко, Юрию Филипову, Павлу Новицкому, Владу Богданову, Юлии Думанис и Оксане Хажиевой, за фидбэк и найденные опечатки. Вы сделали эту книгу лучше.

Онлайн-воркшоп по компонентам в Framer X

Разработчик из Framer Артём Ряснянский @rsnnsk сделал воркшоп для русскоязычного сообщества.

youtube.com/watch?v=LIeObKJkVI4

Что было: Обсудили основы Реакта и Тайпскрипта, написали простой компонент, в котором по клику меняется случайное фото кроссовка. Выяснили, что компоненты Фреймера могут служить как для прототипов, так и для боевой разработки. Обсудили, как передавать фреймер-проект фронтендам.

Для дизайнеров, которым не хватает графического редактора, а хочется копать глубже и делать дизайн с живыми данными. Нужно знать основы HTML и CSS и немного JS. Задавать вопросы по Фреймеру можно в Фреймер-чате.

Компонент в Framer Store
Исходник на GitHub

—
#для_профи #Фреймер

Телеграм объявляет о конкурсах для UI-дизайнеров

Конкурс №1: редизайн окна чата
Призовой фонд: 15 000 $

Задача в том, чтобы сделать редизайн окна чата и меню вложений для Android. Чтобы принять участие, пришли макеты в PNG боту @design_bot. Кроме того, нужно записать видео, в котором продемонстрировать, как это решение должно работать. Сделать акцент на шеринг фото и видео.

В оценке работ Телеграм ценит простоту, удобство и консистентность. При необходимости можно менять цвета интерфейса, включая стандартный фон.

—

Конкурс №2, для UI-аниматоров
Призовой фонд: 10 000 $

Задача: создать простую и стильную анимацию, которую Телеграм сможет использовать, чтобы объяснить следующие концепции:
• Телеграм можно использовать на компах
• Двойная галочка означает, что сообщение прочитано
• Можно переключаться между записью голосовых и видео-сообщений

Предложи анимированного персонажа или оставь решение простым, насколько это возможно. Чтобы участвовать, присылай один или несколько JSON-документов в формате Lottie и сопутствующую им GIF-анимацию боту @design_bot. Лотти-джейсоны обычно делают в After Effects.

—

В обоих конкурсах работы принимаются с 10 по 24 марта включительно. Хочу напомнить, что в конце декабря Телеграм уже устраивал конкурс и сейчас в нём объявлен победитель, который выиграл 5 000 $. Следим за каналом @designers. Победители будут объявлены в конце марта.

Удачи всем нам!

—
#для_профи #анонсы

Как сделать простую афишу

Я ответил на вопрос в Яндекс Знатоках о том как начинающему дизайнеру сделать простую афишу для спектакля. О главных вопросах: Что и Когда, о фото-иллюстрациях и как выкрутиться без них. О типографике и блоке с датой.

Вот проект с тремя простейшими вариантами. Не перестаю восхищаться, как хорошо подходит Фигма для обучения дизайну: дал ссылку в посте и у всех уже есть исходник, который ты всё ещё можешь дорабатывать.

#первые_шаги #Figma

Стартовали финал Mail Design Cup 2018 в формате баттла. Онлайн-трансляция для тех, кто не дошёл — https://www.youtube.com/watch?v=ZEsiF2xkkWk.

12 дизайнеров предложат свои концепты памятки для космических туристов. В зале жюри — Сергей Попков (Skillbox / AIC), Георгий Квасников (Fantasy), Юрий Ветров (Mail.ru Group), Лена Аникеева (Pixies Design Studio), Максим Павлов (Notamedia).

Параллельно с баттлами можно будет посмотреть мастер-классы по дизайну интерфейсов от OKTAEDER, PINKMAN и Skillbox. Ну и поучаствовать в дизайн-ревью от арт-директоров AIC: Николай Иванов, Саша Мельбурн и Кирилл Глоба.

В течение 3 часов финалисты конкурса будут решать задачу в прямом эфире. Работы появятся к концу баттла на сайте https://russiandesigncup.ru/.

#maildesigncup

Руководство по Figma v.1.2 Beta

Редактировать посты старше двух дней в Телеграме нельзя. Поэтому, я сделал постоянную ссылку на свежую версию книги. Теперь при выходе новых версий ссылка не будет меняться. Актуальная версия — 1.2.

bit.ly/figma-guide-latest

Большинство вопросов о книге задают про то, почему я выбрал формат PDF, а не сайт. PDF удобен тем, что позволяет углубиться в книгу, не отвлекаясь на посторонние вкладки. Его удобнее листать и хранить. Сам по себе PDF воспринимается ценностью, а сайт нет. Сайт может лечь, а PDF самоустраниться с диска не может. В виде сайта своё руководство я тоже планирую выпустить, когда будут дописаны главы про прототипы и стили.

Также хочу поблагодарить тех, кто прислал донаты. С момента выхода книги мне прислали 2 293 ₽ (34$) и это вдохновляет. Я всегда воспринимал свой проект как способ тратить деньги, а не зарабатывать. Модель монетизации через рекламу всегда избегал. Интерфейсы приносят достаточно. Мне близка модель Википедии, когда я способен делать что-то важное, а сообщество поддерживает это. Спасибо!

—
#первые_шаги #Figma

Новый видеокурс по Figma

Видимо, идея сделать что-то про Фигму витала в воздухе и теперь у новичков нет больше никаких отговорок. Вышел офигенный бесплатный видеокурс на 15 уроков от @naukadsgn. С качественным звуком и внятными объяснениями Романа Горелика. Здорово наблюдать альтернативу моему подходу о том, как нужно рассказывать о Фигме. Отличная работа, снимаю шляпу. Думал записывать видеокурс по книге сам, но теперь это вряд ли нужно.

Курс даст хороший верхнеуровневый обзор инструмента и вполне сочетается с книгой. Раскрыты темы, которых ещё нет у меня: прототипы, слайсы и экспорт. В курсе меньше про рисование и горячие клавиши, и больше про веб-дизайн.

1. Обзор интерфейса 11:42
2. Манипуляция объектами 10:32
3. Фреймы и слайсы 10:27
4. Векторные объекты 24:37
5. Кривые и перо 8:35
6. Слои и маски 12:04
7. Текст 9:08
8. Цвет 8:50
9. Сетки и направляющие 7:26
10. Стили 5:16
11. Ограничители 4:38
12. Компоненты 12:44
13. Выравнивание и умное распределение 5:51
14. Прототипирование 16:44
15. Интеграция и экспорт 5:37

Плейлист на YouTube, общее время: 2 часа 34 мин.

На этой ноте обещаю больше не мучать профи учебниками и курсами про азы. Впереди у нас знакомство с Lottie, немного AE, новые разборы UI-анимации, а также видео с моего воркшопа.

—
#первые_шаги #Figma

Figma обновила дизайн

Вчера вечером раскатали новый дизайн на всех пользователей. Не сказать, что это прошло безболезненно. Чат жалуется, но судя по голосованиям, дизайн людям понравился: 68% за, 32 против. Несмотря на месяцы исследований, о которых Расмус Андерсон говорит в посте, косяков немало.

Новый акцентный цвет
Сразу бросается в глаза более насыщенный акцентный синий в интерфейсе.

Вкладка Assets вместо Components
Вкладку Components зачем-то переименовали в Assets. Вкладки Layers и Assets теперь переключаются сверху, а не снизу, но это, в общем-то не столь важно.

Team Library
Кнопка Team Library уехала из правого угла шапки в левую боковую панель во вкладку Assets, чтобы быть ближе к компонентам. Логично. Также добавили пункт Libraries в основное меню. Учитывая, что библиотеки — одна из функций, ради которой имеет смысл покупать платную подписку, с точки зрения маркетинга решение о её переносе фиговое. Меньше людей узнает, что библиотеки в принципе существуют.

Косяк с именами страниц
Реальный фэил этого апдейта в том, что имя выбранной страницы теперь пишется в той же строке, что и вкладки Layers/Assets. Имя страницы больше не занимает целую строку, а безжалостно рубится многоточием. Единственный способ с этим бороться — расширять боковую панель, что на маленьких экранах отожрёт рабочую область.

Список страниц больше не тянется
По вертикали список страниц подстраивается под их количество, но максимально может быть высотой в 9 пунктов.

Косяк со сглаживанием шрифтов
На не-ретина мониторах плохо стали читаться шрифты. Некоторые буквы темнее других.

Невнятные поля ввода
Всё стало миниатюрным и аккуратным, но с минимализмом переборщили. Увы, поддались дурацкой моде на поля без видимых контуров, как у Adobe Experience Design. И если у последнего в полях хотя бы есть линия подчёркивания, у Фигмы поля выглядят read-only. В пустоте висят числa. Теперь без наведения указателя невозможно определить, является ли текст полем ввода или подписью. Особенно это критично в маленьких полях, таких как размеры объекта и координаты.

Комментарии теперь белые
И совершенно незаметны на белом фоне. Чем они думали?

Call to action: голосуй за багфиксы
Если тебе как и мне не нравится, когда поля ввода не имеют контуров, давай завалим их просьбами вернуть контуры или хотя бы настраивать их вид. Заодно исправим обрезающиеся имена страниц и цвет пинов у комментариев. Команда Фигмы учитывает голоса пользователей за фичи и по ним приоретизирует исправления. Если запросов будет достаточно, мы сможем побороться за вид нашего любимого инструмента.

Куда: support@figma.com

Текст письма:
Hello, Figma team!
1. Please, bring back visible borders of inputs or make their visibility adjustable.
2. A page name is very important content and shouldn't be cut. It should fill the whole sidebar. Since last update, it was moved to the tabs line where there is no space for it.
3. The pages container isn't adjustable anymore. Please, fix it.
4. Comments should be notable. Please, make them red again.

#для_профи #Figma

По мотивам поста.

Анимация из Фигмы в Adobe XD за 7 минут

Интересный урок о анимации, который показывает, как переносить слои из Фигмы в XD, копируя их как SVG.

Автор — один из победителей конкурса Телеграма по дизайну Виталий Яковлев. Урок рассчитан в первую очередь на пользователей Windows, у которых до недавнего времени не было нормальных инструментов для UI-анимации вроде Принципла. Но способ вполне годен и для маководов. Кстати, на днях из беты вышел Инвижн Студио, о котором я когда-то писал. Так что теперь появился выбор.

#первые_шаги #Figma #XD #UI_анимация

Воркшоп «Скоростное проектирование в Figma»

https://medium.com/slashdesigner/figma-workshop-60e11c2fdac8

2 марта 2019 в рамках конференции ProfsoUX в Питере я провёл воркшоп и показал, как в течение получаса можно собрать рабочий прототип сценария регистрации в придложении вымышленного банка.

Получившийся проект в Фигме →

В этом посте
• Описал, в чём минусы классического подхода, когда пишут большое ТЗ
• Как быстрое лоуфай-проектирование может заменить ТЗ
• Подводные камни при создании прототипов
• Показал свой рабочий процесс в Фигме в видео (увы, плохое качество)

Тезисы
• Прототип создан быть выкинутым
• Чем меньше сил затрачено на изготовление — тем лучше.
• Если есть цвета и фото, уже воспринимается как страшненький дизайн. Если их нет — как схема
• Собирай прототипы за минимум времени и тестируй взаимодействие, а не визуал

#для_профи #Figma #UX

Ушёл из Газпромбанка
Новое место в обозримом будущем не ищу.

Не так давно у меня произошли радикальные изменения. Последние два года работы дизайнером в банках были большим стрессом. Они здорово меня прокачали и измотали. Я благодарен моим наставникам, которые были рядом и многому меня научили: Диме Батову, Ксении Толокновой и Андрею Иванову. Но по дороге я забыл куда бегу и зачем.

Теперь я восстановил work/life balance, сконцентрировался на iOS-разработке своих приложений и английской версии учебника про Фигму.

Что будет дальше с проектом /designer я не знаю. Но я надеюсь встроить его в свою новую реальность. Например, писать инструменты для дизайнеров.