Pull to refresh
55
0
Роман Камушкин @kamushken

Готовые дизайн системы в Figma → setproduct.com

Send message

14 свежих и полезных дизайн-ресурсов в Январе

Reading time 5 min
Views 5.2K

Что в сегодняшнем выпуске: различные генераторы, крутые источники для вдохновения, стильные иконки, топовые продукты из Product Hunt за 2020 год, инструменты для экспорта анимаций и гифок, и многое другое.

Читать далее
Total votes 8: ↑8 and ↓0 +8
Comments 0

Вспоминаем все важные события в UI/UX дизайне за 2020-й

Reading time 7 min
Views 8.6K

2020-й миновал. Это был нестабильный год и многие выдохлись. Социальная дистанция, локдаун, удаленная работа, а для многих – сокращения: все это стало новой реальностью.

Но несмотря на нестабильность, мировая сцена UI/UX и продуктового дизайна не стояла на месте. Ведь с новыми проблемами появились и новые решения. Компании выпускали новые продукты, а также обновляли существующие.

Читать далее
Total votes 10: ↑10 and ↓0 +10
Comments 8

13 свежих и полезных дизайн-ресурсов уходящей осени

Reading time 6 min
Views 8K

Всем привет! В этом выпуске мы отобрали для вас лучшие ссылки на ресурсы, которые актуальны в индустрии дизайна и разработки, добавят вам вдохновения и ускорят рабочие процессы. Всем этим мы пользуемся сами, и думаем, что подборка будет полезна.

Читать далее
Total votes 7: ↑7 and ↓0 +7
Comments 8

6 способов дополнительного дохода для дизайнеров и разработчиков

Reading time 8 min
Views 10K

Эта статья поможет как начинающим дизайнерам и разработчикам, так и опытным специалистам, мечтающим улучшить свое финансовое положение. Если у вас сейчас есть стабильная и высокооплачиваемая работа - всегда есть риск, что вы можете попасть под сокращение. Пандемия отлично показала, что сейчас очень важно иметь финансовую подушку безопасности и дополнительные источники дохода.

Запуская собственный side project, вы имеете все шансы сделать его основным вашим занятием. Иногда такие проекты даже становятся делом всей жизни...

Читать далее
Total votes 22: ↑2 and ↓20 -18
Comments 13

Десять компаний, которым Figma помогла достичь новых результатов в дизайне и не только

Reading time 8 min
Views 3.2K


Всем привет! В очередной статье мы представляем вам список из 10 компаний, для которых использование Фигмы стало отправной точкой на пути к новым вершинам.

Это истории проблем и пути их решений, где современный дизайн-инструмент сыграл решающую роль.

Возможно, вы планируете разработать собственный перспективный проект и думаете над тем, какой инструмент использовать. Или работаете в компании, которая пользуется другими инструментами для дизайна и прототипирования. В любом случае, после прочтения этой статьи — у вас будет еще +10 причин начать использовать Фигму.
Читать дальше →
Total votes 14: ↑7 and ↓7 0
Comments 0

Обзор 14 свежих плагинов для Фигмы, которые помогут повысить производительность пока мы все #сидимдома

Reading time 7 min
Views 17K


Сегодня мы поговорим о следующих новых 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 – Фильтрующий плагин для ретуши ваших изображений

Читать дальше →
Total votes 10: ↑10 and ↓0 +10
Comments 5

Как создать UI kit, который продается. Этапы разработки коммерческой дизайн-системы

Reading time 8 min
Views 23K


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

Я расскажу о поэтапном плане создания коммерческой дизайн-системы. Узнаете как сделать и выпустить на рынок свой продукт. Расскажу что сделать перед началом работы, как подготовиться и составить план. Отдельно рассмотрю этапы разработки дизайн-системы для Figma. В последней части дам советы как продвигать и раскручивать. В статье только личный опыт и наблюдения самоучки.
Читать дальше →
Total votes 14: ↑12 and ↓2 +10
Comments 1

8 простых UI приёмов чтобы сделать дизайн-прототип динамичным, не прибегая к анимации

Reading time 6 min
Views 32K


