Кнопки | Воркшоп #3

Кнопки | Воркшоп #3 | UI-kit

Рет қаралды 5,754

Күн бұрын

Телеграм-канал Кати t.me/+J_hi0vQ-KFZjMmIy
где она помогает начинающим дизайнерам не остаться один на один в дизайне после дорогостоящего обучения.
Мой тг: t.me/+2Q738JTfRfoxOWNi
Консультации по портфолио и собесам в дизайн студии и продукты clck.ru/39yssA
Чат, где помогаем друг другу с компонентами: t.me/+e2e3f9TOhzplY2Uy
Плейграунд из воркшопа: clck.ru/39Phst
Продолжаем качать системное мышление и более осознанный подход на примере компонентов UI-kit. В воркшопе разобрали самый базовый компонент, который есть практически в каждом продукте - Кнопки или Buttons: использовали самые актуальные обновления Figma (Autolayout, Property, Boolean, Instance swap, Nested instances), обсудили как устроена организация, визуальную балансировку, нужен ли мастер компонент и многое другое.
Как обычно, приглашаю всех в комменты, критикуйте, дополняйте, делитесь своим опытом 👇
00:00 - Коротко о главном
00:50 - Интеграция
01:20 - О чем ролик
02:26 - Как устроена кнопка
06:43 - Готовим мастер-компонент
10:55 - Визуальная балансировка
12:45 - Настраиваем property
19:19 - Создаем варианты кнопок
27:48 - Более сложные решения в кнопках
29:55 - Про спецификации в ui-kit
31:43 - Добавляем на овервью

Пікірлер: 61

@arisha8109 12 күн бұрын

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

@eldanielleee 11 күн бұрын

Супер!)

@Ilya_pekhterev 3 ай бұрын

Как же все этого ждали

@veronika_voynova 3 ай бұрын

Божечки как же это круто!!! Даниил, ты супер-эксперт и большой молодец, что для нас снимаешь такие обучалки! Я обожаю компоненты и теперь буду только улучшать свою работу с ними благодаря тебеее :)

@eldanielleee 3 ай бұрын

Спасибо за поддержку, стараюсь ❤️

@fredoomshnv 3 ай бұрын

Давно ждал видео после последнего воркшопа по системе отступов. Как всегда потрясающий контент, спасибо!

@karolina_kate 3 ай бұрын

Даниил, ты крутой! Отдельное спасибо за балансировку кнопки, это кайф, буду использовать))

@janstay_ui 3 ай бұрын

Ура новое видео, спасибо! Надеюсь видео будут еще чаще выходить

@KaterinaLutsuk 3 ай бұрын

Просто великолепное видео 💔Спасибо за вашу работу!

@pchela28 3 ай бұрын

Дождалась видосик 🎉 Лайк не глядя, знаю, что будет огонь!

@AleksSevenFor74 3 ай бұрын

Это просто бомбически! Очень круто сделано, все понятно и по полочкам. Теперь буду применять это в своих проектах и ждать следующих воркшопов

@MFilippova 3 ай бұрын

Ура! Дождались!

@sergeyfoxy 3 ай бұрын

Дождались! Лайк однозначно!

@MarinaLoginovaDesign 3 ай бұрын

Спасибо! Жду следующее видео 😀

@user-ez1pz5gl2h 3 ай бұрын

Ну шо, встретимся через полгода?)

@eldanielleee 3 ай бұрын

аххахаах

@vllladek2117 3 ай бұрын

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

@eldanielleee 3 ай бұрын

Спасибо!

@AndresGutierrez-sz2oc 3 ай бұрын

Наконец то, лайк однозначно!

@shved8963 3 ай бұрын

Когда только подписался на канал, а тут уже видосик новый) После просмотра видео про токены, я думаю, что здесь мозг отдохнёт😁

@121Andreu 3 ай бұрын

Спасибо, буду применять в своих проектах!

@maxbeztalanta4221 2 ай бұрын

Он снова делает лучшие видео про компоненты

@vladimirdoronin67 3 ай бұрын

Ну, шикарно же!

@user-hp4jc7ki4x 3 ай бұрын

Круто))) Хочу еще!! Понять бы как токены стилей цветов, как их называть, Потом детально Шрифты назвать и задать размер от Главного Заголовка до последующих размеров В общем буду ждать след Воркшоп! А пока что подписался!!!

@eldanielleee 3 ай бұрын

