Как сделать дизайн сайта в Figma. Дизайн сайта в Фигме. 2 часть

Рет қаралды 111,299

Study Kvo. Обучение веб-дизайну и UX UI

4 жыл бұрын

✅Скачать материалы из урока: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, признана в России экстремистской организацией

Пікірлер: 159

@uroboros5939 4 жыл бұрын

Этот канал как луч света в царстве тьмы,спасибо большое.

@study_kvo 4 жыл бұрын

😁🙌

@user-hq3kj6dq1m 3 жыл бұрын

Я верстальщик и разраб, каким то хером начал изучать фигму. Одно из лучших явлений за последнее время) Буду смотреть! :3

@doffyso 3 жыл бұрын

ну, это выгоднее чем платить людям

@Veronika-Yakimenko 4 жыл бұрын

Простой и приятный макет, спасибо за уроки! Пришло время осваивать фигму )

@nina-rita8170 3 жыл бұрын

Как же классно ты объясняешь! Хоть и быстро, однако этого не замечаешь в процессе, и главное что ничего лишнего, просто чудо))

@itanyaliveru 4 жыл бұрын

Спасибо! Вдохновили на портфолио наконец-то )) работа аккуратная получилась. Хочу еще ваших примеров :)

@user-vi7qk8ib2x 4 жыл бұрын

Огонь! Спасибо за уроки. Все стало понятно и главное ясно как делать всякие мелкие штуки быстро. Работа с группами вообще супер!

@study_kvo 4 жыл бұрын

🙌🙌

@bars435 4 жыл бұрын

Спасибо огромное за Вашу работу!))) Лучший формат урока по дизайну, благодаря которому начала осваивать фигму) Жду с нетерпением начала следующего интенсива) У многих подача материала скучная и много воды, тут же все четко и по делу. Особенно хорошо такому новичку в фигме как я. Когда все получается и все понятно, хочется развиваться дальше)

@study_kvo 4 жыл бұрын

Спасибо 🙏🙌

@ImTheRusl 4 жыл бұрын

Долго искал как увеличить фрейм не потянув за собой контент, оказалось все просто на контрл, спасибо автору

@user-ox2gm2tm5p 3 жыл бұрын

Спасибо, вам огромное за вашу работу. Хочу попросить таких же примеров, от не сложного, к сложному... ведь именно практика с заданиями, действительно помогает лучше ориентироваться в программе, особенно таким новичками как я. Спасибо.

@Ulyanarider Жыл бұрын

Спасибо тебе ты потрясающе учишь! двоих учителей прошла, много воды, а тут все понятно если изучил базовое пользование интерфейса программы.

@irenkoffe1687 4 жыл бұрын

Спасибо большое, все просто и доступно обьясняешь. Отличная практика!

@study_kvo 4 жыл бұрын

🙌🙌

@Maria-sw5so 3 жыл бұрын

Спасибо большое, за такое подробное объяснение. Блин, это первый человек, который все объяснил как надо. Спасибо)

@study_kvo 3 жыл бұрын

🙌 Спасибо

@user-mg2ni7se5s 3 жыл бұрын

Большое спасибо! Очень доходчиво, без воды и с необходимыми подсказками.

@Yoga_Patanjali 2 жыл бұрын

Круто, Благодарю за видео. 💫Особенно понравилось, что проговаривал отступы и есть доступный материал. Быстро, понятно, набить руки самое то👍 Смогла все повторить.

@study_kvo 2 жыл бұрын

Кайф ❤️ Залетай на ближайший марафон, будем делать новую работу: t.me/study_kvo/596

@anastasiaanastasia5274 Жыл бұрын

Огромное спасибо за эти видео-уроки!

@study_kvo Жыл бұрын

❤️❤️

@Yazhivy 2 жыл бұрын

Легко, непринуждённо, доходчиво! Отличный сайт получился 👍

@study_kvo 2 жыл бұрын

🙌🙏

@user-th6qs2od3x 3 жыл бұрын

Спасибо огромное! Работа просто шикарная получилась!

@N1ck1ta 4 жыл бұрын

Спасибо за урок! Вас очень приятно слушать

@study_kvo 4 жыл бұрын

Спасибо 🙏

