- Видео 85
- Просмотров 23 825
Vladyslav Hryhorenko
Украина
Добавлен 20 мар 2012
На этом канале мы будем разбирать дизайн системы, и пытаться собирать свою
Залетай в тг канал t.me/renk_design
Залетай в тг канал t.me/renk_design
Компонент объявления авито. Универсальный подход к созданию компонентов
В этом ролике мы сделаем компонент карточки объявления авито, легкий заход без детального погружения, просто для понимания как к этому подходить.
В этой рубрике показываю универсальный подход именно к созданию компонента, но не к оформлению его и передаче в разработку. Возможно отдельно будет и такая рубрика но пока так.
В этой рубрике показываю универсальный подход именно к созданию компонента, но не к оформлению его и передаче в разработку. Возможно отдельно будет и такая рубрика но пока так.
Просмотров: 161
Видео
Универсальный подход к созданию компонентов. Карточка продукта
Просмотров 171Месяц назад
Универсальный подход к созданию компонентов. Карточка продукта
CREATE Powerful Components with This Simple Trick
Просмотров 302Месяц назад
CREATE Powerful Components with This Simple Trick
Automatically from figma to css/scss/android/ios via tokens studio and style dictionary
Просмотров 3653 месяца назад
Automatically from figma to css/scss/android/ios via tokens studio and style dictionary
Tokens Studio как перенести ваши переменные и стили из файла в токенс студио
Просмотров 2844 месяца назад
Tokens Studio как перенести ваши переменные и стили из файла в токенс студио
Токены типографики. Создаем и привязываем к стилям.
Просмотров 3734 месяца назад
Токены типографики. Создаем и привязываем к стилям.
Элемент формы. Создание формы в фигме
Просмотров 2004 месяца назад
Элемент формы. Создание формы в фигме
Иконки (часть 3). Дизайн система в Фигме
Просмотров 2444 месяца назад
Иконки (часть 3). Дизайн система в Фигме
Как создать ИДЕАЛЬНЫЕ переменные для ТИПОГРАФИКИ и ОТСТУПОВ в ФИГМЕ. И делаем поповер
Просмотров 5286 месяцев назад
Как создать ИДЕАЛЬНЫЕ переменные для ТИПОГРАФИКИ и ОТСТУПОВ в ФИГМЕ. И делаем поповер
Адаптивная таблица в фигме, динамическая таблица, data table, таблица данных. Дизайн система в Aигма
Просмотров 3896 месяцев назад
Адаптивная таблица в фигме, динамическая таблица, data table, таблица данных. Дизайн система в Aигма
Как я искал работу продуктовым дизайнером в 2024 году и получил 4 оффера
Просмотров 1,5 тыс.7 месяцев назад
Как я искал работу продуктовым дизайнером в 2024 году и получил 4 оффера
Текстовая область, Text Area, Input. Дизайн система в фигме
Просмотров 807 месяцев назад
Текстовая область, Text Area, Input. Дизайн система в фигме
Текстовое поле, инпут, поле ввода. Дизайн система в Фигме
Просмотров 1727 месяцев назад
Текстовое поле, инпут, поле ввода. Дизайн система в Фигме
Дизайн токены. Что это, куда и зачем, а может и откуда. Дизайн система в Фигме
Просмотров 8748 месяцев назад
Дизайн токены. Что это, куда и зачем, а может и откуда. Дизайн система в Фигме
Кнопка, button, CTA. Дизайн система в Фигме
Просмотров 3398 месяцев назад
Кнопка, button, CTA. Дизайн система в Фигме
Переключатель, toggle, switch. Дизайн система в Фигме
Просмотров 1228 месяцев назад
Переключатель, toggle, switch. Дизайн система в Фигме
Цветовая палитра. Дизайн система в Фигме
Просмотров 5139 месяцев назад
Цветовая палитра. Дизайн система в Фигме
Иконки (часть 2). Дизайн система в Фигме
Просмотров 3129 месяцев назад
Иконки (часть 2). Дизайн система в Фигме
Цвет и расстояния. Дизайн система в Фигме
Просмотров 493Год назад
Цвет и расстояния. Дизайн система в Фигме
ну вообще он то работает на базовом css, свойства flex & grid
Согласен что автолейаут это наверное упрощенная версия display:flex Но все же для дизайнера нужно что то простое. Мне кажется не стоит дизайнеру сильно глубоко понимать технологию и что за чем стоит. Важно понимать что это есть и это нужно использовать
ля соре что так резко конечно но поставь речь слушать невозможно
Я писал уже, все в процессе) Но это не отменяет того что отдельно нужно практиковаться в записи видео) На коротких видео есть субтитры, чтоб было проще понимать о чем речь
спасибо, а можно пожалуйста ссылку на дизайн системы, которые ты вначале показываешь
t.me/renk_design/82 В этом посте скидывал ссылки на ресурсы разные, где можно посмотреть все дизайн системы
было бы круто еще сопровождать каким то видеорядом примеров, люди щас считывают только видеоконтент)
Новый формат для меня, буду пробовать, спасибо за фидбек
Спасибо большое за видео! подскажи, пожалуйста, как быть, если у меня будет 2 шрифта в библиотеке для андроида и иОС? Я правильно понимаю, что для этого просто нужно задублировать font family и назначить этой группе переменных свой шрифт?
Можно выделить шрифты в коллекцию, и сделать второй мод, в котом будет другой шрифт, и потом для всего экрана можно будет выбирать тему по шрифтам
@@renk_vladyslav спасибо!
Ничего не понятно, ты говоришь или жуешь?
Читай субтитры, не нужно к человеку придираться
Даю ценнейший контент на своем канале. Спасибо за комментарий
Спасибо❤️
Влад, спасибо за ролик! Освежил знания. Единственное, купи норм микрофон, даже петлички достаточно. Очень плохо слышно тебя
Есть петличка, плохо она работает. Вот буду планировать микрофон покупать нормальный. Звук это проблема
@@renk_vladyslav можно ещё роялти фри музочку положить на фон.
Ну вот, почти год как я видосы делаю, может начну. Какой нибудь лоуфайчик. Кажется пора идти к знакомому монтажеру, спрашивать за звук и музыку для видео) Сейчас все на лайте делается, чтобы была привычка делать
Да микрофон нормальный, это речь такая нечеткая, нудно с этим поработать.
Да я в курсе, но это не быстрый процесс. Первым делом нужно было исправить прикус, проблемы с зубами. Дальше продолжу занятия с логопедом и потом уже что то дикторское-ораторское. Так что да, все в процессе.
Thank a lot for this tutorial!
Очень интересный контент) было бы круто, если бы выходили почаще такие видео с подобной тематикой) Спасибо за ваш труд , удачи в развитии канала 👍🏻❤️
Спасибо!
Звук ужасный поработает над ним пожалуйста
Проверь пожалуйста еще раз. Важно понять в чем проблема. В день когда ты оставил комментарий тоже открыл и услышал что то ужасное, сейчас вот все окей. И исходник откопал в корзине, там тоже все окей. Послушай у себя и напиши пожалуйста
Было бы полезно, если было бы большое объяснений. Сейчас ты многое делаешь говорят "я обычно делаю так" и молча делаешь много чего, вот в таким моменты объяснение было бы нужно тоже)
Постараюсь более подробно рассказывать, спасибо за комментарий
Посмотрел, вижу немного не так как нужно обрезается экран изза чего не совсем понятно что я делаю. Поправлю кадр для начала, чтобы ничего не мешало, и все было видно. Ну и подробнее рассказывать, да.
Интересное видео!
Спасибо!
йеее, плохой звук окончательно побеждён (ну, насколько позволяет петличка и речевой аппарат😅)
Все в процессе. Вот нейронку нашел которая аудио обрабатывает. Сам хотел бы исправить речевой аппарат😅. Вот прикус первый пошел под раздачу)
это видео - то, что мне было необходимо именно сейчас! я как раз думаю над логикой построения подобных компонентов - отдетачивать экземпляр для изменения серединки под себя или добавить внутрь компонент, в котором можно будет просто делать swap instance, без отдетачивания... теперь уже сильно склоняюсь ко второму варианту) очень полезная инфа, Владислав объясняет простым языком в непринужденной подаче) огромное дизайнерское спасибо ❤
Спасибо! Рад что было полезно)
Спасибо Влад:)
Снова привет! Спасибо, что поделился этим опытом. Но снова пару моментов от меня ускользнули. 1. Почему состояние Press планировалось только для «не чекнутого» состояния? 2. Почему в итоге ты решил убрать это состояние Press из таблицы состояний компонента? 26:52 Формулировка: «Давайте уберём состояние нажатого, потому что при нажатии он (видимо он - компонент) меняет свой вид» вводит в ступор. В моей голове это ровно наоборот, компонент меняет свой вид при нажатии, поэтому имеет смысл сделать состояние Press причём во всех строках этой таблицы компонента. Поясни пожалуйста
Видимо я там имел ввиду что по нажатию на чекбокс он становиться выбранным и наоборот. По сути состояние pressed это состояние isSelected. Pressed это состояние, которое подсвечивает нажатие на компонент а в чекбоксе уже есть индикатор нажатия - переключение.
@@renk_vladyslav Если я нажму на чекбокс и не буду отпускать, то в каком из представленных состояний будет курсор? Я именно это понимаю под состоянием Pressed
Тут можно порассуждать на тему. В целом это индикация пользователю что действие совершено. Как в случае с кнопкой например. Там важно знать что нажатие было совершено и сейчас нужно "подождать" пока система отработает. В случае с чекбоксом, после нажатия состояние поменяется на противоположное. Если он нажал и держит, можем показывать ховер или фокус. В конкретном случае, состояние "pressed" можно опустить.
Спасибо!
Спасибо за видео! Поясни, пожалуйста, для чего нужна иконка внутри компонента Placeholder? примерно на 9:24
Ага, понял, что она нужна для перекрашивания иконки. Но как это работает не понятно
Да, именно То, что она есть в каждом файле иконки. И у них у всех одинаковое название. Это дает наследование цвета везде, где она будет переключаться
@@renk_vladyslav А точняк название слоя! 😃
А где взять и почитать статью "Как подготовиться к собеседованию"?)
Напомни на какой минуте это?
Наверное у вас микрофон сильно слабый. Купить петличку от фирмы boya можно за 2к -- будет хорошо вас слышно
Она была, но работала плохо. Вот в последних роликах начал пользоваться) Вроде починилось. Шум был, если ноут подключен к зарядке.
Подскажите пожалуйста, как именно вы меняете стиль иконки из Outlined на Filled? Не до конца понятно из видео к сожалению…
В 3 части рассказал подробнее как это можно сделать
@@renk_vladyslav спасибо большое!
Спасибо за полезный видос! Тоже хочу применить схожую практику у себя в проекте.
Спасибо большое за ваш труд 🙏🏻 я только-только устроилась в продукт, ваши видео очень помогают
Спасибо! Это очень круто! Спасибо что смотришь, я очень надеюсь что это так и мои видео помогут освоиться в подходах к разработке продуктов и интерфейсов
Привет, спасибо за видео! Если звук пишется с наушников, то я очень удивлен. Подскажи пожалуйста, я прав, с наушников пишется? Просто у меня airpods pro 1 gen и они сооовсем плохой звук с микро дают. Даже сомневаюсь, стоит ли брать второе поколение
Нет, у наушников звук ужасный В этом ролике пишется с ноутбука(макбук про 16 м1) начиная с типографики пишу на петличку боя, и обрабатываю через auphonic.com, там аи обрабоотка звука типа. Вроде как чище и громче получается, начал еще ревербацию убирать через пермьер. Но я если честно не спец по звуку совсем, начал недавно задумываться, после комментариев) Кстати вот у меня на бете мак ос новой перестал фонить микрофон этот, я его зимой покупал и был фон жуткий, сейчас пропало. не знаю с чем конкретно связано
Здравствуйте) впервые вижу библиотеку для дизайн систем, которую вы использовали. Не могли бы вы пожалуйста снять видео про неё? Очень интересно 😄
О какой библиотеке вопрос? Если та что в видео в целом, это то что мы делаем в видео, с первого видео постепенно создавали эту библиотеку. Другие библиотеки, те что в начале я называл
@@renk_vladyslav которую вы использовали в видео, где смотрели элементы селект
Вот тут кидал ссылки которые мелькают, эта там тоже есть t.me/renk_design/82
@@renk_vladyslav спасибо 🙏🏻 жду новых видео 🙌🏻
Крутой урок, очень познавательный
Огонь! Спасибо за твои видео. Очень интересно увидеть, как их подружить с токен студио и гитхаб. Ждем! Кстати, звук наконец стал хороший)
Увидел рилс с тем, что есть нейронки для обработки голоса, решил затестить) Вроде не сильно затрудняет весь процесс. Видео про токен студио было снято уже, но там беда небольшая случилась, из-за чего нужно перезаписывать. Постараюсь не затягивать и этот кусок выпустить оперативно достаточно Спасибо)
У меня вопрос, а можно как-то типографику привязать к цветовым схемам, что бы при переключении один шрифт менялся на другой в зависимости от цветовой схемы?
Решил ответить в виде шортс) ruclips.net/user/shortsVM0_e7JZ9B8?feature=share Если там будет что то не видно или не понятно, пиши)
@@renk_vladyslav спасибо!
Спасибо!
Очень полезный урок, спасибо большое 🙏🏻
Очень плохая идея писать звук на наушники Еще и учитывая картавость И отсутствие нормализации звука на монтаже
Звук пишется на макбук, позволить себе отдельный микро под ютуб пока не могу, так как это больше хобби. Возможно на тысячу подписчиков подарю себе микрофон, чтобы лучше писать звук. Про нормализацию звука на монтаже, если есть что подсказать, где это лучше делать и что учитывать. Может видео есть какие посмотреть можно, где покажут что делать нужно. Посмотрю и попробую. Но подозреваю что нужно изначально звук нормально записать
@@renk_vladyslav достаточно купить хотя бы петличку boya меньше чем за косарь, или писать в микро телефона. И хотя бы банально вытягивать громкость выше, а то нужно ставить максималку
@@Angelochek-v8o у меня есть петличка боя, но она фонит когда я ставлю ее в ноут. Хз в чем проблема.Писать отдельно звук и отдельно видео, потом склеивать это чтобы не было расхождений движения губ со звуком и картинка на экране чтоб была правильная. Нужно будет прям сильно упарываться в монтаж. Я хочу держать это в простом виде пока что. Как минимум пока это не приносит доход. У меня настроена обска я её открыл, нажал запись и пишу. В последних видео пробую повышать громкость и делать всякие деноизы, но кажется что это только хуже делает
@@renk_vladyslav склейка звука и видео - нажатие одной кнопки в монтажке, лол. Подключи тогда петличку не в ноут, а в телефон через переходник. Или опять же просто держать телефон и писать в него. Звук - важнее картинки. Мало кто будет рекомендовать видосы с плохим звуком (и с кучей эффектов, которые гробят). В давинчи/капкате есть кнопка обработки голоса через нейронку, к слову. И да, если петличка не повредждена, то звук у бойи отличный
Я ее достану и попробую, интересное замечание. У меня сейчас не 2 разных файла а все в одно пишется через обс. Мне в таком описании как ты описываешь нужно по идее писать видео меня на телефон отдельно и экран отдельно. Потому что я сейчас видео с телефона беру. Окей, посмотрим, если будет настроение, попробую сделать звук лучше. Если есть желание помочь, можешь написать в ТГ, потестируем что получается, возможно у меня проблемы со слухом и я не прям понимаю что не так)
Привет! Спасибо за такое подробное видео. Есть вопрос. Я заметил, что в портфолио у тебя есть веб-интерфейс, мобилка и дашборд. Я так понимаю, ты не стал уходить только во что-то одно (условно только мобилка или только веб). Это было сделано, чтобы увеличить количество подходящих вакансий?
Это было сделано потому, что я всем этим занимаюсь) Я года 3 делаю мобилки разные. 2 года подряд занимался сайтом и год делал личный кабинет студента десктоп и мобилку. И да, для кейса я этот личный кабинет оформил как мобилку, чтобы повысить шансы и заинтересовать тех, кому нужна мобилка. Ну а десктоп версия для другого направления и для основной презентации о том что было сделано на проекте
🔥
Очень интересное видео, но слушать очень тяжело. Некоторые слова, даже не понял. Вы, большой молодец. Проделали большую работу над собой.
Какое то видео не удачное по звуку вышло. Пробовал улучшить ситуацию в следующих роликах. Спасибо, видео больше про то, чтобы помочь другим найти свой формат как подготовиться и найти работу, которую они хотят. Спасибо за комментарий!
немного переборщил со скоростью :)
Да, больше так не делаю. Но нужно видимо поизучать про подготовку видео к публикации на Ютуб)
Владислав, спасибо за серию видео! Скажите, планируется ли в дальнейшем видео, как потом все это применять? чтобы на примере увидеть как собирается продукт или страница под определенную задачу из дизайн системы. У многих смотрю видео, где отрисовываются и собираются только элементы без применения
Давай соберем поддержку этого поста и накидаем идей, что хотелось бы собрать и я соберу) Пока получается так что я могу какую нибудь страницу контактов собрать с формой) Попробую приблизиться к этому этапу и в скором времени выпустить. Нужно сделать компонент формы, и тогда смогу собрать какой нибудь пример. Для начала так сказать.
@@renk_vladyslav спасибо! условно говоря, какой-нибудь дашборд с таблицей, фильтрами, полями поиска, инпутами, дропдаунами, кнопками. Например личный кабинет для логистической компании, или для кабинет hr для анализа откликнувшихся на вакансию, дашборд клиентов оплативших услугу и т.д. Чем жирнее, тем интереснее) чтобы сразу увидеть все преимущества использования дизайн-системы
Подберу какой нибудь реф на дрибле и попробуем что нибудь сделать. Поищу что то не сильно сложно, чтобы не нужно было насыпать еще тонну компонентов)
Лайкнул, но пока не смотрел
Согласен с комментариями ниже - очень тихо, выкрутил на 100% все что только можно. Птицы за окном перебивают тебя, подкрути голос. Спасибо за видео!
В новых видео подкрутил чуть, надеюсь стало лучше(таблица и переменные)
А что со скоростью воспроизведения?
Попробовал ускорить немного. Больше не буду
Спасибо! Супер полезно
Вау! Какой полезный канал попался 🤩🤩
Площадка ADPList платная? Если да, то сколько стоила сессия с ментором?
Привет, это бесплатная площадка, там можно найти ментора по разным запросам и профессиям из IT
@@renk_vladyslav Спасибо! Интересно в чём тогда выгода менторам, если их часы не оплачиваются
Посмотреть что сейчас с "рынком" пообщаться с дизайнерам, структурировать свои знания, искать темы для продуктов. По сути они собирают в кучу свои знания и учатся передавать свои знания. Там и у ментора тоже много плюсов, ну и вроде как там есть рост последующий на площадке, что у тебя групповые сессии могут быть а потом тебя могут звать как спикера на мероприятия зарубежные. Недавно там был анонс и можно было попасть на сессию с Доном Норманом. И это тоже было бесплатно
@@renk_vladyslav это жесть как круто, спасибо за ответ!
Очень тихо с мобильных устройств
Странно, но попробую поднимать уровень звука после записи
что-то я не врубился. Вот почитал еще пару статей, вот допустим берут пример: $color-component-button-blue-bg-normal и $color-component-button-blue-bg-hover. То есть мы просто в ручную описываем для разрабов каждую вариативность кнопки или как?
Если ты все эти переменные используешь в макете(применяешь цвет из переменных, отступы из переменных цифровых) то у разработчика в дев моде будет все описано. И он будет брать эти переменные. На старте нужно просто передать Json файл с ними, чтобы у него все работало. Как это собрать в сторибук, или другой сервис для сбора компонентов это наверное уже к фронтам) Так подробно описывать нужно было только шрифт наверное. Но на днях вышло обновление фигмы, которое еще не на всех выкатили правда. Там дали поддержку переменных в тексте. Так что скоро не нужно будет так цвет описывать а можно будет для него описать переменные.
Спасибо за труд
Спасибо за просмотр
Интересно. Звук по громче бы.
👍👍👍
всё доходчиво объясняешь , спасибо 👍
Супер, спасибо)
Вот неужели вы думаете, что в контексте обучения, действительно важно смотреть на вас, как вы смотрите на экран, при этом закрывая пол экрана??? Какой в этом смысл? Сделайте лучше изображение которое важно большего размера. И поработайте над дикцией. Вы же информацию выдаете, а не молитесь себе под нос...
В новых видео буду исправлять! Спасибо! Ну и формат поправлю, но уже позже. Сейчас эксперимент веду, эти видео нарезал ИИ
@@renk_vladyslav спасибо за адекватность восприятия и удачи вам!
Я на тебя подписан,расскажи чего делаешь😂
Тестирую нейронку. Она делает шортс из длинного видео. Хочу посмотреть как будет работать если буду постить такие ролики каждый день. Да, тут нет целостного видео, но может будет интересно зайти на канал и посмотреть полный ролик) Этот ролик залетел на 400 просмотров за 10 часов (мой максимум 300 за месяц)
А ну и в инсту такие же рилсы выкладываю Думаю может и в тикток кидать. Хочу аудиторию расширять)