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