Уроки Figma Auto Layout: Telegram Messenger [Фигма уроки]
HTML-код
- Опубликовано: 7 дек 2019
- Рисуем окно чата Telagram с помощью Auto Layout в Figma.
ВАЖНОЕ:
Файл с анонсом Auto Layout от команды Figma
www.figma.com/c/file/78444822...
Моя Фигма-страница
www.figma.com/@vandesign
Книга «Руководство по Figma»
/ figma-guide
Фигма.хелп
figma.help
🧰 Уроки Figma на русском.
Фигма - это бесплатная онлайн программа для дизайна web и UI. Приложения для Windows, Mac OS, Android (Material design) и iOS. Программу можно скачать на сайте www.figma.com. Торрент не нужен! ))
• Как сделать в Фигме свой первый сайт.
• Как использовать сетки и направляющие в вашем проекте.
• Что такое компоненты и фреймы в Фигме.
• Самые интересные плагины (plugins) Фигмы.
• Горячие клавиши для Windows и Mac OS.
• Анимация, шрифты (Google Fonts) и иконки.
• Как создать свои UI Kit и шаблоны (templates).
• Сравнение с Sketch и Adobe XD.
Потихоньку всё сложится в курс по дизайну в Figma.
-----
👍 Поддержать канал: / zendesigner
![Уроки Figma. Как подготовить файл для печати в CMYK 300 dpi [Фигма уроки]](http://i.ytimg.com/vi/70fD3LUIoSA/mqdefault.jpg)
Смотреть ваши уроки одно наслаждение, как все круто, автоматизированная подстановка, как круто и быстро и ровно у вас получается все делать!
Огромное спасибо! Слезы радости капают на клавиатуру))) Фигма не перестает в положительном смысле будоражить ум и душу))) а Вам большое спасибо за объяснения и джобхаки))
И вам спасибо на добром слове )
=))))) и познавательно и ржачно, все как я люблю. Спасибо за Ваши видеоуроки!!! Безумно рада, что нашла их, теперь это мой самый любимый канал на YouYube. =)))))
Спасибо. Очень приятно ☺️
Супер! Не затягнуто, живо и с юморцом 😅
Супер! Спасибо!
Спасибо за урок!
Виктор, огромное спасибо!!!!!!!!!!!!!!!!!!!!!!!!!!!
чертова магия, Блейн!
Мега полезная практика!! Подача как всегда лучшая ))
Спасибо на добром слове )
Спасибо!
Скорость на 0.25 и погнали👍
1.5
deespe 2х
спасибо
Здравствуйте, чем auto layout отличается от constraints?
Подскажи пожалуйста где найти картинка как в подложке телеграма, луна звездочки какие-то другие рисуночки?
www.google.com/search?q=telegram+background&rlz=1C9BKJA_enRU736RU736&hl=en-GB&prmd=ivn&sxsrf=ALiCzsbN302xHa2NnYCY_HIVWSgKyhm9Ww:1660466479123&source=lnms&tbm=isch&sa=X&ved=2ahUKEwj24ZjV98X5AhUk_SoKHbPrBjYQ_AUoAXoECAIQAQ&biw=1080&bih=695&dpr=2
Мне нравится ваше исполнение еще и под такую музыку. Вау! Скажите, что это за музыка?
Кармическое Колесо называется. ruclips.net/video/iOgqTUjTR44/видео.html
@@zen-designer спасибо вам. Вы меня вдохновляете!!
@@tihonov369 Спасибо!
Приветствую! А ширина сделана 320 это получается макет под iPhone SE, а остальные разрешения уже адаптируются исходя из самого маленького размера? Вообще вы делаете макеты отталкиваясь от 320 или больше? Какой так скажем стандарт. Еще хотел узнать про сетки. Используйте ли их в своих макетах? И если да, то с каким шагом? 4?
Когда делаю адаптивные сайты, 320 это минимальный лейаут. В него должно всё помещаться. Для сайтов такая у меня градация yadi.sk/i/vZDFreDDJZBFHA
@@zen-designer Все понятно. Спасибо! С наступающим Новым годом! Жду много интересных видео в новом году.
@@HomeBog С наступающим!
А ты пробовал с текстом работать в AutoLayout?
У меня автоматически внутри автолэйаута не меняется ширина тестовых блоков.
- Создал фрейм
- запихал в него 2 блока текста и объединил их в автолейаут
- закрепил изменение ширины автолейаута к изменению ширины фрейма
Начинаю менять ширину фрейма, за ней меняется ширина автолейаута, а текстовые блоки внтури не меняются по ширине(((
В нынешней итерации автолейаута это не работает. Автолейаут может только сам себя раскукоживать изнутри. Внешние раздражители (привязки) он игнорит.
Фигмовцы обещали нарастить функционал.
@@zen-designer Спасибо, всю голову сломал. Удивлен что не сделали сразу эту функцию, без этого адаптив никак не сделать
Или еще момент. При применении автолэйаута, он плюет на все твои отступы и делает их одинаковыми по сторонам. А мне допустим надо чтобы вверху элемента был один, а внизу другой
сложно что-то вразумительное сказать без конкретного примера
@@zen-designer К примеру в вашем примере возьмем бабл-сообщение. Я хочу чтобы между временем и нижним краем бабла отступ был больше
Еще и constraints не работают внутри лейаута. Дичь короче
Al Yu можно сдвинуть дату внутри её фрейма. Как в примере с оирицательным отступом в конце видео.
Al Yu ждём и надеемся на развитие инструмента.
Добрый день. Практикую сейчас активно авто-лейаут, но не могу одного понять. Расскажу по шагам:
1. создал текстовый слой
2. обернул его в компонент
3. скопировал
4. из инстанса попытался сделать авто-лейаут.
5. задал заливку, скругления, отступы и все такое.
6. а вот при изменении самого текста, сам авто-лейаут не срабатывает. Тоесть не тянется фон и отступы
Неужели авто-лейаут нельзя создать из инстанса текста?
Или это я как-то не так что-то делаю?
1. Создал текст
2. Обернул в алик
3. Сделал компонентом
@@zen-designer Попробовал, получилось . Благодарю.
А зачем просто текст делать с auto layout? Какой в этом плюс если можно просто создать стиль текста. Мы же даже не давали тексту фон.
видео было ускорено перед наложением голоса? Или это я слоупок? 😁
Было. И голос тоже ускорен. Чуть-чуть
Класс, только не понятно зачем запихивать текстовые блоки в стеки
Чтобы получить автоматически подстраивающуюся под контент вертикаль.
@@zen-designer У меня бабл не изменяется по вертикали, если я переношу слова. Переделал несколько раз баблы - не работает. Что делаю не так? Спасибо!
@@maximshulipov9699 сложно угадать. Если гляну файл -- смогу.
Очень хорошие уроки, спасибо за Ваш труд! Но темп этой музыки и вообще эта музыка не дает ничего запомнить....
Super_ Bro2096 хм... Это первая жалоба на музыку с создания канала. Если будут ещё жалобы -- подумаю над этим.
@@zen-designer видимо у каждого свой уровень психологического восприятия :))
Решил я заавтолейаутить уже сущестующие компоненты и х;й
а что не так?
@@neodiss Есть мастер-компонент для кнопки, внутри которого тект и прямоугольник. Т.к. теперь прямоугольники в автолеяутах не нужны, вместо этого мы фрейму назначаем стили. В данном случае компонент и есть фрейм, так? В общем убрал прямоугольник, внутри оставил текст, стиль кнопки навешал на компонент и применил автолеяут. Но при изменении текст, кнопка не сжимается/не расстягивается. У нее остается фикс. ширина и не влезающий текст просто переносится по буквам
@@neodiss блин, я похоже порядок действий какой-то не такой использовал.
Теперь я взял стили прямоугольника внутри, его удалил, применил стили прямоугольника к компоненту, и применил к компоненту автолейаут, и все заработало. А что я делал до этого не так, уже и из головы вылетело.
Спасибо за видео, но вот куча иностранных слов, мне как для новичка сложно воспринимать, еще куча всяких микробов, было очень сложно это все выслушивать((( Да, это может ваш стиль, но вот информация от вашего стиля плохо усвоилась(
Александр Краснов Сожалею что было сложно. Но у меня не для новичков информация в основном. Иначе ролики были бы значительно длиннее. В описании к видео есть ссылки на материалы для старта.
И без английского в этой индустрии тяжко.
Учите английский, Александр, фигма-это американский софт, многим терминам нет аналогов в русском языке