Сергей Оршак
Сергей Оршак
  • 12
  • 4 234
Как ПРАВИЛЬНО работать с Компонентами в Figma. Подробный Урок
Бесплатное обучение ux/ui: t.me/+a_5bY49y_DU1YjFi
Консультации и наставничество в веб-дизайне - t.me/orshaks
Взрывной пак дизайнера (30000+ материалов): t.me/orshak_bot?start=56906
В этом видео я хочу подробно показать как правильно надо работать с компонентами, вариантами и их свойствами. Components, variants and properties. Как правильно создавать ui-kit и как с ним работать
00:00 Вступление
00:18 Что такое компоненты в figma. Components
01:15 Как создать компонент
01:55 Переходим к том как работать с компонентами в ui-китах
16:24 Заключение
Мой телеграм-канал - t.me/+RxL5wSKpJoE0NGVi
Мой VK - club227442342
Behance - www.behance.net/orshakss
Дизайн и разработка сайтов - clck.ru/3DbAyd
Переглядів: 270

Відео

Разбор Работы Подписчика по ВЕБ-ДИЗАЙНУ. Исправляю Ошибки
Переглядів 21714 днів тому
Бесплатное обучение ux/ui: t.me/ a_5bY49y_DU1YjFi Взрывной пак дизайнера (30000 материалов): t.me/orshak_bot?start=56906 В этом видео разбираю работу по веб-дизайну, которую мне прислал подписчик и исправляю явные ошибки, которые можно быстро поправить, чтобы работа стала чище и аккуратнее. Если тебе тоже нужна помощь в дизайне - пиши мне в лс в тг : t.me/orshaks 00:00 Вступление 00:23 Анализ р...
Дизайн Сайта с помощью Figma AI. БУДУЩЕЕ ВЕБ-ДИЗАЙНА? (1 часть)
Переглядів 36021 день тому
Бесплатное обучение ux/ui: t.me/ a_5bY49y_DU1YjFi Взрывной пак дизайнера (30000 материалов): t.me/orshak_bot?start=56906 Как использовать искусственный интеллект от Figma в дизайне сайтов? В этом видео я на практике протестирую новый инструмент Figma AI, делая дизайн сайта для интернет-магазина. 00:00 Вступление 00:34 Про Figma AI 02:02 Приступаем к дизайну 10:02 Смотрим как работает перевод те...
Auto Layout в Figma. Как Дизайнить в 10х Раз Быстрее
Переглядів 727Місяць тому
Бесплатное обучение ux/ui: t.me/ a_5bY49y_DU1YjFi Взрывной пак дизайнера (30 000 материалов): t.me/orshak_bot?start=56906 Если ты хочешь владеть черным поясом по автолейаутам в figma, то прежде всего тебе необходимо понять, что это за инструмент и зачем он нужен. В этом видео я не буду делать акцент на том как сделать настраивать автолейаут, а хочу показать тебе насколько быстро с его помощью м...
Анимация сайта по скроллу в фигме. Параллакс эффект. Обучение Figma (+ Файл для практики)
Переглядів 724Місяць тому
Бесплатное обучение ux/ui: t.me/ a_5bY49y_DU1YjFi Взрывной пак дизайнера (30000 материалов): t.me/orshak_bot?start=56906 Чтобы продавать свой дизайн дороже, важно уметь его презентовать, чтобы вызывать вау-эффект у клиентов. Самое простое, что можно сделать - это добавить в прототип анимацию. На этом уроке покажу как просто делается анимация по скроллу или параллакс, другими словами. Просто, за...
Секреты цвета в дизайне. Правило 60-30-10
Переглядів 659Місяць тому
Бесплатное обучение ux/ui: t.me/ a_5bY49y_DU1YjFi В этом видео я покажу, как правильно использовать цвета для создания гармоничных и эффективных UX/UI проектов с помощью правила 60-30-10. Вы поймете как балансировать доминирующие, второстепенные и акцентные цвета, чтобы повысить визуальную привлекательность и улучшить пользовательский опыт Мой телеграм-канал - t.me/orshks Дизайн и разработка са...
Адаптивные карточки в Figma. Советы Figma
Переглядів 4232 місяці тому
Бесплатное обучение ux/ui: t.me/ a_5bY49y_DU1YjFi В этом видеоролике показываю как с помощью автолейаутов собрать полностью адаптивную карточку, которая будет перестраиваться под все виды разрешений. Мой телеграм-канал - t.me/orshks Дизайн и разработка сайтов - t.me/orshaks #figmatutorial #webdesign #фигма #figma #figmatips #вебдизайн #типсы
Сложные градиенты в Figma. Mesh gradients
Переглядів 1692 місяці тому
В видео показываю как быстро создавать сложные градиенты. Мой телеграм-канал - t.me/orshks Дизайн и разработка сайтов - t.me/orshaks #figmatutorial #webdesign #фигма #figma #gradient #вебдизайн #градиент
Лучшие плагины для Figma в 2024
Переглядів 2212 місяці тому
В этом видеоролике я покажу вам свой топ плагинов для фигмы, которыми я пользуюсь чаще всего. Пишите в комментариях какие плагины вам понравились и какие не были упомянуты. Мой телеграм-канал - t.me/orshks Дизайн и разработка сайтов - t.me/orshaks #figmaplugins #figmatutorial #webdesign #фигма #figma #plugins #вебдизайн
Продвинутое прототипирование в фигме с помощью переменнтых. Figma. Variables.
Переглядів 2562 місяці тому
Продвинутое прототипирование в фигме с помощью переменных и условий ( файл для практики в комментариях ). Мой телеграм-канал - t.me/orshks Дизайн и разработка сайтов - t.me/orshaks #figmaprototype #figmatutorial #webdesign #фигма #figma #прототип #вебдизайн
Адаптивные таблицы в Figma. Responsive table
Переглядів 1392 місяці тому
Как создать адаптивную таблицу в Фигме с помощью автолейаутов и компонентов за пару минут. Мой телеграм-канал - t.me/orshks Дизайн и разработка сайтов - t.me/orshaks #figmatutorial #webdesign #фигма #figma #вебдизайн #tabledesign
Обновление Figma. Новый интерфейс. Figma UI3
Переглядів 1263 місяці тому
Смотрим как новое обновление Figma UI3 изменило интерфейс и улучшило пользовательский опыт Мой телеграм-канал - t.me/orshks Дизайн и разработка сайтов - t.me/orshaks #figmatutorial #webdesign #фигма #figma #вебдизайн

