- 72
- 606 021
Сергей Чирков
Ukraine
เข้าร่วมเมื่อ 27 ก.ย. 2009
Обучающие видео-уроки по веб-дизайну, UX/UI, Figma и не только.
Всем привет!👋 Меня зовут Сергей Чирков, основатель и креативный директор дизайн-студии CHYRKOV studio. Увлекаюсь фотографией и путешествую. Еще я преподаю веб-дизайн и Figma.
На этом канале, хочу делиться с вами своими видео зарисовками, полезными лайф-хаками по веб-дизайну и работе Figma.
Всем мира! ❤️
Всем привет!👋 Меня зовут Сергей Чирков, основатель и креативный директор дизайн-студии CHYRKOV studio. Увлекаюсь фотографией и путешествую. Еще я преподаю веб-дизайн и Figma.
На этом канале, хочу делиться с вами своими видео зарисовками, полезными лайф-хаками по веб-дизайну и работе Figma.
Всем мира! ❤️
Создай свой сайт за 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 #Фреймер
💥 Создай свой сайт в 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 #Фреймер
มุมมอง: 6 861
วีดีโอ
Как создать счетчик лайков в Figma с помощью переменных Local Variables | Уроки Figma для начинающих
มุมมอง 3.6Kปีที่แล้ว
В этом видео покажу как создать анимацию кнопки счетчика лайков в Фигме используя переменные (Local Variables) и смарт анимацию. 🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course 🎓 Вы научитесь: - создавать компоненты - делать компоненты интерактивными - создавать переменные (Local Variables) - использовать переменные (Local Variables) в прототипе - создавать анимацию ...
Что такое Figma Variables (Переменные) и как с ними работать? | Figma уроки
มุมมอง 16Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В недавнем обновлении Figma представила Variable «Переменные»! В этом видео я покажу вам, как создавать простые карточки, используя Auto Layout и Variables в Figma. 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: designsweets.co/courses/figma-course Студия: chyrkov.studio Портфолио по...
Как сделать кнопку используя свойства компонента? Figma уроки для начинающих
มุมมอง 6Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео посмотрим как создать кнопку с помощью булевых слоев компонента. Мы создадим кнопку с помощью Auto Layout, а затем переведем ее в компонент и создадим варианты компонента. Покажу как добавить интерактив в прототипе и виде ховер эффекта. Далее посмотрим в чем суть свойств компонента и как их использовать. 🔗 ...
Как сделать sticky эффект в Фигме | Figma уроки
มุมมอง 3.6Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course Недавно в Фигме было обновление раздела прототип и появился новый функционал. В этом видео покажу как создать стики (sticky) меню в прототипе в Фигме. 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course Студия: chyrkov.studio Портфолио по фото: serge...
Adobe Firefly - полный обзор! Будущее графического дизайна?
มุมมอง 2Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео делаю полный обзор сервиса по созданию AI изображений и графики от компании Adobe - Firefly. Это новая нейронная сеть с большим потенциалом! Посмотрим возможности сервиса, разные методики генерации изображений. 👉 Ссылка на сервис: firefly.adobe.com 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторс...
Как сделать эффект подсветки текста курсором в Фигме? | Figma уроки
มุมมอง 4.6Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео покажу простой и быстрый способ как создать крутой эффект подсветки курсора в Фигме, эффект "spotlight". Покажу как для этого использовать смарт анимацию. 👉 Исходник: www.buymeacoffee.com/chyrkov/e/122810 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: 👉 designsweets.co/c...
Auto Layout: Как сделать калькулятор в Фигме? | Figma уроки
มุมมอง 2.8Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео покажу как создать калькулятор в Figma с помощью функции Auto Layout в стиле неоморфизма. Еще покажу как создать интерактивный компонент кнопки и настроить прототип с использованием смарт-анимации. 👉 Исходник: www.buymeacoffee.com/chyrkov/e/121042 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторск...
Как сделать анимацию по движению курсора в Фигме? | Уроки по Figma
มุมมอง 6Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео покажу как создать классную анимированную заставку в Фигме используя интерактивный компоненты и смарт анимацию. Сделаем эффект отслеживания курсора. 🎄Исходник: www.buymeacoffee.com/chyrkov/e/108590 👉 Другие полезные видео: th-cam.com/video/2Jq2nxBiVMs/w-d-xo.html Микро - анимации (smart animate) в Фигма: ве...
Как добавить видео в Фигму? 3 крутых примера анимации видео галерей! | Уроки Figma
มุมมอง 31K2 ปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео посмотрим как добавлять видео в проект в Фигме на примере создания трех видео галерей. А еще сделаем крутую анимацию в прототипе! 👉 Бесплатный доступ к исходнику - www.buymeacoffee.com/chyrkov/e/107557 💿 Скачать бесплатно Handbrake - bit.ly/3FEb6EA 🎥 Другие полезные видео: th-cam.com/video/C0qo3gsHjkA/w-d-x...
Как сделать обложку проекта в Фигме | Уроки Figma
มุมมอง 3K2 ปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео покажу как создать обложку для вашего проекта в Фигме, чтобы добавить ему ценности и красиво презентовать ссылку клиенту. 🎥 Другие полезные видео: th-cam.com/video/uTzuOIUGy5I/w-d-xo.html - Что такое секции? th-cam.com/video/i4114UpOcVk/w-d-xo.html - 10 лайфхаков по работе удаленно th-cam.com/video/-wXtN31-...
Что такое секции (sections) в Фигме? Как использовать секции?| Уроки Figma
มุมมอง 4.6K2 ปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом коротком видео посмотрим на то, что такое секции в Фигме и как их использовать. Секции - очень удобный инструмент для организации рабочего пространства. 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course Студия: chyrkov.studio Портфолио по фо...
Лайфхак: как быстро поменять масштаб с помощью Scale Tool? | Уроки по Figma
มุมมอง 1.6K2 ปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом коротком видео покажу как использовать инструмент scale tool для быстрого изменения масштаба. Это круто работает когда нужно сделать целый пак иконок или фавиконов для сайта. 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course Студия: chyrkov....
Веб-дизайн с нуля курс для фрилансеров! Промо
มุมมอง 4042 ปีที่แล้ว
Веб-дизайн с нуля курс для фрилансеров! Промо
10 ЛАЙФХАКОВ по работе удалено и на фрилансе
มุมมอง 1K2 ปีที่แล้ว
10 ЛАЙФХАКОВ по работе удалено и на фрилансе
Как сделать мобильную версию сайта? | Уроки Figma
มุมมอง 20K2 ปีที่แล้ว
Как сделать мобильную версию сайта? | Уроки Figma
Микро анимации (smart animate) в Фигма: векторные червяки | Уроки по Figma
มุมมอง 3.3K2 ปีที่แล้ว
Микро анимации (smart animate) в Фигма: векторные червяки | Уроки по Figma
Микро анимации (smart animate) в Фигма / Custom spring | Уроки по Figma
มุมมอง 4K2 ปีที่แล้ว
Микро анимации (smart animate) в Фигма / Custom spring | Уроки по Figma
Как НЕ писать резюме в IT компанию или дизайн-студию?
มุมมอง 1.3K2 ปีที่แล้ว
Как НЕ писать резюме в IT компанию или дизайн-студию?
Как добавить Lottie анимацию в Фигму? | Уроки Figma
มุมมอง 5K2 ปีที่แล้ว
Как добавить Lottie анимацию в Фигму? | Уроки Figma
Custom spring анимация (Smart Animation) в Фигме | Обновление Figma 2022
มุมมอง 4.4K2 ปีที่แล้ว
Custom spring анимация (Smart Animation) в Фигме | Обновление Figma 2022
Вариативные шрифты в Фигме | Обновление Figma 2022
มุมมอง 2.7K2 ปีที่แล้ว
Вариативные шрифты в Фигме | Обновление Figma 2022
Новый Auto Layout! Обновление Фигмы 2022
มุมมอง 3.7K2 ปีที่แล้ว
Новый Auto Layout! Обновление Фигмы 2022
Сколько денег брать за логотип или сайт? Простая схема для фрилансера
มุมมอง 2.1K2 ปีที่แล้ว
Сколько денег брать за логотип или сайт? Простая схема для фрилансера
Микро анимация (smart animate) в Фигме - создаем музыкальный плеер
มุมมอง 16K2 ปีที่แล้ว
Микро анимация (smart animate) в Фигме - создаем музыкальный плеер
Как сделать текст по кругу в Фигме? + Смарт анимация | Figma уроки
มุมมอง 14K2 ปีที่แล้ว
Как сделать текст по кругу в Фигме? Смарт анимация | Figma уроки
Как удалить фон и вставить фото в круг в Figma? Автоматическое удаление фона за 3 секунды
มุมมอง 7K2 ปีที่แล้ว
Как удалить фон и вставить фото в круг в Figma? Автоматическое удаление фона за 3 секунды
Как сделать кнопку Фигме? Правила создания кнопки. Уроки Figma для начинающих.
มุมมอง 39K3 ปีที่แล้ว
Как сделать кнопку Фигме? Правила создания кнопки. Уроки Figma для начинающих.
Анимация слайдера в Фигме: 4 крутых приема! Smart animate | Figma уроки
มุมมอง 48K3 ปีที่แล้ว
Анимация слайдера в Фигме: 4 крутых приема! Smart animate | Figma уроки
НЕОМОРФИЗМ (neumorphism) и анимация в Фигме! Создаем эффект объема с нуля!
มุมมอง 11K3 ปีที่แล้ว
НЕОМОРФИЗМ (neumorphism) и анимация в Фигме! Создаем эффект объема с нуля!
У Вас очень крутой контент. Спасибо Вам огромное за доступную информацию! Это очень здорово!
Спасибо Вам большое, Сергей! Очень нужные фишечки! 🙏
Привет, есть вопрос, буду очень признателен если поможешь, учусь сейчас работать в framer. И я так понял политика немного изменилась не понимаю на форумах все пишут что через quick action можно было в разделе ai найти generation page но его сейчас там нет, так вот вопрос, его перенесли в другой раздел или вырезали из бесплатной версии? И если вырезали то у меня откроется доступ к этой функции через подписку mini?
спасибо за ваш труд
ок
Спасибо! Четко и понятно!
Зачем так сильно много говорить в начале видео?
Я люблю поговорить на темы которые мне интересны. Если у вас нет терпения, всегда можно перемотать 😉
Це реально корисне відео!
Дуже дякую!!😉
Большое спасибо, всё понятно. Можно видео с большим углублением на эффекты? Хочется знать как можно создать анимированые картинки которые будут бегущей строкой на странице, а если ещё они будут "кружится пока бегут" вообще супер. И как работать с общим фоном? Не получается его сделать мягко прозрачным
Возможно в будущем сделаю))
Потрясающе просто и понятно, Вы очень хороший учитель, спасиюо большое!
Благодарю вас за отзыв! Очень приятно!
круто!) Огромное спасибо)))
Пожалуйста!
Очень хорошее видео, всё подробно, понятно 👌
Спасибо за отзыв! Рад, что было полезно!
сколько стоят курсы по фигме
В описании к видео есть ссылка на мой подробный курс по Фигме. Вся информация доступна по ссылке.
Сергей у вас какой интерфейс в фигме'старый или новый?
новый интерфейс Фимы вышел летом 2024, данное видео опубликовано намного раньше. В видео старый интерфейс.
Бургер и крестик у меня получилмя а пред.нет
так сложно понять, попробуйте еще раз создать элемент, четко по моему видео.
А отдельные курсы по анимации в фигме у вас есть?
да есть, ссылка в описание к видео. Там подробный курс.
я правильно понимаю, что Вы решили написать свою фамилию "Чирков" не Chirkov, а Chyrkov, что можно невольно прочитать как Чурков? :)
Со знание английского вы никогда так не прочитаете =)
@Chyrkov прочитаю, ещё как прочитаю, понятно, что по английски это будет неверно, однако это буквально русская У написана ))
Спасибо большое,пожалуй,самая лучшая информация о работе с Framer!
Благодарю! Рад, что было полезным
Переходите на Платформу что ли .... Пожалуйста! Тут вааащщще не грузит
Не понимаю о чем вы. Переходить никуда не планирую.
Lora Ways
🤖
Супер! Спасибо!❤
пожалуйста!)
Stacy Fort
🤖
Отличное приложение. А никак нельзя перенести сайт на свой хостинг?
Нет) вы работаете в этой программе и они предоставляют вам хостинг. Они на этом зарабатывают. В этом есть и плюс и минус конечно.
@@Chyrkov Спасибо. Вообще, я в курсе, что они так делают. Просто подумала, а вдруг )))).
Спокойно, наглядно, понятно - супер! Удобно освежать информацию в памяти Спасибо за такую ненавязчивую музыку
Благодарю за отзыв! Рад, что было полезным!
Спасибо. Очень помог!
Всегда пожалуйста!
Подробно и без воды. Лайк однозначно! Спасибо за инфу! 👍👍👍
Благодарю! Рад, что нравится!
Разберите пожалуйста тему про стилей и их создание в фигме
вроде как было такое видео у меня на канале 😉
Очень хорошая подача, буду пробовать! Спасибо большое!!
спасибо за отзыв) рад что нравится!
Крутаааааааааа, обожаю тебя)
❤️
Здравствуйте! Подскажите, пожалуйста, можно ли в бесплатной версии сделать страничку для портфолио? Чтобы потом клиентам ссылку кидать? 😊
Приветствую! Не можно, а нужно!😉
спасибо за урок!
Пожалуйста
Класс, спасибо, в работе помогло
Я рад 🙂
Клаааасс! Было бы вообще круто, если бы показали как рисовать некоторые компоненты, например я могу их рисовать по своему, но там у вас написаны по другому😂 мне начинающему надо по шагово 😅😅😅
В описании к видео есть ссылка на мой курс по Фигме) записывайтесь и я там все подробно рассказываю!😉
Спасибо
Пожалуйста!
Как в способе с авторазметкой убрать надпись Frame2 над кнопкой?
Frame2 - это название фрейма. Вы можете изменить его в слоях, нажав правой кнопкой на нужный слой, затем выбрав Rename. Если вы расположите фрейм внутри другого фрейма то название первого не будет видно в рабочей зоне
Сергей! Невероятное спасибо!! Так просто и доступно объясняете, что даже новичку в моем лице все удалось!! В понедельник сдам свою дипломную работу и точно удивлю преподавателя, ведь он такое не рассказывал😉🤗
😅 спасибо за отзыв! я очень рад! Удачи с дипломом!🤗
А как можно изменить иконку на другую в компоненте?
Это легко сделать нажав на иконку, затем swap в дочернем компоненте и выбрать другую иконку которая является сама компонентом в вашем макете. Лучше все иконки размещать на отдельном артборде или секции, так будет удобнее.
Госпаде, как долго я искала ответ на этот вопрос, огромнейшее вам спасибо!! Здоровья вам
Рад, что все получилось 🤗
Круто и просто! Спасибо!
Пожалуйста!)
Доступ для других пользователей по ссылке?
Так точно)
Сергей,много нового от вас узнаю,но как новичку,очень бы хотелось узнать как подобное аннимации правильно вписать в полноценный проект сайта. То есть как реализовать это на отдельных блоках хотя бы одностраничного сайта,но полноценного. Может у вас уже есть такой урок?
Благодарю за отзыв! Да, вы можете просмотреть мой курс по фигме, ссылка есть в описании к видео. Там есть отдельный большой раздел по анимациям.
Очень мешает дергание курсором мыши
Спасибо за комментарий)
Сергей, спасибо большое! Очень лаконично и толково объяснили для новичка. Планируете ли еще видео по Фреймеру?
Спасибо за отзыв!😊 да планирую, подписывайтесь на мой канал в телеге, чтобы не пропустить!
Дааа! Нужен курс по фреймеру)
😅 подписывайтесь на мой канал в телеге, чтобы не пропустить анонс!
Спасибо! Все понятно рассказано 👍
Спасибо за отзыв!
Спасибо., зашло..)
Огонь 🔥
Спасибо, Сергей. Как всегда - качественнейший контент. Помогли принять решение в выборе инструмента.
Спасибо) рад, что помог!
Как созданный на Framer сайт превратить в сайт на русском языке?
просто сделать весь контент на русском?😉
@@Chyrkov Framer же не воспринимает промт на русском языке
@@Chyrkov "Сейчас вам нужно перевести сайт на русский язык. Чтобы перевести текст, дважды нажмите на текст в конструкторе, где был сгенерирован сайт; копируете английский текст; заходите в переводчик, переводите текст; затем, возвращаетесь обратно в конструктор и заменяете английский текст на русский" Вот как это всё проделать? У меня не получается.
@@Chyrkov А как? он выдаёт сайт на английском даже если промт на русском .
так вы используете функцию AI? То есть хотите сгенерировать сайт с помощью встроенного ИИ? Видимо не понял ваш вопрос. Тогда да, там он только работает на английском. Но он даже на английском выдает очень примитивные макеты, я бы на вашем месте лучше рассмотрел вариант готового шаблона, если нет возможности самостоятельно нарисовать.
Приветствую! Когда можно будет увидеть курс по Framer? Очень интересная платформа, метаюсь между Framer и Tilda... )
привет! определено Фреймер! Подписывайтесь в мой канал в телеге, обязательно сообщу как запущу курс. Если интересно, могу пока дать индивидуальные занятия.
наконец кто-то объясняет четко и доступно без всякой воды
спасибо)