Как сделать в Фигме круговые диаграммы и прогресс бары
HTML-код
- Опубликовано: 22 июл 2019
- #figma #фигма #figmahelp
А ты знал, что в Фигме из кругов можно запросто сделать круговые диаграммы или прогресс бары?
Igor Ivanov подсказал, как делать диаграммы одинаковой толщины t.me/figmachat/43191 Налетайте :)
💰❤️ Поддержать канал:
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
Подглядывать за мной можно тут:
👉 Инстаграм: / alexeybychkov_
👉 Беханс: www.behance.net/alexeybychkov_
👉 Телеграм: t.me/dsgn_tips
👉 Фейсбук: / dsgn.tips
👉 Твитор: / _alexeybychkov
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне чуть больше 30 лет, женат на прекрасном человеке и у нас чудесная дочка. Работаю на лучшей бирже в рунете - Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 15 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!
Подробнее обо мне - alexeybychkov.com/about/
15 лет опыта - alexeybychkov.com/experience/
Пишу - alexeybychkov.com/blog/
Дизайню - alexeybychkov.com/cases/sites/
Отзывы - clck.ru/K5Mcc
Мои книги:
«Дизайн и фриланс. Начало» - clck.ru/JE8ku
«Дизайн и фриланс. Новый уровень» - clck.ru/JE8jT
Хелп по Фигме: уроки, видео, советы, фишки - figma.help
Мир фейсов: faces.world/
#figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance
Небольшой коротыш про Фигму: круговые диаграммы, прогресс бары. Быстро и просто!
Igor Ivanov подсказал, как делать диаграммы одинаковой толщины t.me/figmachat/43191 Налетайте :)
Это самый полезный канал по веб-дизайну который я когда либо находил. Спасибо за Ваш труд!
спасибо :)
Давно хотела выделить время на то, чтобы порисовать именно диаграммы. И морально настраивалась на то, что это будет долго, а тут твое видео на 4 минуты. 4 МИНУТЫ. За 4 минуты ты смог понятно показать как это делать. Еще и несколько вариантов, а еще и актуальные варианты. Ты крут.
Спасибо за ролики=))
🥳🥳🥳
Спасибо большое за такую классную информацию в 4 минуты💜💜
пожалуйста!
Супер, спасибо, готовлюсь к 4 курсу и пересматриваю все ролики. Звук на фоне умиротворяющий, даже отдохнула.
отличный план!
Ура всё получилось, буду проходить все уроки по порядку. Спасибо! Очень понятная подача без заумной шелухи и запинок.
отличный план)
Как же хорошо сейчас слышать звуки вечера на фоне.. Расслабление, спокойствие, пропадает чувство обязанности
☀️
Выручили! Спасибо большое за такие полезные видео!
ну класс :)
Спасииибище, человечище! Я уже битый час бьюсь, а тут оказывается все так просто!)
пожалуйста)
Леша, это что нереальное!!! Ни где подобного нет! Спасибо большое! Все коротко и по делу! 👏🏼 🔥 🔥 🔥
Супер 🎉
Как вовремя нашла ваше видео. Мне очень помогло и пригодилось! Спасибо :*
супер)
Спасибо за то, что понятно и просто объясняете. Никакой воды, всё чётко и по делу. Очень полезный материал!
Супер) пожалуйста!
Как ты вовремя) спасибо 👌
пожалуйста)
Спасибо большущее! Сверчки на фоне прекрасны!
супер
Спасибо за урок! Объясняете все понятно и просто, а главное- не скучно!!!😃😃😃😃
рад, что нравится!
ВАУ! спасибо))) А я не знала про эту панельку слева, что так быстро и удобно можно все делать)) восторг прям какой-то))
Круто)
Спасибо за полезный лайфхук) будем тренироваться))
и тебе спасибо за жменю комментов!
Коротко и полезно, спасибо🔥
Спасибо за просмотр)
Спасибо за видео! Максимально коротко и полезно! Как раз по работе сейчас нужно сделать диаграмму, благодаря Вашему видео все получилось)
пожалуйста!
Видео до сих пор не потеряло свою актуальность 🔥
Да забавно)
Вау! Очень профессионально, понятно и по делу. С сегодняшнего дня я Ваш подписчик
ну класс :)
@@alexeybychkov_ Спасибо за то что Вы делаете.
Суупер, спасибо огромное! Очень помогло))
Ну класс)
Спасибо огромное за видео! Помогли мне разобраться)
пожалуйста!
крутая заставка и полезный урок, спасибо!!
супер
Формат коротких роликов оч крутой. Когда по кобчевому слову можно найти одну конкретную фишечку, спасибо ❤️
ну класс)
Ничего себе, вот это на раритет я наткнулся😄 У тебя так круто выросло качество подачи за это время, прям класс🔥
было дело)
И спасибочки за краткий мастер класс)! Время наше все!
пожалуйсточки))
сейчас как раз делаю дашборд, пересматриваю твои видео! Спасибо за пользу 😍
пожалуйста!
спасибо за здоровский понятный и самое главное без воды урок!
пожалуйста)
Кайф, теперь делаю красивенькие диаграммы, за звук сверчков отдельный лайк, ахах) 😅
Круто)
Как все оказывается было просто, а я думала что сейчас отпуск придется брать для диаграмм в дашборде из домашеньки )) и что все владеют каким-то тайным знанием. Лёша, как всегда огромное спасибо!
огромное пожалуйста)
Это супер Алексей! браво вам!
Рад, что нравится!
Спасибо за пироги:) Только думал заняться этими бубликами. Все получилось!
супер!
Фантастика, когда ты все успеваешь? Молодец!
спасибо за просмотр)
сверчки на фоне ахахах, это типа звуки когда кто то тупит)) тонко однако)
Там другие сверчки)
Заболел? Выздоравливай. Как всегда годнота
Немного) Спасибо :)
непривычно без камеры тебя смотреть😄😄😄
было дело))
Крутотенюшная крутота! 😍 Спасибо за уроки! 👏🏼
Супер)) рад, что пригодилось!
Спасибо, очень полезно
Рад, что понравилось!
Пошла повторять. Спасибо! 🙂
пожалуйста!
спасибо! Многое подметил)
супер!
Такой классный добрый комментарий за кадром, для новичка только можно помедленнее)
Спасибо за просмотр)
Прикольно, фишечки :)
Супер
Доделал до конца)) И чтобы опять чего-то недоувидеть поставила на меньшую скорость)))Было забавно слушать))), Но зато все уловила!! Здорово!! Спасибо!!
рад, что все получилось :)
Очень просто, но еффективно!
💯
Очень вкусные пироги!!! Спасибо))
супер)
какая шикарная заставка!
было дело)
супер урок!
ну класс)
Спасибо!!
пожалуйста)
АААА, вот где собака порылась))))) Без подсказки и не увидела))) Спасибо огромное!!! Все теперь работает!!
не за что огромное))
Ааа, как все просто! После такой простоты в фигме в иллюстратеине не хочется работать)))
Спасибо за просмотр)
spasibo ogromnoe!
пожалуйста огромное :)
Меня восхищает скорость. Пока я только подумала, как что-то сделать, уде всё готово! 🔥
спасибо за просмотр)
Большое спасибо)) а то сидел тупил как сделать это (прогресс бар)))) для меня загадкой было как откусить сколько надо от круга) подписался)
спасибо за подписку!
@@alexeybychkov_ если найду у вас видео гайд по созданию портфолио начинающим UХ/UI вообще будет мега круто!
Спасибо )
☀️
Делаю дашборд, ох как кстати твой ролик, спасибо
пожалуйста)
круто!!! спасибо за урок) с тех пор как ролик записан в фигме же ничего в плане диаграм и прогресс баров не поменялось особо?
да вроде актуально до сих пор
Лёха лучший! 💪
спасибо)
святой вы человек
😇
Лучший🤣☝️👍
Спасибо за просмотр)
спасибо
Спасибо за просмотр)
Вот такие пироги )))
даа)
Здравствуйте, возникла такая проблема, что круг обрезается, а не делится на сектора. То есть получается поста область вместе где образовал сектор из-за этого дальнейшие действия с делением и изменением размеров сектора не доступны. Расскажите как исправить данную проблему?
привет. Может дело в внутренней/внешней обводке, не знаю(
Алексей, в обновленной фигме нет этой точки Arc. Как быть?
привыкать жить без нее))
ТЫ супер крутой фигмаспец!!!!!!!!
спасибо))
Вааааауч, спасииибо!!!! А я блин, 1,5 часа круги рисую и обрезаю, а тут так все изииии!!!!!!!
Вуухххуу! Рад, что оказалось полезным!
добрый день. А
как вы сделали дубликат на 3 диаграмме?
Привет. ctrl + D сделать дубликат
А можно там сделать деления разной формы толщины по кругу например (разное количество и равномерное распределение по кругу)? есть там такие значения?
кажется у кругов прерывистый контур нельзя делать разного размера черточками
Заказчик попросил реализовать диаграмму круговую с с 52 элементами (элементы одинаковые) в рамках работы в Figma. Я думал, что сойду с ума, пока её отрисую. Рисовал вручную и не по тому способу, что указан тут, но даже когда стал использовать этот способ (кстати спасибо за классное объяснение, функция хорошая и удобная) я был вынужден изрядно помучиться. Интересно как бы Алексей в таком случае поступил с диаграммой?
p.s. я сначала разделил круг (360*) на 52 части и получил отступы между блоками в размере 6,92, а дальше взяв за 100% весь круг поделил его на 52 части и получил 1,92. По итогу вышло так, что размер блока приблизительно равен 6,92 и отступы между ними по кругу 1,92. К каждому новому объекту с размерами в 1,92 я добавлял отступ 6,92 умножаемый на то, какой номер этого объекта.
Если бы у меня не получилось сделать это за несколько минут, я бы плюнул :) Ну точно не сходил бы с ума. Объяснил бы заказчику, что это уже не дизайн сайта. А инфографика или еще что, хз, разработка иллюстрации и тд. Я стараюсь обходить стороной все, что меня угнетает в работе и чем заниматься мне не нравится. Поэтому я все еще получаю удовольствие от веб-дизайна, и не перегораю.
Алексей, спасибо! никто не объясняет про наличие точки для обрезания эллипса. Пол часа потратил пока не полез в твои уроки искать что-то подобное. Чего сразу твои ролики не посмотрел?1
Спасибо за просмотр))
а есть видос как можно из логотипа в png сделать вектор?
Обвести пером только если или если исходник хорошего качества - через плагин с таюрассировкой
В своем видео на 1:17 вы выделили кусок белым бордером - у меня так не выделяется. Каждый слой выделяется отдельно.
записал видео. У тебя фигура 1. А нужна фигура 2 :) www.dropbox.com/s/j2u3x6dltri7qwa/2020-02-12%2020-03-00.mp4?dl=0
А что если я хочу залить лишь какую то часть круга ? Например что бы сделать диаграмму Венна.
такое лучше делать через буллевые операции (сверху по центру, там где маска, компонент)
или через режим наложения одного круга на другой.
или через ту же маску. Рисуем 2 круга и рядом 2. Одним из них скрываем через маску часть соседа. Остается 2 целых круга и 3 в маске 4-го.
Боже Храни Короля и Алексея Бычкова
))
Спасибо, помогли мне недодизайнеру в 12 ночи
рад, что полезно
А как сделать чтобы точка появилась в круге ? У меня при наведении не появляется точки.
проверил - есть точка. Фигма иногда балует, перезапуск должен помочь
а можно ли нарисовать объемную диаграмму в фигме?
Можно вот этим плагином попробовать figma.help/plugins/roto/
капец как просто когда смотришь, и как сложно когда сам начинаешь делать =(((((
🙃 все получится!
Как сделать дубликат и сразу повернуть сектор? Ctrl+d а как дальше?))
нужно сначала повернуть, а потом дублировать, тогда каждая копия будет крутиться
Спасибо, у вас оч быстро получается, у меня нет)))
Порильные комментарии! 😁👍
спасибо за просмотр)
@@alexeybychkov_ конечно, тебе спасибо за труд!)
сейчас уже плагинами можно каких угодно пирогов наделать
Да фигма резво развивается
ахуеть, щас смотрю на свой прогресс бар с маской и мне стыдно))
😄
почему у меня не отображается данная точка на круге?
Может фигму перезапустить надо. Иногда багует
@@alexeybychkov_ спасибо, Вы так быстро ответили, не думал что ответите когда писал, перезагрузил, не помогло, удалил круги и уж потом когда создал новые появилась необходимая точка, у Вас топ контент, полезный и подача харизматическая...
@@user-fj6pb9xh7m рад, что нравится!
Здравствуйте, Алексей! Пытаюсь повторить ваши пироги. Первый ступор - посмотрите, что я не так сделала((( Выделяется весь круг, но никак не нужный кусок.prnt.sc/r1cthi
привет. Видимо просто верхний перекрывает целиком нижний :) и выделить можно на панели слоев, либо нажать правой кнопкой и сверху будет "select layer > " выбрать там нужный
Не появляется белая точка(((
Может перезапуск фирм поможет
@@alexeybychkov_ Отыграла назад - появилась.) Спасибо за ответ.
0:40 Ще не вмерла
🙃
Ам!
🙃
Чего то я туплю, не получается(((prnt.sc/r1d3s0 выделяла слои((
так а что сделать нужно? вместо большого пирога без куска сделать отдельный кусок?
@@alexeybychkov_ да как ЭТО сделать?
/
@@alexeybychkov_ а всё поняла надо "крутилку" дальше поворачивать)))
@@juliasiedina6867 ага)
бля а если фон не белый? как вырезать нормально одно из другого а не просто обвести. И вобще кто так быстро все показывает?? я думал у меня на ускоренном стоит видос
Бля ну замедли
@@alexeybychkov_ смысл обучающих видосов не в том чтобы показать как ты быстро все умеешь, а в том чтобы другим показать че ты и куда там нажал и чтоб они уловили все ниче при этом не замедляя
@@Baaam700 Все ютуб смотрятся на х2 скоростях, уже мильён раз обсуждалось. Ценю время подписчиков. Кому нужен режим улитки - просто замедлит видео. Кто хочет - найдет решение, кто не хочет - причину. Есть новый курс на канале, там и курсор подсвечивается и говорящая голова с пояснениями. Но тоже в темпе. Если не подходит - в ютубе много других каналов на любой вкус. А тут все подробно но в темпе
А еще быстрее можно, нихера не понятно?
конечно можно, снизу шестеренка есть, там можно увеличить скорость