КОМЕНТАРІ

  • @НатаФ-к7ц
    @НатаФ-к7ц День тому

    Классное видео! Очень полезно для новичков в дизайне обращать внимание на такие мелочи. Подробно и понятно всё объяснили, хочется повторить) Давайте побольше разборов! 😊

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

      @@НатаФ-к7ц подписывайся в мой тг, будут разборы, как раз хотел в след пн хочу объявить о сборе работ для разбора))

    • @НатаФ-к7ц
      @НатаФ-к7ц День тому

      @@sergorshak Уже подписалась) Спасибо!

  • @JuliaRobots
    @JuliaRobots 5 днів тому

    Спасибо!!!

  • @crazyrhydon
    @crazyrhydon 5 днів тому

    Спасибо 👍

  • @Elfmanko
    @Elfmanko 5 днів тому

    Класс!

  • @GvardiiMayor
    @GvardiiMayor 11 днів тому

    Дай бог тебе здоровья Сенсей

  • @Анна-ю6х2ф
    @Анна-ю6х2ф 16 днів тому

    Спасибо за подробное объяснение, Сергей! Жду новые видео

    • @sergorshak
      @sergorshak 16 днів тому

      @@Анна-ю6х2ф благодарю за приятный отзыв ❤️

  • @Red-sb3ed
    @Red-sb3ed 16 днів тому

    И после создания сайта как его запустить на просторы интернета и как подключить домен?

    • @sergorshak
      @sergorshak 16 днів тому

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

  • @Red-sb3ed
    @Red-sb3ed 16 днів тому

    Отлично но как это будет работать в телефоне планшете или после создания сайта он автоматически будет работать.

    • @sergorshak
      @sergorshak 16 днів тому

      Информационный блок переместится под фотографии. В разработка это делается с помощью свойства дисплей флекс

    • @Red-sb3ed
      @Red-sb3ed 16 днів тому

      Спасибо большое за информацию

  • @TheMxdn
    @TheMxdn 17 днів тому

    Крутой ролик. Дизайнить на автолейаутах оно конечно правильно с точки зрения дальнейшей верстки, но ведь не быстрее. Без автолейаутов такой сайт можно сверстать за 5 минут вместо 15. А ведь это просто механическое копирование. А в процессе дизайна, вместо того чтоб думать о «композиции, цвете и прочем» тебе приходится думать, как сложить это все в автолейаут, ничего не сломав, жанглируя правками от заказчика. И чем больше элементов, тем дольше верстка. Автолейаут крутая штука, но делать все только через него - это сомнительная затея. С таким же успехом можно и сразу верстать html =)

    • @sergorshak
      @sergorshak 16 днів тому

      очень хороший комментарий. Задача дизайнера - это не только креатив, но и скорость. Скорость - это упрощение и автоматизация. Автоматизация - это автолейаут.) Главная ошибка твоего тезиса кроется в том, что ты рассуждаешь, что дизайнеру приходится думать как сложить все в автолейаут. Если ты постоянно будешь им пользоваться, то очень скоро ты перестанешь думать как правильно компоновать элементы, все это будет делаться на автомате, а будешь как раз обращать внимание на цвета, композицию и прочее вместо того, чтобы вручную выравнивать элементы, отмерять и сравнивать расстояния и и там еще можно кучу всего такого наскребсти)) Все это за тебя будет делать АЛ. А насчет HTML, Ну если ты умеешь и уровень дизайна позволяет, то можно и сразу на штмл)). Очень много таких примеров. тот же самый веблоу был создан вообще дизайнерами для того, чтобы не тратить время на фигму и сразу дизайнить в среде разработки, но это уже совсем другой уровень.

    • @sergorshak
      @sergorshak 16 днів тому

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

  • @meowkitten-1
    @meowkitten-1 18 днів тому

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

  • @forest5148
    @forest5148 20 днів тому

    У меня искусственного интеллекта в фигме почему-то нет. Может для этого надо приобретать платный тариф?

    • @sergorshak
      @sergorshak 20 днів тому

      Пока что не все выдали. Надеемся, что скоро подвезут всем

  • @ОльгаСуслова-ы8е

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

  • @Анна-ю6х2ф
    @Анна-ю6х2ф 24 дні тому

    Сергей, спасибо за познавательное видео и за Пак

  • @sergorshak
    @sergorshak 26 днів тому

    Ссылка на файл для самопроверки : www.figma.com/design/dpGvxYY4EE2kAVDpOglkcs/%D1%84%D0%B0%D0%B9%D0%BB-%D0%B4%D0%BB%D1%8F-%D1%81%D0%B0%D0%BC%D0%BE%D0%BF%D1%80%D0%BE%D0%B2%D0%B5%D1%80%D0%BA%D0%B8?node-id=0-1&t=32OTtbWBwqUFKYU2-1

  • @АннаХарламова-п7у
    @АннаХарламова-п7у Місяць тому

    Отличное видео. Лаконичное. Без "лишней воды". Очень круто, что рассмотрено при этом несколько примеров. Спасибо Вам.

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

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

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

    Спасибо большое все понятно )👍

  • @Анна-ю6х2ф
    @Анна-ю6х2ф Місяць тому

    Сергей, спасибо за подробное обучающее видео! Всё очень доступно

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

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

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

      Благодарю, очень приятно читать такие комментарии

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

    Класс!

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

    Спасибо, хотел бы еще уточнить, при разработке веб сайта тоже необходимо учитывать это правило или там немного другие стандарты нежели чем в mobile apps?

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

      Это правило вообще из дизайна интерьеров))) Но оно отлично вписывается в канву дизайна интерфейсов. С его помощью можно добиться баланса в цвете как приложения так и сайта. Оно учит расставлять акценты правильно.

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

    Спасибо, подписалась ❤

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

      Благодарю за доверие❤‍🔥

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

    Молодец, грамотно раскидал

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

    Спасибо большое! А как скачать фигму для Рф...?

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

      Если я правильно понял вопрос, то необходимо перейти на сайт фигмы в раздел downloads, вот ссылка: www.figma.com/downloads/ необходимо скачать Desktop app. Выбираем нужную ос мак или винда и нажимаем на ссылку. После этого скачивается установщик приложения =))

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

      @@sergorshak Спасибо большое 🥺🥺🥺

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

    Спасибо! Все понятно и очень круто получилось. И спасибо за фаил, очень удобно!

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

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

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

      @@sergorshak Я думаю было бы классно чередовать условно теоретические ролики и практические. Так вы сможете заинтересовать большую аудиторию. Для новичков важно увидеть многофункциональность фигмы и получить базовые навыки для работы в ней. Для полноценных джунов с неплохим опытом (джун+, к таким бы отнес себя) или даже мидлов было бы интересно послушать полноценные теоретические выкладки по правилам, принципам, процессам в сфере.

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

      @@s_shaimus_s3515 хорошо, спасибо за рекомендацию, теоретические про принципы, правила и прочее тоже будут

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

      Спасибо! Очень доступно и понятно

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

      @@margarina821 Благодарю😍

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

    Супер видео. Многое объяснили!!

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

      @@Elfmanko спасибо. Какие еще темы про фигму интересно бы было посмотреть?

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

      @@sergorshak еще про компоненты и варианты? Там сложно довольно

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

      @@Elfmanko Хорошо, понял, спасибо. Тогда сначала сделаю урок про автолейауты и потом про компоненты, чтобы не нарушать последовательность

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

    Ссылка на файл с материалами для практики : www.figma.com/design/gx7w1TO3lARMZ30kHuJJW7/%D0%9F%D0%B0%D1%80%D0%B0%D0%BB%D0%B0%D0%BA%D1%81-(Copy)?node-id=0-1&t=0z77bVYgcwzWima0-1

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

    Спасибо!

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

      Рад стараться 🙂

  • @ОльгаСуслова-ы8е
    @ОльгаСуслова-ы8е Місяць тому

    Очень полезное и доходчивое видео,огромное спасибо,Сергей

  • @СветланаКарпова-ц3и

    Спасибо за урок, идеально получилось с первого раза;

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

      @@СветланаКарпова-ц3и супер, я очень рад!))

  • @Анна-ю6х2ф
    @Анна-ю6х2ф Місяць тому

    Класс! Вообще другое дело!

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

      @@Анна-ю6х2ф спасибо за оценку 🫶

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

    Спасибо Сергей, эта тема для меня сложная

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

      @@DjEugeny будет еще много видео про цвета, палитры и тд. Спасибо за комментарий

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

    Спасибо, Сергей! Твои уроки - это всегда польза. Желаю ещё больше твоей аудитории, а то мало лайков.

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

      @@DjEugeny Евгений, благодарю! Твоя поддержка для меня очень ценна!

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

    Ссылка на файл с материалами для закрепления урока и самопроверки: clck.ru/3DJrZ7

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

    Ещё интересно по теме видео, какие нейросети и как используете в конкретных проектах?

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

      Хорошо, сделаю. Активно пользуюсь миджорни и чатгпт иногда snapedit для улучшения качества фото. Недавно обнаружил, что есть бесплатная нейронка для генерации картинок FLUX, и она в некоторых задачах даже лучше чем миджорни. Если интересно - обязательно сниму видос и на практике покажу, что действительно некоторые задачи можно запросто делать с помощью бесплатных нейронок

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

      @@sergorshak да, интересно. Активно пользовался Рекрафт для создания картинок к презентациям, ещё параллели но Идеограм. А Флакс есть теперь во Фрипик, там тоже классно получается

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

    Спасибо, полезно. Нашёл тебя по рекомендации в Ютубу, подписался.

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

      Спасибо за доверие! Буду стараться

  • @Анна-ю6х2ф
    @Анна-ю6х2ф 2 місяці тому

    Четко, по делу и без воды! Спасибо

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

      Спасибо, стараюсь!

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

    Спасибо за видео, пойду по устанавливаю, протестирую плагины

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

      @@DjEugeny здорово! Скоро будут видосы, где применяю плагины на практике

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

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

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

      Спасибо за приятную обратную связь

  • @Анна-ю6х2ф
    @Анна-ю6х2ф 2 місяці тому

    Спасибо Сергей! Видео очен полезное!

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

    Сделай дубликат практического файла и закрепи новые знания на практике : clck.ru/3Cpxqt

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

    Приветствую ! Фигма автоматически обновляется ? Или необходимо самостоятельно обновить ?

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

      Можно подать заявку, нажав на вопросик в правом нижнем углу интерфейса и выбрать "записаться в вайт лист". Но последнее время уже многим начало потихоньку прилетать обновление, поэтому рекомендую просто немного подождать))) Должно скоро обновиться уже у всех

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

      @@sergorshak БЛАГОДАРЮ

  • @Анна-ю6х2ф
    @Анна-ю6х2ф 2 місяці тому

    Это реально быстро получается , если использовать автоматизацию! Спасибо большое

  • @ОльгаСуслова-ы8е
    @ОльгаСуслова-ы8е 3 місяці тому

    Спасибо,полезная информация

  • @Анна-ю6х2ф
    @Анна-ю6х2ф 3 місяці тому

    Круто! Спасибо за обзор