ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Подробный курс по Фигме. Урок 14 - Командная библиотека компонентов в Figma
ฝัง
- เผยแพร่เมื่อ 14 ส.ค. 2024
- #figmahelp #фигма #уроки
[2021] 🔥 Ролик был перезаписан в 2021 году - актуальная версия - • [NEW] 🔥 Библиотека сти... 🔥
Привет! Это подробный, понятный, интересный и бесплатный курс по Фигме :) Уроки без воды и по делу на обычном языке и на живых рабочих примерах! Посмотрим на бесплатную библиотеку сквозных стилей и платную командную библиотеку компонентов.
00:00 - модульные сетки
3:07 - добавляем сетки в библиотеку стилей
6:46 - добавляет цвета и тени в библиотеку стилей
9:54 - библиотека компонентов
12:17 - как удалять из библиотеки компонентов
16:07 - как на бесплатном тарифе пользоваться библиотеками
💰❤️ Поддержать канал:
бусти - boosty.to/alex... - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
Подглядывать за мной можно тут:
👉 Инстаграм: / alexeybychkov_
👉 Беханс: www.behance.ne...
👉 Телеграм: t.me/dsgn_tips
👉 Фейсбук: / dsgn.tips
👉 Твитор: / _alexeybychkov
Содержание курса:
Урок 1 - [2021] ⚡ Аккаунт, история версий • [NEW] 🔥 Обзор интерфей...
Урок 2 - [2021] ⚡ Гамбургер меню, предпочтения • [NEW] 🔥 Обзор меню, по...
Урок 3 - [2021] ⚡ Инструменты и калькулятор • [NEW] 🔥 Инструменты и ...
Урок 4 - [2021] ⚡ Слои, маски и массовое переименование • [NEW] 🔥 Слои, маски и ...
Урок 5 - [2021] ⚡ Сетки. Bootstrap. 8 px grid • [NEW] 🔥 Модульные сетк...
Урок 6 - [2021] ⚡ Привязки • [NEW] 🔥 Привязки (cons...
Урок 7 - [2021] ⚡ Компоненты • [NEW] 🔥 Компоненты в F...
Урок 8 - [2021] ⚡ Компоненты и адаптив • [NEW] 🔥 Компоненты и а...
Урок 9 - [2021] ⚡ Выравнивания, Tidy Up • [NEW] 🔥 Выравнивания (...
Урок 10 - [2021] ⚡ Текст • [NEW] 🔥 Текст в Figma:...
Урок 11 - [2021] ⚡ Цвет, градиенты, изображения • [NEW] 🔥 Цвет в Figma: ...
Урок 12 - [2021] ⚡ Обводка • [NEW] 🔥 Обводка в Figm...
Урок 13 - [2021] ⚡ Эффекты: блюры, тени • [NEW] 🔥 Эффекты в Figm...
Урок 14 - Библиотека команды - • Подробный курс по Фигм...
Урок 15 - Прототипы в Фигме - • Подробный курс по Фигм...
Урок 16 - Панель кода и экспорт - • Подробный курс по Фигм...
Урок 17 - Ссылка на проект - • Подробный курс по Фигм...
Урок 18 - Плагины - • Подробный курс по Фигм...
Урок 19 - [2021] ⚡ Auto Layout в Фигме • Уже не новый Auto Layo...
Урок 20 - [2021] ⚡ Варианты • Figma Variants как пол...
Урок 21 - [2021] ⚡ FigJam • [NEW] 🔥 FigJam - онлай...
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне чуть больше 30 лет, женат на прекрасном человеке и у нас чудесная дочка. Работаю на лучшей бирже в рунете - Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 15 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!
Подробнее обо мне - alexeybychkov....
15 лет опыта - alexeybychkov....
Пишу - alexeybychkov....
Дизайню - alexeybychkov....
Отзывы - clck.ru/K5Mcc
Мои книги:
«Дизайн и фриланс. Начало» - clck.ru/JE8ku
«Дизайн и фриланс. Новый уровень» - clck.ru/JE8jT
Хелп по Фигме: уроки, видео, советы, фишки - figma.help
Мир фейсов: faces.world/
#figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance
Как же мне нравятся твои подробные видео. А шутеечки делают их легче, хочется смотреть и дальше. Стараюсь все максимально запомнить, а потом сразу на практике применяю.
круто) очень рад, что нравятся!
Смотрю запоем все Ваши курсы по фигме! Нереально просто, интересно и информативно! Спасибо огромное, Алексей, за Ваш труд!
🤟😇🤟 супер!
Смотрю и понимаю, что мне еще учиться и учиться, вы хорошо и подробно объясняете
спасибо)
В моей фигме уже добавлены твои библиотеки сеток, цветов и теней. Очень удобно пользоваться, спасибо большое! И еще спасибо за классную идею, как организовать текстовые стили!
пожалуйста)
Что же я такого хорошего в жизни сделала, что могу смотреть ваши уроки😂? Спасибо и за доступное объяснение, и за удобные файлы!
Спасибо, приятно))
Сделала по Вашему совету себе заготовки для сеток. Теперь ничего не надо настраивать и терять каждый раз время. И наконец-то разобралась, как добавить текстовые стили. Появятся сложности, сразу к Вам. Спасибо за помощь для таких тугодумов, как я)
Здорово :)
Алексей, спасибо! До этого урока я ваши наработки в Design Sistem засунула, теперь все в библиотеке, кроме компонентов (((((, денежки вылазят, ничего за это время не поменялось, но они меня в дизайн системе остались, спасибо вам, Алексей, еще раз, за все ваши труды! Кстати, большие буквы я люблю, но, скорее всего, до поры до времени 😉
Не за что))
Спасибо за юмор!! с ним как-то проще смотрится
рад, что понравилось
Спасибо! Я таких людей называю волшебники! Вас мало на Ютубе, но вы есть)) Вы многим помогаете расти в работе и деньгах, становиться лучше и т.д.
круто) спасибо!
То что надо, за 17 минут почти что все освоил, за тайм годы отдельное спасибо
ну класс)
Алешенька спасибо тебе! Воспользовался твоими материалами с удоволиствием
☀️ не за что)
Спасибо за чудесный видеоролик!! Так держать! Очень полезно и интересно, а главное- с душой!😃😃😃😃
❤️
Очень удобно ими пользоваться) Спасибо за годный урок)
супер)
Обожаю твои уроки! У тебя очень приятный голос и клевая, позитивная подача.
Скажи пожалуйста, какие фриланс платформы ты бы посоветовал для начинающих?
а я-то как обожаю, когда под ними кто-то комменты оставляет :)
Спасибо! Я в свое время пробовал на разных площадках работать, но почему-то решил за всеми зайцами не бежать и остановился на веблансере, так и работаю на нем и всем всегда рекомендую.
Классный курс, узнаю очень много нового!
супер) рад, что полезно!
Спасибо огромное!классная подача материала!очень нужно и интересно!!👍👍👍
Супер) спасибо за просмотр!
Спасибо за урок, полезное видео
😊
Да очень интересный урок.
Привет! Вообщем решил посмотреть твоё рабочее поле. Зашёл на веблансер и офигел «на первом месте??серьезно??» подумал я сперва)) в портфолио понравилась работа по игре. Очень круто.
Ты в книге рассказываешь сколько по времени нужно уделять бирже, через сколько можно будет составить тебе конкуренцию на бирже)) и новичку, который туда приходит, на что ему рассчитывать?? А то книжка уже рядом, через пару дней придёт )
Тебе добра🤘
Привет. Да, что-то такое рассказываю в книгах :) Про биржу, портфолио, общение с заказчиками - это в первой: как продать себя заказчику. А во второй продолжение - как продать ему (после того как он тебя выбрал) свой дизайн.
Вообщем одной книжки не хватает для полноты картины ☹️
@@anton.806 эх)
😄😉
Теперь и ко мне полетели твои файлы, спасибо)
супер!
Спасибо за видео.
☀️☀️☀️
Спасибо многое узнал!
Ну класс :)
😊 Зинаида Компонентовна 😊
ага)
За это можно ставить тысячи лайков!!!
Спасибо, приятно)
Спасибо что упомянули в уроке с сеткой, что когда-то снимите урок по библиотекам, а то так бы искал как скопировать)) А тенюхи у вас эти три стандартные, используются во всех проектах или вы их тоже корректируете?)
Иногда корректирую, но чаще оставляю как есть. Просто выбирают по 1280 или 1366 мониторы и расстояние между колонками в 10 или 20 или 30 пх
Трам-пам-пам, коммент есть, лайк стоит, идем дальше.
Огонь! Спасибо)))
Спасибо большое. Очень полезный материал, хоть я и считаю себя опытным пользователем фигмы, но, как оказалось, некоторые моменты обесценил и не смотрел в их сторону. К примеру, публикация библиотек, хотя компоненты, стили и т.п. - все использую.
Еще, если ты используешь дизайн-систему, можешь поведать как ты ее создал, по каким принципам? Хочу заняться этим, т.к., по сути, рисую около 80% компонентов из проекта в проект всегда более-менее одинаковыми. А было бы круто создать такую систему, которая бы включала все эти компоненты и которая была бы пластична настолько, чтобы это включало большинство возможных изменений (констраинты все проставить для безболезненного изменения размера, авто-лэйоуты, иконки добавить, но выключить из видимости и при необходимости иметь библиотеку иконок и т.п.)
Рад, что нравится. Я сам не использую никакие дизайн системы. Заметил, что сильно быстрее создать кнопку с нуля: это же просто прямоугольник и текст, чем искать ее где-то в библиотеке, а потом все равно перекрашивать и текст менять. А если нужны какие-то иконки, то просто открываю файл иконок (он всегда открыт) и беру оттуда нужную. Так я экономлю время, а не теряю. Но опять же, речь про веб. В случае с мобильными приложениями пришлось бы пользоваться всякими наборами заготовок ios и андроида.
вау! супер!
🤟
Нажимаю Alt+3 выпадает окно, но нет кнопки Publish напротив названия файла.. Подскажите, что сделать?
может нечего публиковать? поэтому и кнопки нет)
@@alexeybychkov_ Спасибо, только что разобралась, при нажатии Alt+3 ничего нет, но можно выбрать действие Publish сразу там же где и делается дубликат (в верхней выпадашке). Всё получилось)
@@natan100zz супер!
Наталья Захарова Наталья, спасибо вам))
@@natan100zz СПАСИБО
Обожаю твои видео
Спасибо)
Спасибо!
спасибо за просмотр)
Алексей, подскажи плиз такой момент:в одном из видео у тебя на канале видела как ты делал такой фокус: нажимал волшебные кнопки и попадал с онлайн версии фигмы на десктопную. Напомни как это делать. Огромное спасибо. Ну и лайк тебе, конечно, за твой труд)))
нужно немного ссылку изменить. Например, вот в такой:
www.figma.com/project
удалить все до слова figma и добавить двоеточие вместо .com, чтобы получилось так:
figma:/project
Работает с проектами, а вот с плагинами не хочет. Ну и должен быть установлен десктопный вариант
1:09 Постой, паровоз, не стучите, колеса... Что-то вспомнилось))
😄 спасибо за жменю комментов!
Спасибо за видео, пригодится
пожалуйста!
Спасибо.
за просмотр :)
Привет, хочу спросить! Что бы увеличить/уменьшить экран в фигмне надо shift и колёсико мыши , но у меня не получается (я страдаю😂) для этого надо какой то плагин скачать? И ещё на сайте figmahelp ни как не могу скачать в фигму иконки, ни как не получается, есть более подробный способ скачивания?
Привет. Масштаб меняется через ctrl + скрол мыши, а не через Shift :)
Чтобы скачать иконки - надо открыть файл и сделать его дубликат. (сверху по центру в выпадашке «Duplicate to your drafts» и уже потом в копии файла они будут доступны для редактирования.
[2021] 🔥 Ролик был перезаписан в 2021 году - актуальная версия - th-cam.com/video/KBxBnKoX8no/w-d-xo.html 🔥
Спасибо большое, очень помогает! Может есть какая-то подсказка, как легко найти файл-оригинал запаблишенной библиотеки? И как жить, если что-то не даёт анпаблишить (чужой файл?)
Пожалуйста) Найти можно через поиск в панели компонентов. А как жить хз)
Спасибо большое за урок! как всегда все понятно)) остался вопрос, 6:25 - пишем для команды, например, нотификашку, а где они ее потом видят?
насколько я понимаю в той же библиотеке
Где скачать файлик в котором всякие полезности для приложений и вэб?? В конце видео ты говоришь об этом
На фигме.хелпе figma.help/files/
Очень крутой курс! Вопрос - а как можно, используя библиотечные стили, отрисовать бордер низ-лево , выбирается же только один? Я , кроме как раздетачить библиотечный, а второй создать вручную, способа не нашел( или все таки как то возможно применять сразу два стиля из библиотеки?
2 стиля сразу нельзя( Один обновит другой
Алексей, приветствую! Подскажи пожалуйста если найдется минутка, а как у меня твои компоненты flag попали в библиотеку в раздел work на фришной версии? И почему другие файлы с компонентами, свои компоненты в этот work не вытряхивают, хотя я точно так же их (файлы) задубликатил к себе в драфты, но из других источников, а не figma.help?
Так work - это название моей команды у меня в Фигме. А там кроме меня никого нет. Поэтому и попасть туда компоненты могут только от меня ) А к тебе в список они попали, потому что ты их подключал уже. Вот и будут висеть у тебя пока не удалишь из библиотеки
@@alexeybychkov_
Т.е. можно создать аккаунт с командой, где будешь создавать кучу проектов с различными наборами компонентов, потом делиться ссылкой на них, на друггом аккаунте это все подхватывать подпиской на шаринг и таким образом налюбливать Фигму на доллары, фактически бесплатно используя аналог библиотеки компонентов?
@@sammaltsev9429 Ничего не понял :) У кого-то есть файл с компонентами. Он им поделился. Любой кто захочет может взять их себе. Может из них создать свою библиотеку и пользоваться ей, если тариф позволяет, или просто копировать компоненты из файла в файл.
@@alexeybychkov_
Поясняю подробнее. На figma.help у тебя есть файл flags, с компонентами-флажками стран. Я перехожу по ссылке на сайте, у меня в веб-фигме он открывается. Я жму "duplicate to drafts", открываю десктопную Фигму - отлично, файлик у меня в драфтах. Пытаюсь запушить компоненты-флажки из него в библиотеку, ничего естественно не получается т.к. тариф бесплатный, унываю. Но тут замечаю, что могу таки подключить набор компонентов flags от команды work к любому новому файлу что в проектах команды, что в драфте. При этом удаление из драфтов дубликата твоего файлика, который я себе схоронил, ни на что не влияет, компоненты flags по-прежнему доступны. Иду снова по ссылке на файл flags, когда он открывается жму справа вверху кнопку Share, снимаю с себя галочку (права были can view) - все, ни в одном своем файле у меня через библиотеку команды work набор flags больше недоступен, исчез. Снова иду по ссылке, таким образом опять попав в Share->can view - снова становится этот набор доступен в любом файле.
Т.е. как бы через твою команду у меня получается рабочая библиотека компонентов на бесплатном тарифе.
@@sammaltsev9429 Да, сказали, что так всегда было. Проблема в том, что нельзя редактировать чужие. А сам себе создать не можешь новую.
Доброй ночи, слежу за вами уже около полу года, правда обычно в инстаграмм, появился вопрос, возможно ли сделать настройки в фигме, чтобы создавая новый драфтс сразу нужные мне библиотеки стилей были включены тоесть стандартный набор который нужен всегда? а не включать их каждый раз через альт+3? я понимаю что это не долго но все же)))
Привет. В настройках команды можно выставить библиотеки, которые будут включены по умолчанию. В файлах, созданных в Drafts все равно придется включать вручную, так как это уже вне команды.
Добрый день, подскажите пожалуйста, сейчас нужно подобное проворачивать или уже всё добавили на автомате, как я понял?
привет. Недавно ролик этот обновил th-cam.com/video/KBxBnKoX8no/w-d-xo.html
Добрый день. Вы просто обалденные уроки делаете. Они стали моими любимыми. Училась и даже уже что-то делал по ним. У Вас была в доступе библиотека с иконками, яее подключала, а теперь ее нет и в фигма хелпе тоже нет. Может путаю и брала ее не у Вас? и еще файл с иконками соц сетей не открывается у меня, может что-то не так делаю?
спасибо) рад, что нравится :)
У меня есть паки иконок, но я их покупал, поэтому в открытый доступ не выкладывал.
А соц. сети проверил - открывается. Можно попробовать открыть в другом браузере, вдруг глюк какой :)
@@alexeybychkov_ спасибо, приятно, что Вы отвечаете.
Здравствуйте, Алексей! Спасибо большое за уроки - все понятно, доступно и по делу! Хотела спросить про библиотеку сеток из figma.help. Например, сетка 1280 (20), ширина ее колонки не 80, а 83 и соответственно рабочая область не 1280, а 1216. Почему так, не могу понять.
Привет. Не за что. Если сделать сетку от края до края шириной 1280, и разместить по ней контент, то на мониторах 1280пх у контента не будет отступов слева и справа у границ монитора. Грубо говоря, тексты будут налазить на пластиковую часть монитора :) Поэтому нужны отступы + нужно помнить что есть еще скрол вертикальный в браузере (полоска шириной 24пх, она может быть и другой ширины, но вряд ли больше, чем 24ах). Вот и отнимаем: 1280 - 1216 - 24 = 40, делим пополам и получаем отступы слева/справа по 20 пх
@@alexeybychkov_ Вот оно что) теперь понятно. Спасибо за ответ!
@@user-kh2rh6mn4e не за что)
А зачем на фигмахелп Заготовки по адаптивы сделаны компонентом, если я его разломаю, что-то не будет работать?
компоненты можно поместить в библиотеку и доставать из нее. Иначе только из соседнего файла :) А так, я достаю и сам конечно же разламываю сразу
Привет, Алексей! Заметил, что после экспорта изображений из Figma они теряют в качестве, становятся более расплывчатыми. Особенно заметно на картинках с текстом. Может подскажешь, как экспортировать без потерь?
Привет. Не знаю какие у них стоят настройки джепегов, попробуй экспортировать в пнг. Так будет максимально возможное качества для растра. А если речь про 4096+ пх картинки, то у них там отдельная история th-cam.com/video/JhUVYNJSZZg/w-d-xo.html
@@alexeybychkov_ Так я сразу в пнг) Но качество сильно падает, заметно не вооруженным взглядом, зацени prntscr.com/p9um2y Прям не знаю что и делать(((
Спроси в фигма-чате, там 2500+ человек сидит, почти всегда сразу вопросы все решаются t.me/figmachat
@@alexeybychkov_ Спасибо, попытаю там счастья) Но важно и твое экспертное мнение, ведь действительно разница в качестве на скрине слишком велика, так не должно быть?
@@pelyhkonst да, такая разница настораживает :)
Я вот не совсем поняла, если мы что-то публикуем, это попадает в комьюнити? Или это доступно только твоей команде/тебе одному? Или чтобы в комьюнити опубликовать, будет другой алгоритм публикации?
в комьюнити попадает после специальной публикации. Просто твои файлы никому не видны
@@alexeybychkov_ поняла, спасибо)
Спасибо
Пожалуйста)
спасибо Вам за прекрасные уроки!
Помогите найти ошибку: После нажатия клавиши Публикация в Библиотеке всплывающее окно не появляется, я просто все исчезает
пожалуйста) Не знаю, как помочь найти окно(
Привет! А сейчас уже так не получится? Почему-то он мне пишет, что у меня бесплатный тариф и опубликовать не получается (
привет. Опубликовать можно сетки, цвета, ободки, эффекты. А компоненты - на платном тарифе(
Здравствуйте! Подскажите, лимит на опубликованные файлы в дравтсах на бесплатной версии - 2 шт? Или у меня что-то не так? Добавил сетки и тени, больше ничего не публикуется :(
Привет. В папке драфтс вроде нет ограничений
@@alexeybychkov_ странно, у меня кнопка опубликовать серая, не работает ни в браузере, ни в программе.
Перетыкал всё на свете. Цвета получилось опубликовать, а кнопки соц.сетей и платёжных систем вообще никак. Попробовал создать новый файл и скопировать всё туда - не помогло.
UPD: Короче, на бесплатной версии нельзя добавлять компоненты в библиотеку. Только стили, поэтому у меня и получалось добавить сетки, цвета и тени.
так ведь про это и рассказывается в видео :) Можно было бы и посмотреть)
@@alexeybychkov_ я смотрел его пару дней назад и только сейчас решил загрузить библиотеки. Забыл скорее всего 😬😅
Алексей, не поняла, откуда достал комплект из 72 цветов для библиотеки?
показано на 6:45 сайт figma.help/files/
@@alexeybychkov_ Не нашла я это справку в help.
@@user-mz8uv8ss5x какую справку? в видео на 6:45 все подробно показано и рассказано, файлы лежат тут figma.help/files/ что с ними делать - в видео
@@alexeybychkov_ Что с ними делать - понятно, объяснено доходчиво, а на клик по ссылке ответ "Не удается получить доступ к сайту". Может быть, пока не удается. Спасибо за стремление прийти на помощь не медля! :))
@@user-mz8uv8ss5x на клик по какой ссылке?
лови коммент!
словил!
Я так понимаю, что всю эту красоту теперь можно сделать только на платном аккаунте?
все что справа (эффекты, цвет, текстовые стили) можно на любом аккаунте настраивать. А то что слева (компоненты, заготовки элементов) настраивать можно только на про-аккаунте, а пользоваться чужими и на бесплатном можно
@@alexeybychkov_ спасибо Алексей, жаль конечно, очень хотел попрактиковаться как раз в создании собственной базы компонентов и ее пополнении
Не получается подключить библиотеку ((
эх( что не работает?
А не думал, новости по обновлениям фигмы пилить?
У меня нет столько времени :) Я же фрилансер, а не ютубер. Да и у новостей есть огромный недостаток: через день это уже «тоже мне новость» :)
@@alexeybychkov_ Ну это мне просто лень вчитываться в рассылку от Фигмы и я хотел на тебя перевесить это почетное занятие :)))
@@andriifartushnyi3029 😊😊😊
Не добавляется библиотека с сетками. Закинул через браузер, файл виден в десктомной фигме. Захожу в библиотеки - видит файл, но нет кнопки добавить библиотеку. У меня бесплатная версия.
значит, кто-то что-то не так сделал)
@@alexeybychkov_ думаю да, но я очень нервничаю.
@@GeknForeverта же проблема была, те надо сделать дубликат сначала, затем зайти в этот дуб. и сверху где пишется название проекта, щелкнуть на выпадашку и там будет publish your styles and.., тыкнуть туда и все появится
@@yuriibabyn6824 Спасибо, посмотрю!
Кнопка появляется когда создаёшь командный проект и не в бесплатной версии. Долго мучилась. Здесь про командный проект ничего не говорится.