Спасибо! На канале есть видео про стиле цвета)

@keleirdon Ай бұрын

@@eldanielleee теперь ждем про шрифты!

@konstantinavramchenko 3 ай бұрын

Очень полезное видео! Спасибо:)

@alexgart65 3 ай бұрын

Ну наконец то , только не затягивай плиз!

@stikast6497 3 ай бұрын

очень полезное видео, спасибо огромное!

@user-si5hk1uw9w Ай бұрын

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

@catriarchiv 2 ай бұрын

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

@valeriiia_because 2 ай бұрын

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

@hellonine 3 ай бұрын

следуешь за uprock , молодец

@user-ee7pp5yq4u 2 ай бұрын

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

@aidarkalimullin2 2 ай бұрын

33:09 - создаем варианты наверно, Даниил )))

@niknikdesign 3 ай бұрын

Здравствуйте. А у вас есть портфолио проектов, которые вы делали и которые можно потыкать?

@Svetlana_Shaimanova 2 ай бұрын

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

@eldanielleee 2 ай бұрын

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

@alevi_21 3 ай бұрын

Дань, все эти компоненты и варианты ты добавляешь после финальной отрисовки проекта или уже в процессе? Можешь вкратце объяснить как лучше всего делать?

@eldanielleee 3 ай бұрын

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

@fredoomshnv 3 ай бұрын

@@eldanielleee Кстати, как я понял, сейчас с мультиредактированием можно создавать компоненты очень удобно сквозные, чтобы сразу все элементы одноимённые привязать к одному компоненту, если что-то на старте было забыто - практично и использовал ли?

@eldanielleee 3 ай бұрын

@@fredoomshnv еще не тестил в проектах(

@elinafur 3 ай бұрын

два раза в видео ты говоришь "обернуть в автолейаут" при действии, когда ты создаешь компонент

@eldanielleee 3 ай бұрын

Бывает) спасибо, что заметила.

@alexander_stark 7 күн бұрын

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

@OlgaSolnechnaya 3 ай бұрын

Привет! Спасибо за видео. Вопрос. Если иконки отрисованы и существуют в разных размерах (24, 20, 14 пт), то не получится воспользоваться таким "двойным" мастером и нужно делать отдельные? Вижу, что в видео вы 24 пт иконки до 16 просто уменьшаете, поэтому и прокатывает трюк с заменой иконок в разных размерах, но для многих случаев это не вариант..(

@eldanielleee 3 ай бұрын

Add-on тоже могут быть разных размеров. Работает, попробуйте)

@user-hj9rs1oo2l 3 ай бұрын

Здравствуйте, а подскажите откуда вы берете иконку Шестеренки?

@eldanielleee 3 ай бұрын

Эмоджи

@vinesomemore 3 ай бұрын

Дань, подскажи пожалуйста, для каких случаев используют кнопки типа "Нейтральная"

@eldanielleee 3 ай бұрын

Залетай в чатик, на ютубе могу пропустить такие вопросы. Например, когда у тебя кнопки в баттон груп собраны. Есть одна акцентная мэин, а остальные нейтральные минор, чтобы разделить на главное и второстепенное

@vinesomemore 3 ай бұрын

@@eldanielleee спасибо 🙂‍↕️

@alice_maybe 3 ай бұрын

Я не понимаю, как добавить иконку шестеренки в название property... это платная функция фигмы? Просто если я применяю одни и те же настройки instancy для иконок в большой и малой кнопках, то в малой у меня сбрасывается размер иконки и она тоже становится большой. Хелп, плиз :(

@aregtigranyan Ай бұрын

Шестеренка это просто обычный эмодзи.

@andreys.4105 3 ай бұрын

у меня есть мастер компонент, и далее я сделал ещё компоненты как у тебя (байтон дефолт), и если я оттуда достаю компонент, там получается кнопка как компонент поверх компонента и вот во внутреннем компоненте я могу менять появление иконок, но туда мне нужно провалиться....не понимаю почему. (надеюсь понятно и такая проблема была)

@eldanielleee 3 ай бұрын

27:19

@andreys.4105 3 ай бұрын

спасибо!@@eldanielleee

@dimickon2 3 ай бұрын

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

@eldanielleee 3 ай бұрын

пуленепробиваемые иконки напиши в поиске ютуба

@dimickon2 3 ай бұрын

@@eldanielleee Большое спасибо, всё поправил