Материал этой статьи является следствием моих дизайн-экспериментов и выводов за последний год-полтора непрерывного дизайн гринда. Я неустанно собирал ui kit’ы, экспериментировал с контентом в плейсхолдерах, стилями, тенями текстами и состояниями, чтобы понять влияет ли это на конверсию. Иначе говоря, смогу ли я увеличить продажи дизайн-продуктов для Figma, если добавлю немного визуальной динамики в статичные дизайн-макеты, чтобы сделать темплейты интереснее и функциональнее.
Читать дальше →
Total votes 43: ↑37 and ↓6 +31
Comments 21

Создание таблиц в дизайн системе Figma и реализация в Storybook (React)

Reading time 5 min
Views 11K


В предыдущей статье на тему дизайна таблиц в Фигме мы выяснили, что базовый элемент создания любого data grid — это компонент ячейки, внутри которого спрятано все необходимое для того, чтобы оставаться в одном экземпляре и строить таблицы ячейка-за-ячейкой. Теперь поговорим о её структуре: какие элементы вложены, случаи использования, рассмотрим темификацию таблиц через токены-цвета. И напоследок расскажу о передаче спецификаций разработчикам и интеграцию таблиц в React/Angular фреймворки прямиком из Figma дизайн-системы. Пока руками, ибо будущее всё еще где-то рядом.

Поехали! Начну с демонстрации бесполезных, но прикольных эффектов кастомизации всей таблицы через главную мастер-ячейку:
Читать дальше →
Total votes 16: ↑16 and ↓0 +16
Comments 5

Таблицы в Figma. Дизайн Data Grid одним компонентом

Reading time 5 min
Views 46K
image

Строительство таблицы из компонентов — задача, которая рано или поздно возникает перед каждым разработчиком дизайн-систем в Figma.

Существует три подхода к дизайну таблиц, чтобы создать data grid с гибкой архитектурой. В каждом из случаев используется либо row-компонент, либо column-компонент, либо cell-компонент. Каждый из случаев подробно рассмотрим ниже.

Читать дальше →
Total votes 10: ↑10 and ↓0 +10
Comments 1

Figma компонент и организация экземпляров на примере Userpic

Reading time 4 min
Views 13K


Качественная дизайн-система в Фигме всегда учитывает возможные состояния определенных компонентов. Если до появления Global Styles вариант был лишь один — всегда создавать новый компонент для каждого состояния (например текстовое поле может быть default, а может быть focused), то после внедрения стилей многие UI-элементы удалось унифицировать лишь до одного в своей категории, а разнообразие создавать экземплярами, присоединяя лишь новые стили и цвета.
Читать дальше →
Total votes 12: ↑11 and ↓1 +10
Comments 5

Адаптивные шаблоны Figma: как сделать гибкий дизайн-компонент мобильной навигации iOS

Reading time 3 min
Views 22K


Всякий раз, создавая новый продукт, хочется сделать его лучше предыдущего, подобрать элегантное решение, чтобы создать удобные и гибкие компоненты дизайн-системы в Figma.

При создании набора компонентных iOS-шаблонов для Figma я решил поэкспериментировать с компонентом Tab Bar. Напомню, что в гайдлайнах iOS это нижняя навигация. Мне хотелось, чтобы его содержимое имело логичное и оптимальное поведение при ресайзе. Хотелось сделать его максимально адаптивным для всех iOS-устройств, насколько это позволяет сделать Figma и направляющие (constraints).
Читать дальше →
Total votes 8: ↑6 and ↓2 +4
Comments 0

Как я дизайн монетизировал. 15 инсайтов о создании цифрового продукта, который продается

Reading time 8 min
Views 7.3K

Итоги года для UI дизайнера, у которого не было ни одного интересного проекта в портфолио и он решил создать свой собственный продукт для популярной теперь дизайн-платформы Figma.

Раньше я всегда относился скептически к таким постам. Но после того как минул ровно год, давший мне опыта и мудрости лет на 10, я все понял: мне просто нечего было сказать.

