Как сделать в Фигме круговые диаграммы и прогресс бары
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 вообще будет мега круто!
АААА, вот где собака порылась))))) Без подсказки и не увидела))) Спасибо огромное!!! Все теперь работает!!
не за что огромное))
Делаю дашборд, ох как кстати твой ролик, спасибо
пожалуйста)
Лёха лучший! 💪
спасибо)
Здравствуйте, возникла такая проблема, что круг обрезается, а не делится на сектора. То есть получается поста область вместе где образовал сектор из-за этого дальнейшие действия с делением и изменением размеров сектора не доступны. Расскажите как исправить данную проблему?
привет. Может дело в внутренней/внешней обводке, не знаю(
добрый день. А
как вы сделали дубликат на 3 диаграмме?
Привет. ctrl + D сделать дубликат
спасибо
Спасибо за просмотр)
А можно там сделать деления разной формы толщины по кругу например (разное количество и равномерное распределение по кругу)? есть там такие значения?
кажется у кругов прерывистый контур нельзя делать разного размера черточками
Алексей, в обновленной фигме нет этой точки Arc. Как быть?
привыкать жить без нее))
Лучший🤣☝️👍
Спасибо за просмотр)
святой вы человек
😇
А как сделать чтобы точка появилась в круге ? У меня при наведении не появляется точки.
проверил - есть точка. Фигма иногда балует, перезапуск должен помочь
А что если я хочу залить лишь какую то часть круга ? Например что бы сделать диаграмму Венна.
такое лучше делать через буллевые операции (сверху по центру, там где маска, компонент)
или через режим наложения одного круга на другой.
или через ту же маску. Рисуем 2 круга и рядом 2. Одним из них скрываем через маску часть соседа. Остается 2 целых круга и 3 в маске 4-го.
Вот такие пироги )))
даа)
а есть видос как можно из логотипа в png сделать вектор?
Обвести пером только если или если исходник хорошего качества - через плагин с таюрассировкой
ТЫ супер крутой фигмаспец!!!!!!!!
спасибо))
В своем видео на 1:17 вы выделили кусок белым бордером - у меня так не выделяется. Каждый слой выделяется отдельно.
записал видео. У тебя фигура 1. А нужна фигура 2 :) www.dropbox.com/s/j2u3x6dltri7qwa/2020-02-12%2020-03-00.mp4?dl=0
а можно ли нарисовать объемную диаграмму в фигме?
Можно вот этим плагином попробовать figma.help/plugins/roto/
почему у меня не отображается данная точка на круге?
Может фигму перезапустить надо. Иногда багует
@@alexeybychkov_ спасибо, Вы так быстро ответили, не думал что ответите когда писал, перезагрузил, не помогло, удалил круги и уж потом когда создал новые появилась необходимая точка, у Вас топ контент, полезный и подача харизматическая...
@@user-fj6pb9xh7m рад, что нравится!
Вааааауч, спасииибо!!!! А я блин, 1,5 часа круги рисую и обрезаю, а тут так все изииии!!!!!!!
Вуухххуу! Рад, что оказалось полезным!
Как сделать дубликат и сразу повернуть сектор? Ctrl+d а как дальше?))
нужно сначала повернуть, а потом дублировать, тогда каждая копия будет крутиться
Спасибо, у вас оч быстро получается, у меня нет)))
Боже Храни Короля и Алексея Бычкова
))
Заказчик попросил реализовать диаграмму круговую с с 52 элементами (элементы одинаковые) в рамках работы в Figma. Я думал, что сойду с ума, пока её отрисую. Рисовал вручную и не по тому способу, что указан тут, но даже когда стал использовать этот способ (кстати спасибо за классное объяснение, функция хорошая и удобная) я был вынужден изрядно помучиться. Интересно как бы Алексей в таком случае поступил с диаграммой?
p.s. я сначала разделил круг (360*) на 52 части и получил отступы между блоками в размере 6,92, а дальше взяв за 100% весь круг поделил его на 52 части и получил 1,92. По итогу вышло так, что размер блока приблизительно равен 6,92 и отступы между ними по кругу 1,92. К каждому новому объекту с размерами в 1,92 я добавлял отступ 6,92 умножаемый на то, какой номер этого объекта.
Если бы у меня не получилось сделать это за несколько минут, я бы плюнул :) Ну точно не сходил бы с ума. Объяснил бы заказчику, что это уже не дизайн сайта. А инфографика или еще что, хз, разработка иллюстрации и тд. Я стараюсь обходить стороной все, что меня угнетает в работе и чем заниматься мне не нравится. Поэтому я все еще получаю удовольствие от веб-дизайна, и не перегораю.
Алексей, спасибо! никто не объясняет про наличие точки для обрезания эллипса. Пол часа потратил пока не полез в твои уроки искать что-то подобное. Чего сразу твои ролики не посмотрел?1
Спасибо за просмотр))
капец как просто когда смотришь, и как сложно когда сам начинаешь делать =(((((
🙃 все получится!
Спасибо, помогли мне недодизайнеру в 12 ночи
рад, что полезно
Порильные комментарии! 😁👍
спасибо за просмотр)
@@alexeybychkov_ конечно, тебе спасибо за труд!)
Не появляется белая точка(((
Может перезапуск фирм поможет
@@alexeybychkov_ Отыграла назад - появилась.) Спасибо за ответ.
сейчас уже плагинами можно каких угодно пирогов наделать
Да фигма резво развивается
ахуеть, щас смотрю на свой прогресс бар с маской и мне стыдно))
😄
Здравствуйте, Алексей! Пытаюсь повторить ваши пироги. Первый ступор - посмотрите, что я не так сделала((( Выделяется весь круг, но никак не нужный кусок.prnt.sc/r1cthi
привет. Видимо просто верхний перекрывает целиком нижний :) и выделить можно на панели слоев, либо нажать правой кнопкой и сверху будет "select layer > " выбрать там нужный
Ам!
🙃
0:40 Ще не вмерла
🙃
Чего то я туплю, не получается(((prnt.sc/r1d3s0 выделяла слои((
так а что сделать нужно? вместо большого пирога без куска сделать отдельный кусок?
@@alexeybychkov_ да как ЭТО сделать?
/
@@alexeybychkov_ а всё поняла надо "крутилку" дальше поворачивать)))
@@juliasiedina6867 ага)
бля а если фон не белый? как вырезать нормально одно из другого а не просто обвести. И вобще кто так быстро все показывает?? я думал у меня на ускоренном стоит видос
Бля ну замедли
@@alexeybychkov_ смысл обучающих видосов не в том чтобы показать как ты быстро все умеешь, а в том чтобы другим показать че ты и куда там нажал и чтоб они уловили все ниче при этом не замедляя
@@Baaam700 Все ютуб смотрятся на х2 скоростях, уже мильён раз обсуждалось. Ценю время подписчиков. Кому нужен режим улитки - просто замедлит видео. Кто хочет - найдет решение, кто не хочет - причину. Есть новый курс на канале, там и курсор подсвечивается и говорящая голова с пояснениями. Но тоже в темпе. Если не подходит - в ютубе много других каналов на любой вкус. А тут все подробно но в темпе
А еще быстрее можно, нихера не понятно?
конечно можно, снизу шестеренка есть, там можно увеличить скорость