@pavlozavinskyi1092 4 жыл бұрын

Спасибо за урок, хорошая информация.

@DerAnSia 4 жыл бұрын

Супер! Спасибо за урок)) очень понравился!!))

@mira2092 4 жыл бұрын

Спасибо большое! Все понятно и ясно 😊👍🏼

@user-yo6no7pr6g 4 жыл бұрын

все клево получилось) ждем еще уроков)

@Chingy4515 3 жыл бұрын

Красава, все четко и понятно объясняешь.

@user-uh7wg6zv8j Жыл бұрын

Повторил все по видео, получилось! Спасибо

@buuuxiii6681 2 жыл бұрын

Вау! Вау! Вау! Очень классно, увидела все своим ошибки, поняла почему на паре получила по шее, переделала лонгрид) Спасииибо Вам

@study_kvo 2 жыл бұрын

Огонь 🔥🔥

@SemenAlexndrovich 3 жыл бұрын

Спасибище! Завтра буду пытаться что-то сотворить для личного проекта =)

@sergey8495 3 жыл бұрын

Спасибо, сделал всё уроку. Для начала неплохо

@L1nkoln4 Ай бұрын

спасибо большое, получилось сделать точь в точь такой же сайт

@anisarahimova8023 2 жыл бұрын

Спасибо большое, отлично объясняете 😍👏🏻👏🏻👏🏻

@study_kvo 2 жыл бұрын

❤️❤️

@user-wg6lw4uz8p 2 жыл бұрын

Спасибо за отличный урок!

@kalambaeva_ 2 жыл бұрын

крутой!!!) вы очень крутой!) наконец сделала, спасибо))

@uri__vi4540 Жыл бұрын

Спасибо, у меня получилось все сделать.Уроки просто супер!!!

@study_kvo Жыл бұрын

🙌🙌

@user-fl2zy4sn3o Жыл бұрын

Благодарю за уроки)

@camille_2011 8 ай бұрын

Спасибо!!! Очень круто и интересно получилось!

@user-uo5nu4ye1m 2 жыл бұрын

Прикольно. Легко смотрится

@meowwwrrr 3 жыл бұрын

спасибо. мой первый полноценный сайт в фигме

@study_kvo 3 жыл бұрын

🔥🔥

@user-ki5pd4uk7g 3 жыл бұрын

Спасибо большое за полезные уроки! Создаю уже 3ю работу по твоим урокам 💥 Жду майский марафон, очень хочу попасть 🙏

@study_kvo 3 жыл бұрын

Кайф! Майский будет по приложениям 🙌🙌 буду ждать: t.me/study_kvo

@user-is8wj5rh8v 4 жыл бұрын

Хотелось бы узнать как оформлять и передавать это все заказчику)

@SummerRina 3 жыл бұрын

Переименовать грамотно все слои, разложить четко по папкам, где надо объединить в фреймы. Рядом вывести все цвета, цветовые схемы, всю раскладку по шрифтам и типографике, все состояния кнопок и других элементов, виды форм и полей ввода и пр., замечания по анимации и верстке, возможно с примерами, а также сделать адаптивные версии всех страниц сайта под нужные разрешения (обычно десктоп, планшет, мобильные). Отдельно можно архив со всеми изображениями с сайта в хорошем качестве и разрешении, а также все подобные мелочи, иконки и прочее. И сам файл фигмы. Ну и конечно могут быть другие, свои или еще какие-то требования, тут уж зависит от того, с кем работаете и что они просят.

@user-vy5xt3ze9z 3 жыл бұрын

а можно по-русски😳

@SummerRina 3 жыл бұрын

@@user-vy5xt3ze9z Это вроде итак по-русски, несложно🤷‍♀️ Если слова незнакомы - читайте про них, гуглите, это довольно базовое все, всегда пригодится и будет полезно.

@user-vy5xt3ze9z 3 жыл бұрын

@@SummerRina спасибо

@user-xo2sw3cr3v 3 жыл бұрын

@@SummerRina всё понятно , кроме двух. что значит выводить цвета и цветовые схемы? Здесь какой-то плагин нужен? Что это вообще значит?

@production2769 4 жыл бұрын

Опля, пошёл доделывать дальше))) вторую часть)))

