В нашей дизайн системе будет все по полочкам: градация цветов, система теней, рефлексы, подробные гайды в виде ui kit в Фигме. И конечно же полный фарш из #Angular / #React компонентов, в точности повторяющие исходник Фигмы!

✊🏼Когда я у разработчиков чутка юзабильнутый (передаю спецификации по нашей дизайн-системе)

Давно не брал пера я в руки! https://vc.ru/design/65881-tablicy-v-figma-data-grid-dizayn-odnoy-yacheykoy

Как эффективнее заманивать внутрь гамбургер-меню? Сделать вид, что там пользователя ждёт что-то новенькое:

Кросспост с VC для хабровчан. Спасибо новым более лояльным правилам. Хотя уже видно, что VC по трафу и ЦА забарывает олдскульный формат Хабра https://habr.com/ru/post/449966/

Для продвинутых дизайнеров не секрет, что надо держать нос по ветру и следить, что вообще творится в индустрии. DN всегда был интересным ресурсом, где бодро доставляют свежак. Раньше было удобно читерить - сам себя апнул и вот ты уже собираешть траф. После того, как стало много гавна вылезать на главную - добавили downvote, и вот как это разрушило экосистему:
https://www.designernews.co/stories/102176-whats-going-on-with-designernews

Я вообще за последние дни всё понял, куда и как двигать то, что мы сейчас пилим с React/Angular fellas. Это будет коммерческая дизайн система для решения любых задач по дизайну и разработки all-in-one. Figma, React, Angular. Полная идентичность компонентов в дизайне и коде. Компонентов из ближайшего будущего. Посмотрите вот концептик по секции Surface у нас (это то, как будут вести себя карточки при onhover)

Все цвета разбросаны по компонентам в Фигме:

8-пиксельная сетка

Не путаем с лэйаутом. Если кратко:
— помогает найти подходящую высоту и ширину элементов (картинок, видео, кнопок, иконок и др.);
— помогает определять гармонические интерлиньяжи, кратные шагу сетки;
— помогает расчитывать пропорциональные шагу сетки отступы от заголовков, блоков, и других элементов.

Читать продолжение »

Ну а параллельно я продолжаю конвертить стандартный iOS UI kit для Фигмы в тёмную версию. Это - секция Home Screens. Тут и карточки, и фоточки, и кнопочки, и барчики, и категории, и списки, и поисковые инпуты и много чего всего. Берёте компоненты, разбираете на фрагменты. Собираете любой экран - как хотите. Таким образом любую мобильную задачу быстрее срока завершите!

Facebook F8 - виток спирали назад к теням отбрасываемых текстом. Берём на заметку.

Официально стартанули неофициальные плагины к Фигме https://figmaplus.com/

Недавно В GMD появилась секция посвященная dark mode: https://material.io/design/color/dark-theme.html

Темные темы по сравнению с белыми дают больше возможностей показать глубину. Смотрите на iOS Segmented Control - он одновременно находится и внутри плоскости и чуть выше неё.

На самом деле, реальную тёмную тему iOS официально мы увидим только 3го июня, но я продолжаю эксперименты с использованием глубины в своем ui ките iOS и версией dark theme

Внимание анонс!
Пока что мир тихо спокойно ждёт трансляции из Фигмы сразу в код (и ждать, судя по всему, будет еще долго) мы решили просто взять и сделать единую дизайн-систему и экспортнуть все вылизанные компоненты, спексы и состояния в готовые фреймворки на базе Angular и React. Со временем получится универсальный продукт "все-в-одном" для решения любых задач по разработке и прототипированию : https://setproduct.com/system

Пока вы там холиварите между Скетчем и Фигмой, XD спокойно пилит и добавляет нужные фичи, вот список новинок, вошедших в майский релиз https://helpx.adobe.com/xd/help/whats-new.html

Китайцы развивают собственную Фигма-движуху. Спасибо что залистили: https://figmachina.com/