Figma Tutorial in 13 minutes for web designers and web developers
ฝัง
- เผยแพร่เมื่อ 16 มิ.ย. 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 но никак не находил время ознакомиться, а тут все кратко и четко и по существу. Спасибо. Одно жалко что он psd не принимает, тут ему тягаться с Avocode сложно. Но за приятное видео Спасибо!
Avocode и Figma - создавались для разных целей. Avocode - это не графический редактор. Сложно сказать, что они именно конкуренты друг другу, но не исключено, что Figma прокачается и станет более функциональным в этом плане.
Зато в Figma нереально крутая работа с вектором.
К тому же, Figma прекрасно импортирует файлы со Sketch. А там уже готовых библиотек, и всевозможных китов с шаблонами, просто валом!
И тебе спасибо за очень полезный видос!)
Хейтеры которые говорят что слишком мало фишек, вы учтите что это обучалка для полных чайников как я. А если рассказывать обо всех нюансах то новички утонут в информационном потоке и ничего не поймут. Ну скажу то ради чего полез в комменты - Огромное спасибо, с меня лайк и подписка
Ясно и по делу! Спасибо!
Отличный урок, спасибо!
Анна, спасибо за контент!
Даже лайк поставлю, самое информативный видеообзор, что я видел
Я рад что я когда-то подписался на этот канал. Вот щас пригодилось. Спасибо!!!
здравствуйте, спасибо за видео! скажите, мы маркетинг-кит сможем здесь отрисовать и сохранить для печати...? или где это лучше сдлать? спасибо)
Спасибо за уроки!
Есть вопрос касаемый асимметричности (Figma):
При работе очень часто сталкиваюсь с проблемой разных расстояний от объекта.
Приведу пример, отступы от текста до краев прямоульника слева и справа отличаются на один пиксель. Бывает, из-за этого приходится переделывать пол работы, так как заказчик решил изменить текст блока.
Как можно данную проблему пофиксить?
Благодарю за ответ!
вау, вау,вау...ты просто космос.
Тоесть, я хочу сказать информацию очень полезная, так как я вообще не знала о Figma.
Живёшь в пещере?
@@derridamg Я давно знаю, но скажу так, пока профи не приняли Фигму хайпа вокруг неё не было. Допусти Invision выпустила свой инструмент Studio, спроси средней руки дизайнера, пробывал ли он сей продукт. Figma завоевала сердца профи и дальше всё уже не остановить.
@@aleksunknow113 профи - это те, кто работают в продуктах от Adobe? Почему же они так не приняли Adobe XD?
А эра Sketch уже закончилась, ибо теперь есть нереально крутой инструмент Figma! 👍
@@Midi25 прошёл уже год, с моего комментария. Верстальщикам сейчас чаще всего макеты приходят в фигме.
Супер. Анюта молодец. Спасибо за видео
Сердечно благодарю! Крайне познавательно.
🤗 спасибо
Обзор показался поверхностным, чем хотелось бы, ну и было много повторений.
Но видел еще ролик про фигму, мб там информативнее.
Но в любом случае спасибо. Подача материала хорошая)
Хорошее видео, спасибо!
Спасибо большое, помогли 🖤
Круть!
Для первого ознакомления - самое оно.
Без воды, быстро и по теме.
Спасибо :)
Спасибо вам огромное
Все легко и в одном видео
Спасибо что коротко и по делу
Вы молодец! Все четко, без воды
можно ли каким-то образом скачать все активы макета одним архивом (картинки, логотипы и т.п) или нужно все делать вручную?
Про основную вкладку Code и расстояния между блоками/элементами не рассказали. Тоже очень полезные инструменты.
Почему изображение изначально свг ? дизайнер сказал ? Рассказывать в какую папочку сохранить это отличные знания, спасибо
Большое спасибо Вам за это видео.
Начал разбираться с фигмой. Тут как для новичка очень хорошо все рассказали. Но у меня вопрос. Если мне на фон блока (или на фон всей страницы) нужно поставить картинку, то как правильно это сделать? Просто вставить область с картинкой или там есть какая-то хитрость?
Полезная инфа. С меня лайк
А как считаете, изучая интенсивно фигму два месяца уже, можно ли найти работу на начальную позицию хотя бы или нет?
Подскажите, пожалуйста, как в фигме несколько объектов, если они логически представляют собой один объект, экспортировать как один png (или svg) файл. Если просто их выделить, то выгружаются все объекты отдельными файлами.
Бомба! Лучший канал!👍
Все по делу! умничка
Очень интересно, спасибо. 😎👍
У тебя очень красивые глаза, а глаза, как мы знаем, это зеркало души.
Если серьезно, то всё было здорово, познавательно и интересно. Благодарю!
Как стать твоим падаваном?
Анна спасибо!
Анна, а позволяет ли Фигма как-то автоматизировать процесс превращения дизайна в HTML-верстку?
Добрый вечер! Анна, подскажите можно как-то настроить вывод кода в фигме для Sass без ";" ?
спасибо за контент!
один из типов с cxraceSPB не ваш родственник случайно?)) Спасибо за видео! Теперь на собеседовании можно напздт что есть опыт в фигме :D
Круто. Всё по делу .
Крутая штука, я раньше для себя в фотошопе делал макеты сайтов, а здесь еще лучше оказывается!
Я в (энглише ноль) здесь есть возможность сделать кнопку, при наводке она меняет цвет, структуру и ТД ??
Конечно
Вы лучшая!
Ох ничего себе у тебя глаза!) Гипнотизируют просто!)
Благодарю Вам, Анна!
как добавить все те инструменты, которые у Вас вверху? у меня их только два там (стрелочка move и кружочек show comments)?
Однозначно лайк и подписка !
Привет, всем. Дайте добрый совет, если учиться рисовать макеты сайтов то можно сразу с фигмы или фотошопом овладеть тоже стоит ?
Фотошоп конечно он нужен так и так тк многие дают задания в нем Дизайнер должен с фотошоп быть на ты это важное условие заодно на сайтах быстро выучишь, ну а фигма, те же быстрые клавиши такие же как в фотошопе
Доброго времени суток. Подскажите, линейки не работают в режиме просмотра?
Большое спасибо!
Анна, я вот ждал, что ты расскажешь о каких-то плюшках для верстальщиков и для дизайнеров, чтобы сделать жизнь верстальщика проще, а ты сказала, мол вот панель свойств, и там все можно посмотреть, а вот инструменты, которые как-то работают. Так вот, для вертстальщика есть в этой самой панели свойств вкладка CODE. Оттуда можно копировать стили и текст элемента.
А ещё в фигме есть классы(стили) и компоненты. Это очень упрощает жизнь верстальщику и ещё более упрощает жизнь дизайнеру, которому больше не нужно заниматься выдергиванием цветов. Я вот прям даже расстроился, что ты об этом не рассказала, но я так понимаю, что ты и сама не особо разобралась.
Да, чтобы создать файл не нужно лезть в контекстное меню, можно просто нажать плюсик на панели вкладок.
По поводу «разработчику не нужно устанавливать приложение». Ну по-мимо банального, что браузер ты используешь для просмотра результата, то иметь вкладку с макетом уже не очень удобно. По-мимо этого приложение работает быстрее, чем браузер и жрет меньше ресурсов, что является премуществом для слабых ноутов. Про отсутствие ненужного браузерного интерфейса я даже говорить не хочу.
Учитывая, какие дотошные видосы у тебя есть по всяким простым вещам (например «как прибить футер к низу», что мне, лично очень нравится) я даже как-то расстроился.
спасибо тебе, глазастик)))
Привет. Хотелось бы ещё по читаемым форматам информацию. Туда можно загружать файлы как в Авокод? И какие форматы? А в целом урок полезный.
фигма импорт .psd не поддерживает
спасибо за обнову моих знаний
Спасибо большое!
Подскажите пожалуйста, как понять какие обьекты должны быть динамическими по задумке дизайнера макета? Что должно анимироваться и как. В Фигма.
Спасибо за видео!! А с какими форматами работает figma? Не совсем понял.
Алексей Нехорошев .fig
.fg и .sketch
Захожу чтобы посмотреть рецепт булочек - в итоге смотрю твои видео
Какая красивая девушка. Спасибо у меня не вставляется изображение Ctrl+V не реагирует и нет цифровых линеек по краям что не так подскажите для особоодаренных
Привет) Спасибо за видос) Чекни название в английской версии "Blablabla for web designers and web designers". Did u mean "blablabla for web designers and web developers"?🤔
Спасибо, что заметил, поправила.
@@annblok_webdev u r welcome) I got smth new and interesting 4 me,thnx so much)
12:03 по моему в пнг лучше всегда сохранять. Это супер-распространенный формат работающий везде, и без ошибок.
формат изображения выбирается исходя из самого изображения. Если есть возможность сохранить в свг, то лучше сохранять в свг. Свг при изменении масштаба не теряет четкости, а пнг или жпег теряют. А чтобы свг работали норм в браузерах, подключи полифил.
Мне свг больше нравится
Добрый день. Подскажите пожалуйста, возможно ли в Фигма сделать плашку с прозрачным текстом? Если да, направьте в нужном направлении)) Спасибо
Да это в тысячи раз лучше photoshop cc, тут всё для верстальщика. Удобно ведь! Особенно фишка с окнами под любое устройство. Супер пособие Анна ))) . Единственно есть вопрос: в Figma нужно устанавливать шрифты для чтения шрифтов макета? А то я в фотошопе устал устанавливать шрифты DDD, постоянно ругается и говорит, что нужны шрифты.
Ничего не нужно, он там подружатся из вне
@@DOK307 Класс! Алилуя! Эх заживём DDD
@@useyourbrain6006 там можно создавать даже некий интерактив, т.е при клике меню открывается или попап какой-нибудь, для презентации макетов заказчику очень удобно, что бы показать как что нажимается, но Анна про это ничего не рассказала.
Хотя как верстальщика оно как бы не особо и нужно это знать
@@DOK307 Согласен. С прогой ознакомила, остальное в процессе и так придёт. )))
Только вот не умеет эта прога PSD файлы открывать, а это весьма весомая ложка дегтя. Уж лучше в этом плане Avocode использовать.
полезный Спасибо!🤍
А border-radius она покажет у кнопок?
надо было тебе вчера видос заливать, ибо сегодня ток сравнивал avocode и figma.. опаздываешь с выпусками слушай)
Пздц, в комментах ныл, что верстальщики не должны знать дизайн и тут ты вылез со своим подлизным комментом. КУКОЛД КЛЯТЫЙ.
Большое спасибо
Привет)
Когда скачиваю декстопную версию, мне предлагают продолжить в браузере, когда нажимаю, ничего не происходит, и нет поля для ввода логина. Не подскажешь, почему может быть так?
Видос отличный, спасибо)
Привет.Попробуй перезагрузить приложение. Спасибо :)
Благодарю!
А в фигме шрифт в пт или в px?
так макеты же в пдф скидываются, не понятно из какого он приложения или я что-то не понимаю?
Спасибо!
Анна. У меня очень старый комп с intel core 2 запустится ли у меня figma?Ps. Комп стоит 19к скоро коплю ноут за 45к
Запуститься должен
Запустится Если винда не ниже винды 8! Виндус7и ХП не потянут. У меня комп 2009 года и все прекрасно работает
Спасибо!)
0:27
Тем временем Internet Explorer: Ты ошибаешься😂
Какая милая дочка Flesh и Corel) А где там инструмент адаптации готового продукта под смежные источники стресса? То есть я рисую для Яблока и он только на нём будет корректно отображаться?
Допустим: я сделал прототип и у меня косяк с расстоянием между карточками, внутри блока. Как мне замерять нужные расстояния, если автоматически они не вылезают?
Тоже самое с текстом внутри кнопки.
Допустим: у меня расстояние от текста до краев кнопки равны по 50, а должны быть 28. Как мне замерять эти расстояния?
Спасибо 👍
А какая лучшая OFFLINE алтернатива без подписки и чтобы была поддержка windows?
Добрый день! Проблемка 🙈не могу сгруппировать элементы, всё было нормально,а затем опс не получается ctrl+G и слева элементы выделяю и пытаюсь сгруппировать, не получается 🤔хорошо, до сегодняшнего момента 😔 Подскажите пожалуйста где допущена ошибка???
Мне все же кажется, что видео снято не в 1080p
При экспорте изображений как указать путь в папку с проектом и изменить название перед скачиванием?
Привет,а ты переходы на opencartmasters.com/здесь "есть информация" по поводу твоего вопроса.
как всегда ты лучшая
Красивая до жути☺️😍
А если нужно объединить несколько слоев в одну картинку для экспорта?Как тогда?
Подскажите Анна , я перехожу по ссылке на макет и могу только выделять элементы , но не могу изменять их!
Сделайте дубликат макета в свой профиль и сможете управлять слоями