🔥 Инструмент Scale: адаптивы, дроби и неверстальбельные макеты. Бесплатный курс Figma. Фигма с нуля
HTML-код
- Опубликовано: 9 июл 2024
- #alexeybychkov #figma #figma_tutorial
Привет, ребзя. Показал какие проблемы ждут, если злоупотреблять скейлом в Фигме. Адаптивы, дроби и неверстабельные макеты
Официальный сайт - www.figma.com
Лучший чат по фигме - t.me/figmachat
Сайт по фигме - pofig.me/ или figma.help
Карта канала - start.video
Файл со скриншотами для насмотренности: boosty.to/alexeybychkov/posts...
RUclips - / @alexeybychkov_
ТикТок - / alexeybychkov_
Rutube - rutube.ru/channel/24298564/
Дзен - zen.yandex.ru/alexeybychkov
Инстаграм - / alexeybychkov_
Телеграм - t.me/a1exeybychkov
Вконтакте - alexeybychkov
Обучение - alexeybychkov.study/
Мои цитаты - zapi.si/
Мои 404 - www.404.gallery/
Хелп по Фигме - figma.help/
💰❤️ Поддержать канал:
/ @alexeybychkov_
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
0:00 - как работает scale
4:35 - скейл и адаптивы
7:57 - скейл и иконки
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне в районе 38 лет, женат на прекрасном человеке и у нас две прекрасные дочки. Работаю на лучшей бирже в рунете - Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 17 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!
Подробнее обо мне - alexeybychkov.com/about/
17 лет опыта - alexeybychkov.com/experience/
Пишу - alexeybychkov.com/blog/
Дизайню - alexeybychkov.com/cases/
Отзывы - clck.ru/K5Mcc
Мои книги:
«Дизайн и фриланс. Начало» - clck.ru/JE8ku
«Дизайн и фриланс. Новый уровень» - clck.ru/JE8jT
Хелп по Фигме: уроки, видео, советы, фишки - figma.help
Мир фейсов: faces.world/
#figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance
Ребзя! Помогите своей активностью новому курсу: лайки, комменты, ну все как вы умеете :) Спасибо! Обнял-приподнял
Лучший чат по фигме - t.me/figmachat
Сайт по фигме - pofig.me/ или figma.help
Карта канала - start.video
Смотреть видео на 2-3 месяца раньше - boosty.to/alexeybychkov
За лайфхак с кодом иконок отдельное спасибо. Просто лучший)
супер)
есть плагины для сохранения свг. одним из них постоянно пользуюсь, правда названия не вспомню. у меня с этим плагином получается быстрее, чем искать свг-код
Плагин для браузера имеешь ввиду?@@ElenkaZP
SVG Gobbler- расширение хрома который позволяет скачивать свг иконки с любого сайта
спасибо тебе, теперь тоже пользуюсь
✅ Не скейлить адаптивы
✅ Скейлить иконки
Теперь всё понятно)) Спасибо за наглядные примеры и конечно же за лайфхаки🤗
супер)
Спецом зашла на любое видео, просто чтоб еще разок сказать тебе спасибо! По твоим урокам я все-таки научилась пользоваться компонентами, автолеяутами и прочими милыми прелестями фигмы. В итоге, как потребовалось, я за пару часов смогла склепать макет сайта и переделать его под тз заказчика😊😊😊😊😊😊 А теперь при любых правках, я отдельно радуюсь, что выгляжу ахренеть каким профи, и в пару кликов все что хотят меняю в режиме реального времени😎😎
круто, спасибо, приятно 💓
Никогда не спользовала скейл. Спасибо теперь хоть знать буду для чего он ❤
Рад что помог разобраться
Всё по полочкам, рай перфекциониста! Масштабирование, адаптивы, компоненты, иконки... прелесть, смотрю и всё повторяю) Спасибо за практические примеры, что-где-когда-зачем использовать!
пожалуйста! ☺️
"Просто сходил в магазин и купил иконку" - Ахахах))) Спасибо!
Спасибо за просмотр)
Алексей, за иконки отдекльный лайк! Поржал )))))
Спасибо за просмотр)
Моя дизайнерская жизнь обрела новые краски с этой фишкой с кодом)) Спасибо большое❤
супер
Послание из 12й группы: делайте, как Лёша говорит, и будет вам счастье 🙌
🤟🥳🤟
Блин какой крутой курс спасибо вам огромное! Не видел ничего подобного где бы так интересно объясняли 😍
рад, что нравится!
Очень информативный курс, 100% нужно будет его пересматривать👍 Жду новых серий😁😍
Супер
Смотрю ваши ролики 24/7, кладезь знаний в Вашей умной голове поражает! Спасибо❤
Огонь) Спасибо за просмотр)
"А че, так можно было!?" - про иконки с сайта и как их уменьшать... Леша, как всегда! СПАСИБО! а я адаптивила через scale... потом все дроби подчищала...
Спасибо за просмотр) рад, что полезно 🥳
Скейл не использовала раньше, теперь надо будет применить))
Спасибо за просмотр)
очень наглядные примеры про верстальщиков🔥
Супер 🎉
Спасибо большое! Уже всё окружение на тебя подсадила, мега крут! 🧡
спасибо! ❤️
С каждым новым уроком я чувствую силу, спасибо мастер!💪
Огонь)
Спасибо за юмор ) Не занятия, а сплошное удовольствие! Объяснил - улыбнул, СПАСИБО )
отличные новости)
Спасибо, Алексей. Благодаря твоему ролику закончились мои мучения с наборами иконок. Постоянно переводил обводку в иконках в контур, а затем масштабировал. Теперь сэкономлю кучу времени. Не пользовался скейлом, считал что это интрумент для иллюстраций, теперь понял как он мне будет полезен.
рад, что полезно 🎉
Через scale ещё удобно расширять готовые дизайны для презентаций (например,в гугл слайдс) т.к. там не имеет значения дроби там будут или ещё что-то) Там главное расширение побольше и порой так просто удобнее для понимания композиции
Супер)
Классно, спасибо и за подробную информацию по скейлу, и за магазин иконок)
🎉
Супер, прям то , что искала , ато я вручную эти цифры в иконках подгоняла😅 Большое спасибо за полезный контент !
Спасибо за просмотр)
Спасибо за урок!)) Очень легко смотрится и хорошо запоминается, особенно когда кнопочки еще нажимаешь 🤩А минутки юмора просто бесценны))
Отличные новости)
8:26 это реально какая-то магия для меня была🙀🪄 Пошла пробовать🔥
🎩
Лайфхак как купить иконки в наше время вообще огонь😁
Ну)
Теперь уж точно понятно, в каких случаях scale применять. Ну и куда за иконками бегать теперь ясно)
отличные новости
Обожаю вашу подачу и просто ценнейшую информацию, спасибо огромное за ваш труд и любовь к дизайну, благодаря которой вы выпускаете такой невероятно полезный контент!
рад, что нравится! 🥰
Огромное СПАСИБО за ваш курс. Сейчас купила курс у Skillbox по веб-дизайну, но там довольно кратко все и вечно куча вопросов, случайно нашла ваши видео и благодаря им заполняется огромное количество пробелов, лучше разбираюсь в темах, конспектирую многое и стараюсь все потворять за вами примеры. Мега полезно!
Эх) деньги туда, а учеба тут))
вау, это что за магия с иконками? моя лента в ютубе еще никогда не была настолько полезной, спасибо за твой труд!
ну класс 🎉
Спасибо за очередной бесценный урок с понятными примерами! 🙂
Спасибо за просмотр)
Благодаря этому уроку и тебе конечно, узнала для чего это нужно вообще😅
рад, что полезно
Алексей, каждое видео - бриллиант
Круто)
Все как я люблю - подробно, погятно и с юмором! 😊 Спасибо
Супер)
Благодарю! С иконками вообще огонь!
супер 🎉
Вы лучший! Уроки офигенные 🔥
спасибо!
А я, балда, всегда адаптивы через скейл делала и дроби вручную исправляла. Спасибо большое за правильные советы)
пожалуйста!
Я использую скейл, чтобы комменты под роликами Алексея писать для продвижения его трудов. Ладно, шутка. Спасибо за полезный видосик :)
спасибо! 🎉
Спасибо огромное! Все стало максимально понятно!
супер, пожалуйста!
получается, тайна инструмента scale раскрыта! пойду добавлю лайк)
Огонь)
лайфхак с иконкой огонь)
спасибо за видео 🥰
ну класс)
Спасибо большое! 🔥👍🔥 Здорово.
пожалуйста!
Лучшая подача материала!!!Успехов каналу и Вам как в жизни так и в учебе!Привет из Беларуси
Привет 🥳🎉
Спасибо. Очень полезно)
пожалуйста!
Благодарю за информацию!
пожалуйста!
Спасибо за супер информативное видео)
пожалуйста!
Раньше вообще скейл не использовала, теперь знаю за чем он нужен) Спасибо, Леша!
Супер)
Спасибо за ваши видео❤
пожалуйста!
О май гад! Скейл вообще не использовала, теперь то будет у меня работать 💪
Спасибо за просмотр)
класс, очень понятно, спасибо!
Спасибо за просмотр)
Спасибо за контент
и классный юмор!)
Очень рад, что нравится!
Буду знать,спасибо
Спасибо за просмотр)
эК, это что-то новое)))) спасибо за новые знания
ага)) пожалуйста!
Мое почтение таким уважаемым корсарам иконочных морей :)
🥳
Идеальное объяснение!!!!!🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
супер
Ты супер! Спасибо 😇😇😇
спасибо!
Лучший из лучших❤
спасибо, приятно)
С иконками - это самый крутой лайфхак за день. И я не про изменение толщины обводки сейчас))
ну класс :)
So cool! Thank you very much again and again))))
🎉
День 3 в компании Алексея. Спасибо за твой труд!
огонь)
супер полезно!
Ну класс
самые полезные уроки и лайфхаки, самый милый тичер 😍
спасибо!
Очень редко пользуюсь скейлом, и буквально вчера уменьшала иконку без скейла 😅, теперь буду правильно уменьшать))
Спасибо за просмотр)
Лайфхак с иконками каааайф конечно! 👍 Благодарю😊
Спасибо за просмотр)
Алексей, благодарю
🎉
Я использую только когда делаю карточки на ВБ, адаптивы делаю по старинке, как и учил)) С иконками тема, спасибо за лайфхак)🙂
Спасибо за просмотр)
Лучший учитель 🔥
спасибо! приятно)
Вааще скейл не использую, именно из-за дробей и масштабирования обводки и всего, что можно и нельзя. Оказывается для иконом может быть полезным. Спасибо за открытие )
Спасибо за просмотр)
Спасибо!🤗
Спасибо за просмотр)
Охонь! Большое спасибо
пожалуйста!
очень прикольно все рассказано
Спасибо за просмотр)
кайфец с кодом свгшек! спасибо за урок
Спасибо за просмотр)
супер-супер-супер!!!
Огонь)
Надо быть аккуратным со скейлом, чтобы не наскейлило на ковер вонючими дробями😅
Да! 😃
Ну это конечно круто) Спасибо, что прояснили! А то я все думал, как же от этих дробей избавиться... Самостоятельно обучаюсь, поэтому иногда затупы происходят)) Ловко у вас с иконкой получилось :D
Спасибо за просмотр) 🎉
Отныне на скейл у меня срабатывает крайсный флажок, спасибо😅
За фокус с иконками и кодом миллион к карме! Спасибо😍
Спасибо за просмотр)
Алексей, спасибо за ролики! Лучший! Советую поставить обрезку Hi-Pass на звук ) Иногда ботает в саб.
спасибо!
Офигенный лайфхак с "покупкой иконок" 🤣
Спасибо за просмотр)
ля пожар!!!! ты классный)
спасибо))
но за видео спасибо!) тоже пользуюсь скейлов для иконок, но оборачиваю каждую фреймом
пожалуйста!
Так вот как нужно в магазин ходить 😄
Видела видос, где чувак быстро сделал скейл макета под Тильду 1200 рх, а потом просто плагином округлил дроби
)) Спасибо за просмотр)
Просто какээк)))) спасибо)))
🎉
Про иконку в svg огонь 🔥
🎉
Я когда-то исправляла макет у другого дизайнера, который скейлил все адаптивы. Это был как 9й круг ада
да уж(
Какой коварный скейл и как я теперь на него не попадусь (кроме иконок, конечно)! Лёша, спасибо!
🎉 пожалуйста!
Ай, как больно, меня накрыл флешбек из моей первой работы, когда я наделала компонентов, а потом как их наскейлила! А потом всё вручную переделывала, и думала, что все так живут
😀Спасибо за просмотр)
Я именно тот, кто до этого ролика, менял толщину обводки при уменьшении иконки😁🥲
Спасибо за просмотр)
О топчик подъехал. Алексей подскажи. Как можно импортировать презентацию из Канва в Фигма чтоб она была редактируемая? Интеграции между ними нет вроде
не знаю( спроси в фигма-чате, может кто сталкивался
Еще вопрос, будет ли отдельная инфа про иконки. Заметил, что svg-шки вставляются с обводкой в виде вектора, без параметра Stroke. А я бы хотел, чтобы это была просто линия с толщиной, чтобы можно было поменять например на заливку и покрасить. А то красится только контур.
Зависит от того, как изначально была подготовлена иконка: через обводку или через заливку
скейлом пользуюсь для иконок, а также для мокапов и шотов дриббл 😊😊
Спасибо за просмотр)
🔥🔥🔥
🎉
Так, а во фрейм иконку таке лучше обоачивать или необязательно? в каком то ролике уже не помню, говорилось, что лучше каждую иконку оборачивать фреймом, чтобы размер фрейма был одинаковый для удобства, а уже иконка внутри примерно такая же плюс минус пиксель
конечно фрейм обязателен. Если берешь с флетикона фрейм уже есть и делать новый не нужно
Скейл использую только для текста и иконок, у текста если он не компонент легко поменять дроби и округлить отступы.
супер
Вижу Леху ставлю лайк ❤
спасибо!
коллега пару недель назад как раз советовал скейл для респонсива )) он как показал, я обалдела. никогда его не использовала, не нужен был. думала коллега просто прикалывается, но нет) реально использует. а потом юзает плагин PixelPerfect (вроде) чтоб от дробных значений избавиться. но тот плагин вроде отступы в аатолэйаутах не фиксит.
а иконкам с обводкой я люблю толщину задавать вручную. чтоб одинаковая была. глазомер у меня не очень точный, так что стараюсь задавать прям руками все значения, чтоб наверняка )
знает толк в извращениях)
Есть контейнер с текстом автолайаут, делаешь контейнеру фикс то он становиться больше, при этом текст так и был hug, почему он увеличивается?
сложно сказать без скриншота(
5:27 - ответ верстальщика на макет с дробями
да!
я для презентации скейлила экраны проекта)
эх)
Алексей что бы скачать иконко еще можно скачать расширение SVG Downlander вроде назвается, и можно даже не лезть в эти коды програмистские))
ага можно)
Подскажи пожалуйста. Есть фрейм иконки, внутри него векторы. Если у векторов дробные размеры это нормально или тоже плохая практика?
p.s. Если я правильно понял - дробные значения неприемлемы в тех местах, с которыми будет взаимодействовать верстальщик. Естественно он не будет переносить каждый вектор по отдельности. По этому их можно оставлять дробными, скейля родительский фрейм. Верно?)
Нормально. Главное чтобы сам фрейм иконки был четеньким