El Danielle
El Danielle
  • 5
  • 39 722
Человеческая аватарка – Avatar | Воркшоп #5 | UI-kit
Телеграм-канал Ильи t.me/+FTfDJaCaCxZmNDhi
где он рассказывает как качать навыки продуктового дизайнера, работая в дизайн-студии.
Мой тг: t.me/+2Q738JTfRfoxOWNi
Чат, где помогаем друг другу с компонентами: t.me/+e2e3f9TOhzplY2Uy
Плейграунд из воркшопа: clck.ru/39Phst
Продолжаем качать системное мышление и более осознанный подход на примере компонентов UI-kit.
В воркшопе разобрали Аватарку (Avatar): cобрали компонент с фоткой, заглушкой, инициалами, индикаторами, размером и разными цветами - короче, основной набор. В процессе подсветил разные нюансы (чтобы текст не съезжал, не было много вариантов и пр). Использовали самые актуальные обновления Figma (Autolayout, Property, Boolean, Instance swap, Nested instances).
00:00 - О чем ролик
00:40 - Интеграция
01:07 - Начало
03:30 - Сборка компонента
16:04 - Баг
17:38 - Про Avatar Stack и другие компоненты
Как обычно, приглашаю всех в комменты, критикуйте, дополняйте, делитесь своим опытом. 👇
Переглядів: 1 860

Відео

Тег и Бейдж | Воркшоп #4 | UI-kit
Переглядів 2,7 тис.4 місяці тому
Телеграм-канал Ильи t.me/ FTfDJaCaCxZmNDhi где он рассказывает как качать навыки продуктового дизайнера, работая в дизайн-студии. Мой тг: t.me/ 2Q738JTfRfoxOWNi Чат, где помогаем друг другу с компонентами: t.me/ e2e3f9TOhzplY2Uy Плейграунд из воркшопа: clck.ru/39Phst Продолжаем качать системное мышление и более осознанный подход на примере компонентов UI-kit. 👇 В воркшопе разобрали Теги (Tag) и...
Кнопки | Воркшоп #3 | UI-kit
Переглядів 6 тис.4 місяці тому
Телеграм-канал Кати t.me/ J_hi0vQ-KFZjMmIy где она помогает начинающим дизайнерам не остаться один на один в дизайне после дорогостоящего обучения. Мой тг: t.me/ 2Q738JTfRfoxOWNi Консультации по портфолио и собесам в дизайн студии и продукты clck.ru/39yssA Чат, где помогаем друг другу с компонентами: t.me/ e2e3f9TOhzplY2Uy Плейграунд из воркшопа: clck.ru/39Phst Продолжаем качать системное мышле...
Система отступов простым языком | Воркшоп #2 | UI-kit
Переглядів 13 тис.Рік тому
мой тг t.me/ 2Q738JTfRfoxOWNi Консультации по портфолио и собесам в дизайн студии и продукты clck.ru/39yssA В этом вокршопе продолжаем качать системное мышление и более осознанный подход на примере UI-кита. Тема клевая, многие слышали, но материала не так много в интернете, поэтому, чаек-кофеек и погнали разбираться: В воркшопе разобрали: 00:00 Вступление 01:41 Чему научимся 02:26 Что такое сис...
Организация цветовой палитры через Color Variables | Воркшоп #1 | UI-kit
Переглядів 16 тис.Рік тому
мой тг-канал t.me/ 2Q738JTfRfoxOWNi Консультации по портфолио и собесам в дизайн студии и продукты clck.ru/39yssA В формате воркшопа показал как можно использовать Color Variables на проекте. А ещё рассказал про организацию цветовой палитры через alpha (прозрачность), токены и их организацию, чтобы освоить новые возможности с должной осознанностью.

