#фигма — Public Fediverse posts

Гайд для малышей: как перегнать дизайн из Figma в код

Стартовый гайд, для тех, кто хочет на простом примере научиться генерировать из Figma как минимум веб-страницу, которая: сделана по дизайну, адаптивна под разные размеры экрана, учитывает retina и non-retina дисплеи, поддерживает локализацию с динамическим переключением языков и позволяет реализовать другие свои хотелки Читать гайд

https://habr.com/ru/articles/1018064/

#figma #designer #дизайн #вайбкодинг #вайбкодинг #фигма #генерация_кода #сайт #гайд #туториал

Скорость vs качество: как находить баланс в дизайне при MVP-разработке

Привет, Хабр! Меня зовут Павел Литвиненко, я продуктовый дизайнер в группе проектирования пользовательских интерфейсов B2B «Лаборатории Касперского». Периодически нам приходится разрабатывать новые продукты с нуля. По сути, мы создаем интерфейс для MVP (minimum viable product), то есть продукта, обладающего минимальными, но достаточными для потребителя функциями. Как правило, это тот случай, когда больше всего необходим баланс между скоростью разработки и качеством: чтобы и гипотезы быстро обкатать, и не пасть в грязь лицом перед юзером. Время почти всегда работает против вас. Продуктовая команда хочет запуститься «вчера», но дизайн требует проработки, системности и исследований. Один друг описал мне этот подход так: «Тебе надо добраться из пункта А в пункт Б. Ты стартуешь пешком и развиваешь способы перемещения на ходу: бег, ролики, самокат, велосипед, мопед, мотоцикл, авто и так далее. Каждый новый метод — отдельный релиз». Чтобы все это «поженить» и не нарушить баланс, нужен хороший инструментарий. Об этом и статья: поделюсь личным опытом, подходами и инструментами для дизайнеров B2B-продуктов, которые я применял сам в рамках разработки в «Лаборатории Касперского», в частности при работе над нашим NGFW (Next Generation Firewall). Поговорим о вездесущей ИИшке, дизайн-системах и прототипах для фронтенда.

https://habr.com/ru/companies/kaspersky/articles/974562/

#дизайн #дизайн_интерфейсов #дизайнсистема #интерфейсы #фигма #ии #mvp #редизайн #обновление #ux_design

Скорость vs качество: как находить баланс в дизайне при MVP-разработке

Привет, Хабр! Меня зовут Павел Литвиненко, я продуктовый дизайнер в группе проектирования пользовательских интерфейсов B2B «Лаборатории Касперского». Периодически нам приходится разрабатывать новые продукты с нуля. По сути, мы создаем интерфейс для MVP (minimum viable product), то есть продукта, обладающего минимальными, но достаточными для потребителя функциями. Как правило, это тот случай, когда больше всего необходим баланс между скоростью разработки и качеством: чтобы и гипотезы быстро обкатать, и не пасть в грязь лицом перед юзером. Время почти всегда работает против вас. Продуктовая команда хочет запуститься «вчера», но дизайн требует проработки, системности и исследований. Один друг описал мне этот подход так: «Тебе надо добраться из пункта А в пункт Б. Ты стартуешь пешком и развиваешь способы перемещения на ходу: бег, ролики, самокат, велосипед, мопед, мотоцикл, авто и так далее. Каждый новый метод — отдельный релиз». Чтобы все это «поженить» и не нарушить баланс, нужен хороший инструментарий. Об этом и статья: поделюсь личным опытом, подходами и инструментами для дизайнеров B2B-продуктов, которые я применял сам в рамках разработки в «Лаборатории Касперского», в частности при работе над нашим NGFW (Next Generation Firewall). Поговорим о вездесущей ИИшке, дизайн-системах и прототипах для фронтенда.

https://habr.com/ru/companies/kaspersky/articles/974562/

#дизайн #дизайн_интерфейсов #дизайнсистема #интерфейсы #фигма #ии #mvp #редизайн #обновление #ux_design

Скорость vs качество: как находить баланс в дизайне при MVP-разработке

