Тёмный

⚡️ Скошенные КОНТУРНЫЕ кнопки в Figme с Автолейаутом - как сделать? 

Alexey Bychkov: веб-дизайн и фриланс
Просмотров 70 тыс.
50% 1

#shortsvideo #figma #shorts
Как сделать скошенные кнопки в Figme c Автолейаутом
Карта канала - start.video
Файл со скриншотами для насмотренности: boosty.to/alexeybychkov/posts...
RU-vid - / @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 - английский, доллары
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне в районе 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

Опубликовано:

 

7 апр 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 125   
@alexeybychkov_
@alexeybychkov_ Год назад
⚡️Подписывайтесь, будет много разных коротких роликов
@helenalex8264
@helenalex8264 9 месяцев назад
Давно уже подписались! 🎉
@dmitrykand5142
@dmitrykand5142 Год назад
Фронтендер при виде этого 🗿
@alexeybychkov_
@alexeybychkov_ Год назад
😂
@nadzeyadavydava8245
@nadzeyadavydava8245 Год назад
Вот и я задумалась, как это поворачивать будут
@user-yq5te3tp7i
@user-yq5te3tp7i Год назад
@@nadzeyadavydava8245 Накинуть Transform screw и все ...
@andreymokko
@andreymokko 9 месяцев назад
Тогда это не фронт, а ученик максимум. Любой фронт легко сделает такую кнопку. Если будет задача максимально сохранить толщину линий, то нарежет двумя картинками или SVG разметкой. Либо покрутит skew. Skew будет c нюансами, потому что изменится толщина линии, но в таком незначительном наклоне это не будет сильно заметно. Я бы выбрал skew для небольшой кнопки. И рассмотрел бы вариант с SVG для большой кнопки. Бывают такие, на пол страницы.
@user-yb5sb5od2z
@user-yb5sb5od2z 5 месяцев назад
Да, только потом из тестирования тебе вернут задачку с комментом, что мол кнопка почему-то нажимается там где не должна нажиматься @@andreymokko
@csc_annem
@csc_annem Год назад
после этих роликов уже стыдно делать кнопки без autolayout😂
@alexeybychkov_
@alexeybychkov_ Год назад
в самом деле))
@loki-505
@loki-505 Год назад
Это точно😊
@supermaraphone3262
@supermaraphone3262 10 месяцев назад
Верстальщики на вас часто с кулаками нападают?:)
@alexeybychkov_
@alexeybychkov_ 10 месяцев назад
шутки за 20
@Dr_Dimedrol
@Dr_Dimedrol 3 месяца назад
Ай спасибо, спаситель. Очень видео помогло, но в другом ключе. Надо было сделать кнопку-компонент со стрелкой поверх нее. И чтобы при изменении текста стрелочка была всегда в одном и том же месте. Автолейауты и отрицательный отступ зарешали. ))
@alexeybychkov_
@alexeybychkov_ 2 месяца назад
супер)
@Lera_tvoiagent
@Lera_tvoiagent Год назад
До этого ещё додуматься нужно😅👍🏻
@alexeybychkov_
@alexeybychkov_ Год назад
Спасибо за просмотр)
@kic_nik
@kic_nik Год назад
Куча пользы от одного маленького ролика, круто!
@alexeybychkov_
@alexeybychkov_ Год назад
ну класс)
@its_no_way
@its_no_way Год назад
Спасибо за видео, теперь не отмажешься, что автолейаута потому что кнопка необычная))
@alexeybychkov_
@alexeybychkov_ Год назад
пожалуйста!
@nina.smirnova.designer
@nina.smirnova.designer 5 месяцев назад
Очень полезно! Спасибо! Часто такое нужно, не в кнопках, конечно, но думаю, что смысл не меняется)
@alexeybychkov_
@alexeybychkov_ 5 месяцев назад
рад, что полезно
@user-frond-end_dev
@user-frond-end_dev 9 месяцев назад
Так не делайте, потом фронтендер потом ошалеет😮
@andreymokko
@andreymokko 9 месяцев назад
Тогда увольте его, и возьмите нормального
@alexeybychkov_
@alexeybychkov_ 9 месяцев назад
огонь)
@kic_nik
@kic_nik Год назад
Пушечный лайфхак, спасибо!
@alexeybychkov_
@alexeybychkov_ Год назад
супер
@its_no_way
@its_no_way Год назад
Круто, вроде так просто, но сам фиг бы додумался!😅
@alexeybychkov_
@alexeybychkov_ Год назад
Ага, не сложно!
@natalie_web_designer
@natalie_web_designer 3 месяца назад
Всегда мучалась с этими кнопками, выглядят круто, но никак не понимала, как сдещать через автолояут
@alexeybychkov_
@alexeybychkov_ 2 месяца назад
Спасибо за просмотр)
@bibimoi_ru
@bibimoi_ru 6 месяцев назад
Обернуть фреймом и обрезать - гениально 👌
@alexeybychkov_
@alexeybychkov_ 6 месяцев назад
Ну)
@Alexandraizotova727
@Alexandraizotova727 Год назад
Суперполезный лайфхак! Спасибо)
@alexeybychkov_
@alexeybychkov_ Год назад
ну класс, пожалуйста!
@nichtszuverlier
@nichtszuverlier 5 месяцев назад
в фигме всё легко и классно. а как это потом на тильде реализовать?)
@alexeybychkov_
@alexeybychkov_ 5 месяцев назад
в тильду перенести готовые наклоненные прямоугольники как svg и добавить сверху текст
@nenasta
@nenasta Год назад
Супер полезно, сохраняю в заметки, Спасибо!)
@alexeybychkov_
@alexeybychkov_ Год назад
пожалуйста!
@dzivaina8589
@dzivaina8589 Год назад
Как всегда отлично. Спасибо
@alexeybychkov_
@alexeybychkov_ Год назад
супер 🥳
@tatianatwin5717
@tatianatwin5717 Год назад
Мне кажется, пора начинать коллекционировать кнопки 🔥
@alexeybychkov_
@alexeybychkov_ Год назад
Наверное))
@andreymokko
@andreymokko 9 месяцев назад
Только не увлекайтесь) Кнопки, прежде всего, должны быть похожи на кнопки.
@user-lw5jw2ru3x
@user-lw5jw2ru3x 9 месяцев назад
Верстальщик вышел из чата🙃
@alexeybychkov_
@alexeybychkov_ 9 месяцев назад
пока!
@andreymokko
@andreymokko 9 месяцев назад
Это не верстальщик, так что пусть выходит)
@gubkoanna
@gubkoanna 5 месяцев назад
😅 вот, вроде, всë просто, но я бы не долумалась! Мне бы Вашу смекалку!) 😍
@alexeybychkov_
@alexeybychkov_ 4 месяца назад
Спасибо за просмотр)
@an_koris
@an_koris 4 месяца назад
где ты был когда я делала курсааач
@alexeybychkov_
@alexeybychkov_ 4 месяца назад
И мне интересно где я был
@MAGATRONE
@MAGATRONE Год назад
Верстальщик вышел из чата.
@alexeybychkov_
@alexeybychkov_ Год назад
пока))
@lidiya.pilguy
@lidiya.pilguy 10 месяцев назад
Отлично получается 👍 красота
@alexeybychkov_
@alexeybychkov_ 9 месяцев назад
Супер
@virnus1
@virnus1 10 месяцев назад
потом сами это верстайте.
@alexeybychkov_
@alexeybychkov_ 10 месяцев назад
Хорошо, босс
@andreymokko
@andreymokko 9 месяцев назад
Уж не охранникам Пятерочки думать об этом
@pridari
@pridari Год назад
Спасибо за лайфхак!!😃😃😃😃
@alexeybychkov_
@alexeybychkov_ Год назад
пожалуйста!
@user-co9mz2kp8j
@user-co9mz2kp8j 4 месяца назад
Бедная верстальщица 😢 но это мега круто🎉
@alexeybychkov_
@alexeybychkov_ 4 месяца назад
Спасибо за просмотр)
@GeknForever
@GeknForever 9 месяцев назад
Вы лучший учитель в мире!
@alexeybychkov_
@alexeybychkov_ 9 месяцев назад
спасибо!
@nikdebilniy5927
@nikdebilniy5927 Год назад
Чудеса трюков
@alexeybychkov_
@alexeybychkov_ Год назад
🎩🪄
@user-vf9ml7uc1t
@user-vf9ml7uc1t 10 месяцев назад
Потом надо этому же дизайнеру дать и сделать это
@alexeybychkov_
@alexeybychkov_ 10 месяцев назад
ага))
@andreymokko
@andreymokko 9 месяцев назад
Ну если фронт готов отдать свои бабки дизу, то почему нет? Задача элементарная. Удивлен, сколько бестолковых фронтов в комментах. Я думал, что мы старые пердуны, и молодые нас задавят. Вы вообще нихера не умеете))))))))))
@olgaschremf676
@olgaschremf676 2 месяца назад
Хитро!!!❤
@alexeybychkov_
@alexeybychkov_ 2 месяца назад
Спасибо за просмотр)
@loki-505
@loki-505 Год назад
Сижу, думаю, я вот даже придумать такое не могу, а тут даже объяснение, теперь зачем нужны обычные кнопки?
@alexeybychkov_
@alexeybychkov_ Год назад
на самом деле обычных прямоугольных кнопок чаще всего будет хватать) Но если захочется психануть, то вот примеры есть)
@loki-505
@loki-505 Год назад
@@alexeybychkov_ психануть хочется очень часто😁😁😁
@andreymokko
@andreymokko 9 месяцев назад
@@loki-505 это по началу) Потом научитесь контролировать свои кнопочные позывы, и пользователи будут благодарны за обычные понятные кнопки.
@kuzpugonka1
@kuzpugonka1 5 месяцев назад
И как потом это верстать???
@alexeybychkov_
@alexeybychkov_ 5 месяцев назад
также и верстать - из 3 элементов
@Milevi4
@Milevi4 Год назад
Гений 🔥
@alexeybychkov_
@alexeybychkov_ Год назад
🎉
@denri3733
@denri3733 5 месяцев назад
Спасибо!
@alexeybychkov_
@alexeybychkov_ 5 месяцев назад
пожалуйста!
@m7280
@m7280 Год назад
Обожаю ❤
@alexeybychkov_
@alexeybychkov_ Год назад
♥️
@xleoxjeffx
@xleoxjeffx 5 месяцев назад
почему, кста, ui/ux считается it
@alexeybychkov_
@alexeybychkov_ 5 месяцев назад
и мне интересно)
@ppoliqq
@ppoliqq 5 месяцев назад
а в чем мем с верстальщиками? 👉👈
@antplay6759
@antplay6759 5 месяцев назад
Вот просто представь себе что будет если перенести эту кнопку на сайт. В Фигме может и опрятно выглядит, но на сайте такие проблемы с этой кнопкой будут
@alexeybychkov_
@alexeybychkov_ 5 месяцев назад
он делает кривые и текст печатать нельзя. А в ролике о том - что печатать можно, ведь это не кривые
@drevojzni6544
@drevojzni6544 10 месяцев назад
Вот реально интересно... как это все верстать потом... я ваще бэкер, поэтому для меня выглядит это все красиво и быстро, но когда я думаю, о том, что это нужно потом сверстать на хэтэмэлэ, у меня дергается глаз
@alexeybychkov_
@alexeybychkov_ 9 месяцев назад
Такое лучше не верстать)) а сказать, что занят на 3 года 😀
@andreymokko
@andreymokko 9 месяцев назад
Глаза боятся - руки делают
@user-yq5te3tp7i
@user-yq5te3tp7i Год назад
А в реальной верстке это делается одной командой )))
@alexeybychkov_
@alexeybychkov_ Год назад
круто)
@andreymokko
@andreymokko 9 месяцев назад
Не совсем. Skew работает по другому алгоритму. В Фигме тоже можно так сделать через плагин Skew, и все будет работать в автолэйауте, но если будет задача сохранить толщину торцевых линий, то skew вам не подойдет. Зато подойдут другие решения)
@user-yq5te3tp7i
@user-yq5te3tp7i 9 месяцев назад
@@andreymokko Ну... Любое решение на CSS, SVG, JS, да даже наверно на WebGL, будет менее геморойно, Чем вот это ...
@andreymokko
@andreymokko 9 месяцев назад
@@user-yq5te3tp7i ну во-первых не любое, во вторых «чем вот это» - вы про что конкретно? Про реализацию в Фигме? Если про Фигму, то можно и плагином сделать в два клика. Вопрос лишь технических условий на выходе. Требования к коду бывают разные. Иногда алгоритм на видео будет необходим и лучше им владеть, чем не владеть.
@IrinaKoles
@IrinaKoles Год назад
Круто😊
@alexeybychkov_
@alexeybychkov_ Год назад
Супер
@deemulya
@deemulya 4 месяца назад
Ребят, а знает кто, как сделать простой блок текста (T, без вский добавлений групп и автолейаутов) скошенным вот так же? а то один раз каким-то образом у меня он таким стал (не преднамеренно) и не знаю, как то повторить специально
@alexeybychkov_
@alexeybychkov_ 3 месяца назад
Только через плагины с изометрией
@deemulya
@deemulya 3 месяца назад
@@alexeybychkov_ А у меня, выходит, забаговался так без плагинов? И переносить ведь и менять можно всë в шрифте. И везде у дубликатов скошенности будет эффект
@xenniehello94
@xenniehello94 2 месяца назад
них/я себе!!! спасибо
@alexeybychkov_
@alexeybychkov_ 2 месяца назад
пожалуйста))
@sovetovpetr632
@sovetovpetr632 9 месяцев назад
А почему просто на общий автолэйаут не накинуть стиль?
@andreymokko
@andreymokko 9 месяцев назад
Стиль скошенных под определенным углом торцов?
@alexeybychkov_
@alexeybychkov_ 8 месяцев назад
такой стиль не накинуть)
@andreymokko
@andreymokko 8 месяцев назад
@@alexeybychkov_ ну в целом есть решение и с имитацией стиля - плагин для Фигмы Skew. Он имитирует css свойство transform skew. Но изменится толщина линий на торцах. Если линии тонкие, то прям заметно будет. У элементов со сплошной заливкой все будет ок.
@Myideasandprojects
@Myideasandprojects 4 месяца назад
Атасс И как сэтим финтом верстальщик совладает.
@alexeybychkov_
@alexeybychkov_ 4 месяца назад
Ну также из З частей)
@drevojzni6544
@drevojzni6544 10 месяцев назад
Но за видос спасибо
@alexeybychkov_
@alexeybychkov_ 10 месяцев назад
пожалуйста!
@dimendroider7550
@dimendroider7550 5 месяцев назад
Верстальщики 🤪
@alexeybychkov_
@alexeybychkov_ 5 месяцев назад
))
@janeiovenko5346
@janeiovenko5346 6 месяцев назад
✌️🤓
@alexeybychkov_
@alexeybychkov_ 6 месяцев назад
🎉
@user-xs8ty9dg5s
@user-xs8ty9dg5s Год назад
Спасибо за классный лайфхак. Круто, что в одном месте можно найти столько полезностей ❤❤❤❤❤
@alexeybychkov_
@alexeybychkov_ Год назад
Спасибо за просмотр)
@Islam_Temirsultanov
@Islam_Temirsultanov 6 месяцев назад
Не проще войти в режим точек, и просто нижнюю левую и верхнюю правую чуть растянуть ?)) Я обычно так и делаю, а верстальщики пусть посто возьмут этот вектор как фото и все
@alexeybychkov_
@alexeybychkov_ 6 месяцев назад
если прямоугольник изменить в режиме точек, он перестанет быть прямоугольником. А значит про автолейаутные кнопки можно забыть. Нет, не проще
@Islam_Temirsultanov
@Islam_Temirsultanov 6 месяцев назад
@@alexeybychkov_ не особо понимаю суть таких кнопок AL, я и без них все верстал и все было шикарно. Видел как новички дизайнеры делали такие кнопки, это было ужасно, у них все наперекосяк, проще сделать как я сказал, ну по моему мнению)
@alexeybychkov_
@alexeybychkov_ 6 месяцев назад
проще сначала тему ролика прочитать @@Islam_Temirsultanov
@victoriiabaras2879
@victoriiabaras2879 2 месяца назад
нахера?
@alexeybychkov_
@alexeybychkov_ 2 месяца назад
И мне интересно)
Далее
Самый надежный автомобиль
01:00
Просмотров 468 тыс.
Design This ON/OFF Toggle in Figma (Easy)
14:31
Просмотров 209 тыс.