Сергей Чирков
Сергей Чирков
  • 72
  • 624 516
Создай свой сайт за 30 минут! | Framer для начинающих
В этом видео покажу как можно создать адаптивный сайт меньше чем за час в Framer! Framer - no-code инструмент, онлайн графический редактор и конструктор сайтов. С помощью Framer вы сможете с легкостью создать свой личный сайт, лендинг, сайт компании или каталог! В этом видео покажу как можно создать простой, адаптивный сайт портфолио за 30 минут. Покажу основные приемы по работе с программой. Еще вы можете создавать шаблоны и продавать на онлайн-маркетплейсах. Если вам интересно узнать больше, пишите в комментариях!
💥 Создай свой сайт в Framer уже сегодня: sergeichyrkov.com/framer (Перейди по ссылке и используй промокод "partner25proyearly" чтобы получить 3 месяца PRO подписки бесплатно!)
👉 Пример сайта из видео: orchid-share-343627.framer.app
🔗 Мои ссылки:
🎁 Курс по Figma: designsweets.co/courses/figma-course
Мой сайт: sergeichyrkov.com
Студия: chyrkov.studio
Мой канал в телеге: t.me/chyrkovfm
Behance: www.behance.net/chyrkov
Twitter: sergeichyrkov
📝 Содержание:
0:00 - интро
1:14 - обзор рабочей зоны Framer
4:25 - создаем главную страницу
10:08 - создаем страницу "О нас"
10:53 - создаем страницу "Портфолио"
11:40 - добавляем страницу "Контакты"
13:48 - обновляем меню навигации
17:28 - создаем раздел CMS и портфолио
26:53 - создаем компонент футера
28:53 - обновляем стили кнопок
29:51 - создаем адаптив
34:45 - пример анимации
36:11 - пример добавления ссылки для почты
37:07 - публикуем проект
39:07 - пример редактирования портфолио
40:12 - заключение
_____________
#Framer #FramerTutorial #Webdesign #Фреймер
Переглядів: 8 047

Відео

