Уроки Figma | Есть варианты! (Figma Variants)
HTML-код
- Опубликовано: 5 авг 2024
- #figma #variants
Новая функция Варианты (Variants). Разберёмся что это такое и как работать с вариантами в Figma.
🎞 ОГЛАВЛЕНИЕ
00:00 На старт
00:29 Внимание
00:43 Что такое Variants
01:45 Делаем кнопки
05:03 Primaty
05:53 Чиним варианты
07:42 Делаем состояния
11:46 Пилюлька
К УРОКУ:
Text Styles Generator
www.figma.com/community/plugi...
Change Text
www.figma.com/community/plugi...
ВАЖНОЕ:
Моя фигма-страница
figma.com/@vandesign
Figma-чат
t.me/figmachat
Figma Help
figma.help
🧰 Уроки Figma на русском.
Фигма - это бесплатная онлайн программа для дизайна web и UI. Приложения для Windows, Mac OS, Android (Material design) и iOS. Программу можно скачать на сайте [www.figma.com](www.figma.com/).
• Как сделать в Фигме свой первый сайт.
• Как использовать сетки и направляющие в вашем проекте.
• Что такое компоненты и фреймы в Фигме.
• Самые интересные плагины (plugins) Фигмы.
• Горячие клавиши для Windows и Mac OS.
• Анимация, шрифты (Google Fonts) и иконки.
• Как создать свои UI Kit и шаблоны (templates).
• Сравнение с Sketch и Adobe XD.
Потихоньку всё сложится в курс по дизайну в Figma.
---
👍 Поддержать канал: / zendesigner
![[NEW] 🔥 Figma Variants как пользоваться? Настраиваем варианты компонентов. Урок 15](http://i.ytimg.com/vi/UUJdwx_Jd74/mqdefault.jpg)
![Jordan Adetunji - KEHLANI REMIX (feat. Kehlani) [Official Video]](http://i.ytimg.com/vi/EeJ8n5PxFGE/mqdefault.jpg)
Для тех, кто ещё не подписан: лично я, умышленно, не читал официальные мануалы, а ждал этого видео от Виктора. Как вы понимаете - не зря. Как всегда - превосходно. Спасибо.
это круче чем официальный мануал! спасибо!
вы очень крутой дядька )
Виктор Теплов - настоящий алмаз в информационном фастфуде! Очень качественно!
Бери выше! Медведь в таборе инфоцыган! 😂😂
Как всегда все суперпонятно и наглядно! Спасибо, Виктор!
Большое спасибо за интересный выпуск!
Коротко, ёмко, по делу. Для меня оказалось полезнее, чем официальное видео
Самый топовый канал по Фигме, спасибо!
Теперь знаю, с какой стороны подходить). Спасибо, Виктор!
Крутейший разбор! Спасибо за видео!
Просто взрыв мозга! Спасибо за урок!
Виктор, ваш канал просто находка. Сейчас как раз пересобираю новую дизайн-систему, и несмотря на то, что, как мне казалось, в вариантах уже разобрался полностью, я всё равно узнал для себя новое. Спасибо за видео, буду внимательно следить за вашим каналом)
🖖
Спасибо! Круто как обычно)
Спасибо за видео!
Спасибо, очень круто!
Оочень круто, спасибо 😌
Супер, спасибо огромное!
Старт видео - прям какой-то артхаусный хоррор
Ахххонь!!! Спасибо, как обычно!!!
Просто шикардос!
Аплодисменты....
Ну ваще, теперь будет прям что посмотреть )))
Очень хорошее видео! Спасибо!
Есть люди которые знают материал, а объяснить не могут. А есть как Виктор, я даже комменты все прочел, ну не хочется уходить, хочется добавки. Спасибо.
Теперь пожелания:
- не то чтобы я особый тугодум, но когда касается каких-то фишечек, хотелось бы помедленней "я записываю".
- а так же программу, которая показывает нажатия, а если бы вы еще и проговаривали что жмете, вообще огонь было бы (это из серии размечтался одноглазый, ну а вдруг)
Теперь лайфхак для всех:
Бывает посмотришь интересное видео, надо его найти, а фиг. Ищешь по истории просмотра, а музыка налезла, ищешь по лайкам и тоже не все так радужно. Поэтому я после лайка жму "сохранить" / "смотреть позже". Все равно не было еще ни одного видео от Виктора чтоб я пару-тройку раз не пересмотрел. Видео по ноушену смотрю до сих пор.
Спасибо. Приятно. Софт для трансляции хоткеев не включаю сознательно. У меня хоткеи кастомные и их трансляция только всё запутает. А про сохранить видео - я добавляю особо полезные видео в свои плейлисты по темам.
@@zen-designer после того как плейлистов стало много и упорядочить их нельзя (говорят раньше на ютубе можно было папочки создавать, но они этот функционал выпилили) я стал пользоваться сугубо "избранным" - куда музыку складываю и "смотреть позже" куда скидываю не музыку. И вообще потихоньку удаляю подписки на каналы оставляя только самые интересные, чтоб было меньше информационного шума, а если и был, то только интересный. Может быть вы и тут что-то подскажете?
@@LEXYteam самые ценные находки я сохраняю отделено в свою базу знаний, сейчас в Obsidian
Огромное спасибо!
Варианты решают) Спасибо за хинтец с union-icons.
У меня мозг завис ещё на слове пофигмить🤣
Вы так классно рассказываете и профессионально обращаетесь с фигмой, просто загляденье
Ничего не поняла, но почувствовала приятное общение со знающим человеком...
Я тут фигню разную пишу, вы меня поняли, остальные, не важно...
Спасибо, что делитесь своими находками и наработками.
Вы по-настоящему созидательный человек
Вау! Класс!
Спасибо!
Очень полезное видео!
Идеально!
Как всегда спасибо от души! Буду использовать секретную технику с приматом теперь 😂
От Души - Душевно в Душу!
Спасибо, Виктор! У вас - один из самых крутых каналов с контентом по Фигме. А можно узнать поподробнее про стартовый набор для нового проекта: какая структура, что включено, как организовано?
Не обещаю 🙄 Это нужно приводить его в вид "показать не стыдно" и делать подробное видео. Но там ничего особенного. Обычный UI-кит по сути.
@@zen-designer Я понял, спасибо. Но если вдруг дойдут руки - будет круто. Сам сейчас делаю такой стартовый UI Kit себе, любопытно было бы сравнить, посмотреть на примеры коллег.
@@rusanovutube найди меня в телеге
@@zen-designer Обещайте!
Виктор, это топчанский.
Надо смотреть на 0.5х, не успеваю следить за мыслью
Так даже лучше. Голос звучит солиднее 😁
А иногда и на 0.25
@@LEXYteam а так можно и Ктулху вызвать. Аккуратно
@@zen-designer для этого его нужно смотреть задом-наперед.
Мне на 1.25 было почти норм, иногда снижал до 1))
Ого!!!
За видео спасибо, подробно и интересно. Только можно попросить вас ставить поп-фильтр чуть дальше? :) Проскакивают взрывные согласные. С ними тяжелее слушать.
Попробую
Забыл лайк поставить - лови
Se... мы все поняли, Виктор)))
Вить! Там автолейауты обновили… Ну это… Мы ждём, короче! 😅
Спс
лайккк маестро)
гений!
Сам такой!
Каеф
Виктора Теплова в официальные амбасадры Figma в СНГ 😎👍
Амбассадор что-то связанное с деньгами. А я скорее евангелист Figma ☺️
Ребят, подскажите, нужно ли удалять у инстансов скрытые иконки для разрабов? я имею ввиду вот есть вариант с иконкой справа, поэтому иконка слева скрыта. Можно ли так кнопки оставлять с мусором внутри?
Спасибо. Поменять обводку и заливку на винде - shift X
искала этот комментарий ❤️❤️
Виктор, спасибо за отличные уроки и крутяцкую подачу! Возник вопрос про групповое переименование слоев внутри фреймов. Так то, если просто выделить родительский фрейм и попытаться заменить имена вложенных (как у тебя с text label в этом видео), то замена не работает и надо выделять непосредственно те элементы, которые хочешь переименовать. То есть автомат не автоматный. Есть пилюлька?
Догадался и сам отвечу. Надо выделить все родительские, войти в них - Enter и вуаля, можно переименовывать)
кайф
Виктор, пилите классный контент. Оригинально и качественно!
Я вот как раз использую TheBrain для всего конспектирования, но что касается изучения программирования, технических дисциплин (не могу сказать конкретнее ) то , к сожалению, ничего кроме обычного линейного конспекта в OneNote для себя не приспособил.. Просто в том же TheBrain не знаю и какие типы, теги сделать ..и как упорядочить .. Начинаю думать не о изучаемом материале, а о том как преодолеть ограничения TheBrain..
Вот как я вижу ...
Если сдалека , основная цель - решение проектных задач (я как исполнитель в команде решаю, условно говоря, задачи/подзадачи проекта).
Следовательно надо уметь решать учебные задачи.. ( сейчас у меня вообще страх решать задачи, так как крайне плохо решаю).
Для решения учебных задач надо понять материал ..
Чтобы понять материал надо "разложить его по полочкам" , создать связи между полочками, увидеть его и в деталях и целостно. Некоторые аспекты запомнить в долговременную (через ANKI например , чтобы не возвращаться к конспектам двести раз глянуть на кусочек )..
Так вот вниманием я выделил два "высокоуровневых вопроса:
*
как решать задачи (учебные простые и среднесложные )?
*
как понять/изучить материал (технический прежде всего) ?
Как понять материал ? Описал выше .. Но вот как это технически реализовать я точно не знаю... Каким софтом конспектировать и как ? Как создавать эти взаимосвязи? (ничего кроме как "матрицы "все мысли ко всем мыслям" в голову ничего не приходит). Ну я не говорю уже о техниках понимания отдельной мысли от Скотта Янга и Барбары Оакли..
Как решать задачи ? Банальное разложить "по полочкам", что нам известно и к чему хотим прийти. Но тоже непонятно как это технически можно реализовать кроме как колонок "дано" , "найти", "решение"..
Я понимаю, что можно не грузиться этим всем, но хотелось бы как-то на сравнительно простые вещи (в сравнении с сложными проектами) придумать шаблон, чтобы не тратить умственные энергию и душевные силы на постоянную борьбу с изучением нового. В будущем придется перелопатить уйму технических отраслей, хотелось бы найти ответы для себя сейчас.
Надеюсь у вас хватило желания прочитать все эти рассуждения. Очень интересно услышать ваше мнение ...
всё правильно ты делаешь!
Как решать задачи (даже суперсложные) -- декомпиляция. Любая задача делится на более мелкие и ещё и ещё. И так, решая простые задачи, мы в результате решаем суперсложную.
Как понять/изучить материал? -- только практика. Заучивание теории в наш век -- пустое занятие. Любой ответ можно нагуглить моментом. Да, нужно учиться гуглить, искать ответы, правильно ставить вопросы. А вот закрепить полученные знания можно только решая задачи. Применяя знания на практике. Бесполезно просто смотреть видеоуроки, а вот повторяя за учителем каждый шаг, можно что-то почерпнуть. Причём когда просто смотришь, создаётся обманчивое впечатление простоты. Но обычно учитель собаку съел на этом деле и у него за плечами годы опыта. Начинаешь повторять и возникают новые вопросы.
Про софт и конспекты -- главное чтобы инструмент не требовал много времени на самообслуживание. Получаестя с OneNote -- прекрасно. Сейчас модное направление -- софт с беклинками (обратные ссылки -- ставишь ссылку на другой документ и потом оказавшись в нём, видишь откуда идут на него ссылки) -- скоростной Obsidian или значительно более мощный Notion. На канале есть про них видео.
А то, что в процессе обучения нужно записывать ключевые моменты, это бесспорно. Даже сам процесс записывания помогает в изучении и запоминании.
Удачи!
@@zen-designer Спасибо за ответ!
"Обратные ссылки" это как wiki подход ?
--___________________
К практике я отнесу ...
-повторение за учителем в моменте туториала
-решение домашних задач туториала
-решение задач с " интернета " по изучаемой теме (это может быть и совместное решение задач с другими, когда один из пользователей спрашивает решение)
я что-нибудь тут пропустил?
______________________
Я вот не знаю почему, но меня подбешивает следование туториалу "автор сделал шаг - и я делаю шаг" . А задачи решать даже пугает ..Вот пытаюсь понять причину, пока не нашел )
И еще я вот пытаюсь понять как высчитать наиболее эффективный путь обученя с такими переменными как время, усталость(энергия затраченная на обучение) и результат (материальное воплощение в виде скорости и качества решения проектной/рабочей задачи) (вроде бы никакой переменной не пропустил). Может быть есть мысли?
@@wertweqrwer7473 мне кажется ты немного усложняешь. Сложно разработать систему до того, как начать собственно учиться )
@@zen-designer это ты еще не знаешь как я для настольной лампы выбирал абажур ))
Так вообщем по жизни ... Сейчас увлекся рационализом, онтологикой и системным мышлением, так вообще очень прагматично все воспринимаю ... Поэтому и видео мне твои нравятся, очень чётенько и сжато.
Виктор, а как войти внутрь компонентов стека глубже на этаж? Вот здесь вы показываете 10:07, но я могу только на одном компоненте глубже на этаж провалиться, то есть все 119 вариантов придется раскрывать и переименовывать вручную, а вы как-то одним действиям во все компоненты одновременно провалились - подскажите пожалуйста что это за хоткей, или как-то иначе делается. Не могу нигде найти информацию про это.
Enter. А назад Shift+Enter
Спасибо за качество контента! Я видела у вас в одном из видео всякие лайфхаки по работе с mac OS, не получается их найти, может подскажете название видео, где это может быть.
Было видео про фишки для Win повторяющие фишки macOS.
@@zen-designerБольшое спасибо!
Не могу понять, пересмотрел несколько раз виде, но так и не разобрался. На 7:40 вы переносите инстанс кнопки на отдельную страницу. Далее множите, удаляете часть иконок и при изменении размера кнопки остаются с тем же набором иконок, который вы сделали. То есть кнопка без иконки в разных размерах остается без иконки. Кнопка с одной иконкой так же меняется в размерах сохраняя одну иконку. У меня же, при изменении размера отображается изначальный вариант с двумя иконками. Как это исправить, подскажите пожалуйста.
Сложно подсказать не глядя. Может как то отличаются варианты
Т.Е. Если выбираем sacondary то динамически предлагается выбор (light black/bold gray)
Виктор привет!
Вопрос по вариантам) можно ли сделать в варианте выбор по условию без лишней вложенности?
Например у меня есть 3 варианта текста.
1. просто текст
2. текст + sacondary text (light black)
3. текст + sacondary text (bold gray)
При этом в вариантах, sacondary включается через свичер (yes/no), а по условию -> если yes, даем право выбора (light black/bold gray)?
К сожалению так нельзя
Жаль,
но спасибо за ответ!
Здравствуйте, можете, пожалуйста, сделать видео про ваши очки для компьютера? Как выбрать? Насколько сильно они помогают сохранить зрение и тд.
Тут я не специалист. Простите. Купил очень давно.
Не поняла, почему сердечкотпоявилось вместо шестерни. Обаятельный чел :)
🌞🌞🌞
Не совсем понял момент где тумблеры появились. После переименовании yes/no же? За видео, спасибо. Очень легко объяснили!
Тумблер появится когда значение Yes/No или True/False
Что делать если иконка имеют разную ширину? Изначально в компоненте система резервирует размер блока, в который будет размещаться иконка.
К примеру, у меня есть кнопка с иконкой социальной сети и текстом. Однако при выборе другой иконки с другой шириной, размеры не пересчитываются.
В вашем же примере все иконки условно имеют один размер.
При этом при изменении иконки в мастере, все хорошо меняется. Но в копиях такой трюк не работает вовсе
Это ограничение. Есть вариант делать сами иконки автолейаутами с параметром hug contents
Привет! А в чём фишка нейминга с маленьких букв?
вкусовщина и соглашения с разрабами. Есть много вариантов -- camelCase, snake_case, kebab-case, PascalCase и т.д.
А для иконок можно применить варианты? Или это не целесообразно?
Теряешь поиск по ассетам и при выборе оверрайда
Скругление углов кстати можно было бы в видео тоже через переключатель сделать) Как я а, задним числом сумничал?))))
можно конечно, но ИМХО это редкий кейс - чтобы в одном проекте были и такие и такие кнопульки
@@zen-designer ну я же говорю, сумничал)
@@GriNAME это правильно. Умничать очень полезно. Из таких умничаний можно всегда выбрать настоящую умность ☺️
@@zen-designer хехе, на то и расчёт)
Виктор Здравствуйте. Почему вы не делайте новые ролики? вит у вас хорошо получалось.
Работа занимает всё время
Могли бы сделать ролик с обновлёнными плагинами?) Возможно в вашем арсенале появились новые плагины)
ох. Что-то конечно появилось. Но их стало выходить такое количество что проще под каждую задачу искать. Иначе пропустишь чт-то 😊
Спасибо. От некоторых моментов мне страшно становиться.
Не баись! Прорвёмся!
На 11:30 немного не понял как работает. А точнее как сделать подобную зависимость?
Немного не понял вопрос )
@@zen-designer на одной странице большой стек кнопок, на другой странице небольшой стек кнопок. Во втором стеке поменяли свойства кнопки и на первом стеке всё поменялось. Как это сделать? Зависимость одного стека от другого.
@@litvin23 я об этом рассказываю 7:44
@@zen-designer пропустил
Виктор, спасибо за видео! А как сделать привязки между вариантами? Например, мы взяли кнопку по умолчанию. Хотим, чтобы был каждая кнопка по умолчанию была с одним и тем же ховером.
честно не понял вопрос )
@@zen-designer. Допустим мы создали компонент кнопки. Создаем hover компонент для этой кнопки. И как между ними привязку сделать?
Я хочу к примеру создать Page 1 с компонентами кнопок, а Page 2 непосредственно уже дизайн страниц сайта.
То есть мы на Page 2, к примеру, создаем frame - туда запихиваем созданный компонент кнопки из assets . И чтобы в режиме презентации, когда наводишь на эту кнопку - она менялась на hover кнопку.
Возможно сумбурно написал...
@@vadimdmitriev1991 так это нее работает. Надеюсь пока
@@vadimdmitriev1991 Сейчас в бета-тестировании такой функционал. Так что скоро завезут.
А можно трек к этому видео в описание)
ruclips.net/video/qZ4viw55JbQ/видео.html
@@zen-designer Пасиб!
У вас райзен?
Нет. Старенький i7
Все круто. Но Дюна выходит в октябре 2021 года))
Я сказал «скоро», а не «завтра» 😁
@@zen-designer можно успеть перечитать :) видео крутецкое!
+
Виктор, взываю!!
В фигме автолэйаут новый, прошу обзорчик
Прости, пока сильно занят
@@zen-designer ждун активирован😼
3:52 это вообще то такое нужно нажать
Ctrl(Cmd)+R - Rename
вы живете за океаном?
Зависит от того где живёшь ты. Я в Питере. И лучше на "ты" ☺️