@dis.3225 3 жыл бұрын

Вышло очень круто!!!

@maksimuhimchyk9525 2 жыл бұрын

очень круто , спасибо !

@badcat5958 3 жыл бұрын

Спасибо! Вы талант!

@strongman672 Жыл бұрын

Бро ты лучший твои видео смотреть про кайф спасибо огромное.

@study_kvo Жыл бұрын

Спасибо 🙌🙌

@valentynahalkina5597 3 жыл бұрын

Спасибо большое за видео :)

@boboy1 Жыл бұрын

Я твой фанат братан. продолжай в том же духе

@study_kvo Жыл бұрын

🤝🤝

@nataliapintiy4190 4 жыл бұрын

Спасибо большое!

@malistovsfam 2 жыл бұрын

Спасибо большое🤗

@qulenya 3 жыл бұрын

Спасибо, у меня прикольно получилось!)

@user-my8ro5ee1y 3 жыл бұрын

чувак ты афигенный!

@study_kvo 3 жыл бұрын

Ой и не говори))

@maxcrymoor595 3 жыл бұрын

Клево сделал - красава

@raifer007 Жыл бұрын

Спасибо бро)

@irinapiatka1247 2 жыл бұрын

Спасибо:)

@user-tp9si9xu2o 2 жыл бұрын

Спасибо)

@study_kvo 4 жыл бұрын

✅Скачать материалы из урока: vk.cc/amgJEt 📹Первая часть: kzfaq.info/get/bejne/gs-jnbeTqsC7Zps.html ✔️Ближайший марафон по веб-дизайну: t.me/study_kvo

@katishow6631 3 жыл бұрын

Скажите пожалуйста, где берёте картинки, иконки и.т.д...???

@Someone-wx6fn 2 жыл бұрын

Хороший урок

@user-mo6xq8jq7m 3 жыл бұрын

Спасибо!

@sara_oliwka 4 жыл бұрын

классно, спасибо) когда следующее видео?

@user-qt2bs6ik1o 4 жыл бұрын

Спасибо, расскажите пожалуйста про адаптацию под мобильники

@user-qe5fb7vp4m 3 жыл бұрын

12 часов работы коту под хвост,спасибо за толковое объяснение!

@user-ij6de3og4b 4 жыл бұрын

спасибо большое за доступную информацию! очень все понятно и без лишних слов)) а подскажите, когда сайт делаешь заказчику, что ему надо скидывать? как это должно выглядеть? в каком формате сохранять? как сделать, чтобы сайт начал работать и все кнопки работали?

@pllxry 2 жыл бұрын

то, что показывает автор - дело дизайнера, а чтобы сам сайт начал работать, то тут не все так просто и нужно привлекать программиста. Либо начинать разбираться в программировании самому)

@user-bz1yd5vd2z 4 жыл бұрын

Привет, посоветуй видео уроки (курсы авторов)с нуля от а до я пошагово по Figma? будь добр :) творческих успехов тебе!

@study_kvo 4 жыл бұрын

Привет, приходи ко мне на бесплатный интенсивн по Фигме и вебдизайну: vk.com/pskvo_marafon Как раз скоро стартует в июне.

@user-yl9kr4re7e 4 жыл бұрын

Супер! Быстро и по сути. Отличный урок! Только материалы не получается скачать. Уже устарела ссылка?

@study_kvo 4 жыл бұрын

Ссылка актуальна, только что проверил все ок.

@DimONTimOFF 4 жыл бұрын

зачем Елену Иванову опустил? :)

@kanzadaberdalieva6898 3 жыл бұрын

👍👍👍

@assel290385 3 жыл бұрын

спасибо, то что нужно! сделала с вами макет - все понятно) вопрос: как включить просмотр без UI элементов фигмы?))

@study_kvo 3 жыл бұрын

Ctrl + \ 😉

@ponos_negra 4 ай бұрын

Исходников 2 части нет:(

@user-rm1zt5lt4p 3 жыл бұрын

Отличные уроки! Есть телеграм канал? Хочу на марафон в январе.

@study_kvo 3 жыл бұрын

Марафон проходит через вк, присоединяйтесь: vk.com/pskvo_marafon

@user-rm1zt5lt4p 3 жыл бұрын

@@study_kvo , спасибо, буду 👍🏻

@Igor_KV 4 жыл бұрын

Угу, угу, угу, угу))))