Привет, Хабр! Меня зовут Павел Литвиненко, я продуктовый дизайнер в группе проектирования пользовательских интерфейсов B2B «Лаборатории Касперского». Периодически нам приходится разрабатывать новые продукты с нуля. По сути, мы создаем интерфейс для MVP (minimum viable product), то есть продукта, обладающего минимальными, но достаточными для потребителя функциями. Как правило, это тот случай, когда больше всего необходим баланс между скоростью разработки и качеством: чтобы и гипотезы быстро обкатать, и не пасть в грязь лицом перед юзером. Время почти всегда работает против вас. Продуктовая команда хочет запуститься «вчера», но дизайн требует проработки, системности и исследований. Один друг описал мне этот подход так: «Тебе надо добраться из пункта А в пункт Б. Ты стартуешь пешком и развиваешь способы перемещения на ходу: бег, ролики, самокат, велосипед, мопед, мотоцикл, авто и так далее. Каждый новый метод — отдельный релиз». Чтобы все это «поженить» и не нарушить баланс, нужен хороший инструментарий. Об этом и статья: поделюсь личным опытом, подходами и инструментами для дизайнеров B2B-продуктов, которые я применял сам в рамках разработки в «Лаборатории Касперского», в частности при работе над нашим NGFW (Next Generation Firewall). Поговорим о вездесущей ИИшке, дизайн-системах и прототипах для фронтенда.

https://habr.com/ru/companies/kaspersky/articles/974562/

#дизайн #дизайн_интерфейсов #дизайнсистема #интерфейсы #фигма #ии #mvp #редизайн #обновление #ux_design

Скорость vs качество: как находить баланс в дизайне при MVP-разработке

Привет, Хабр! Меня зовут Павел Литвиненко, я продуктовый дизайнер в группе проектирования пользовательских интерфейсов B2B «Лаборатории Касперского». Периодически нам приходится разрабатывать новые продукты с нуля. По сути, мы создаем интерфейс для MVP (minimum viable product), то есть продукта, обладающего минимальными, но достаточными для потребителя функциями. Как правило, это тот случай, когда больше всего необходим баланс между скоростью разработки и качеством: чтобы и гипотезы быстро обкатать, и не пасть в грязь лицом перед юзером. Время почти всегда работает против вас. Продуктовая команда хочет запуститься «вчера», но дизайн требует проработки, системности и исследований. Один друг описал мне этот подход так: «Тебе надо добраться из пункта А в пункт Б. Ты стартуешь пешком и развиваешь способы перемещения на ходу: бег, ролики, самокат, велосипед, мопед, мотоцикл, авто и так далее. Каждый новый метод — отдельный релиз». Чтобы все это «поженить» и не нарушить баланс, нужен хороший инструментарий. Об этом и статья: поделюсь личным опытом, подходами и инструментами для дизайнеров B2B-продуктов, которые я применял сам в рамках разработки в «Лаборатории Касперского», в частности при работе над нашим NGFW (Next Generation Firewall). Поговорим о вездесущей ИИшке, дизайн-системах и прототипах для фронтенда.

https://habr.com/ru/companies/kaspersky/articles/974562/

#дизайн #дизайн_интерфейсов #дизайнсистема #интерфейсы #фигма #ии #mvp #редизайн #обновление #ux_design

Мой самый упрямый экран. Figma была свидетелем

Неделю назад я написал нашему программисту: «Знаешь, наверное, к концу следующей недели я сделаю дизайн всего приложения». Да, отличное начало для истории о том, как один экран может выбесить. Делюсь ссылкой на свой проект в Figma

https://habr.com/ru/articles/974974/

#фигма #figma #ux_design #ux #app #приложение #прототип #стартап #atmy #личный_опыт

Мой самый упрямый экран. Figma была свидетелем

Неделю назад я написал нашему программисту: «Знаешь, наверное, к концу следующей недели я сделаю дизайн всего приложения». Да, отличное начало для истории о том, как один экран может выбесить. Делюсь ссылкой на свой проект в Figma