Я не работал в больших компаниях, не устраивал-дизайн спринты и не сидел бок о бок с крутыми парнями в коворкингах. Я в дизайне уже не менее 16 лет, я самоучка, и однажды у меня не оказалось ни одного интересного проекта в портфолио, который бы круто работал и современно выглядел. Все мои последние годы стабильного фриланса — это клиенты с обычными заказами. Они приходят и уходят. И 80% из них позднее выбрасывают в топку всё ваше творчество. Потому что по законам рынка это число терпит неудачу после запуска проекта.
Читать дальше →
Total votes 14: ↑12 and ↓2 +10
Comments 7

Обнаружены элементарные дизайн-частицы

Reading time 3 min
Views 6.5K
image
Честно говоря, мне уже неловко в очередной раз говорить об Атомарном дизайне. Про концепции дизайн-систем сказано практически все и, казалось бы, добавить уже нечего. Но постойте! Ведь атомы в реальном мире из чего-то состоят: протоны, нейтроны, электроны… Можно ли сопоставить со структурой атома дизайн-функционал, с котором мы работаем? Я уверен, что ответ положительный и вот почему…
Читать дальше →
Total votes 27: ↑1 and ↓26 -25
Comments 8

Дизайн-система в Figma. Взгляд на интерфейс через компоненты

Reading time 8 min
Views 39K


Какой должна быть оптимальная дизайн-система в Figma? Что такое переиспользуемый компонент? Как понятнее и удобнее организовать структуру внутри панели Instance? Каковы этапы разработки подобного продукта? И так далее. Ответы на эти и многие другие вопросы я постараюсь дать в этой статье.
Total votes 11: ↑10 and ↓1 +9
Comments 4

Один год в Фигме. О плюсах и минусах дизайн-инструмента субъективно

Reading time 3 min
Views 11K


Последний год я использую Figma. Скорее всего Вы уже о ней слышали. В этой статье я опишу недостатки и преимущества, опираясь на личные наблюдения. Всё сказанное будет носить субъективный характер. Я начал пользоваться Figma еще в тот момент, когда логика работы с компонентами была очень сырой. За год почти незаметно происходила эволюция. Сегодня элементы внутри компонента взаимодействуют между собой более логично и упорядоченно. Тем не менее, недостатки все еще есть…
Читать дальше →
Total votes 10: ↑9 and ↓1 +8
Comments 5

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

Reading time 5 min
Views 16K


10-й «Юбилейный» выпуск полезных штук для дизайнеров и разработчиков. Сегодня в выпуске 31 ссылка на всякие свежие полезности. Больше добавить нечего → изучайте сами и делитесь с друзьями!
Читать дальше →
Total votes 13: ↑12 and ↓1 +11
Comments 3

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

Reading time 4 min
Views 20K


Пока дизайнеры продолжают испытывать восторг от появления возможности прототипирования в двух известных инструментах, анонсированных в один день; мир независимых разработчиков продолжает выпускать всякие нужные инструменты. В 9-м выпуске 20 ссылок
Читать дальше →
Total votes 20: ↑18 and ↓2 +16
Comments 1

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

Reading time 6 min
Views 14K
В этом выпуске Вы найдете 34 ссылки на свежие и полезные релизы, авторы которых вносят значительный вклад в развитие профессионального сообщества дизайнеров whи разработчиков, так как делают это безвозмездно. В сегодняшнем выпуске будет summary того, что я уже публиковал на канале «Полезное дизайнеру» и кое-что еще…


Читать дальше →
Total votes 17: ↑17 and ↓0 +17
Comments 5

Прототипирование — это просто, как собрать пазл. Мультикомпоненты дизайн системы в Figma

Reading time 3 min
Views 40K
Если вы работаете в среде Figma, то скорее всего вы используете компоненты в своих дизайн-процессах и знаете в чем их преимущества. Когда в ежедневной фриланс рутине я устал повторять создание одних и тех же списков, табов, таблиц или любых других модулей, состав которых динамичен, я начал думать об автоматизации этих процессов, чтобы рутина как минимум протекала быстрее. Таким образом мультикомпоненты и были открыты!


Узнайте, как ускорить дизайн-процессы
Total votes 24: ↑23 and ↓1 +22
Comments 12

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity