Мобайл: дизайн и разработка

Когда вы удаляете мастер-компонент в Sketch, он предупреждает, что экземпляры компонента превратятся в группы. Figma сразу удаляет компонент, но его можно восстановить из экземпляра. У обоих подходов есть минусы — я не хочу видеть модалки и не хочу случайно потерять компонент, который где-то используется. Поэтому я написал плагин для Figma, который предлагает компромисс.

Команда Safe Delete удаляет компонент, только если его экземпляров нет в проекте. Бонусом я добавил команду Delete Unused Components — она удаляет компоненты, которые нигде не используется. Плагин показывает, какие компоненты он удалил, и в случае ошибки их можно вернуть с помощью ⌘+Z.
Пока плагин работает, интерфейс фигмы может зависнуть, поэтому не советую запускать его на очень больших проектах.

Установить:
https://www.figma.com/c/plugin/746849770992339499/Safely-Delete-Components

Плагины в Figma работают на главном потоке и вешают интерфейс на время работы. Если вы пишите плагин, который обходит все объекты в документе, советую подсмотреть у меня реализацию функции hasInstances(). Она позволяет главному потоку хоть немного продохнуть и откликнуться на нажатие кнопки Cancel (но этот способ работает не всегда).

Код плагина на Github:
https://github.com/Kondenko/SafelyDeleteComponents

#плагин #figma

Intercom запустили intercom.design. На этом сайте они рассказывают о своей команде, процессах и проблемах, которые решают.

Из интересного:

• принципы, которых Intercom придерживаются в дизайне и разработке продуктов:
https://www.intercom.com/blog/intercom-product-principles

• основы хорошего интерфейса:
https://docs.google.com/document/d/1d1GC04i0EXUAMcynr8Wj8CJ5cx4i9urooeBiqubT_4A/edit

• про работу в англоязычной компании:
https://www.intercom.com/blog/working-as-a-designer-in-a-foreign-language/

#дизайн

useAnimations — каталог анимированных иконок. Каждую иконку можно скачать в формате svg, json (Lottie) и aep (After Effects). Обновляется еженедельно.

#анимация

HttpMocker — это библиотека, которая подменяет реальные ответы сервера на заранее заготовленные. Полезно, если бэкенд для вашего приложения ещё не готов, вы хотите потестить специфичные сценарии и ошибки или просто подготовить красивые скриншоты для Google Play.

Кроме подмены, эта библиотека может записывать в файл реальные ответы сервера, чтобы их можно было использовать в качестве mock'ов.

Библиотека:
https://github.com/speekha/httpmocker

Туториал:
https://blog.kotlin-academy.com/httpmock-my-first-oss-library-5bae8adbccf4

#разработка #android #инструмент #тестирование

⁠Если вы пользуетесь приложениями не на английском языке, вы наверняка замечали как интерфейс иногда разъезжается от слишком длинных надписей. Макеты, которые я верстал, грешили тем, что перевод на другие языки в них никак не продумали. Я вооружился Гугл табличками и сделал инструмент, который поможет проверить, что перевод слова не длиннее, чем оригинал.

Как это работает:

1. Скопируйте табличку к себе в Google Sheets (File > Make a copy).

2. Выберите текст для кнопки или другого контрола, который не должен сильно меняться в размерах.

3. Вставьте текст в желтую ячейку рядом с Your text и укажите языковой код, если автоопределение языка не справляется.

4. Табличка подсветит красным переводы, которые длиннее оригинала. Если ячейка насыщенно красная — стоит выбрать другой текст или подумать о том, как кнопка будет выглядеть в переводе.

Я хочу развить эту идею дальше и сейчас понемногу пишу линтер для Android Studio, который предупредит о длинных локализациях в strings.xml. Возможно, когда-нибудь я напишу плагин для Sketch или Figma, а пока буду рад услышать ваш фидбек о табличке и самой идее в комментариях.

#дизайн #локализация

Google добавили гайдлайны по визуализации данных — какие есть типы графиков и как выбрать подходящий, как графики выглядят и работают, и как объединять их в дашборды.
Ещё в блоге Google Design появилась статья о принципах визуализации данных.

Месяц назад я безуспешно искал гайды по дизайну графиков на мобильных устройствах, более или менее подходящей оказалась вот эта статья: Часть 1 | Часть 2

Если вы видели похожие материалы, но заточенные под мобайл, или сами дизайнили графики и вам есть, чем поделиться — напишите в личку (@kondenko), добавлю в пост 👌

#дизайн

Актуальные версии библиотек AndroidX собрали в одну табличку:

https://developer.android.com/jetpack/androidx/versions