https://habr.com/ru/articles/974974/

#фигма #figma #ux_design #ux #app #приложение #прототип #стартап #atmy #личный_опыт

Мой самый упрямый экран. Figma была свидетелем

Неделю назад я написал нашему программисту: «Знаешь, наверное, к концу следующей недели я сделаю дизайн всего приложения». Да, отличное начало для истории о том, как один экран может выбесить. Делюсь ссылкой на свой проект в Figma

https://habr.com/ru/articles/974974/

#фигма #figma #ux_design #ux #app #приложение #прототип #стартап #atmy #личный_опыт

Что такое Vertical Trim в Figma

Эта статья является более детальной версией поста, который я выкладывала в своем Телеграм-канале для дизайнеров . Посмотрите на первую кнопку на иллюстрации. Кажется, что текст на ней немного сдвинут вниз, правда? На самом деле он выровнен строго по центру — сверху и снизу от текста до края кнопки по 24px.

https://habr.com/ru/articles/963484/

#фигма #figma #vertical_trim #figma_design #ui

Как выжить в мире сложных интерфейсов в 2025-м: 7 работающих рецептов от React и CSS до дизайн-систем

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

https://habr.com/ru/companies/ncloudtech/articles/924704/

#javascript #ux #митап #css #дизайнсистема #интерфейсы #фигма #figma #js #rxjs

Как выжить в мире сложных интерфейсов в 2025-м: 7 работающих рецептов от React и CSS до дизайн-систем

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

https://habr.com/ru/companies/ncloudtech/articles/924704/

#javascript #ux #митап #css #дизайнсистема #интерфейсы #фигма #figma #js #rxjs

Как выжить в мире сложных интерфейсов в 2025-м: 7 работающих рецептов от React и CSS до дизайн-систем

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

https://habr.com/ru/companies/ncloudtech/articles/924704/

#javascript #ux #митап #css #дизайнсистема #интерфейсы #фигма #figma #js #rxjs

Как выжить в мире сложных интерфейсов в 2025-м: 7 работающих рецептов от React и CSS до дизайн-систем

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

https://habr.com/ru/companies/ncloudtech/articles/924704/

#javascript #ux #митап #css #дизайнсистема #интерфейсы #фигма #figma #js #rxjs

Порядок в Figma: секреты дизайнеров t2

Всем привет! Меня зовут Аля, и уже больше года я являюсь частью дизайн-команды t2.digital и работаю над интерфейсами мобильного приложения t2. Когда я только пришла в компанию, первое, что бросилось в глаза, — как неудобно были организованы макеты в Figma. Рабочее пространство больше напоминало шкаф подростка, где вперемешку лежали чистая одежда и грязные носки, по классике у половины из них не было пары. Было трудно отыскать нужные экраны для задач и ещё сложнее определить их актуальность. В такие моменты важно говорить уверенно: да, было. Поэтому, вооружившись поддержкой тим-лида и стукнув крепким женским кулаком по столу, я приняла решение заняться «уборкой». Совместными с командой усилиями мы прописали правила работы с макетами, которые были удобны сразу всем дизайнерам и не требовали в моменте больших трудозатрат. Всё-таки цель была облегчить работу, а не усложнить! На протяжении последних шести месяцев мы проверяли жизнеспособность этих правил. Спойлер: они отлично себя показали! Все макеты теперь структурированы и консистентно оформлены, значительно сократилось время на поиск нужных экранов. Итак, давайте по порядку, что это за правила.

https://habr.com/ru/companies/t2/articles/915868/

#команда_мечты #дизайн_интерфейсов #фигма #продуктовый_дизайн #рабочий_процесс #командная_работа #рабочее_пространство #дизайн #лайфхаки

Горячие клавиши в Figma с пояснением на русском

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

https://habr.com/ru/articles/907094/

#figma #hotkeys #вебдизайн #фигма #дизайн #ускорение

Дизайн в масштабе: как мы связали макеты и оргструктуру, ускорив работу в несколько раз