Как создать счетчик лайков в Figma с помощью переменных Local Variables | Уроки Figma для начинающих
Переглядів 3,7 тис.Рік тому
В этом видео покажу как создать анимацию кнопки счетчика лайков в Фигме используя переменные (Local Variables) и смарт анимацию. 🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course 🎓 Вы научитесь: - создавать компоненты - делать компоненты интерактивными - создавать переменные (Local Variables) - использовать переменные (Local Variables) в прототипе - создавать анимацию ...
Что такое Figma Variables (Переменные) и как с ними работать? | Figma уроки
Переглядів 17 тис.Рік тому
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В недавнем обновлении Figma представила Variable «Переменные»! В этом видео я покажу вам, как создавать простые карточки, используя Auto Layout и Variables в Figma. 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: designsweets.co/courses/figma-course Студия: chyrkov.studio Портфолио по...
Как сделать кнопку используя свойства компонента? Figma уроки для начинающих
Переглядів 7 тис.Рік тому
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео посмотрим как создать кнопку с помощью булевых слоев компонента. Мы создадим кнопку с помощью Auto Layout, а затем переведем ее в компонент и создадим варианты компонента. Покажу как добавить интерактив в прототипе и виде ховер эффекта. Далее посмотрим в чем суть свойств компонента и как их использовать. 🔗 ...
Как сделать sticky эффект в Фигме | Figma уроки
Переглядів 3,8 тис.Рік тому
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course Недавно в Фигме было обновление раздела прототип и появился новый функционал. В этом видео покажу как создать стики (sticky) меню в прототипе в Фигме. 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course Студия: chyrkov.studio Портфолио по фото: serge...
Adobe Firefly - полный обзор! Будущее графического дизайна?
Переглядів 2,1 тис.Рік тому
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео делаю полный обзор сервиса по созданию AI изображений и графики от компании Adobe - Firefly. Это новая нейронная сеть с большим потенциалом! Посмотрим возможности сервиса, разные методики генерации изображений. 👉 Ссылка на сервис: firefly.adobe.com 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторс...
Как сделать эффект подсветки текста курсором в Фигме? | Figma уроки
Переглядів 4,8 тис.Рік тому
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео покажу простой и быстрый способ как создать крутой эффект подсветки курсора в Фигме, эффект "spotlight". Покажу как для этого использовать смарт анимацию. 👉 Исходник: www.buymeacoffee.com/chyrkov/e/122810 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: 👉 designsweets.co/c...
Auto Layout: Как сделать калькулятор в Фигме? | Figma уроки
Переглядів 2,9 тис.Рік тому
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео покажу как создать калькулятор в Figma с помощью функции Auto Layout в стиле неоморфизма. Еще покажу как создать интерактивный компонент кнопки и настроить прототип с использованием смарт-анимации. 👉 Исходник: www.buymeacoffee.com/chyrkov/e/121042 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторск...
Как сделать анимацию по движению курсора в Фигме? | Уроки по Figma
Переглядів 7 тис.2 роки тому
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео покажу как создать классную анимированную заставку в Фигме используя интерактивный компоненты и смарт анимацию. Сделаем эффект отслеживания курсора. 🎄Исходник: www.buymeacoffee.com/chyrkov/e/108590 👉 Другие полезные видео: ua-cam.com/video/2Jq2nxBiVMs/v-deo.html Микро - анимации (smart animate) в Фигма: век...
Как добавить видео в Фигму? 3 крутых примера анимации видео галерей! | Уроки Figma
Переглядів 32 тис.2 роки тому
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео посмотрим как добавлять видео в проект в Фигме на примере создания трех видео галерей. А еще сделаем крутую анимацию в прототипе! 👉 Бесплатный доступ к исходнику - www.buymeacoffee.com/chyrkov/e/107557 💿 Скачать бесплатно Handbrake - bit.ly/3FEb6EA 🎥 Другие полезные видео: ua-cam.com/video/C0qo3gsHjkA/v-deo...
Как сделать обложку проекта в Фигме | Уроки Figma
Переглядів 3,1 тис.2 роки тому
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео покажу как создать обложку для вашего проекта в Фигме, чтобы добавить ему ценности и красиво презентовать ссылку клиенту. 🎥 Другие полезные видео: ua-cam.com/video/uTzuOIUGy5I/v-deo.html - Что такое секции? ua-cam.com/video/i4114UpOcVk/v-deo.html - 10 лайфхаков по работе удаленно ua-cam.com/video/-wXtN31-3I...
Что такое секции (sections) в Фигме? Как использовать секции?| Уроки Figma
Переглядів 4,7 тис.2 роки тому
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом коротком видео посмотрим на то, что такое секции в Фигме и как их использовать. Секции - очень удобный инструмент для организации рабочего пространства. 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course Студия: chyrkov.studio Портфолио по фо...
Лайфхак: как быстро поменять масштаб с помощью Scale Tool? | Уроки по Figma
Переглядів 1,6 тис.2 роки тому
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом коротком видео покажу как использовать инструмент scale tool для быстрого изменения масштаба. Это круто работает когда нужно сделать целый пак иконок или фавиконов для сайта. 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course Студия: chyrkov....
Веб-дизайн с нуля курс для фрилансеров! Промо
Переглядів 4092 роки тому
Веб-дизайн с нуля курс для фрилансеров! Промо
10 ЛАЙФХАКОВ по работе удалено и на фрилансе
Переглядів 1 тис.2 роки тому
10 ЛАЙФХАКОВ по работе удалено и на фрилансе
Как сделать мобильную версию сайта? | Уроки Figma
Переглядів 21 тис.2 роки тому
Как сделать мобильную версию сайта? | Уроки Figma
Микро анимации (smart animate) в Фигма: векторные червяки | Уроки по Figma
Переглядів 3,4 тис.2 роки тому
Микро анимации (smart animate) в Фигма: векторные червяки | Уроки по Figma
Микро анимации (smart animate) в Фигма / Custom spring | Уроки по Figma
Переглядів 4,1 тис.2 роки тому
Микро анимации (smart animate) в Фигма / Custom spring | Уроки по Figma
Как НЕ писать резюме в IT компанию или дизайн-студию?
Переглядів 1,3 тис.2 роки тому
Как НЕ писать резюме в IT компанию или дизайн-студию?
Как добавить Lottie анимацию в Фигму? | Уроки Figma
Переглядів 5 тис.2 роки тому
Как добавить Lottie анимацию в Фигму? | Уроки Figma
Custom spring анимация (Smart Animation) в Фигме | Обновление Figma 2022
Переглядів 4,6 тис.2 роки тому
Custom spring анимация (Smart Animation) в Фигме | Обновление Figma 2022
Вариативные шрифты в Фигме | Обновление Figma 2022
Переглядів 2,8 тис.2 роки тому
Вариативные шрифты в Фигме | Обновление Figma 2022
Новый Auto Layout! Обновление Фигмы 2022
Переглядів 3,8 тис.2 роки тому
Новый Auto Layout! Обновление Фигмы 2022
Сколько денег брать за логотип или сайт? Простая схема для фрилансера
Переглядів 2,1 тис.2 роки тому
Сколько денег брать за логотип или сайт? Простая схема для фрилансера
Микро анимация (smart animate) в Фигме - создаем музыкальный плеер
Переглядів 16 тис.2 роки тому
Микро анимация (smart animate) в Фигме - создаем музыкальный плеер
Как сделать текст по кругу в Фигме? + Смарт анимация | Figma уроки
Переглядів 14 тис.2 роки тому
Как сделать текст по кругу в Фигме? Смарт анимация | Figma уроки
Как удалить фон и вставить фото в круг в Figma? Автоматическое удаление фона за 3 секунды
Переглядів 7 тис.3 роки тому
Как удалить фон и вставить фото в круг в Figma? Автоматическое удаление фона за 3 секунды
Как сделать кнопку Фигме? Правила создания кнопки. Уроки Figma для начинающих.
Переглядів 40 тис.3 роки тому
Как сделать кнопку Фигме? Правила создания кнопки. Уроки Figma для начинающих.
Анимация слайдера в Фигме: 4 крутых приема! Smart animate | Figma уроки
Переглядів 49 тис.3 роки тому
Анимация слайдера в Фигме: 4 крутых приема! Smart animate | Figma уроки
НЕОМОРФИЗМ (neumorphism) и анимация в Фигме! Создаем эффект объема с нуля!
Переглядів 12 тис.3 роки тому
НЕОМОРФИЗМ (neumorphism) и анимация в Фигме! Создаем эффект объема с нуля!

