Forwarded from UX Notes (Антон Григорьев)
Фёдор Миронов написал, как ускорить подготовку макетов мобильного приложения под вторую платформу с помощью переменных в Фигме.
— Создайте коллекции переменных, которые будут отвечать за параметры интерфейса;
— Коллекция Platform: стиль шрифтов, размеры устройств, пропорции картинок;
— Например, переменная Device width для iOS может иметь значение 393, для Android — 412. А переменная Font: SF Pro и Roboto;
— Коллекция Typography: размер шрифта, межстрочное и межбуквенное расстояние, вес;
— Чтобы создавать дизайн с учётом доступности и масштабировать шрифты, основные параметры можно подтягивать из коллекции Dynamic typography (достаточно базового и максимального значения размера шрифта и межстрочного расстояния);
— Для названий цветов удобно использовать токены из Material Design 3, так как цвета на обеих платформах называются одинаково и есть их контекстные названия;
— Универсальные компоненты вроде кнопок выглядят одинаково на разных платформах, меняется только текстовый стиль;
— Платформенные компоненты вроде Navbar, которые сильно отличаются, лучше сделать вариантами одного компонента;
— Вложенными компонентами легче управлять по отдельности при большом количестве вариантов. Важно одинаково называть их параметры для iOS и Android, чтобы при смене платформы сохранялся контент.
#mobile #figma
— Создайте коллекции переменных, которые будут отвечать за параметры интерфейса;
— Коллекция Platform: стиль шрифтов, размеры устройств, пропорции картинок;
— Например, переменная Device width для iOS может иметь значение 393, для Android — 412. А переменная Font: SF Pro и Roboto;
— Коллекция Typography: размер шрифта, межстрочное и межбуквенное расстояние, вес;
— Чтобы создавать дизайн с учётом доступности и масштабировать шрифты, основные параметры можно подтягивать из коллекции Dynamic typography (достаточно базового и максимального значения размера шрифта и межстрочного расстояния);
— Для названий цветов удобно использовать токены из Material Design 3, так как цвета на обеих платформах называются одинаково и есть их контекстные названия;
— Универсальные компоненты вроде кнопок выглядят одинаково на разных платформах, меняется только текстовый стиль;
— Платформенные компоненты вроде Navbar, которые сильно отличаются, лучше сделать вариантами одного компонента;
— Вложенными компонентами легче управлять по отдельности при большом количестве вариантов. Важно одинаково называть их параметры для iOS и Android, чтобы при смене платформы сохранялся контент.
#mobile #figma
Forwarded from Dezzigners
🧰 Coolors
Coolors — супербыстрый генератор цветовых палитр, который любят 2,5 миллиона пользователей.
Dezzigners
Coolors — супербыстрый генератор цветовых палитр, который любят 2,5 миллиона пользователей.
Dezzigners
Forwarded from Daily Coding 🔥
🛠 Moon - это библиотека пользовательского интерфейса на JavaScript, похожая на Vue.js, но гораздо более упрощенная и понятная, позволяющая избежать излишеств. Она имеет оптимизированный движок virtual DOM, удобный API и занимает всего 6 кбайт в уменьшенном виде и в формате gzip.
🌍 Сайт
Daily Coding #инструменты #JavaScript
🌍 Сайт
Daily Coding #инструменты #JavaScript
Forwarded from Новые шрифты
Шрифт Tana Uncial SP by Sasha Pavljenko
Бесплатно для личных и коммерческих проектов.
📁Скачать Шрифт
#Latin #Free #Cyrillic
🅰️ Новые шрифты
Бесплатно для личных и коммерческих проектов.
📁Скачать Шрифт
#Latin #Free #Cyrillic
🅰️ Новые шрифты
Forwarded from UI_UX inspiration
This media is not supported in your browser
VIEW IN TELEGRAM
Day 431:
Succinct Making zero-knowledge proofs accessible to any developer.
→ succinct.xyz
Any Other Name An independent creative studio and brand consultancy based in London with a global clientele spanning fashion, art, culture and commerce.
→ anyother.name
More on
→ curated.design
🌠 UI_UX inspiration
Succinct Making zero-knowledge proofs accessible to any developer.
→ succinct.xyz
Any Other Name An independent creative studio and brand consultancy based in London with a global clientele spanning fashion, art, culture and commerce.
→ anyother.name
More on
→ curated.design
🌠 UI_UX inspiration
Forwarded from Дизайн-Телега 🔥
Koval IT Collection vol. 2
💾 Скачать и использовать
https://www.figma.com/community/file/1179384870528706002/koval-it-collection-vol-2
🔎 Посмотреть описание
https://www.figma.com/community/file/1179384870528706002/koval-it-collection-vol-2
#figma #illustartions
👨 Дизайн-телега
💾 Скачать и использовать
https://www.figma.com/community/file/1179384870528706002/koval-it-collection-vol-2
🔎 Посмотреть описание
https://www.figma.com/community/file/1179384870528706002/koval-it-collection-vol-2
#figma #illustartions
👨 Дизайн-телега