Привет! Я Александр Букин, дизайн-лид направления Фудтех в Магнит OMNI, объединяющем сервис доставкивертикаль «Магнит Фудтех», маркетплейс «Магнит Маркет» и программу лояльности «Магнит Плюс». Сегодня я расскажу, как мы решаем задачу навигации по карте экранов и ищем ответственных за них в нашем дизайн-комьюнити. Это особенно актуально для средних и крупных дизайн-отделов, где с ростом числа команд, фич и продуктов неизбежно увеличивается и количество макетов, которые нужно систематизировать и структурировать. У растущих команд меняются зоны ответственности: отдельные фичи или части приложения могут переходить от одной команды к другой, потому что мы постоянно стремимся к максимальной эффективности. Всё это неизбежно приводит к трудностям в работе с макетами: их структура становится сложнее, а поиск ответственных за актуальное состояние того или иного экрана — всё более запутанным.

https://habr.com/ru/companies/magnit/articles/893130/

#Оргструктура #Карта_экранов #magnit_tech #дизайнкоманды #дизайнкомьюнити #workflow #внутренние_продукты #figma #фигма #ui

Время идёт, а ничего не меняется. Самыми популярными вопросами среди начинающих дизайнеров остаются:

Котики, привет! Сегодня рассмотрим трепетные вопросы для новичков и подумаем над ответами на них в цепочке следующих постов, а именно: • С чего начать? • Курсы или самоучка? • Когда и где искать работу? • Как устроиться на «ту самую работу»? Читать статью

https://habr.com/ru/articles/878120/

#Дизайн #UI #UX #Продуктовый_дизайн #Старт_в_карьере #Как_начать #полезные_ресурсы #Фигма #Учёба #Самообразование

Плагины и лайфхаки для работы с текстом в Figma

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

https://habr.com/ru/companies/tochka/articles/864908/

#плагины_Figma #текст_в_Figma #массовое_редактирование #типографика #генерация_текста_AI #figma #фигма #работа_с_текстом #проверка_орфографии

Бесплатно поиграть с режимами в Figma

Дизайнеры-джуны, можно бесплатно потрогать платные фишки фигмы, например, режимы, темы и переводы. Мои ученики и менти сталкиваются с дилеммой - надо практиковать токены и алиасинг, но продвинутые фишки в Figma платные. Решение простое: откройте проект Variables playground в комьюнити. Редактировать темы не получится, но можно применять готовые темы и режимы, не оплачивая подписку фигмы. Более того, есть разные дизайн-системы в открытом доступе. Например, Яндекс открыл Gravity UI , где применяются сразу 4 режима.

https://habr.com/ru/articles/868554/

#фигма #designsystem #советы #tipsandtricks #figma #дизайнсистема #uikit #interface

Фигма удаляет российские аккаунты: разбираемся в причинах и учимся работать с информацией

Ранее некоторые инфоблогеры в запрещенной сети сняли ролики о блокировке учетных записей Figma на территории РФ. На днях в локальном чате произошел взрыв новости о том, то Figma внезапно снесла аккаунт пользователю. Позднее в телеграм канале Crauch вышла публикация с сообщением о блокировки аккаунта. Давайте постараемся разобраться...

https://habr.com/ru/articles/866846/

#Figma #design #фигма_уходит #фигма

Веб-дизайн для подростков в Figma: 9 бесплатных видеоуроков

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

https://habr.com/ru/companies/pixel_study/articles/835184/

#вебдизайн #дети #уроки #образование #Figma #дизайн #графический_дизайн #видео #подростки #фигма

Редизайн Figma: жутко неудобно и жутко интересно…

Недавно произошёл редизайн Figma ⚹¹ и я решил поделиться своим очень важным мнением :) Я UX/UI-дизайнер, то есть целевая аудитория Фигмы. На протяжении многих лет это мой основной инструмент работы, я облазил её вдоль и поперёк, был в числе первых бета-тестеров, кто пощупал авто-лэйауты и переменные. И теперь когда я заручился вашим доверием, могу переходить к критике и похвале интерфейса. Внимание, в конце статьи есть полезные ссылки! Читать

