Фёдор Миронов написал, как ускорить подготовку макетов мобильного приложения под вторую платформу с помощью переменных в Фигме.

— Создайте коллекции переменных, которые будут отвечать за параметры интерфейса;
— Коллекция Platform: стиль шрифтов, размеры устройств, пропорции картинок;
— Например, переменная Device width для iOS может иметь значение 393, для Android — 412. А переменная Font: SF Pro и Roboto;
— Коллекция Typography: размер шрифта, межстрочное и межбуквенное расстояние, вес;
— Чтобы создавать дизайн с учётом доступности и масштабировать шрифты, основные параметры можно подтягивать из коллекции Dynamic typography (достаточно базового и максимального значения размера шрифта и межстрочного расстояния);
— Для названий цветов удобно использовать токены из Material Design 3, так как цвета на обеих платформах называются одинаково и есть их контекстные названия;
— Универсальные компоненты вроде кнопок выглядят одинаково на разных платформах, меняется только текстовый стиль;
— Платформенные компоненты вроде Navbar, которые сильно отличаются, лучше сделать вариантами одного компонента;
— Вложенными компонентами легче управлять по отдельности при большом количестве вариантов. Важно одинаково называть их параметры для iOS и Android, чтобы при смене платформы сохранялся контент.

#mobile #figma

🧰 Coolors

Coolors — супербыстрый генератор цветовых палитр, который любят 2,5 миллиона пользователей.

Dezzigners

🛠 Moon - это библиотека пользовательского интерфейса на JavaScript, похожая на Vue.js, но гораздо более упрощенная и понятная, позволяющая избежать излишеств. Она имеет оптимизированный движок virtual DOM, удобный API и занимает всего 6 кбайт в уменьшенном виде и в формате gzip.

🌍 Сайт

Daily Coding #инструменты #JavaScript

Шрифт Tana Uncial SP by Sasha Pavljenko

Бесплатно для личных и коммерческих проектов.

📁Скачать Шрифт

#Latin #Free #Cyrillic

🅰️ Новые шрифты