@study_kvo 4 жыл бұрын

«Угу» много не бывает 😎

@alexkingkz Жыл бұрын

Всё отлично. Понятно и быстро. Но вот жаль, что нет продолжения, как из Фигмы готовый дизайн вытащить :(.

@study_kvo Жыл бұрын

Этим уже занимаются frontend-разработчики или по-простому, верстальщики. Это уже не дизайн)

@alexkingkz Жыл бұрын

@@study_kvo Да, я понимаю, но хотелось бы и это знать ))

@DiKiyZVER 11 ай бұрын

Привет! Ответь пожалуйста, текст который используется в макете он должен быть выдан заказчиком или это уже сугубо фантазия дизайнера создание текстовки и нахождения картинок? Если допускаться 2 варианта, тогда заказчик мне должен доплатить за это или это уже не входит в доплату и считаеться частью дизайна?

@study_kvo 10 ай бұрын

Всё может быть по-разному. Лучше не расчитывать на то, что заказчик сделает так, как вам будет удобно, а определить для себя удобный формат, работать в нём и объяснять о нём заказчикам

@RotEbat Жыл бұрын

Смотрю через 2 года после выхода, но зато помогло. У меня есть такой вопрос: а как это будет использоваться потом, при создании сайта?

@study_kvo Жыл бұрын

Дизайн - только начало создания сайта. Потом макет берет верстальщик и воспроизводит его посредствам html, css, js. Это нужно, чтобы сайт был не просто картинкой, а функциональной страницей, которая откроется в браузере. После этого его загружают на хостинг, покупают доменное имя (например study-kvo.ru), соединяют их, затем сайт открывается у всех по этому имени (домену) в интернете.

@RotEbat Жыл бұрын

@@study_kvo Спасибо!

@a.nastetica 3 жыл бұрын

Спасибо за уроки. Они легкие и понятные, но почему все делается на глаз? За "допустим, кегль будет 22, а отступ 36" мне верстальщик набьет морду. Потому что все значения разные, а некоторые элементы вообще сетку слали нахрен)

@study_kvo 3 жыл бұрын

Если делать наобум - может :) Если отдавать себе отчёт в каждом действии - все хорошо.

@lushnikovilya 4 жыл бұрын

Саша, привет! такой вопрос. Ты перекрасил иконки соцсетей просто сменой параметра fill. Я когда меняю - меняется цвет только текстового блока. Иконки остаются белыми. Нашел такой способ - дублирую слой с иконками, делаю из двух слоёв маску, затем уже меняю цвет маски. Подскажи, почему не срабатывает твой способ. Заранее спасибо за ответ! :)

@study_kvo 4 жыл бұрын

Значит у вас непорядок на панели слоев. Иконка никак не должна быть связана с текстовым слоем. Это два разных слоя на панели слоев. Проверьте все ли ок там. Заливать через маску векторную иконку в Фигме - это хардкорно)

@SummerRina 3 жыл бұрын

Значит что-то не так с иконками. Все слои должны быть отдельно. Иконки, чтобы меняли цвет, должны быть в svg.

@user-hw7vz2tg5b 6 ай бұрын

Друг а подскажи как сделать кнопку с пкрехожом на сайт или чтраницу гугла

@study_kvo 6 ай бұрын

Чтобы на сайте была кликабельная кнопка, нужно чтобы сайт был свёрстан или собран на Тильде. Если нужно просто в Фигме сделать ссылку, выделяй текст кнопки, нажимай Ctrl+K и вставляй ссылку.

@DiKiyZVER 11 ай бұрын

Скажите основные сайты которые используете для поиска картинок, спасибо!

@study_kvo 10 ай бұрын

Pexels, Unsplash, Pixabay и Freepik. Ну, и Midjourney)

@cryptotrade7003 2 жыл бұрын

Здравствуйте, а как вот эти столбцы убирать и возвращать розоватые?)

@cryptotrade7003 2 жыл бұрын

Уже нашел , ещё раз посмотрел начало первой части ,спасибо за вашу работу )))

@study_kvo 2 жыл бұрын