https://habr.com/ru/articles/826550/

#figma #figma_design #фигма #редизайн_интерфейса #редизайн #ui/ux #ui #ux #user_experience

Разработка сайта на Тильде на примере реального проекта — подход и разбор решений по UX и UI

Привет! Сегодня хочу поделиться опытом разработки многостраничного сайта и на конкретном примере рассказать, как действую, чем руководствуюсь и на что обращаю внимание с самого начала. Погнали.

https://habr.com/ru/articles/805179/

#Тильда #фигма #вебдизайнер #uxдизайн #uiдизайн

Переменные и условия: как быстро сделать в Фигме нелинейный прототип

Например, прототип формы, поля которой можно заполнять непоследовательно. Иногда сценарии и механики перехода между экранами (или состояниями одного экрана) получаются такими сложными, что для подготовки прототипа и тестирования на респондентах приходится переносить макеты из Фигмы в специальные инструменты вроде ProtoPie или Axure. Летом 2023 года в Фигме появились условия и переменные, благодаря которым можно показывать всё более сложные взаимодействия. А также меньшими усилиями добиваться того, что раньше требовало усилий значимых, например, давать респондентам возможность заполнить поля формы в произвольном порядке. Не все дизайнеры, с которыми я общался, знают о подобных способах применения связки переменных с условиями . Поэтому я и решил об этом рассказать на примере кейса с непоследовательным заполнением полей формы.

https://habr.com/ru/companies/alfa/articles/795357/

#figma #формы #переменные #условия #фигма

Переменные и условия: как быстро сделать в Фигме нелинейный прототип

Например, прототип формы, поля которой можно заполнять непоследовательно. Иногда сценарии и механики перехода между экранами (или состояниями одного экрана) получаются такими сложными, что для подготовки прототипа и тестирования на респондентах приходится переносить макеты из Фигмы в специальные инструменты вроде ProtoPie или Axure. Летом 2023 года в Фигме появились условия и переменные, благодаря которым можно показывать всё более сложные взаимодействия. А также меньшими усилиями добиваться того, что раньше требовало усилий значимых, например, давать респондентам возможность заполнить поля формы в произвольном порядке. Не все дизайнеры, с которыми я общался, знают о подобных способах применения связки переменных с условиями . Поэтому я и решил об этом рассказать на примере кейса с непоследовательным заполнением полей формы.

https://habr.com/ru/companies/alfa/articles/795357/

#figma #формы #переменные #условия #фигма

Гайд по работе с ветками (Figma Branch)

Figma Branch (или «ветка») — это функционал, который позволяет создать копию проекта и изменять его независимо от основной версии. Когда работа завершена и нужно внести изменения в основной проект — ветка сливается с master-версией. Всё как у разработчиков. Но чтобы использовать Branch, ваш тариф должен быть Organization или Enterprise. Предпосылки При коллективной работе над проектом, всегда встречаются классические проблемы: что/когда/кем было добавлено в проект и почему компоненты сломались. Я часто видел костыльное решение — складывать готовые экраны и компоненты куда-то в угол канваса, тегать лида комментом, а после ревью — чистить за собой, мрак. Проще, быстрей, дешевле использовать функционал Branch, тем более они идеально подходят для следующих сценариев:

https://habr.com/ru/articles/793772/

#figma #branch #design_system #designer #дизайнеру #дизайн_интерфейсов #фигма #ветки

Без углов и стресса: Формула успешного дизайна, или как правильно скруглить внутренние углы фигур

Если вы новичок в дизайне, то наверняка могли заметить, что мелочи часто играют большую роль при создании композиции. Одна из таких мелочей – внутренние углы. В данной статье я рассказал, почему они важны и как сделать так, чтобы ваше закругление углов выглядело аккуратно.

https://habr.com/ru/articles/789314/

#графический_интерфейс #ui_ux #фигма #дизайн_интерфейсов #дизайн #дизайн_сайта #опыт_использования #оптимизация_интерфейсов #ошибки_в_дизайне #секреты_дизайна