Figma Tutorial in 13 minutes for web designers and web developers
HTML-код
- Опубликовано: 9 июн 2024
- Best Free UI Design Platform Wondershare Mockitt: bit.ly/2UwHqFu
A short guide: how to use Figma. I will answer the main questions and show you how to use the program in 13 minutes.
Oficial Website Figma - www.figma.com/
______________
Frontend Book - tpverstak.ru/frontendbook
Ask a question to a front-end developer for free - frontendhelp.me/ru
______________
Web - tpverstak.ru
VK - tpverstak
Instagram - / tpverstak
Telegram - t.me/tpverstak
Telegram Chat - t.me/tpverstakchat
______________
Courses and Marathons - tpverstak.ru/courses/
Feedback - topic-149247708_35960122
#ityoutubersru
🔥 Бесплатный интенсив по веб-разработке: frontendblok.com/intensives/start
как зарегистрироваться на интенсив?
Стоило упомянуть самое главное, что есть раздел именно для верстальщиков - "Code" (справа в панельке где информация о блоке), а также стоило рассказать не о дизайнерских, а инструментах для верстки, вы же так себя и позиционируете..., как верстальщик. Ещё один момент где всякие фишки как настроить полотно для верстальщика ? Где полезные дополнение ? Короче есть повод запилить ещё 1 видосик по Фигме). К сожалению мне пришлось самому во всём этом разбиратся.
Ну и как? Разобрался? 🙂
Спасибо, самая полезная информация на этой стринице
4 года назад еще не было таких фич если что
Благодарю за краткий курс по ликбезу. Информативно, кратко и всё по сути.
Очень полезное видео. Причем, урока такого про фигму такого хорошего качества я не смог найти. Спасибо автору.
Класс! Спасибо не только за инфу, но и за грамотную подачу! 👍👍👍
Спасибо большое за такой ускоренный, но очень информативный обзор!
Отличный урок, подробное объяснение, все показываемые действия озвучены просто, ясно, легко! 👍
Спасибо, уже пользуюсь фигмой месяц, но некоторые мелкие фишки от видео узнал, спасибо! Все коротко и ясно!
❤️Спасибо, оказывается это не так уж сложно нежели я думал.❤️👍🏻
Спасибо! Отличное руководство! 👍
😊😊😊
Равнозначный круг с равными сторонами =))) типичный верстальщик =) А вообще приятный спикер. Все поделу. Лайк
Да, про круг сильно конечно 😀
=)
Хейтеры которые говорят что слишком мало фишек, вы учтите что это обучалка для полных чайников как я. А если рассказывать обо всех нюансах то новички утонут в информационном потоке и ничего не поймут. Ну скажу то ради чего полез в комменты - Огромное спасибо, с меня лайк и подписка
здравствуйте, спасибо за видео! скажите, мы маркетинг-кит сможем здесь отрисовать и сохранить для печати...? или где это лучше сдлать? спасибо)
можно ли каким-то образом скачать все активы макета одним архивом (картинки, логотипы и т.п) или нужно все делать вручную?
Отлично Ань, умница просто, все простенько и наглядно!
Спасибо :)
Спасибо за уроки!
Есть вопрос касаемый асимметричности (Figma):
При работе очень часто сталкиваюсь с проблемой разных расстояний от объекта.
Приведу пример, отступы от текста до краев прямоульника слева и справа отличаются на один пиксель. Бывает, из-за этого приходится переделывать пол работы, так как заказчик решил изменить текст блока.
Как можно данную проблему пофиксить?
Благодарю за ответ!
Все понятно и по существу, спасибо, отличное видео😊👍
Спасибо. Очень качественная подача
Подскажите, пожалуйста, как в фигме несколько объектов, если они логически представляют собой один объект, экспортировать как один png (или svg) файл. Если просто их выделить, то выгружаются все объекты отдельными файлами.
Отличный урок, спасибо!
Отличное видео, спасибо 😉
Даже лайк поставлю, самое информативный видеообзор, что я видел
И тебе спасибо за очень полезный видос!)
Ясно и по делу! Спасибо!
Спасибо, Анна!
Сердечно благодарю! Крайне познавательно.
🤗 спасибо
Начал разбираться с фигмой. Тут как для новичка очень хорошо все рассказали. Но у меня вопрос. Если мне на фон блока (или на фон всей страницы) нужно поставить картинку, то как правильно это сделать? Просто вставить область с картинкой или там есть какая-то хитрость?
Я рад что я когда-то подписался на этот канал. Вот щас пригодилось. Спасибо!!!
как добавить все те инструменты, которые у Вас вверху? у меня их только два там (стрелочка move и кружочек show comments)?
Добрый вечер! Анна, подскажите можно как-то настроить вывод кода в фигме для Sass без ";" ?
Анна, спасибо за контент!
Спасибо! Помогли разобраться что к чему))
А как считаете, изучая интенсивно фигму два месяца уже, можно ли найти работу на начальную позицию хотя бы или нет?
Слышал про Figma но никак не находил время ознакомиться, а тут все кратко и четко и по существу. Спасибо. Одно жалко что он psd не принимает, тут ему тягаться с Avocode сложно. Но за приятное видео Спасибо!
Avocode и Figma - создавались для разных целей. Avocode - это не графический редактор. Сложно сказать, что они именно конкуренты друг другу, но не исключено, что Figma прокачается и станет более функциональным в этом плане.
Зато в Figma нереально крутая работа с вектором.
К тому же, Figma прекрасно импортирует файлы со Sketch. А там уже готовых библиотек, и всевозможных китов с шаблонами, просто валом!
Спасибо большое, помогли 🖤
вау, вау,вау...ты просто космос.
Тоесть, я хочу сказать информацию очень полезная, так как я вообще не знала о Figma.
Живёшь в пещере?
@@derridamg Я давно знаю, но скажу так, пока профи не приняли Фигму хайпа вокруг неё не было. Допусти Invision выпустила свой инструмент Studio, спроси средней руки дизайнера, пробывал ли он сей продукт. Figma завоевала сердца профи и дальше всё уже не остановить.
@@aleksunknow113 профи - это те, кто работают в продуктах от Adobe? Почему же они так не приняли Adobe XD?
А эра Sketch уже закончилась, ибо теперь есть нереально крутой инструмент Figma! 👍
@@Midi25 прошёл уже год, с моего комментария. Верстальщикам сейчас чаще всего макеты приходят в фигме.
Анна, а позволяет ли Фигма как-то автоматизировать процесс превращения дизайна в HTML-верстку?
Супер. Анюта молодец. Спасибо за видео
Спасибо вам огромное
Все легко и в одном видео
Спасибо что коротко и по делу
Допустим: я сделал прототип и у меня косяк с расстоянием между карточками, внутри блока. Как мне замерять нужные расстояния, если автоматически они не вылезают?
Тоже самое с текстом внутри кнопки.
Допустим: у меня расстояние от текста до краев кнопки равны по 50, а должны быть 28. Как мне замерять эти расстояния?
Добрый день! Проблемка 🙈не могу сгруппировать элементы, всё было нормально,а затем опс не получается ctrl+G и слева элементы выделяю и пытаюсь сгруппировать, не получается 🤔хорошо, до сегодняшнего момента 😔 Подскажите пожалуйста где допущена ошибка???
Бомба! Лучший канал!👍
Подскажите пожалуйста, как понять какие обьекты должны быть динамическими по задумке дизайнера макета? Что должно анимироваться и как. В Фигма.
Хорошее видео, спасибо!
Крутая штука, я раньше для себя в фотошопе делал макеты сайтов, а здесь еще лучше оказывается!
Я в (энглише ноль) здесь есть возможность сделать кнопку, при наводке она меняет цвет, структуру и ТД ??
Конечно
Доброго времени суток. Подскажите, линейки не работают в режиме просмотра?
Добрый день. Подскажите пожалуйста, возможно ли в Фигма сделать плашку с прозрачным текстом? Если да, направьте в нужном направлении)) Спасибо
У меня нету вкдадок design, pototype, code? как іх найти? А также нету всех інструментов, и пишет, что макет только для просмотра.
так макеты же в пдф скидываются, не понятно из какого он приложения или я что-то не понимаю?
Почему я не могу поменять шрифт на русской раскладке в режим бебас?почему меняется только англоязычная раскладка помогите пожалуйста
Ох ничего себе у тебя глаза!) Гипнотизируют просто!)
Большое спасибо Вам за это видео.
Благодарю Вам, Анна!
Полезная инфа. С меня лайк
Очень интересно, спасибо. 😎👍
Привет, всем. Дайте добрый совет, если учиться рисовать макеты сайтов то можно сразу с фигмы или фотошопом овладеть тоже стоит ?
Фотошоп конечно он нужен так и так тк многие дают задания в нем Дизайнер должен с фотошоп быть на ты это важное условие заодно на сайтах быстро выучишь, ну а фигма, те же быстрые клавиши такие же как в фотошопе
Про основную вкладку Code и расстояния между блоками/элементами не рассказали. Тоже очень полезные инструменты.
А если нужно объединить несколько слоев в одну картинку для экспорта?Как тогда?
Круть!
Для первого ознакомления - самое оно.
Без воды, быстро и по теме.
Спасибо :)
*самый главный вопрос: Когда я отрисовал сайт и мне надо добавить высоту т.к в макет добавился еще один кусок сайта, почему весь макет растягивается а элементы улетают... как отрубить привязку контекта от ширины макета*
зажав ctrl потянуть низ макета мышью, ctrl отрубает привязки
Если на рабочем месте 2 рабочих объекта, как я могу сохранить и экспортировать только один?
Никак не могу попасть в приложение. На сайте зарегалась, приложение скачала. Открываю, пишет "Welcome to Figma. Log in with browser", нажимаю, вижу "go to the browser to complete login" и предлагает мне попробовать еще раз , перекидывает на предыдущую страницу "Welcome to Figma..."и так по кругу. Хелп. Что это такое? Как открыть приложение?
Обзор показался поверхностным, чем хотелось бы, ну и было много повторений.
Но видел еще ролик про фигму, мб там информативнее.
Но в любом случае спасибо. Подача материала хорошая)
А border-radius она покажет у кнопок?
я не нашел в нем линейке. есть тут такой инструмент?
Захожу чтобы посмотреть рецепт булочек - в итоге смотрю твои видео
спасибо за контент!
Все по делу! умничка
Анна. У меня очень старый комп с intel core 2 запустится ли у меня figma?Ps. Комп стоит 19к скоро коплю ноут за 45к
Запуститься должен
Запустится Если винда не ниже винды 8! Виндус7и ХП не потянут. У меня комп 2009 года и все прекрасно работает
Здравствуйте. А у меня не такое меню и все на английском. Хотя там же скачивала. Почему?
При использовании макета на Figma она через 5 секунд просто тормозит и ничего не нажимается. В чем проблема ?
Подскажите Анна , я перехожу по ссылке на макет и могу только выделять элементы , но не могу изменять их!
Сделайте дубликат макета в свой профиль и сможете управлять слоями
Круто. Всё по делу .
Большое спасибо!
А какая лучшая OFFLINE алтернатива без подписки и чтобы была поддержка windows?
Какая красивая девушка. Спасибо у меня не вставляется изображение Ctrl+V не реагирует и нет цифровых линеек по краям что не так подскажите для особоодаренных
А в фигме шрифт в пт или в px?
При экспорте изображений как указать путь в папку с проектом и изменить название перед скачиванием?
Привет,а ты переходы на opencartmasters.com/здесь "есть информация" по поводу твоего вопроса.
Привет)
Когда скачиваю декстопную версию, мне предлагают продолжить в браузере, когда нажимаю, ничего не происходит, и нет поля для ввода логина. Не подскажешь, почему может быть так?
Видос отличный, спасибо)
Привет.Попробуй перезагрузить приложение. Спасибо :)
Почему изображение изначально свг ? дизайнер сказал ? Рассказывать в какую папочку сохранить это отличные знания, спасибо
спасибо за обнову моих знаний
что делать, если она виснет после 10 секунд с момента запуска, как брацзер, так и приложение? только 1 из 200 раз она сработает нормально
Анна спасибо!
Вы лучшая!
У тебя очень красивые глаза, а глаза, как мы знаем, это зеркало души.
Если серьезно, то всё было здорово, познавательно и интересно. Благодарю!
Как стать твоим падаваном?
Однозначно лайк и подписка !
Вы молодец! Все четко, без воды
Спасибо за видео!! А с какими форматами работает figma? Не совсем понял.
Алексей Нехорошев .fig
.fg и .sketch
спасибо тебе, глазастик)))
Спасибо большое!
Figma открывает psd ?
Анна а почему может быть такое что кнопка Regular не доступна?
Когда у этого семейства шрифтов такого просто нет. Бывают только болды, например
Добрый день. Я ищу удобный и несложный инструмент для СОЗДАНИЯ САЙТА. Пожалуйста подскажите, на Фигма МОЖНО СОЗДАТЬ САЙТ ? Вроде викса или вордпресса ?. Или он только ДЛЯ ДИЗАЙНА ? сколько видео пересмотрел, так и не нашёл ответа. Кто действительно может грамотно ответить, буду очень благодарен.
веб-дизайнеры ДИЗАЙНЯТ на фигме, а веб-программисты (верстальщики) программируют смотря на МАКЕТ С ФИГМЫ (смотря на свойства элементов в ФИГМЕ)
То что вы хотите, это веб-сайты -конструкторы, хорошие варианты: wix, tilta.ws. WordPress-также хорош, но желательно знать ЯзыкПрограммирования PHP (то есть, это уже не "детский конструктор").
@@andreyjackson4450 я делала сайт на вордпресс без знаний рнр и прекрасно он работал
Большое спасибо
Спасибо!
Спасибо 👍
Мне все же кажется, что видео снято не в 1080p
полезный Спасибо!🤍
Спасибо!)