Как сделать дизайн сайта в Figma. Дизайн сайта в Фигме. 2 часть
Вставка
- Опубліковано 19 лют 2020
- ✅Скачать материалы из урока:design-figma.ru/md/youtube_files
📹Первая часть: • Как сделать дизайн сай...
Подписывайтесь, чтобы не пропустить следущий марафон по веб-дизайну:
✔️ INSTA*: / sanya_kvo
✔️ VK: study_kvo
✔️ Telegram: t.me/study_kvo
#figma #фигма #вебдизайн
Это видео - вторая часть из серии уроков на тему: Как сделать дизайн сайта в фигме. Первая часть урока доступна по ссылке выше.
Если вы не успели на бесплатный марафон по веб-дизайну в Figma (его уроки недоступны после окончания), то теперь сможете выполнить работу марафона в своём темпе по этим урокам. Для этого достаточно выполнить задания из первого и второго (данного) урока.
Все макеты мы выполняем в Фигме и она бесплатная.
Если у вас её нет, то посмотрите как можно её скачать: • Фигма. Уроки Figma по ...
Для дизайна нам потребуются иконки и фотографии, которые я заранее подготовил.
Их можно скачать тут: design-figma.ru/md/youtube_files
✅ Study Kvo в соц. сетях:
- VK: study_kvo
- Telegram: t.me/study_kvo
- Instagram*: / sanya_kvo
- Курс Дизайн взлёт: sanya-kvo.ru/design_vzlet
- Курс по UX/UI: sanya-kvo.ru/uxui
*Meta, которой принадлежит Instagram, признана в России экстремистской организацией
Этот канал как луч света в царстве тьмы,спасибо большое.
😁🙌
Я верстальщик и разраб, каким то хером начал изучать фигму. Одно из лучших явлений за последнее время)
Буду смотреть! :3
ну, это выгоднее чем платить людям
Простой и приятный макет, спасибо за уроки! Пришло время осваивать фигму )
Как же классно ты объясняешь! Хоть и быстро, однако этого не замечаешь в процессе, и главное что ничего лишнего, просто чудо))
Хотелось бы узнать как оформлять и передавать это все заказчику)
Переименовать грамотно все слои, разложить четко по папкам, где надо объединить в фреймы. Рядом вывести все цвета, цветовые схемы, всю раскладку по шрифтам и типографике, все состояния кнопок и других элементов, виды форм и полей ввода и пр., замечания по анимации и верстке, возможно с примерами, а также сделать адаптивные версии всех страниц сайта под нужные разрешения (обычно десктоп, планшет, мобильные). Отдельно можно архив со всеми изображениями с сайта в хорошем качестве и разрешении, а также все подобные мелочи, иконки и прочее. И сам файл фигмы. Ну и конечно могут быть другие, свои или еще какие-то требования, тут уж зависит от того, с кем работаете и что они просят.
а можно по-русски😳
@@user-vy5xt3ze9z Это вроде итак по-русски, несложно🤷♀️ Если слова незнакомы - читайте про них, гуглите, это довольно базовое все, всегда пригодится и будет полезно.
@@SummerRina спасибо
@@SummerRina всё понятно , кроме двух. что значит выводить цвета и цветовые схемы? Здесь какой-то плагин нужен? Что это вообще значит?
Спасибо! Вдохновили на портфолио наконец-то )) работа аккуратная получилась. Хочу еще ваших примеров :)
Долго искал как увеличить фрейм не потянув за собой контент, оказалось все просто на контрл, спасибо автору
Спасибо, вам огромное за вашу работу. Хочу попросить таких же примеров, от не сложного, к сложному... ведь именно практика с заданиями, действительно помогает лучше ориентироваться в программе, особенно таким новичками как я. Спасибо.
Спасибо тебе ты потрясающе учишь! двоих учителей прошла, много воды, а тут все понятно если изучил базовое пользование интерфейса программы.
Большое спасибо! Очень доходчиво, без воды и с необходимыми подсказками.
Спасибо огромное за Вашу работу!))) Лучший формат урока по дизайну, благодаря которому начала осваивать фигму) Жду с нетерпением начала следующего интенсива) У многих подача материала скучная и много воды, тут же все четко и по делу. Особенно хорошо такому новичку в фигме как я. Когда все получается и все понятно, хочется развиваться дальше)
Спасибо 🙏🙌
Огонь! Спасибо за уроки. Все стало понятно и главное ясно как делать всякие мелкие штуки быстро. Работа с группами вообще супер!
🙌🙌
Спасибо огромное! Работа просто шикарная получилась!
Спасибо большое, за такое подробное объяснение. Блин, это первый человек, который все объяснил как надо. Спасибо)
🙌 Спасибо
Круто, Благодарю за видео. 💫Особенно понравилось, что проговаривал отступы и есть доступный материал. Быстро, понятно, набить руки самое то👍
Смогла все повторить.
Кайф ❤️ Залетай на ближайший марафон, будем делать новую работу: t.me/study_kvo/596
Супер! Спасибо за урок)) очень понравился!!))
спасибо большое, получилось сделать точь в точь такой же сайт
Спасибо большое, все просто и доступно обьясняешь. Отличная практика!
🙌🙌
все клево получилось) ждем еще уроков)
Красава, все четко и понятно объясняешь.
Огромное спасибо за эти видео-уроки!
❤️❤️
Спасибо за урок, хорошая информация.
Спасибо большое! Все понятно и ясно 😊👍🏼
Повторил все по видео, получилось! Спасибо
Спасибо, сделал всё уроку. Для начала неплохо
Спасибище! Завтра буду пытаться что-то сотворить для личного проекта =)
Спасибо за отличный урок!
Спасибо за урок! Вас очень приятно слушать
Спасибо 🙏
Легко, непринуждённо, доходчиво! Отличный сайт получился 👍
🙌🙏
Опля, пошёл доделывать дальше))) вторую часть)))
Вау! Вау! Вау! Очень классно, увидела все своим ошибки, поняла почему на паре получила по шее, переделала лонгрид) Спасииибо Вам
Огонь 🔥🔥
Благодарю за уроки)
крутой!!!) вы очень крутой!) наконец сделала, спасибо))
Спасибо!!!
Очень круто и интересно получилось!
Вышло очень круто!!!
Прикольно. Легко смотрится
Спасибо большое за полезные уроки! Создаю уже 3ю работу по твоим урокам 💥
Жду майский марафон, очень хочу попасть 🙏
Кайф! Майский будет по приложениям 🙌🙌 буду ждать: t.me/study_kvo
Спасибо! Вы талант!
Спасибо большое, отлично объясняете 😍👏🏻👏🏻👏🏻
❤️❤️
Спасибо, у меня получилось все сделать.Уроки просто супер!!!
🙌🙌
Спасибо большое за видео :)
очень круто , спасибо !
спасибо. мой первый полноценный сайт в фигме
🔥🔥
Спасибо, у меня прикольно получилось!)
Спасибо большое!
Спасибо большое🤗
Бро ты лучший твои видео смотреть про кайф спасибо огромное.
Спасибо 🙌🙌
Я твой фанат братан. продолжай в том же духе
🤝🤝
Клево сделал - красава
чувак ты афигенный!
Ой и не говори))
Спасибо бро)
классно, спасибо) когда следующее видео?
Хороший урок
Спасибо:)
Спасибо)
Спасибо!
Спасибо, расскажите пожалуйста про адаптацию под мобильники
спасибо большое за доступную информацию! очень все понятно и без лишних слов)) а подскажите, когда сайт делаешь заказчику, что ему надо скидывать? как это должно выглядеть? в каком формате сохранять? как сделать, чтобы сайт начал работать и все кнопки работали?
то, что показывает автор - дело дизайнера, а чтобы сам сайт начал работать, то тут не все так просто и нужно привлекать программиста. Либо начинать разбираться в программировании самому)
12 часов работы коту под хвост,спасибо за толковое объяснение!
Исходников 2 части нет:(
Супер! Быстро и по сути. Отличный урок! Только материалы не получается скачать. Уже устарела ссылка?
Ссылка актуальна, только что проверил все ок.
✅Скачать материалы из урока: vk.cc/amgJEt
📹Первая часть: ua-cam.com/video/LisjTbEZW6g/v-deo.html
✔️Ближайший марафон по веб-дизайну: t.me/study_kvo
Скажите пожалуйста, где берёте картинки, иконки и.т.д...???
Привет, посоветуй видео уроки (курсы авторов)с нуля от а до я пошагово по Figma? будь добр :) творческих успехов тебе!
Привет, приходи ко мне на бесплатный интенсивн по Фигме и вебдизайну: vk.com/pskvo_marafon
Как раз скоро стартует в июне.
👍👍👍
Привет! Ответь пожалуйста, текст который используется в макете он должен быть выдан заказчиком или это уже сугубо фантазия дизайнера создание текстовки и нахождения картинок? Если допускаться 2 варианта, тогда заказчик мне должен доплатить за это или это уже не входит в доплату и считаеться частью дизайна?
Всё может быть по-разному. Лучше не расчитывать на то, что заказчик сделает так, как вам будет удобно, а определить для себя удобный формат, работать в нём и объяснять о нём заказчикам
Саша, привет! такой вопрос. Ты перекрасил иконки соцсетей просто сменой параметра fill. Я когда меняю - меняется цвет только текстового блока. Иконки остаются белыми. Нашел такой способ - дублирую слой с иконками, делаю из двух слоёв маску, затем уже меняю цвет маски. Подскажи, почему не срабатывает твой способ. Заранее спасибо за ответ! :)
Значит у вас непорядок на панели слоев. Иконка никак не должна быть связана с текстовым слоем. Это два разных слоя на панели слоев. Проверьте все ли ок там.
Заливать через маску векторную иконку в Фигме - это хардкорно)
Значит что-то не так с иконками. Все слои должны быть отдельно. Иконки, чтобы меняли цвет, должны быть в svg.
зачем Елену Иванову опустил? :)
спасибо, то что нужно! сделала с вами макет - все понятно) вопрос: как включить просмотр без UI элементов фигмы?))
Ctrl + \ 😉
Друг а подскажи как сделать кнопку с пкрехожом на сайт или чтраницу гугла
Чтобы на сайте была кликабельная кнопка, нужно чтобы сайт был свёрстан или собран на Тильде. Если нужно просто в Фигме сделать ссылку, выделяй текст кнопки, нажимай Ctrl+K и вставляй ссылку.
Скажите основные сайты которые используете для поиска картинок, спасибо!
Pexels, Unsplash, Pixabay и Freepik. Ну, и Midjourney)
Смотрю через 2 года после выхода, но зато помогло. У меня есть такой вопрос: а как это будет использоваться потом, при создании сайта?
Дизайн - только начало создания сайта. Потом макет берет верстальщик и воспроизводит его посредствам html, css, js. Это нужно, чтобы сайт был не просто картинкой, а функциональной страницей, которая откроется в браузере. После этого его загружают на хостинг, покупают доменное имя (например study-kvo.ru), соединяют их, затем сайт открывается у всех по этому имени (домену) в интернете.
@@study_kvo Спасибо!
Здравствуйте, подскажите почему не могу вставить текст на фото (прячется за фото) ?
Проверьте панель слоев слева. Текстовый слой должен быть выше, чем слой фото.
Здравствуйте, а как вот эти столбцы убирать и возвращать розоватые?)
Уже нашел , ещё раз посмотрел начало первой части ,спасибо за вашу работу )))
❤️❤️❤️
А для какого конструктора подойдёт сделанный в фигме?
Для того, на котором вы умеете работать :) Можно собрать на Тильде, можно на Рэдимаге. Достаточно подстроиться под их сетки.
Можно отдать верстальщику, он сверстает макет.
Здравствуйте, а как отключить элементы, чтобы посмотреть готовый проект?
Нажмите Ctrl + \
Отличные уроки! Есть телеграм канал? Хочу на марафон в январе.
Марафон проходит через вк, присоединяйтесь: vk.com/pskvo_marafon
@@study_kvo , спасибо, буду 👍🏻
А каким образом сдать готовый дизайн сайта заказчику? В формате пдф?
Я думаю, что в формате SVG. Для дальнейшей работы других людей с этим файлом.
Вообще то это файл фигмы, сдаём как файл фигмы.
Как вы смотрите сколько расстояние между теми же ректенгалами?
выбираешь объект, зажимаешь alt и наводишь на объект, расстояние до которого ты хочешь увидеть
Спасибо за уроки. Они легкие и понятные, но почему все делается на глаз? За "допустим, кегль будет 22, а отступ 36" мне верстальщик набьет морду. Потому что все значения разные, а некоторые элементы вообще сетку слали нахрен)
Если делать наобум - может :) Если отдавать себе отчёт в каждом действии - все хорошо.
Всё отлично. Понятно и быстро. Но вот жаль, что нет продолжения, как из Фигмы готовый дизайн вытащить :(.
Этим уже занимаются frontend-разработчики или по-простому, верстальщики. Это уже не дизайн)
@@study_kvo Да, я понимаю, но хотелось бы и это знать ))
Что потом этим макетом? Как его потом выгрузить на хостинг и что бы все это работало
Найти верстальщика и передать ему макет. Он воспроизведет сайт через HTML, CSS, JS и закинет на хостинг. Следующий этап - работа другого специалиста. Дизайнер может, но не обязан уметь верстать. + Можно иметь ввиду тильду и собирать сайты там)
Подскажите пожалуйста,как открыть svg файл?
Их не надо открывать, их надо перетащить в Фигму, как в видео. Когда открываете, не видно белое на белом :)
Зачем зажимать ctr при настройке размера фрейма?
Чтобы элементы, у которых не задана привязка к верхнему левому углу, не растянулись и не уехали вслед за фреймом.
Почему я делаю все точно также но размер шрифта на 18 отличаться у меня и какой у него. У меня он мелкий что прочитать трудно а у него крупный. Это как программы одни и теже
Изначальный размер фрейма случайно не гигантский? Если с ним все ок, попробуй в веб-версии Фигмы
@@study_kvo все также как и в видео проверял
@@study_kvo версия figma последняяя ставил шрифт чуть больше
Угу, угу, угу, угу))))
«Угу» много не бывает 😎
он создал картинку и что дальше?
Копирайт в подвале обязательно должен быть.
ДА КАК НА САЙТ ПЕРЕНЕСТИ ВЕСЬ ИНТЕРНЕТ ПЕРЕРЫЛ НЕТ ИНФЫ
Обратитесь к верстальщику. Этим занимаются они, используя html, css и js. Это уже не дизайн. Либо можете собрать сайт самостоятельно на Тильде.
а ты покажешь как его перенести в сайт что бы им можно было пользоваться в браузере ???
Ты говоришь про вёрстку сайта. Этим уже занимается верстальщик, а не дизайнер. Поэтому, увы, нет, не покажу 😁
Неплохо, но стилями пользоваться надо, чтобы не бегать по фреймам.
Это мы сделали одностраничный сайт, верно?
учитывая, что в навигации есть другие страницы, то это одна из них - главная.
Одностраничный сайт не подразумевает перехода в какие-то другие разделы. Там он единственный.
Как убрать колонки на заднем фоне?
Нажмите Shift+G
Спасибо за урок, дай пожалуйста твой инстаграм, я отмечаю
Залетай: sanya_kvo
как вы вставили текст(. помогите пожалуйста(
Скопировать: Ctrl+C, вставить:Ctrl+V
спасибо огромное!
bulvar depo на месте хахаха