❤️❤️❤️

@makenzo1542 3 жыл бұрын

А для какого конструктора подойдёт сделанный в фигме?

@study_kvo 3 жыл бұрын

Для того, на котором вы умеете работать :) Можно собрать на Тильде, можно на Рэдимаге. Достаточно подстроиться под их сетки. Можно отдать верстальщику, он сверстает макет.

@user-gg6sg3br3u 4 жыл бұрын

Копирайт в подвале обязательно должен быть.

@1Fotobook 2 жыл бұрын

Что потом этим макетом? Как его потом выгрузить на хостинг и что бы все это работало

@study_kvo 2 жыл бұрын

Найти верстальщика и передать ему макет. Он воспроизведет сайт через HTML, CSS, JS и закинет на хостинг. Следующий этап - работа другого специалиста. Дизайнер может, но не обязан уметь верстать. + Можно иметь ввиду тильду и собирать сайты там)

@ekaterinaemelyanova278 4 жыл бұрын

А каким образом сдать готовый дизайн сайта заказчику? В формате пдф?

@mmturbo8468 3 жыл бұрын

Я думаю, что в формате SVG. Для дальнейшей работы других людей с этим файлом.

@natali24287 3 жыл бұрын

Вообще то это файл фигмы, сдаём как файл фигмы.

@Hamitm5 3 жыл бұрын

а ты покажешь как его перенести в сайт что бы им можно было пользоваться в браузере ???

@study_kvo 3 жыл бұрын

Ты говоришь про вёрстку сайта. Этим уже занимается верстальщик, а не дизайнер. Поэтому, увы, нет, не покажу 😁

@Dollywolly-so3ry 2 жыл бұрын

Здравствуйте, а как отключить элементы, чтобы посмотреть готовый проект?

@study_kvo 2 жыл бұрын

Нажмите Ctrl + \

@atamanic Жыл бұрын

Неплохо, но стилями пользоваться надо, чтобы не бегать по фреймам.

@dedmazay8706 3 жыл бұрын

Как вы смотрите сколько расстояние между теми же ректенгалами?

@daaryevna 3 жыл бұрын

выбираешь объект, зажимаешь alt и наводишь на объект, расстояние до которого ты хочешь увидеть

@tochka_ru4798 Жыл бұрын

он создал картинку и что дальше?

@user-nc4nj1pd6r 2 жыл бұрын

Здравствуйте, подскажите почему не могу вставить текст на фото (прячется за фото) ?

@study_kvo 2 жыл бұрын

Проверьте панель слоев слева. Текстовый слой должен быть выше, чем слой фото.

@user-ry3po2ue8x 3 жыл бұрын

Спасибо за урок, дай пожалуйста твой инстаграм, я отмечаю

@study_kvo 3 жыл бұрын

Залетай: sanya_kvo

@dismachka3195 4 жыл бұрын

Это мы сделали одностраничный сайт, верно?

@study_kvo 4 жыл бұрын

учитывая, что в навигации есть другие страницы, то это одна из них - главная. Одностраничный сайт не подразумевает перехода в какие-то другие разделы. Там он единственный.

@semenzalupa14 4 жыл бұрын

Зачем зажимать ctr при настройке размера фрейма?

@study_kvo 4 жыл бұрын

Чтобы элементы, у которых не задана привязка к верхнему левому углу, не растянулись и не уехали вслед за фреймом.

@dnk.006 16 күн бұрын

А как этот сайт откроется через телефон ? Или нужно еще один макет под телефон делать ?

@study_kvo 13 күн бұрын

Всё так! Для смартфона нужен отдельная версия - мобильная, для планшета - планшетная 😊

@axe9427 2 жыл бұрын

Почему я делаю все точно также но размер шрифта на 18 отличаться у меня и какой у него. У меня он мелкий что прочитать трудно а у него крупный. Это как программы одни и теже

@study_kvo 2 жыл бұрын

Изначальный размер фрейма случайно не гигантский? Если с ним все ок, попробуй в веб-версии Фигмы

@axe9427 2 жыл бұрын

@@study_kvo все также как и в видео проверял

@axe9427 2 жыл бұрын

@@study_kvo версия figma последняяя ставил шрифт чуть больше