- 72
- 552 215
Сергей Чирков
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 #Фреймер
มุมมอง: 3 490
วีดีโอ
Как создать счетчик лайков в Figma с помощью переменных Local Variables | Уроки Figma для начинающих
มุมมอง 3.1K11 หลายเดือนก่อน
В этом видео покажу как создать анимацию кнопки счетчика лайков в Фигме используя переменные (Local Variables) и смарт анимацию. 🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course 🎓 Вы научитесь: - создавать компоненты - делать компоненты интерактивными - создавать переменные (Local Variables) - использовать переменные (Local Variables) в прототипе - создавать анимацию ...
Что такое Figma Variables (Переменные) и как с ними работать? | Figma уроки
มุมมอง 13Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В недавнем обновлении Figma представила Variable «Переменные»! В этом видео я покажу вам, как создавать простые карточки, используя Auto Layout и Variables в Figma. 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: designsweets.co/courses/figma-course Студия: chyrkov.studio Портфолио по...
Как сделать кнопку используя свойства компонента? Figma уроки для начинающих
มุมมอง 5Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео посмотрим как создать кнопку с помощью булевых слоев компонента. Мы создадим кнопку с помощью Auto Layout, а затем переведем ее в компонент и создадим варианты компонента. Покажу как добавить интерактив в прототипе и виде ховер эффекта. Далее посмотрим в чем суть свойств компонента и как их использовать. 🔗 ...
Как сделать sticky эффект в Фигме | Figma уроки
มุมมอง 3.1Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course Недавно в Фигме было обновление раздела прототип и появился новый функционал. В этом видео покажу как создать стики (sticky) меню в прототипе в Фигме. 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course Студия: chyrkov.studio Портфолио по фото: serge...
Adobe Firefly - полный обзор! Будущее графического дизайна?
มุมมอง 1.8Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео делаю полный обзор сервиса по созданию AI изображений и графики от компании Adobe - Firefly. Это новая нейронная сеть с большим потенциалом! Посмотрим возможности сервиса, разные методики генерации изображений. 👉 Ссылка на сервис: firefly.adobe.com 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторс...
Как сделать эффект подсветки текста курсором в Фигме? | Figma уроки
มุมมอง 4.1Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом видео покажу простой и быстрый способ как создать крутой эффект подсветки курсора в Фигме, эффект "spotlight". Покажу как для этого использовать смарт анимацию. 👉 Исходник: www.buymeacoffee.com/chyrkov/e/122810 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: 👉 designsweets.co/c...
Auto Layout: Как сделать калькулятор в Фигме? | Figma уроки
มุมมอง 2.5Kปีที่แล้ว
🔥 Мой авторский курс «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
มุมมอง 27Kปีที่แล้ว
🔥 Мой авторский курс «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
มุมมอง 2.8Kปีที่แล้ว
🔥 Мой авторский курс «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.2Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом коротком видео посмотрим на то, что такое секции в Фигме и как их использовать. Секции - очень удобный инструмент для организации рабочего пространства. 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course Студия: chyrkov.studio Портфолио по фо...
Лайфхак: как быстро поменять масштаб с помощью Scale Tool? | Уроки по Figma
มุมมอง 1.4Kปีที่แล้ว
🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course В этом коротком видео покажу как использовать инструмент scale tool для быстрого изменения масштаба. Это круто работает когда нужно сделать целый пак иконок или фавиконов для сайта. 🔗 Мои ссылки: Мой канал в телеге: t.me/chyrkovfm Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma-course Студия: chyrkov....
Веб-дизайн с нуля курс для фрилансеров! Промо
มุมมอง 394ปีที่แล้ว
Веб-дизайн с нуля курс для фрилансеров! Промо
10 ЛАЙФХАКОВ по работе удалено и на фрилансе
มุมมอง 1Kปีที่แล้ว
10 ЛАЙФХАКОВ по работе удалено и на фрилансе
Как сделать мобильную версию сайта? | Уроки Figma
มุมมอง 18Kปีที่แล้ว
Как сделать мобильную версию сайта? | Уроки Figma
Микро анимации (smart animate) в Фигма: векторные червяки | Уроки по Figma
มุมมอง 3K2 ปีที่แล้ว
Микро анимации (smart animate) в Фигма: векторные червяки | Уроки по Figma
Микро анимации (smart animate) в Фигма / Custom spring | Уроки по Figma
มุมมอง 3.6K2 ปีที่แล้ว
Микро анимации (smart animate) в Фигма / Custom spring | Уроки по Figma
Как НЕ писать резюме в IT компанию или дизайн-студию?
มุมมอง 1.3K2 ปีที่แล้ว
Как НЕ писать резюме в IT компанию или дизайн-студию?
Как добавить Lottie анимацию в Фигму? | Уроки Figma
มุมมอง 4.6K2 ปีที่แล้ว
Как добавить Lottie анимацию в Фигму? | Уроки Figma
Custom spring анимация (Smart Animation) в Фигме | Обновление Figma 2022
มุมมอง 4K2 ปีที่แล้ว
Custom spring анимация (Smart Animation) в Фигме | Обновление Figma 2022
Вариативные шрифты в Фигме | Обновление Figma 2022
มุมมอง 2.6K2 ปีที่แล้ว
Вариативные шрифты в Фигме | Обновление Figma 2022
Новый Auto Layout! Обновление Фигмы 2022
มุมมอง 3.5K2 ปีที่แล้ว
Новый Auto Layout! Обновление Фигмы 2022
Сколько денег брать за логотип или сайт? Простая схема для фрилансера
มุมมอง 2K2 ปีที่แล้ว
Сколько денег брать за логотип или сайт? Простая схема для фрилансера
Микро анимация (smart animate) в Фигме - создаем музыкальный плеер
มุมมอง 14K2 ปีที่แล้ว
Микро анимация (smart animate) в Фигме - создаем музыкальный плеер
Как сделать текст по кругу в Фигме? + Смарт анимация | Figma уроки
มุมมอง 13K2 ปีที่แล้ว
Как сделать текст по кругу в Фигме? Смарт анимация | Figma уроки
Как удалить фон и вставить фото в круг в Figma? Автоматическое удаление фона за 3 секунды
มุมมอง 7K2 ปีที่แล้ว
Как удалить фон и вставить фото в круг в Figma? Автоматическое удаление фона за 3 секунды
Как сделать кнопку Фигме? Правила создания кнопки. Уроки Figma для начинающих.
มุมมอง 36K2 ปีที่แล้ว
Как сделать кнопку Фигме? Правила создания кнопки. Уроки Figma для начинающих.
Анимация слайдера в Фигме: 4 крутых приема! Smart animate | Figma уроки
มุมมอง 45K2 ปีที่แล้ว
Анимация слайдера в Фигме: 4 крутых приема! Smart animate | Figma уроки
НЕОМОРФИЗМ (neumorphism) и анимация в Фигме! Создаем эффект объема с нуля!
มุมมอง 11K2 ปีที่แล้ว
НЕОМОРФИЗМ (neumorphism) и анимация в Фигме! Создаем эффект объема с нуля!
Здравствуйте! Подскажите, пожалуйста, можно ли в бесплатной версии сделать страничку для портфолио? Чтобы потом клиентам ссылку кидать? 😊
Приветствую! Не можно, а нужно!😉
спасибо за урок!
Пожалуйста
Класс, спасибо, в работе помогло
Я рад 🙂
Клаааасс! Было бы вообще круто, если бы показали как рисовать некоторые компоненты, например я могу их рисовать по своему, но там у вас написаны по другому😂 мне начинающему надо по шагово 😅😅😅
В описании к видео есть ссылка на мой курс по Фигме) записывайтесь и я там все подробно рассказываю!😉
Спасибо
Пожалуйста!
Как в способе с авторазметкой убрать надпись Frame2 над кнопкой?
Frame2 - это название фрейма. Вы можете изменить его в слоях, нажав правой кнопкой на нужный слой, затем выбрав Rename. Если вы расположите фрейм внутри другого фрейма то название первого не будет видно в рабочей зоне
Сергей! Невероятное спасибо!! Так просто и доступно объясняете, что даже новичку в моем лице все удалось!! В понедельник сдам свою дипломную работу и точно удивлю преподавателя, ведь он такое не рассказывал😉🤗
😅 спасибо за отзыв! я очень рад! Удачи с дипломом!🤗
А как можно изменить иконку на другую в компоненте?
Это легко сделать нажав на иконку, затем swap в дочернем компоненте и выбрать другую иконку которая является сама компонентом в вашем макете. Лучше все иконки размещать на отдельном артборде или секции, так будет удобнее.
Госпаде, как долго я искала ответ на этот вопрос, огромнейшее вам спасибо!! Здоровья вам
Рад, что все получилось 🤗
Круто и просто! Спасибо!
Пожалуйста!)
Доступ для других пользователей по ссылке?
Так точно)
Сергей,много нового от вас узнаю,но как новичку,очень бы хотелось узнать как подобное аннимации правильно вписать в полноценный проект сайта. То есть как реализовать это на отдельных блоках хотя бы одностраничного сайта,но полноценного. Может у вас уже есть такой урок?
Благодарю за отзыв! Да, вы можете просмотреть мой курс по фигме, ссылка есть в описании к видео. Там есть отдельный большой раздел по анимациям.
Очень мешает дергание курсором мыши
Спасибо за комментарий)
Сергей, спасибо большое! Очень лаконично и толково объяснили для новичка. Планируете ли еще видео по Фреймеру?
Спасибо за отзыв!😊 да планирую, подписывайтесь на мой канал в телеге, чтобы не пропустить!
Дааа! Нужен курс по фреймеру)
😅 подписывайтесь на мой канал в телеге, чтобы не пропустить анонс!
Спасибо! Все понятно рассказано 👍
Спасибо за отзыв!
Спасибо., зашло..)
Огонь 🔥
Спасибо, Сергей. Как всегда - качественнейший контент. Помогли принять решение в выборе инструмента.
Спасибо) рад, что помог!
Как созданный на Framer сайт превратить в сайт на русском языке?
просто сделать весь контент на русском?😉
@@Chyrkov Framer же не воспринимает промт на русском языке
@@Chyrkov "Сейчас вам нужно перевести сайт на русский язык. Чтобы перевести текст, дважды нажмите на текст в конструкторе, где был сгенерирован сайт; копируете английский текст; заходите в переводчик, переводите текст; затем, возвращаетесь обратно в конструктор и заменяете английский текст на русский" Вот как это всё проделать? У меня не получается.
@@Chyrkov А как? он выдаёт сайт на английском даже если промт на русском .
так вы используете функцию AI? То есть хотите сгенерировать сайт с помощью встроенного ИИ? Видимо не понял ваш вопрос. Тогда да, там он только работает на английском. Но он даже на английском выдает очень примитивные макеты, я бы на вашем месте лучше рассмотрел вариант готового шаблона, если нет возможности самостоятельно нарисовать.
Приветствую! Когда можно будет увидеть курс по Framer? Очень интересная платформа, метаюсь между Framer и Tilda... )
привет! определено Фреймер! Подписывайтесь в мой канал в телеге, обязательно сообщу как запущу курс. Если интересно, могу пока дать индивидуальные занятия.
наконец кто-то объясняет четко и доступно без всякой воды
спасибо)
спасибо , емко и доходчиво . но я не владею англ. поэтому трудновато следить за рассказом , вопрос есть - а если использовать ai и генерировать сайт по промту ?
спасибо за отзыв! пробовал но это скорее маркетинговый ход, результат очень слабый и однотипный выдает. Так что скорее это просто побаловаться.
Извините, могли б вы показать нам как сделать этот лендинг который вы показали
Есть юубе видио по тильде
Можно сделать несколькими способами: заказать разработку или сделать самостоятельно на конструкторе например Фреймер (см. видео у меня на канале th-cam.com/video/GXy2qI43icI/w-d-xo.html)
Рекомендую рассмотреть Фреймер
Отличное видео про варианты и компоненты. Лучше не нашёл! Спасибо!
Спасибо! Рад, что понравилось!😉
Гениально! Браво! Огромное спасибо!
😅 пожалуйста!
К материалу вопросов нет, но ещё чуть-чуть и будет АСМР. Хотелось бы чтобы вы говорили немного по громче
спасибо! на тот момент были сложности со звуком 😉
Все очень понятно, спасибо большое за видео, очень помогло!
и вам спасибо за отзыв!
Сергей, подскажите пожалуйста как скачать десктопную версию Фреймера?
www.framer.com/downloads/ вот здесь
@@Chyrkov большое спасибо👍
@@Chyrkov большое спасибо👍
пожалуйста!
чень полезные лайфхаки , супер
рад, что было полезно!
Рахмет
👍
Добрый день, скажите пожалуйста, а на бесплатном тарифе можно загружать свои фото с компьютера в проект? у меня почему-то не получается...выбрасывает на страницу с платной подпиской(((
добрый день! скорее всего вы пытаетесь добавить слишком тяжелое и большое изображение. попробуйте добавить сжать картинку до 5мб и загрузить снова
@@Chyrkov да, спасибо! причина была в этом)))
рад, что все получилось!
Какого размера должны быть проекты и сколько в них каждый раз должно быть правок, чтобы имело смысл все эти настройки задавать
очень хороший вопрос! думаю для лендинга наверное особо нет смысла сильно заморачиваться. но думаю если это корпоративный сайт или сервис, где более 5 страниц, то переменные облегчат работу. Я сейчас работаю над проектом где более 200 компонентов и свыше 150 страниц, даже не представляю как раньше жили без переменных и дизайн системы😅
Спасибо большое. Очень помогли!
пожалуйста!😉
Дякую, круто👍
на здоров'я!😅
Сергей большое спасибо. Полезное видео по работе с Framer.
пожалуйста! Рад, что было интересно!
Ссылка Шрёдингера, она вроде есть вот тут в верхнем углу и вроде нету😆👍
🙈
Странно, а у меня не получается в фильтрах настроить привязки. Я создала текстовые фреймы, сделала так же как у Вас обозначения фильтров, делаю всё секунда в секунду, но у меня привязка срабатывает только на вариант полностью, а не не отдельный текстовый фрейм.....
нужно проверить есть привязи у текстового блока внутри фрейма
Большое спасибо) Но у меня есть вопрос, как уже ваш готовый календарь растягивать без потери диапазона?
пожалуйста! если вы все правильно собрали в Auto Layout и режим Fill тогда он будет тянуться без перестраивания.
Сергей, спасибо за труд. Всё понятно! Было полезно.
Пожалуйста) рад, что понравилось)
При нажатии на крестик в форме обратной связи, анимация переходить на главный экран в лендинге, а не закрывается, почему так?
к сожалению не понял о чем идет речь... уточните пожалуйста подробнее
У меня не работает, версия бесплатная
Дело не в версии. На бесплатном тарифе тоже должно работать. Проверьте связи. Проверьте режим анимации. Вы точно делали копию элементов а не создавали новые?
на бесплатном тарифе не можете добавить видео. все выключаем это говно
Так купи платную подписку и не мучайся )))
Спасибо! В моей первой работе вы очень сильно помогли своим видео! Удачи Вам!
Ура! Очень рад это слышать! 🤗 удачи вам в следующих проектах!
Спасибо! Очень полезно. Приятная подача информации. Спокойная.
Спасибо за отзыв☺️ рад, что все понравилось!
Очень достойный сайт и презентация. Я сам из Одессы, спасибо за такой сайт. Он достойное продолжение красоты Оперного Театра ).
Огромное спасибо за такой отзыв!😊 очень приятно!☺️
Спасибо. Познавательно
Пожалуйста! Успехов!
Анимацию можно экспериментировать на сайт в таплинк?
Вы можете экспортировать анимацию в Lottie через соотвествующий плагин.
Возможно фигма за два года обновилась, но у меня ничего не вышло, хотя параметры вроде такие же как и тут, но никакого плавного перехода нет
Проверьте что вы копировали фреймы с элементами а не делали их заново и делали изменения именно в копии. Проверьте режим в анимации, должен быть smart animate.
Спасибо за дополнительную информацию по работе с клиентами!)
Всегда пожалуйста!☺️ успехов!
Спасибо, вы супер!!
Спасибо ☺️