Что в сегодняшнем выпуске: различные генераторы, крутые источники для вдохновения, стильные иконки, топовые продукты из Product Hunt за 2020 год, инструменты для экспорта анимаций и гифок, и многое другое.
Готовые дизайн системы в Figma → setproduct.com
Вспоминаем все важные события в UI/UX дизайне за 2020-й
2020-й миновал. Это был нестабильный год и многие выдохлись. Социальная дистанция, локдаун, удаленная работа, а для многих – сокращения: все это стало новой реальностью.
Но несмотря на нестабильность, мировая сцена UI/UX и продуктового дизайна не стояла на месте. Ведь с новыми проблемами появились и новые решения. Компании выпускали новые продукты, а также обновляли существующие.
13 свежих и полезных дизайн-ресурсов уходящей осени
Всем привет! В этом выпуске мы отобрали для вас лучшие ссылки на ресурсы, которые актуальны в индустрии дизайна и разработки, добавят вам вдохновения и ускорят рабочие процессы. Всем этим мы пользуемся сами, и думаем, что подборка будет полезна.
6 способов дополнительного дохода для дизайнеров и разработчиков
Эта статья поможет как начинающим дизайнерам и разработчикам, так и опытным специалистам, мечтающим улучшить свое финансовое положение. Если у вас сейчас есть стабильная и высокооплачиваемая работа - всегда есть риск, что вы можете попасть под сокращение. Пандемия отлично показала, что сейчас очень важно иметь финансовую подушку безопасности и дополнительные источники дохода.
Запуская собственный side project, вы имеете все шансы сделать его основным вашим занятием. Иногда такие проекты даже становятся делом всей жизни...
Десять компаний, которым Figma помогла достичь новых результатов в дизайне и не только
Всем привет! В очередной статье мы представляем вам список из 10 компаний, для которых использование Фигмы стало отправной точкой на пути к новым вершинам.
Это истории проблем и пути их решений, где современный дизайн-инструмент сыграл решающую роль.
Возможно, вы планируете разработать собственный перспективный проект и думаете над тем, какой инструмент использовать. Или работаете в компании, которая пользуется другими инструментами для дизайна и прототипирования. В любом случае, после прочтения этой статьи — у вас будет еще +10 причин начать использовать Фигму.
Обзор 14 свежих плагинов для Фигмы, которые помогут повысить производительность пока мы все #сидимдома
Сегодня мы поговорим о следующих новых Figma плагинах:
- AutoGrid — Поддержка сетки для AutoLayout.
- Tracking – Плагин для создания аннотаций отслеживания.
- Find and Replace Colors – Организация цветовых стилей в ваших дизайнах
- Spacing Manager – Плагин для согласованных отступов в компонентах
- Geometric – Создание математических фигур и кривых
- Halftones – Плагин, позволяющий накладывать точечный или полутоновый фильтры на картинки
- Batch Styler – Изменение нескольких стилей текста одновременно
- Spell Inspector — Поиск и исправление орфографических ошибок
- Sitemap – Плагин для создания карты вашего сайта
- Style Organizer — Показывает и упорядочивает все цветовые стили
- Focus CSS — Более удобное использование CSS в Figma
- Flipbook – Плагин для анимации ваших дизайнов в Figma
- SwiftUI Inspector – Плагин для улучшения рабочего процесса разработки для платформ Apple
- Filter – Фильтрующий плагин для ретуши ваших изображений
Как создать UI kit, который продается. Этапы разработки коммерческой дизайн-системы
Сегодня у любого дизайнера есть возможность заработать на собственном дизайн-продукте. Иконки, иллюстрации, шаблоны сайтов и приложений можно превратить в цифровой продукт и продавать по всему миру. Кому-то ваша поделка поможет ускорить работу и человек за нее заплатит. Другой может купить, чтобы посмотреть как это сделано. Третий — оформить свой ресурс вашими дизайн-решениями. Ваш продукт может выстрелить и попасть в топ, а может оказаться никому не нужным. Но стоит попробовать сделать это хотя бы ради прокачки навыков, работы с продажами, шанса отказаться от офисной работы или работы на клиента.
Я расскажу о поэтапном плане создания коммерческой дизайн-системы. Узнаете как сделать и выпустить на рынок свой продукт. Расскажу что сделать перед началом работы, как подготовиться и составить план. Отдельно рассмотрю этапы разработки дизайн-системы для Figma. В последней части дам советы как продвигать и раскручивать. В статье только личный опыт и наблюдения самоучки.
8 простых UI приёмов чтобы сделать дизайн-прототип динамичным, не прибегая к анимации
Материал этой статьи является следствием моих дизайн-экспериментов и выводов за последний год-полтора непрерывного дизайн гринда. Я неустанно собирал ui kit’ы, экспериментировал с контентом в плейсхолдерах, стилями, тенями текстами и состояниями, чтобы понять влияет ли это на конверсию. Иначе говоря, смогу ли я увеличить продажи дизайн-продуктов для Figma, если добавлю немного визуальной динамики в статичные дизайн-макеты, чтобы сделать темплейты интереснее и функциональнее.
Создание таблиц в дизайн системе Figma и реализация в Storybook (React)
В предыдущей статье на тему дизайна таблиц в Фигме мы выяснили, что базовый элемент создания любого data grid — это компонент ячейки, внутри которого спрятано все необходимое для того, чтобы оставаться в одном экземпляре и строить таблицы ячейка-за-ячейкой. Теперь поговорим о её структуре: какие элементы вложены, случаи использования, рассмотрим темификацию таблиц через токены-цвета. И напоследок расскажу о передаче спецификаций разработчикам и интеграцию таблиц в React/Angular фреймворки прямиком из Figma дизайн-системы. Пока руками, ибо будущее всё еще где-то рядом.
Поехали! Начну с демонстрации бесполезных, но прикольных эффектов кастомизации всей таблицы через главную мастер-ячейку:
Таблицы в Figma. Дизайн Data Grid одним компонентом
Строительство таблицы из компонентов — задача, которая рано или поздно возникает перед каждым разработчиком дизайн-систем в Figma.
Существует три подхода к дизайну таблиц, чтобы создать data grid с гибкой архитектурой. В каждом из случаев используется либо row-компонент, либо column-компонент, либо cell-компонент. Каждый из случаев подробно рассмотрим ниже.
Figma компонент и организация экземпляров на примере Userpic
Качественная дизайн-система в Фигме всегда учитывает возможные состояния определенных компонентов. Если до появления Global Styles вариант был лишь один — всегда создавать новый компонент для каждого состояния (например текстовое поле может быть default, а может быть focused), то после внедрения стилей многие UI-элементы удалось унифицировать лишь до одного в своей категории, а разнообразие создавать экземплярами, присоединяя лишь новые стили и цвета.
Адаптивные шаблоны Figma: как сделать гибкий дизайн-компонент мобильной навигации iOS
Всякий раз, создавая новый продукт, хочется сделать его лучше предыдущего, подобрать элегантное решение, чтобы создать удобные и гибкие компоненты дизайн-системы в Figma.
При создании набора компонентных iOS-шаблонов для Figma я решил поэкспериментировать с компонентом Tab Bar. Напомню, что в гайдлайнах iOS это нижняя навигация. Мне хотелось, чтобы его содержимое имело логичное и оптимальное поведение при ресайзе. Хотелось сделать его максимально адаптивным для всех iOS-устройств, насколько это позволяет сделать Figma и направляющие (constraints).
Как я дизайн монетизировал. 15 инсайтов о создании цифрового продукта, который продается
Итоги года для UI дизайнера, у которого не было ни одного интересного проекта в портфолио и он решил создать свой собственный продукт для популярной теперь дизайн-платформы Figma.
Раньше я всегда относился скептически к таким постам. Но после того как минул ровно год, давший мне опыта и мудрости лет на 10, я все понял: мне просто нечего было сказать.
Я не работал в больших компаниях, не устраивал-дизайн спринты и не сидел бок о бок с крутыми парнями в коворкингах. Я в дизайне уже не менее 16 лет, я самоучка, и однажды у меня не оказалось ни одного интересного проекта в портфолио, который бы круто работал и современно выглядел. Все мои последние годы стабильного фриланса — это клиенты с обычными заказами. Они приходят и уходят. И 80% из них позднее выбрасывают в топку всё ваше творчество. Потому что по законам рынка это число терпит неудачу после запуска проекта.
Обнаружены элементарные дизайн-частицы
Честно говоря, мне уже неловко в очередной раз говорить об Атомарном дизайне. Про концепции дизайн-систем сказано практически все и, казалось бы, добавить уже нечего. Но постойте! Ведь атомы в реальном мире из чего-то состоят: протоны, нейтроны, электроны… Можно ли сопоставить со структурой атома дизайн-функционал, с котором мы работаем? Я уверен, что ответ положительный и вот почему…
Дизайн-система в Figma. Взгляд на интерфейс через компоненты
Какой должна быть оптимальная дизайн-система в Figma? Что такое переиспользуемый компонент? Как понятнее и удобнее организовать структуру внутри панели Instance? Каковы этапы разработки подобного продукта? И так далее. Ответы на эти и многие другие вопросы я постараюсь дать в этой статье.
Один год в Фигме. О плюсах и минусах дизайн-инструмента субъективно
Последний год я использую Figma. Скорее всего Вы уже о ней слышали. В этой статье я опишу недостатки и преимущества, опираясь на личные наблюдения. Всё сказанное будет носить субъективный характер. Я начал пользоваться Figma еще в тот момент, когда логика работы с компонентами была очень сырой. За год почти незаметно происходила эволюция. Сегодня элементы внутри компонента взаимодействуют между собой более логично и упорядоченно. Тем не менее, недостатки все еще есть…
Полезное дизайнеру и разработчику. Свежие утилиты и инструменты для ускорения работы. Выпуск № 10
Полезное дизайнеру / разработчику. Свежие утилиты и инструменты для ускорения работы. Выпуск № 9
Пока дизайнеры продолжают испытывать восторг от появления возможности прототипирования в двух известных инструментах, анонсированных в один день; мир независимых разработчиков продолжает выпускать всякие нужные инструменты. В 9-м выпуске 20 ссылок
Полезное дизайнеру / разработчику. Свежие утилиты и инструменты для ускорения работы. Выпуск № 8
Прототипирование — это просто, как собрать пазл. Мультикомпоненты дизайн системы в Figma
Information
- Rating
- Does not participate
- Location
- Москва, Москва и Московская обл., Россия
- Date of birth
- Registered
- Activity