Дизайн сайта в Figma. Уровень новичок.

Поделиться
HTML-код
  • Опубликовано: 18 янв 2025

Комментарии • 111

  • @SofyaFilippova
    @SofyaFilippova  Год назад +9

    Ссылка на мой проект в Figma - www.figma.com/file/GxLuZNKTYFgDPuBm5HQwlh/%D1%82%D0%B0%D0%BD%D1%86%D1%8B?type=design&mode=design&t=3xMggoCqrV71y4UL-1
    Чтобы редактировать мой файл, вам нужно скопировать его в свой аккаунт. Инструкция:
    1. Открываете мой файл
    2. В верхней панели по центру нажимаем на стрелку у названия проекта «танцы»
    3. В выпадающем меню выбираем - dublicate to your drafts
    4. В новом окне должен открыться проект, который будет уже в вашей Figma, который вы сможете редактировать
    Картинки для дизайна - drive.google.com/drive/folders/1A6zlL-wzKX3N5gwVZEibU0hUdQ6sYNCl?usp=sharing

  • @Nniikka
    @Nniikka Год назад +43

    очень круто то что ты снимаешь так долго, и бесплатно обучаешь чему то новичков ❤

  • @anastasia.mingaleva
    @anastasia.mingaleva Год назад +18

    Изучаю фигму первый день, решила начать с этого видео, всё очень доходчиво, пошло как по маслу) Приятно вас слушать)

    • @kurkinz493
      @kurkinz493 9 месяцев назад

      Как успехи ?

    • @Smartfibonachi
      @Smartfibonachi 6 месяцев назад

      80% что забросила

  • @Akashi05
    @Akashi05 11 месяцев назад +6

    Спасибо большое за этот видео-урок. Очень понятно Вы объяснили. Буду с нетерпением ждать новых видео❤

  • @anastasiyapankratova48
    @anastasiyapankratova48 8 месяцев назад +3

    И тут я поняла, что нашла своего преподавателя! Софья, спасибо за титанический труд и за то, что делитесь знаниями! Захотелось к вам на курс!

  • @ДашаГалямова-я5ю
    @ДашаГалямова-я5ю 11 месяцев назад +3

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

  • @АндрейАлексеевич-ю2д

    Понятно объясняете, приятный голос, да и с точки зрения дизайна и комментариев процесса поймал для себя парочку инсайдов)
    Несмотря на то, что со многими инструментами уже немного знаком, видео все равно с удовольствием посмотрел целиком.
    Спасибо за контент 👍

  • @_jam_and_honey_
    @_jam_and_honey_ 2 месяца назад

    Самое лучшее разъяснение из все что я видела! Я ненавидела Фигму, теперь чувствую себя намного увереннее. Спасибо София! ❤️

  • @Любимая-ч5ц
    @Любимая-ч5ц 8 месяцев назад +5

    Очень понравилось смотреть ваш урок! Большое спасибо, все так понятно и доступно и голос очень приятный🥰🥰

  • @ДианаКлубничкина-ц5н
    @ДианаКлубничкина-ц5н 10 месяцев назад

    Софья, спасибо Вам огромное, за такой подробный урок.

  • @romand2564
    @romand2564 3 месяца назад +1

    Молодец! Хорошо преподносите материал. Теперь давайте урок для среднего уровня. Бесплатно.😃😃

  • @libertychannel6620
    @libertychannel6620 10 месяцев назад

    Это видео именно то, что нужно! Спасибо! Я только-только начинаю путь в UX/UI дизайн и у меня такая мини цель просто изучить программу для начала. Пока что много информации, а такие видео спасают)

    • @kurkinz493
      @kurkinz493 9 месяцев назад

      Как сейчас ?

  • @elizavetagolubeva6037
    @elizavetagolubeva6037 5 месяцев назад +1

    Софья, Вы прекрасны! Большое спасибо за урок!!!

  • @perfectsisjsj
    @perfectsisjsj Год назад +2

    Изучаю фигму активно, благодарю за такой урок 🙌🏼

  • @VikaLinkevich
    @VikaLinkevich Год назад +1

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

  • @ГульнизаТоктасын-р7л
    @ГульнизаТоктасын-р7л 7 месяцев назад

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

  • @ПолинаИсакова-л8у
    @ПолинаИсакова-л8у Месяц назад

    Огромное Вам спасибо за такой подробный урок🤗

  • @Angelochek-v8o
    @Angelochek-v8o Год назад +2

    Боже, да неужели хоть кто-то сделал видео "с нуля" реально С НУЛЯ, для новичков. Ещё и полноценная работа, а не 7-минутное видео. Или говорят учить фигму по Бычкову...а зачем тебе тонна информации о каждой функции, как это применить, всё забывается через 20 минут
    Спасибо тебе большое

  • @AzizAlekseeva
    @AzizAlekseeva 2 месяца назад

    спасибо! Огромное это большая возможность для мамочек в декрете❤

  • @ДагмараАлиева-д5ш
    @ДагмараАлиева-д5ш 8 месяцев назад +2

    Софья, здравствуйте. Только изучаю фигму, и чтобы набить руку хотела так же "переность " дизайны. Зашла на behance, очень много проектов, но как достать изображения , которые были использованы дизайне? Их нужно через ИИ генерировать (обрезая и приводя в первоначальный вид) ,или как?

  • @vera-horse
    @vera-horse 9 месяцев назад

    Спасибо, Софья! Я не так, чтобы новичок, фигму методом научного тыка освоила, но все равно, было, много чего нового подцепить! ❤

  • @SofyaFilippova
    @SofyaFilippova  10 месяцев назад

    📙 UX/UI-ДИЗАЙН - uxui.filschool.ru
    На курсе вы научитесь разрабатывать сайты и удобные интерфейсы под руководством опытных кураторов, соберите портфолио и начните карьеру в перспективной сфере.
    Срок обучения - от 4,5 до 7,5 месяцев, 35 мест на потоке. Старт потока 15 апреля.
    📕 ДИЗАЙНОВЕДЕНИЕ - d.filschool.ru/
    Полное освоение профессии веб-дизайнера, пройдете все этапы разработки дизайна сайта и работы с клиентом. Вы проходите курс вместе с куратором, который отвечает на ваши вопросы и проверяет дз. У курса нет расписания и потоков, доступ выдается сразу после покупки.
    Доступ к материалам на 6 месяцев.
    📗 ОСНОВЫ ДИЗАЙНОВЕДЕНИЯ - base.filschool.ru/
    Курс для новичков, которые хотят попробовать себя в роли веб-дизайнера и понять их ли это профессия, у курса нет расписания и потоков, доступ выдается сразу после покупки.
    Доступ к материалам - 6 месяцев. 2 тарифа на выбор
    📘 WORK&SELL - work.filschool.ru
    Курс по работе и поиску клиентов. Вы научитесь работать системно за хороший чек, сформируете личный бренд и позиционирование, никаких тревог и выгорания, потому что клиенты будут искать вас сами, возвращаться и рекомендовать. У курса нет расписания и потоков, доступ выдается сразу после покупки.
    Доступ к материалам - 6 месяцев. 3 тарифа на выбор
    🔗 Контакты нашего менеджера:
    WhatsApp - +7 999 435-12-21
    Telegram - @filschool_telegram
    Почта - info@filschool.ru

  • @katrinhoh3665
    @katrinhoh3665 5 дней назад

    спасибо) посмотрела на одном дыхании))

  • @designgorsi
    @designgorsi Год назад +4

    Круто, получилось! Спасибо💝

  • @_ursofa
    @_ursofa 2 месяца назад

    Спасибо огромное за такой подробный урок ❤

  • @alexmeelton
    @alexmeelton 4 дня назад

    Спасибо дорогая за видео! ❤

  • @prosto_bumy
    @prosto_bumy Год назад +1

    Софья, здравствуйте. Спасибо такое познавательное видео. Можете пожалуйста снять продолжение, про что вы говорили в самом конце, что еще должно быть отрисовано и сделано в макете для передачи верстальщику, про ui kit. Смотрела ваши предыдущие видео, в теории вроде бы все понятно, хочется на практике посмотреть как это делается🙏🏻

    • @SofyaFilippova
      @SofyaFilippova  Год назад

      В рамках ютуб канала вряд ли это сделаю, чтобы не ждали и не надеялись 😔

  • @ВикаЕлохина-з6р
    @ВикаЕлохина-з6р 10 месяцев назад

    Идеальный видео-урок👍🏼

  • @ValeriaDesign7
    @ValeriaDesign7 6 месяцев назад

    Спасибо большое за такой подробный, интересный урок😌

  • @KarVetka777
    @KarVetka777 8 месяцев назад

    Супер ! Супер !
    Очень понятно , доходчиво , подробно ! Спасибо ❤

  • @АринаСидорова-с9ф
    @АринаСидорова-с9ф 6 месяцев назад

    Благодарю вас за данный урок! Ценно и полезно❤

  • @asiabu117
    @asiabu117 11 месяцев назад

    Благодарю за очень классный урок!)

  • @asiabu117
    @asiabu117 11 месяцев назад

    Ура! Я доделала) Спасибо большое за урок❤

  • @VolodymyrNazarenko56
    @VolodymyrNazarenko56 11 месяцев назад

    можно урок про то что должно идти в придачу к лендингу , дополнительные окна , гамбургер , переходы и тд

  • @ДиляраШайдарова
    @ДиляраШайдарова 8 месяцев назад

    Спасибо!!! Несомненно полезное видео и контент в целом!

  • @ЕленаЗобова-777
    @ЕленаЗобова-777 Год назад

    😻😻😻🔥🔥🔥🔥🔥
    Спасибо за такой информативный урок ❤️❤️❤️

  • @lamaricaş
    @lamaricaş 4 месяца назад

    Спасибо огромное! Мне очень понравилось!

  • @АстралВечен
    @АстралВечен Год назад

    Свечи на заднем плане огонь )

  • @aleksandrabolonina9160
    @aleksandrabolonina9160 5 месяцев назад

    Очень здорово, спасибо!

  • @lettaluck
    @lettaluck Год назад

    Софья... Вы просто ❤

  • @DzhangrElbikov
    @DzhangrElbikov 9 месяцев назад

    Здравствуйте. Спасибо за видео. Повторяя за вами, сделал макет в фигме. Можно ли взять макет для верстки к себе в портфолио? Очень понравился дизайн.

  • @Elfmanko
    @Elfmanko 4 месяца назад

    Очень хороший урок!!

  • @МарияЗавидей-у7ь
    @МарияЗавидей-у7ь 5 месяцев назад

    благодарю за ваш труд

  • @irache0702
    @irache0702 9 месяцев назад

    Спасибо. Все очень понятно и полезно .

  • @dementrixx5702
    @dementrixx5702 9 месяцев назад

    Большое спасибо, все выполнила!

  • @Sylar7773
    @Sylar7773 Год назад +1

    Спасибо огромное!!!

  • @elzzzyao
    @elzzzyao 10 месяцев назад

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

  • @АнастасияБогоненко

    Софья, спасибо щза ваши видео! Очень интересно! Подскажите пожалуйста, что может помочь в развитии навыка делать стильныйсайт, именно понимание композиции, чтоюы было приятно оставаться на таком сайте. Волнует именно вопрос выработки этого стиля, что бы тут могло помочь, как вы считаете? Помимо того, что я смотрю много работ на бихансе и дрибл, может быть какая то литература с трендами, сайты?
    Заранее благодарю за ответ, хорошего вам дня! ❤

    • @SofyaFilippova
      @SofyaFilippova  Год назад +1

      Посмотрите это видео - ruclips.net/video/y4_6wFPf5oc/видео.htmlsi=YZ3wvzGAboijmBPB, там есть техники для выработки вкуса. Но с самого начала учим теорию, базу, потом вырабатываем так называемый стиль, но это уже дело опыта.

  • @Vovavi
    @Vovavi 7 месяцев назад

    Не понимаю, почему на 45:56 когда создаете обводку, у Вас обводится контур кнопки, а у меня контуры букв?

  • @by_aquarel
    @by_aquarel 9 месяцев назад

    Подскажите пожалуйста, там где танцевальные направления, София сделала описание про хип-хоп, скажите, а дальше про другие виды танцев, например стрим Дэнс веб дизайнеру тоже надо делать описание для верстальщика или как?😅

    • @dementrixx5702
      @dementrixx5702 9 месяцев назад

      я думаю да, там же тоже должна быть картинка с описанием

  • @СветланаДоценко-ч7щ
    @СветланаДоценко-ч7щ 11 месяцев назад

    Спасибо, спасибо, спасибо 🥺❤️

  • @vladislavak2629
    @vladislavak2629 Год назад +2

    Я нашла вас случайно, но сразу подписалась! ❤ Вы так замечательно все рассказываете, куда принимаете донаты?)

    • @SofyaFilippova
      @SofyaFilippova  Год назад

      Ваши комментарии и лайки прекрасные донаты 💖

  • @AnatolyRomanovvv
    @AnatolyRomanovvv 5 месяцев назад

    Ну у меня все получается но чувствую, что необходима теория по отступам чтобы все по феншую было

  • @SiriysOrion
    @SiriysOrion 5 месяцев назад

    Здравствуйте, Софья. Скажите. пожалуйста, насколько я понял - сначала дизайнер создает макет сайта, потом работают над этим макетом - верстальщик, а затем фронтенд разработчик. Так ли это?

  • @АйданаС-у4т
    @АйданаС-у4т 4 месяца назад

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

  • @Алджесмиронинов
    @Алджесмиронинов 11 месяцев назад

    Очень полезно❤

  • @meow_meow851
    @meow_meow851 7 месяцев назад

    Что делать когда ты создаешь маску, то у меня появляется зеленая обводка, которая не убирается?

  • @Zhanna_Krivonosova
    @Zhanna_Krivonosova 9 месяцев назад

    Здравствуйте! Подскажите пожалуйста,где можно скачать материалы к уроку?

    • @SofyaFilippova
      @SofyaFilippova  9 месяцев назад

      В закрепленном комментарии вся информация

    • @Zhanna_Krivonosova
      @Zhanna_Krivonosova 9 месяцев назад

      Все, увидела, спасибо большое❤

  • @anastasiyadmitrieva2713
    @anastasiyadmitrieva2713 6 месяцев назад

    Здравствуйте, можно ли использовать свою работу, сделанную по этому уроку, в портфолио?

  • @Э.К-р3г
    @Э.К-р3г Год назад

    Спасибо! 🔥

  • @DenisFlareonov
    @DenisFlareonov Год назад

    29:56 разве при верстке все не полетит из за отключения контейнеров у текста?

    • @SofyaFilippova
      @SofyaFilippova  Год назад

      Он не отключился, он стал четко по размеру букв, вы и руками можете это делать, но проще этой кнопкой

  • @XMITVRU
    @XMITVRU 5 месяцев назад

    очень всё понятно

  • @АнастасияКодубенко
    @АнастасияКодубенко 8 месяцев назад

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

    • @SofyaFilippova
      @SofyaFilippova  8 месяцев назад

      Потому что величина контента у разных блоков разная. То что вы написала актуально только для первого главное экрана, далее люди скроллят, а не стоят на месте и пытаться впихнуть контент под 1000, если это никак не выходит, смысла не имеет

    • @АнастасияКодубенко
      @АнастасияКодубенко 8 месяцев назад

      @@SofyaFilippova Да, я и имела ввиду первый экран, благодарю за ответ

  • @MariaMikaelyan-q4c
    @MariaMikaelyan-q4c 10 месяцев назад

    Добрый день. Скачиваю шрифт Unbounded на ноутбук, разрешение в фигме дано использовать локальные шрифты. Почему-то шрифт не показывается в фигме, хотя страницу уже миллион раз обновляла. С первым шрифтом проблем не было. Что делать?

    • @SofyaFilippova
      @SofyaFilippova  10 месяцев назад

      У вас установлен Font installers от Фигмы?

    • @MariaMikaelyan-q4c
      @MariaMikaelyan-q4c 10 месяцев назад

      @@SofyaFilippova да! Прошлый шрифт (который использовался для заголовков в меню) отобразился в фигме, последующие не отображаются

    • @SofyaFilippova
      @SofyaFilippova  10 месяцев назад

      Манропе по стандарту есть в фигме. Вы шрифт на компьютер установили? Не просто скачали, а именно установили? На компьютере в папке шрифты есть unbounded?

  • @Светлана-ч8т7х
    @Светлана-ч8т7х Месяц назад

    Добрый день , это все реально делать на планшете? Или нужен обязательно ноут ?

    • @SofyaFilippova
      @SofyaFilippova  28 дней назад

      Не совсем, но тут в комментах писали, что что-то делают на планшетах

  • @uliaaaaaaa
    @uliaaaaaaa 11 месяцев назад

    Еще не досмотрела до конца, но уже спасибо, урок очень информативный и понятный! Подскажите пожалуйста, что делать Figma Agent не устанавливается? У меня виндовс 11, скачала установочный файл, нажимаю и пытаюсь установить, вроде пишет что completed, все установлено, но программы нигде нет, т.е она не установлена. Что делать с этой проблемой? Перезагрузка и повторные попытки не помогают

    • @SofyaFilippova
      @SofyaFilippova  11 месяцев назад

      У нее нет ярлыка, программа в фоновом режиме работает

    • @uliaaaaaaa
      @uliaaaaaaa 11 месяцев назад

      @@SofyaFilippova ааа, поняла, спасибо ❤

  • @lettaluck
    @lettaluck Год назад

    Подскажите пожалуйста, как отдельные текстовые слои будут работать с точки зрения seo? Ведь это главный заголовок, которому нужно присвоить h1. В той же тильде каждому текстовому слою будет присвоен свой h1, то есть их будет уже 3, а это плохо для seo. Что говорят вам на эту тему разработчики и сеошники?

    • @SofyaFilippova
      @SofyaFilippova  Год назад

      Научись круто танцевать не самый удачный h1, если сео важно, то лучше добавить логотип с текстовым описание - танцевальная школа и его сделать h1, ну или в любое другое место добавить более релевантный h1. Если нужно сделать h1 именно текст - научись круто танцевать, то можно сделать скрытый текстовый слой, который под картиной или прозрачный, но это тоже не очень хорошо. В этом уроке я не ставила цель сео научить или сделать его хорошим, здесь и с точки зрения продаж многое нужно менять.

    • @lettaluck
      @lettaluck Год назад

      @@SofyaFilippova спасибо за ответ!)

  • @miiiiiion9046
    @miiiiiion9046 9 месяцев назад

    А что делать если вот в удаление фона пишет , что не поддерживается в вашем регионе

    • @SofyaFilippova
      @SofyaFilippova  9 месяцев назад

      Включить приложение, которое меняет геолокацию

  • @daryozz1180
    @daryozz1180 10 месяцев назад

    что делать если сайт pixian не доступен в моем регионе?

    • @SofyaFilippova
      @SofyaFilippova  10 месяцев назад

      Включить впн или вбить в поиск - нейросеть удалить фон, там миллион аналогов

  • @elvirasef
    @elvirasef 7 месяцев назад

    а можно на телефоне работать с figma?

    • @fearless_ladyy
      @fearless_ladyy 2 месяца назад

      А почему бы не открыть в телефоне и не посмотреть ?

  • @melon.1904
    @melon.1904 11 месяцев назад

    Спасибо

  • @designgorsi
    @designgorsi Год назад +1

    Ух ты. 50 секунд назад

  • @natalyakvasova
    @natalyakvasova Год назад

  • @ValerySells
    @ValerySells Год назад

    👍

  • @BigKokka
    @BigKokka Месяц назад

    А разве ии не генерят уже вовсю сайты за 5 сек?

  • @Ролтун
    @Ролтун Год назад +1

    Мне лень смотреть хотя надо бы

    • @dementrixx5702
      @dementrixx5702 9 месяцев назад +1

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

    • @electron_kg
      @electron_kg 9 месяцев назад

      Тогда это не ваше

  • @aleksjy
    @aleksjy 11 месяцев назад

    Figmu в топку. Pixsa рулит. Редактор на много лучше. Figma скоро совсем уйдёт и будет платной.

    • @dementrixx5702
      @dementrixx5702 9 месяцев назад

      пикса еще очень сырая, а фигма стала фундаментом и базой для любого дизайнера интерфейса (и не только), ну и пикса тоже станет платной, нет ничего качественного и бесплатного

  • @istheOTHERSIDE
    @istheOTHERSIDE 7 месяцев назад

    Спасибочки

  • @Oksana-p3f
    @Oksana-p3f 11 месяцев назад

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