КОМЕНТАРІ

  • @butterfletty_
    @butterfletty_ День тому

    привет серега

  • @alyonak3013
    @alyonak3013 12 днів тому

    Спасибо за приятное изложение😊

  • @ЕкатеринаКулинич-ъ6ы

    Видео посвящено Variables, но пол видео автор собирает карточку 💀 Чтобы добраться до нужной информации нужно постоянно перематывать целые куски

    • @Chyrkov
      @Chyrkov 4 дні тому

      Я всегда стараюсь делать видео максимально информативным, поэтому показываю все нюансы работы с переменными, даже если вначале это кажется не важным. 😉

  • @mariefedorets6030
    @mariefedorets6030 18 днів тому

    Супер , спасибо!

  • @Sk8maks
    @Sk8maks 18 днів тому

    Спасибо, очень хорошо и понятно объяснили

  • @lirabard
    @lirabard Місяць тому

    А как сделать так чтобы кнопка что-нибудь делала? Например ссвлку давала иди типо того?

  • @Kozhuh919
    @Kozhuh919 Місяць тому

    Хорошее видео, но есть ли возможность скачать готовый сайт, то есть папки, код, картинки и тд. и загрузить это все на свой хостинг/сервер и подвязать cms?

  • @Areya777
    @Areya777 Місяць тому

    Спасибо Вам большое! Очень здорово!

  • @JannaKALACHOVA
    @JannaKALACHOVA Місяць тому

    Добрый вечер. Возник вопрос : "Можно делать модификации в сгененированом варианте?". Я создала сайт при помощи промта и мне нужно добавить меню и другие блоки. Благодарю

  • @alexgray2585
    @alexgray2585 Місяць тому

    Непонятно как выглядит видео без автопроигрывания, там есть кнопка плей (от самой Фигмы) для начала воспроизведения?

  • @DrWoT-uh9zm
    @DrWoT-uh9zm Місяць тому

    Также можно и на Webflow собрать быстро. Но там по серьезнее функционал, чем тут. Это скорее для мини сайтов, лендосов.

  • @Areya777
    @Areya777 Місяць тому

    У Вас очень крутой контент. Спасибо Вам огромное за доступную информацию! Это очень здорово!

  • @Areya777
    @Areya777 Місяць тому

    Благодарю!

  • @Areya777
    @Areya777 2 місяці тому

    Спасибо Вам большое, Сергей! Очень нужные фишечки! 🙏

  • @TheBochibu
    @TheBochibu 2 місяці тому

    Привет, есть вопрос, буду очень признателен если поможешь, учусь сейчас работать в framer. И я так понял политика немного изменилась не понимаю на форумах все пишут что через quick action можно было в разделе ai найти generation page но его сейчас там нет, так вот вопрос, его перенесли в другой раздел или вырезали из бесплатной версии? И если вырезали то у меня откроется доступ к этой функции через подписку mini?

  • @Артем-щ4ч2е
    @Артем-щ4ч2е 2 місяці тому

    спасибо за ваш труд

  • @ErlanNurmanbetov-z9t
    @ErlanNurmanbetov-z9t 2 місяці тому

    ок

  • @belkaaero9247
    @belkaaero9247 2 місяці тому

    Спасибо! Четко и понятно!

  • @ВадимБекмансуров
    @ВадимБекмансуров 2 місяці тому

    Зачем так сильно много говорить в начале видео?

    • @Chyrkov
      @Chyrkov 2 місяці тому

      Я люблю поговорить на темы которые мне интересны. Если у вас нет терпения, всегда можно перемотать 😉

  • @ninobozhyk6142
    @ninobozhyk6142 2 місяці тому

    Це реально корисне відео!

    • @Chyrkov
      @Chyrkov 2 місяці тому

      Дуже дякую!!😉

  • @victoriagetman3701
    @victoriagetman3701 2 місяці тому

    Большое спасибо, всё понятно. Можно видео с большим углублением на эффекты? Хочется знать как можно создать анимированые картинки которые будут бегущей строкой на странице, а если ещё они будут "кружится пока бегут" вообще супер. И как работать с общим фоном? Не получается его сделать мягко прозрачным

    • @Chyrkov
      @Chyrkov 2 місяці тому

      Возможно в будущем сделаю))

  • @TatyanaNi-j6q
    @TatyanaNi-j6q 2 місяці тому

    Потрясающе просто и понятно, Вы очень хороший учитель, спасиюо большое!

    • @Chyrkov
      @Chyrkov 2 місяці тому

      Благодарю вас за отзыв! Очень приятно!

  • @НатальяОвчинникова-х4д5н

    круто!) Огромное спасибо)))

    • @Chyrkov
      @Chyrkov 2 місяці тому

      Пожалуйста!

  • @Julia24680
    @Julia24680 3 місяці тому

    Очень хорошее видео, всё подробно, понятно 👌

    • @Chyrkov
      @Chyrkov 2 місяці тому

      Спасибо за отзыв! Рад, что было полезно!

  • @nadejdamalih7680
    @nadejdamalih7680 3 місяці тому

    сколько стоят курсы по фигме

    • @Chyrkov
      @Chyrkov 2 місяці тому

      В описании к видео есть ссылка на мой подробный курс по Фигме. Вся информация доступна по ссылке.

  • @nadejdamalih7680
    @nadejdamalih7680 3 місяці тому

    Сергей у вас какой интерфейс в фигме'старый или новый?

    • @Chyrkov
      @Chyrkov 2 місяці тому

      новый интерфейс Фимы вышел летом 2024, данное видео опубликовано намного раньше. В видео старый интерфейс.

  • @nadejdamalih7680
    @nadejdamalih7680 3 місяці тому

    Бургер и крестик у меня получилмя а пред.нет

    • @Chyrkov
      @Chyrkov 2 місяці тому

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

  • @nadejdamalih7680
    @nadejdamalih7680 3 місяці тому

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

    • @Chyrkov
      @Chyrkov 2 місяці тому

      да есть, ссылка в описание к видео. Там подробный курс.

  • @nedoreviewer
    @nedoreviewer 3 місяці тому

    я правильно понимаю, что Вы решили написать свою фамилию "Чирков" не Chirkov, а Chyrkov, что можно невольно прочитать как Чурков? :)

    • @Chyrkov
      @Chyrkov 2 місяці тому

      Со знание английского вы никогда так не прочитаете =)

    • @nedoreviewer
      @nedoreviewer 2 місяці тому

      @Chyrkov прочитаю, ещё как прочитаю, понятно, что по английски это будет неверно, однако это буквально русская У написана ))

  • @ИринаСергеева-у6п7б
    @ИринаСергеева-у6п7б 3 місяці тому

    Спасибо большое,пожалуй,самая лучшая информация о работе с Framer!

    • @Chyrkov
      @Chyrkov 2 місяці тому

      Благодарю! Рад, что было полезным

  • @АнтонАбакумов-з8з
    @АнтонАбакумов-з8з 4 місяці тому

    Переходите на Платформу что ли .... Пожалуйста! Тут вааащщще не грузит

    • @Chyrkov
      @Chyrkov 2 місяці тому

      Не понимаю о чем вы. Переходить никуда не планирую.

  • @YungPach-n5g
    @YungPach-n5g 4 місяці тому

    Lora Ways

  • @JuliaRobots
    @JuliaRobots 4 місяці тому

    Супер! Спасибо!❤

    • @Chyrkov
      @Chyrkov 2 місяці тому

      пожалуйста!)

  • @KeithHopson-k3m
    @KeithHopson-k3m 4 місяці тому

    Stacy Fort

  • @lilit8342
    @lilit8342 4 місяці тому

    Отличное приложение. А никак нельзя перенести сайт на свой хостинг?

    • @Chyrkov
      @Chyrkov 2 місяці тому

      Нет) вы работаете в этой программе и они предоставляют вам хостинг. Они на этом зарабатывают. В этом есть и плюс и минус конечно.

    • @lilit8342
      @lilit8342 2 місяці тому

      @@Chyrkov Спасибо. Вообще, я в курсе, что они так делают. Просто подумала, а вдруг )))).

  • @DD-yv3tt
    @DD-yv3tt 4 місяці тому

    Спокойно, наглядно, понятно - супер! Удобно освежать информацию в памяти Спасибо за такую ненавязчивую музыку

    • @Chyrkov
      @Chyrkov 2 місяці тому

      Благодарю за отзыв! Рад, что было полезным!

  • @olgpotapenko2085
    @olgpotapenko2085 4 місяці тому

    Спасибо. Очень помог!

    • @Chyrkov
      @Chyrkov 2 місяці тому

      Всегда пожалуйста!

  • @ostrovmuzy
    @ostrovmuzy 4 місяці тому

    Подробно и без воды. Лайк однозначно! Спасибо за инфу! 👍👍👍

    • @Chyrkov
      @Chyrkov 2 місяці тому

      Благодарю! Рад, что нравится!

  • @АйданаЕнсетайқызы-о6с

    Разберите пожалуйста тему про стилей и их создание в фигме

    • @Chyrkov
      @Chyrkov 2 місяці тому

      вроде как было такое видео у меня на канале 😉

  • @iouliaparaskevopoulou5155
    @iouliaparaskevopoulou5155 4 місяці тому

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

    • @Chyrkov
      @Chyrkov 2 місяці тому

      спасибо за отзыв) рад что нравится!

  • @Muhammaddiyor-x4h
    @Muhammaddiyor-x4h 4 місяці тому

    Крутаааааааааа, обожаю тебя)

  • @1-dh4ji
    @1-dh4ji 5 місяців тому

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

    • @Chyrkov
      @Chyrkov 4 місяці тому

      Приветствую! Не можно, а нужно!😉

  • @impresionist
    @impresionist 5 місяців тому

    спасибо за урок!

    • @Chyrkov
      @Chyrkov 5 місяців тому

      Пожалуйста

  • @oksanaportnova3106
    @oksanaportnova3106 5 місяців тому

    Класс, спасибо, в работе помогло

    • @Chyrkov
      @Chyrkov 5 місяців тому

      Я рад 🙂

  • @assenova_
    @assenova_ 5 місяців тому

    Клаааасс! Было бы вообще круто, если бы показали как рисовать некоторые компоненты, например я могу их рисовать по своему, но там у вас написаны по другому😂 мне начинающему надо по шагово 😅😅😅

    • @Chyrkov
      @Chyrkov 5 місяців тому

      В описании к видео есть ссылка на мой курс по Фигме) записывайтесь и я там все подробно рассказываю!😉

  • @assenova_
    @assenova_ 5 місяців тому

    Спасибо

    • @Chyrkov
      @Chyrkov 5 місяців тому

      Пожалуйста!

  • @ОлександрПопсуй
    @ОлександрПопсуй 5 місяців тому

    Как в способе с авторазметкой убрать надпись Frame2 над кнопкой?

    • @Chyrkov
      @Chyrkov 5 місяців тому

      Frame2 - это название фрейма. Вы можете изменить его в слоях, нажав правой кнопкой на нужный слой, затем выбрав Rename. Если вы расположите фрейм внутри другого фрейма то название первого не будет видно в рабочей зоне

  • @Ганна-е6о
    @Ганна-е6о 5 місяців тому

    Сергей! Невероятное спасибо!! Так просто и доступно объясняете, что даже новичку в моем лице все удалось!! В понедельник сдам свою дипломную работу и точно удивлю преподавателя, ведь он такое не рассказывал😉🤗

    • @Chyrkov
      @Chyrkov 5 місяців тому

      😅 спасибо за отзыв! я очень рад! Удачи с дипломом!🤗

  • @art-sofiko2427
    @art-sofiko2427 5 місяців тому

    А как можно изменить иконку на другую в компоненте?

    • @Chyrkov
      @Chyrkov 5 місяців тому

      Это легко сделать нажав на иконку, затем swap в дочернем компоненте и выбрать другую иконку которая является сама компонентом в вашем макете. Лучше все иконки размещать на отдельном артборде или секции, так будет удобнее.

  • @art-sofiko2427
    @art-sofiko2427 5 місяців тому

    Госпаде, как долго я искала ответ на этот вопрос, огромнейшее вам спасибо!! Здоровья вам

    • @Chyrkov
      @Chyrkov 5 місяців тому

      Рад, что все получилось 🤗