Рубрика «sketch»

Generating multi-brand multi-platform icons with Sketch and a Node.js script — Part #2 - 1

This is the second part of a post about the creation of a pipeline that can take a Sketch file and export all the icons included in the file, in different formats, for different platforms, with the possibility of AB testing each icon.

You can read the first part of the post here.

Generating multi-brand multi-platform icons with Sketch and a Node.js script — Part #2 - 2

The Sketch files, with all the icons collected, styled and properly named, were ready. Now it was time to start writing the code.

Suffice to say, the process was very much a trial and error: after the important initial code core, developed by my team lead Nikhil Verma (who set the script foundations), I went through an incremental process that required at least three phases of refactoring and quite a few revisions. For this reason, I won’t go into too much detail on how the script was developed, but rather focus on how the script works today, in its final shape.
Читать полностью »

Sketch + Node.js: генерируем иконки для множества платформ и брендов. Часть 2 - 1

Это вторая часть статьи о создании инструмента, способного экспортировать все помещённые в Sketch-файл иконки: в разных форматах, для разных платформ, с возможностью A/B-тестирования каждой из иконок.

Первую часть вы можете прочесть по ссылке.

Sketch + Node.js: генерируем иконки для множества платформ и брендов. Часть 2 - 2

В прошлый раз мы подготовили Sketch-файлы, содержащие все иконки в нужных стилях и с правильными названиями. Пришёл черёд написания кода.

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

Sketch + Node.js: генерируем иконки для множества платформ и брендов - 1

Нет ничего проще, чем добавить иконку в проект: нужно всего лишь написать дизайнеру, он экспортирует её из Sketch и пришлет вам нужный вариант, а вы используете ее у себя в коде. Если же у вас с десяток проектов, несколько платформ и множество А/Б-тестов на дизайн, то достаточно делать всё то же самое, только в 40 раз чаще и нигде не ошибаться… либо постараться автоматизировать процесс. Под катом — первая часть перевода статьи моего коллеги Cristiano Rastelli про один из примеров такой автоматизации.

Проблема, которую мы решали

Мы в Badoo разрабатываем приложение для знакомств. Вообще-то это несколько приложений, каждое из которых функционирует на нескольких платформах (iOS, Android, Mobile Web, Desktop Web), и работу над ними ведут несколько команд.

При разработке мы используем сотни различных иконок. Некоторые одинаковы в каждом приложении, другие — соответствуют тому или иному бренду. Иногда дизайн меняется, а вместе с ним меняются и иконки: появляются новые, какие-то обновляются, какие-то — удаляются (но часто остаются при этом в кодовой базе).
Читать полностью »

Дизайн-система стала таким же модным и почти обязательным инструментом для IT-компании, как использование канбан-досок и agile. Существует множество определений дизайн-системы: кто-то понимает под ней только UI-кит, а кто-то считает, что дизайн-система обязательно включает в себя компонентную базу в коде.

Переход от UI-кита к дизайн-системе в QIWI - 1

От том, как мы поняли, что пора переходить от UI-кита в sketch к отображению стилей в коде — под катом.
Читать полностью »

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

Основных причин — три: особенности (или даже баги) экспорта и оптимизации иконок из графических пакетов, особенности и ошибки рендеринга (мы будем ориентироваться на рендеринг браузером Chrome или оболочки Electron), ошибки дизайнеров по неопытности. Хотя в самом графическом пакете все выглядело хорошо (в данном случае мы рассматриваем Sketch, но похожие проблемы есть везде).

Тонкости и толстости иконок. Про Sketch, особенности рендеринга и игру с толщиной линий - 1
Читать полностью »

В новом дайджесте изучаем работу Xcode 10 и iOS 12, разные аспекты работы с React Native, проблемы магазина Google Play, сетевой код и рефакторинг, эффективность тестов и даже рынок приложений для домашних животных.

Дайджест интересных материалов для мобильного разработчика #260 (2 июля — 8 июля) - 1Читать полностью »

Полезное дизайнеру и разработчику. Свежие утилиты и инструменты для ускорения работы. Выпуск № 10 - 1

10-й «Юбилейный» выпуск полезных штук для дизайнеров и разработчиков. Сегодня в выпуске 31 ссылка на всякие свежие полезности. Больше добавить нечего → изучайте сами и делитесь с друзьями!
Читать полностью »

Праздники все закончились и вот у нас в дайджесте много интересных материалов – про успех ролла «Калифорния», правильную анимацию, борьбу с Siri внутри Apple, кроссплатформенную разработку, джуниоров и мидлов.

Дайджест интересных материалов для мобильного разработчика #245 (12 марта— 18 марта) - 1Читать полностью »

Полезное дизайнеру - разработчику. Свежие утилиты и инструменты для ускорения работы. Выпуск № 9 - 1

Пока дизайнеры продолжают испытывать восторг от появления возможности прототипирования в двух известных инструментах, анонсированных в один день; мир независимых разработчиков продолжает выпускать всякие нужные инструменты. В 9-м выпуске 20 ссылок
Читать полностью »

Полезное дизайнеру: бесплатные новинки для оптимизации дизайн-процессов. Выпуск 2-й - 1

За последнее время мне удалось найти множество интересных мини-продуктов и небольших инструментов / утилит, которые призваны ускорить ваш дизайн-процесс. В этом выпуске вы найдете 14 ссылок на разные релизы, авторы которых вносят значительный вклад в развитие профессионального сообщества дизайнеров и разработчиков.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js