КОМЕНТАРІ

  • @angelikapetrova
    @angelikapetrova 6 днів тому

    Большое спасибо! Смотрю вторую часть уже и очень довольна структурой и подачей. Нашла для себя новый подход, потому что раньше сразу заводила на светлую и темную тему без составления коллекции цветов/отступов/etc P.S. Было бы здорово приложить ссылку тг именно на пост с материалами, потому что тем, кто смотрит только сейчас это видео немножко сложно найти в канале

    • @eldanielleee
      @eldanielleee 6 днів тому

      @@angelikapetrova спасибо! Добавим

  • @katyakovaa
    @katyakovaa 14 днів тому

    Хочется ещё увидеть воркшоп по организации стилей типографики 🙏

  • @AzaMurra
    @AzaMurra 16 днів тому

    Ебейше крутая инфа, спасибо!

  • @oprotonoo
    @oprotonoo 16 днів тому

    Не понимаю, почему для space-x1 не установить числовое значение - 4 px ? тот 1-й уровень токенов (0 = 0, 4 = 4, 8 = 8..) - он ведь, во-первых, нигде больше не используется, а значит никакой гибкости не дает; а во-вторых - токены в названии содержат свое значение (вернее название=значению), и в чем тогда смысл этих токенов, в сравнении просто с числовыми значениями?

  • @kraucifer
    @kraucifer 19 днів тому

    16+36=52 так то

  • @VADIM-CHERNYAEV
    @VADIM-CHERNYAEV 21 день тому

    Огонь!!!

  • @paveln9296
    @paveln9296 27 днів тому

    Прям очень круто, доступно, понятно. Спасибо!

  • @Waldemart
    @Waldemart 28 днів тому

    Какая связь между цифрой 600 и прозрачностью в 88% 🤔 не могу понять логику именования в white-600, 500 тд. Как глядя на такое название понять содержимое?

  • @AlexStram1nsky
    @AlexStram1nsky Місяць тому

    Текст ты организуешь именно через стили, не через переменные? И не мог бы ты показать как именно организуешь текстовые стили?

  • @So_dna_postuchali
    @So_dna_postuchali Місяць тому

    Отличный урок! спасибо огромное🤩

  • @IlyuksaSan-Francisco
    @IlyuksaSan-Francisco Місяць тому

    очень крутые у тебя видосы!

  • @alexander_stark
    @alexander_stark Місяць тому

    Я просмотрел множество видео, посвящённых этой теме, но с цветом всё равно возникают сложности. Жёсткая привязка к цвету ограничивает возможности для творчества. Мне кажется, лучше сначала разработать дизайн, а потом уже подбирать варианты. С кнопками тоже есть свои особенности. В обучающих материалах обычно не рассматривают, что в кнопке на хедере может быть изображение телефона, каталога и так далее. К тому же, прошёл уже год с момента выхода системы, и намедни вышло новое обновление, а она до сих пор не научилась сохранять градиенты. Тс шарит за фигму -вопросов 0... Такая система больше подходит для разработки приложений и дашбордов, нежели для дизайна сайта: лендинг, магазин.

  • @arisha8109
    @arisha8109 Місяць тому

    Спасибо за воркшоп 😍 на повтор ушли сутки (такой вот я чайник), натыкалась на косяки, переделывала все несколько раз заново, но все получилось👍🏻

  • @arietts
    @arietts Місяць тому

    очень полезные воркшопы! пожалуйста, делай еще)))

  • @andreypotey949
    @andreypotey949 Місяць тому

    Привет, тебе нужно обязательно настроить программу которая показывает что ты нажимаешь. 🥲

  • @user-xb8mj3lq4r
    @user-xb8mj3lq4r 2 місяці тому

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

  • @ArtemKobyakov
    @ArtemKobyakov 2 місяці тому

    Спасибо. Очень полезно

  • @user-si5hk1uw9w
    @user-si5hk1uw9w 2 місяці тому

    Мужик, спасибо тебе за токены!

  • @user-si5hk1uw9w
    @user-si5hk1uw9w 2 місяці тому

    Это очень круто =

  • @polyansky_design
    @polyansky_design 2 місяці тому

    Занимаюсь сейчас созданием универсального UI Kit для своей компании, который потом будет основой проектов и presale'ов. Решил посмотреть "bestpractice" по теме цветов и просто открыл для себя новый мир! Раньше тащил за собой устаревший, как оказалось, подход в оформлении цветов от своего наставника в прошлой компании (наставник, кстати, очень крутой, но видимо до реорганизации цвета не дошел). В общем спасибо!

  • @nick_yahodin
    @nick_yahodin 2 місяці тому

    супеер! уложилось в голове, как родное 🙂 жду еще и еще

  • @evgnsprmn
    @evgnsprmn 2 місяці тому

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

  • @ankappp333
    @ankappp333 2 місяці тому

    Еще раз спасибо, спасибо, спасибо!!!!!!!!!!!!!!

  • @ankappp333
    @ankappp333 2 місяці тому

    Спасибо огромное за урок, соглашусь с другими - лучший на русскоязычном ютубе!

  • @user-ly3js8lt2w
    @user-ly3js8lt2w 2 місяці тому

    Так приятно слушать горящим своим делом классного профессионала!) 10:40 Меня мучает один вопрос про инстант свайп и изменение цвета иконок. Кейс такой: когда сделал компонент тега или кнопки с иконкой, потом используешь ее в проекте и через инстант свап переключаешь на разные иконки. Затем приходит заказчик и говорит, что нужно изменить в кнопке цвет иконки. Меняю его в компоненте, но там, где были переключены иконки на другие, цвет не меняется и нужно сидеть и менять их самому 😢 Может есть какой-то способ, как это обойти?

    • @eldanielleee
      @eldanielleee 2 місяці тому

      Привет! Напиши на ютубе: пуленепробиваемые иконки

    • @user-ly3js8lt2w
      @user-ly3js8lt2w 2 місяці тому

      @@eldanielleee Привет! Спасибо, да, я подписан на Виктора и пользуюсь фишками из его видео) По его способу иконки прекрасно переключаются в компонентах через instance swap, но тут проблема в том, что те иконки, которые переключил в дочернем компоненте (например, в кнопке), уже не поменяют цвет на новый, который я выберу в мейн компоненте у иконки. Поменяет цвет только стандартная иконка из мейна. И пока только два способа нашел - смориться или городить для каждого компонента свой пак покрашенных обернутых иконок, которые будут ссылаться на родительскую иконку, но это кажется слишком)) Других решений пока не смог найти, может у тебя есть мысли по этому поводу?

    • @eldanielleee
      @eldanielleee 2 місяці тому

      @@user-ly3js8lt2w закинь в наш чатик свой вопрос с примером в фигме. Ребята подскажут

  • @nick_yahodin
    @nick_yahodin 2 місяці тому

    спасибо тебе! супер полезно, понятно и ты прямо закрыл много вопросов + прокачал еще лучше Фигма скилы :)

  • @ekaterinabrenner847
    @ekaterinabrenner847 2 місяці тому

    Спасибо большое за уроки - очень полезно и ценно! Жду следующих видео. ❤

  • @alexeyilin1
    @alexeyilin1 2 місяці тому

    Спасибо, офигенный урок!

  • @catriarchiv
    @catriarchiv 3 місяці тому

    Топовый контент. Самый полезный по ДС

  • @katerinak5933
    @katerinak5933 3 місяці тому

    супер полезный урок, начала собирать свой собственный UI-Kit на основе полученных знаний. Жду не дождусь новое видео ☺

  • @Madvito
    @Madvito 3 місяці тому

    минус такого решения с индикатором онлайн, что аватарку можно располагать только на белом фоне. Обводку у кругляха лучше маской сделать

  • @lizavolokhova7483
    @lizavolokhova7483 3 місяці тому

    Очень информативно. Спасибо большое❤

  • @valeriiia_because
    @valeriiia_because 3 місяці тому

    Здравствуйте, было бы очень интересно посмотреть ролик как правильно дизайнеру сотрудничать с разработчиком, как правильно передавать дизайн в разработку и т.д.

  • @maxbeztalanta4221
    @maxbeztalanta4221 3 місяці тому

    Даня, а го видос с логотипами. Как их масштабировать в компонентах и в системе в целом, если они разного соотношения/размера Было бы круто увидеть как ты это организуешь и отдаешь в разработку

  • @veramarshalova1510
    @veramarshalova1510 3 місяці тому

    Благодарю за вокршоп, в нем прекрасно всё! У меня вопрос: какой плагин используете / можете порекомендовать для автоматизированного описания созданной палитры и токенов?

    • @eldanielleee
      @eldanielleee 3 місяці тому

      Спасибо! Честно говоря, у меня нет такого плагина, потому что нет потока проектов, где я могу его применять) работаю в продукте. У нас есть чатик про компоненты, там больше 300 человек, можно спросить там) ссылка в описании к роликам

  • @by42naa
    @by42naa 3 місяці тому

    Спасибо большое за такую подробную информацию, это максимально полезное видео! Годный контент - подписка и лайк однозначно!!!!!

  • @sergeyfoxy
    @sergeyfoxy 3 місяці тому

    Спасибо! Как всегда мега польза🤟

  • @yomercury
    @yomercury 3 місяці тому

    спасибо-спасибо-спасибо! после ваших воркшопов наконец-то всё уложилось в голове

  • @tarque_
    @tarque_ 3 місяці тому

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

    • @eldanielleee
      @eldanielleee 3 місяці тому

      Блин, точно. Спасибо! Я и так стараюсь мышкой все нажимать, без хоткеев, чтобы видно было.

  • @JuliaRobots
    @JuliaRobots 3 місяці тому

    Спасибо!!!

  • @user-es1pz2lt9c
    @user-es1pz2lt9c 3 місяці тому

    Кайф какой❤ Спасибо огромнейшен🤗🤗

  • @AndrewAstract
    @AndrewAstract 3 місяці тому

    Привет! Спасибо за видео, может быть я пропустил, но почему цвета ты делаешь через прозрачность? Почему не просто задание параметров hsl?

  • @666Anku
    @666Anku 3 місяці тому

    Очень круто получается, супер доходчиво, информативно и наглядно. Спасибо большое!

  • @vitaliyvitaliy6892
    @vitaliyvitaliy6892 3 місяці тому

    Спасибо, чувак ты бог ))))

  • @vitaliyvitaliy6892
    @vitaliyvitaliy6892 3 місяці тому

    Спасибо

  • @Svetlana_Shaimanova
    @Svetlana_Shaimanova 3 місяці тому

    Привет, спасибо за видео! А можно вот так вручную уменьшать дочерний компонент иконки? До этого когда смотрела видео там были, например, 24 и 16 и у каждого размера был свой мастер. Как правильнее?

    • @eldanielleee
      @eldanielleee 3 місяці тому

      Привет! Обсуждали это в чатике про компоненты, он есть в описании. Посмотри там плиз. Если коротко: можно делать размеры, а можно скейлить, если тебя утраивают толщины, скрепления и пр (это можно подогнать)

  • @user-ee7pp5yq4u
    @user-ee7pp5yq4u 3 місяці тому

    Очень крутое видео, спасибо! Столкнулась с проблемой: когда кнопки сделаны на мастере, при использовании в макетах, где нужно им поставить Fill для ширины, чтобы она подстраивалась под ширину контейнера, это не работает, тк у мастера не поставить Fill на ширину. Может быть ты подскажешь в чем косяк?

  • @marochka007
    @marochka007 3 місяці тому

    Большое спасибо! Мего полезный контент)) Осталось только понять, как теперь эти знания встроить в существующую библиотеку стилей))

  • @user-ge4jo3zd3v
    @user-ge4jo3zd3v 4 місяці тому

    Большой молодец, спасибо за контент

  • @maxbeztalanta4221
    @maxbeztalanta4221 4 місяці тому

    За кепку - лайк <3