Обзор Figma - что это такое? Веб-дизайн #1
HTML-код
- Опубликовано: 28 июл 2019
- Начинаем изучать веб-дизайн. Начнем с инструмента для создания дизайн-макетов и прототипов Figma. Официальный сайт: figma.com
Сегодня разберем Где обычно делают макеты дизайнеры
Почему Figma лучше подходит для веб-дизайна, чем Adobe Photoshop
Обзор программы Figma
- Она доступна из браузера
- Можно скачать на компьютер, там есть вкладки
- Панель с проектами
- Рабочая область
- Левая боковая панель
- Правая боковая панель
- Верхняя левая панель
- Правая верхняя панель
Поставьте лайк этому видео 👍
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Больше контента в нашей группе Вконтакте
glo_academy
Присоединяйтесь к нашему сообществу Discord
/ discord
Telegram-канал "Лысый из браузера":
tele.click/baldfrombrowser
Чтобы записаться на мой курс по основам веб-разработки, напиши в нашу группу и мой ассистент скажет тебе, что делать дальше: vk.me/glo_academy
Заказать рекламу на канале: vk.me/aislam23 или t.me/aislam23
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/billing/pl.php?... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma2html
ttttt.me/figma_start
ttttt.me/figmatamplates
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codepen_js
ttttt.me/css_features
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkforwork
У вас такая грамотная речь! так приятно слушать. Информация ложится как по маслу. Спасибо!
Одни из редких уроков, которые приятно слушать, да ещё и информативные спасибо вам.
Отлично! Надо запилить проект на фигме! Это будет очень интересно! Спасибо! 🤝
Безумно полезное видео, спасибо огромное!
Спасибо вам огромное за обзор!!! Кайф, бегу изучать и работать!!! 😍
Потыкал денек фигму, и вот что я вам скажу друзья - это огонь!
Сделал три слоя - под десктоп, планшет, телефон, тыкнул на страницы, посмотрел что оно делает, и моментально влюбился в то, что передвижение по страницам позволяет спокойно выводить дизайн для каждой страницы не загружая всю доску первой страницы всеми вариантами макета, первая страница - для заглавной, вторая - для допустим контактов, третья для чего-то еще и тд, и божечки как же это удобно все сделано, вот прям хоть бери и ставь памятник разработчикам фигмы прямо здесь и сейчас
Давай еще такой урок. Пожалуйста.
Спасибо. Очень понятно и интересно рассказываете
конечно стоит продолжать!
спасибо вам огромное за ваш труд!
Супер. Супер. Супер. Видос годный. Пойду дергать и клацать.
Ура, наконец-то дизайн
Уже сделал и сверстал с помощью фигмы свой первый сайт визитку, очень понравилась мне эта прога! Ещё все хочу adobe XD поюзать.
Спасибо за обзор. Стильно, модно, молодежно.
Сочно, мощно, круглосуточно
дякую за інформацію!
9:50 - в фотошопе на слое есть подобная функция называется "создать обтравочную маску"
Конечно стоит продолжать! И на английский переводить можно в титрах - аудитория прибавится)
Спасибо за подсказку!
Вот есть вопрос который не дает мне покоя) А как в дизайне указать что нужно использовать, например, particles.js? Да еще и с конкретными параметрами)
Figma только для сайта делает или можно и на андроид, ios?
Подскажите пожалуйста, почему когда я создаю страница и хочу выбрать iPhone X или iPad mini у меня тупо нет таких фреймов.
Подскажите пожадюлуйста!Пропала левая панель слоев,не могу вернуть.
Сейчас это так же актуально, или что то серьёзно изменилось? А так очень информативно. Благодарю за информацию!
Нам преподают в колледже, топовая вещь
3:48 SASS нельзя, точки с запятой надо удалять в ручную
tnx
Можете подсказать я верстаю сайт по psd-пакету как мне отмерять пиксели между разными элементами ?
Линейка есть в Фотошопе
Или просто линией
Подскажите пожалуйста сайт для раскрутки сайта типа Яндекс директ
Раскрутка осуществляется самостоятельно, а не через сайты за деньги
Здравствуйте! Получается не нужно теперь вручную вписывать css стили?
Не совсем. Некоторые стили писать всё-таки надо, потому что фирма даёт не всё
@@Glo_Academy Ну я так понял это программа намного облегчить работу верстальщикам?
А в каком формате сохраняется проект и совместим ли он с другими дизайн приложухами?
Сохраняется в формате figma и открывается только в ней. Но в ней может спокойно работать и разработчик и дизайнер. Плюс можно не ставить софт на комп, а работать в браузере.
Glo Academy - HTML, CSS и JS а другие форматы по типа psd не поддерживаются фигмой?
Заранее спасибо за ответ
@@euphoriax3576 нет, не поддерживаются. Можно конвертировать, но это гемор. Лучше сразу делать в фигме
Сохранять можно в figma, а открыть в avocode ,если нужно
Артём, запиши пожалуйста видео урок на тему блока «Этапы работ» (в нем несколько блоков соединены цепочкой и представляют из себя этапы 01, 02, 03 и тд)часто вижу такой блок, и как его верстать без понятия, толи абсолютным позиционированием, но тогда при уменьшении ширины экрана, все поплывет... подскажи, думаю это интересно не только мне) ну или кто- нибудь в комментариях ответьте, как это реализовать, и как такой блок называется технически, а то в гугле не нахожу ничего подобного. Спасибо)
Скиньте сайт пример пожалуйста
Михаил Бобков вот тут например 6этапов сотрудничества kwork.ru/files/uploaded/e6/3a/cd7442d6ed6a/4417C713-AC93-427F-80E2-F957E49FFB1F.jpeg
Или тут блок как мы работаем kwork.ru/files/uploaded/68/c4/1f637d0d2e7d/Rectangle+55.jpg
Народ подскажите как во всем документе первому тегу задать свойство ::first-letter. Сколько не мудрил либо вовсе не работает, либо нескольким присваивается свойство. СИНТАКСИС SASS
Оберни первый тег p в класс,и этому классу пропиши class p:first-letter {}
@@user-nz4rk7sq5y Не получится, нужно решить эту задачу без классов, потому что у меня уже 22 страницы и будет еще больше. Это решается двумя строчками я уверен, а на каждой странице добавлять по классу трудозатратно.
Может быть поможет прописать body > p:first-letter{
....
}
Пропиши это в своем js файле на jquery, который подключается ко всем страницам:
*$(''p:first").addClass("bukwa");*
Далее в css файле меняй:
*.bukwa::first-letter { }*
Если элемент все таки не первый, а допустим третий, то обращаться к нему можно так:
*$("p:eq(2)").addClass( )*
Отсчет идет с нуля
jsfiddle.net/nLoyu8cd
@UCf2CIq89R1jdG4cdi7S4IdQ да именно так, только есть нюанс "первый элемент в контейнере с классом section-content" , добавь в код пожалуйста , а то я в js не шарю) спс
Ребята, хочу научиться веб-дизайну, очень нравится данное направление. На сколько это актуально? Просто тут один программист сказал мне, что ну его нафиг, типа спрос на дизайнеров падает сейчас, в программеров лучше идти.
кодером можно гораздо больше заработать
Делать выводы по мнению одного человека рискованно. Есть дизайнеры, которые зарабатывают большие деньги, они работают уже несколько лет и наработали себе клиентскую базу. Есть те, кто ничего на этом не зарабатывает, так в любой теме. Это касается не только веба. Если ты идешь в веб-дизайн или разработку только из-за денег - это может быстро надоесть.
@@Glo_Academy я тоже так думаю, по этому и интересуюсь у людей, кто варится в данной сфере, а не только у знакомых программистов ) Спасибо за ответ)
@@Frie666 да, я об этом тоже наслышан) Но дело не совсем в деньгах. Хочется заниматься чем-то интересным для себя и чтобы с голоду не умереть при этом, по этому я и интересуюсь у вас, ребята) Спасибо за ответ)
@@animacomedentis9506 Смотри - с дизайном будет гемор если нет вдохновения,с программистом будет гемор как это все реализовать. Выбирать только тебе
На сколько я понял сглаживания углов в десктопной версии нету, ну и ещё кое каких моментов в отличии от браузерной.
Снлаживание точно должно быть)
Минусы у фигмы тоже имеются, может кто-то посчитает, что это не минусы, а лишь фичи, но тем не менее. Например, PSD макетов уйма, но фигма не умеет с ними работать, бесплатные макеты на него также пока трудно найти для тренировки.
Зато с PSD макетами можно работать в Avocode. Можно же комбинировать инструменты. А макеты в PSD в фирме не нужны. Это вообще из разных областей)
Упрощенная версия фотошопа или иллюстратора или просто наглядно-интерактивная работа со стилями.
хоть кто то в двух словах объяснил)
ссылку поправьте ":" не хватает и коммент этот удалите, плз
Программа очень похожая на illustrator
Программа очень похожа на Indesign
вот тут норм объяснили что это и зачем... не то что пуг
Разные авторы потому что писали уроки)
Скачал фигму, нарисовал дизайн получилась фигня, в итоге пришлось дизайнить по ходу верстки и натяжки на вп.
Держи нас в курсе.
А есть фигма на русском?
Там все предельно понятно даже на английском
Пустослов. Куча пустых слов. Все можно в несколько раз короче рассказать. Только время терять.