Figma українською | Що таке автолеяут і для чого він потрібен у Фігмі
HTML-код
- Опубликовано: 19 июн 2024
- В цьому відео розповідаю про функцію Фігми, яку ви будете використовувати найчастіше! Автолеяут, пані та панове!
Якщо вам корисні ці відео і вам сильно хочеться купити мені чашку кави чи кілограм яблук - ось створила банку, де це можна зробити: 5375411200366313 або send.monobank.ua/jar/3RA6Gjjk2t
Я в жодному разі не перестану знімати відео, навіть якщо на банці залишиться нуль гривень, це чисто для тих людей, які бачать користь в цьому каналі, мають зайві 15 гривень і вже зробили щоденний донат на ЗСУ, завдяки яким я і можу записувати ці відео)
Якщо є питання -- пишіть в коментарі, на все відповім. Успіхів з ознайомленням, рекомендую зупиняти відео час від часу і зразу повторювати все у Фігмі, щоб самостійно поклацати усі ці fill i hug content ресайзинги :)
0:00 Вітання і вступ
1:06 Про карточки в інтерфейсах
2:25 Розказую про біль роботи без автолеяута
6:18 Про налаштування автолеяуту
13:20 Вирівнювання елементів в автолеяуті
14:10 Розбір кнопки з автолеяутом
24:26 Інший приклади використання автолеяуту. Розказую про fill container, hug content, fixed
32:24 Ще один приклад автолеяуту. Розказую про нашатування packed i space between
37:17 Підсумовую все ще раз і прощаюсь
Юля, підкажіть будь ласка чому у мене відсутній параметр Spacing mode?
привіт! Фігма оновилась декілька місяців тому, тепер цей параметр можна знайти, якщо натиснути на стрілочку вниз у полі, де написана відстань між елементами в автолеяуті :) Space between тепер називається Auto 🙄
Знайшла ваш канал випадково, коли шукала уроки фігми англійською. Це афігенно круто, що є такі змістовні і корисні відео українською! І я просто не можу цим натішитись! Щиро дякую вам за вклад в цінний український контент! Відео просто вогонь!
і я не можу натішитись таким коментарям! 🥹
дякую :)
Дуже дякую за такиі супер детальні уроки!🤩 Дуже допомагають мені у починанні ❤
дякую за вашу працю🫶🏻 ви дуже полегшуєте процес освоєння фігми
Дякую! дуже корисне відео
Оооооооооотакеннна подяка!)) Ви дуже доступно розповідаєте... Hug🤗))
Ви чудова! Дуже якісно, зрозуміло і детально пояснюєте . Дякую вам
Дуже зрозумілі пояснення та цікавий контент)
Дякую за урок. А за українську мову окремо ДЯКУЮ. Хочеться ще Ваших уроків.
дякую! в мене грандіозні плани на розвиток цього каналу :)
тільки закінчу робочі питання і берусь за новв відео 🦾
Дякую велике за цей контент
Дуже детальне і зрозуміле пояснення, у Вас позитивний настрій, який передається. І гарна українська мова) Дякую!
клаас! ще ніколи моя калуська українська мова не отримувала стільки компліментів :D дякую :)
дякую! дуже файно
Дякую за чудовий урок, дякуючи вашому каналу можна дізнатись та навчитись багато чому нового. Продовжуте в тому ж дусі!
я сильно радію, що тепер більше людей дійсно розуміють що таке автолеяут і як правильно створювати компоненти 🥳
дякую, що дивитесь :)
Я ненароком натрапив на ваш канал і після перегляду одного відео мені захотілося дивитися дальше😊 Хочу побажати вам натхнення на наступні відео.Велике дякую.
Ви є першою людиною якій я залишаю коментар 🎉🎉🎉🎉
ооо, ну нічого собі! дуже приємно, дякую за такий коментар :)
успіхів з Фігмою
цікаво. дякую і за фігму і за українську мову
клас, рада, що подобається)
Дякую за суперське відео про корисні речі програми Фігма українською)
дякую за такий відгук! :)
Дай Вам Боже здоров'я!!! У Вас талант пояснювати! Я в захваті від відео
Дякую за УКРАЇНСЬКУ!!!Боже, як прекрасно чути потрібну інформацію рідною мовою!Велике ДЯКУЮ! P.S. Я теж Юля😃👌 що правда займаюсь дизайном інтер'єрів
Дуже чітко і зрозуміло пояснюєте! Більше відео, щасти вам! 😊
Дякую дуже за уроки повчально і весело)!
рада, що корисно і цікаво! :)
Дякую величезне, чудово пояснюєте. Навчаюся веб-дизайну якраз. Для мене раніше аутолеяути були як темний ліс. Тепер все зрозуміло. Підписалась не роздумуючи💛💙
Дякую Вам, Юля. Доступне пояснення і позитивний настрій. Ще, було б круто за Вами все повторювати відразу по Ваших же заготовках, на яких Ви пояснюєте. Відразу своїми руцями робити. Ви крута!!!!
клааас, дякую!
можливо в мене колись дійдуть руки до того, щоб зібрати матеріали, з якими можна було б зразу все за відео повторювати, але поки, на жаль, через русню і відключення світла часу настільки мало, що треба зосередитись на пріорітетніших речах))
Ви просто знахідка ))))❤ дякую !!!🎉
класс, дякую! так все зрозуміло і цікаво та ще й у вільному доступі🥰
Дякую вам!! Якраз такого контенту мені дуже не вистачало🤩
як добре, що ютюб підкинув вам мої відео! тут багато такого контенту
🙌
Дуже вдячна за відео❤
Дуже дякую за контент!
Дуже зрозуміла подача, гарний голос) І кохана українська!
Алілуя!!!! Я вас знайшла!!!!! Дякую!!!! Наснаги вам!!!!
Дуже легко і класно пояснюєте!!
Дякуюю!♥
Клас, дуже крута штука) Буду пробувати гратись з нею
успіхів, автолеяут дуууже спрощує життя при створенні дизайну інтерфейсів/усіляких презентацій/постів з купою інформації тощо, впевнена, що є ще застосування, про які я поки не знаю))
Дуже круто! Дякую)
клас-клас! рада, що це корисно! ✨🐸
Дякую за відео!)
дякую, що дивитесь! 🌼
Юля, дякую! Нарешті зрозуміла!😍
ух, вітаю! дуже класно, що така досить складна тема стала зрозумілою, клас! :)
Юля, це неймовірна робота! Дякую вам за таке рішення в створенні такого контенту, за такий конструктивний підхід, деталізацію та просто бомбезний розбір на прикладах! Почала переглядати з першого заняття ваш плейлист і вже на цьому уроці не втрималася від коментаря :) (хоча я ще той жлобік, щоб сісти та написати). Бажаю вам професійних успіхів!
Вельми вдячна!
Дуже дякую за це відео 🤍
дуже дякую за цей коментар! 🐆❤️
дякую за корисну інфо! автолеяут дуже цікава штука , дуже цікаво було б дізнатися як регулювати положення асиметричних елементів у фреймі за доромогою ал, намприкла щоб додати якийсь значок в кутку )
Дякую Вам за чудовий контент!
дякую вам за чудовий коментар :)
Юля, ви крута!!! нарешті я зрозуміла цю тему. Дякую безмежно
хуух, вітаю вас з новим знанням! тепер ви зможете працювати швидше і легше, ура-ура! ✨🐸
Дуже корисно та прикольно! 👍👍👍
клас! дякую, що дивитесь!
Фігма з моменту запису відео трооошки оновилась, тому, аби мати найактуальнішу інформацію, рекомендую піти до них на сайт і глянути що там новенького 😌
@@juli.and.design Схоже, що ви профі в цій справі! 🙂👍
Юля, дякую за прекрасний відеоурок! особисто мені трохи важкувато з автолейаутами, найважче - це зрозуміти, як саме його краще налаштувати на початку роботи. розумію, що це практика і досвід, яких в мене поки немає. але ви дуже доступно пояснюєте, з вами цікаво і хочеться продовжувати навчання)
так-так, коли ви самостійно спробуєте погрупувати елементи на якомусь кейсі, ви краще вловите як він працює і тоді все вже буде на автоматі)
про нього насправді і говорити важко, бо зазвичай я вже не думаю "ой а як то його налаштувати", я просто це роблю, а щоб пояснити це словами, то треба проаналізувати кожен крок і чітко зрозуміти як воно все працює))
у вас теж все доведеться до автоматизму і стане легше, чесне слово 😌
@@juli.and.design дякую, що ви тут, в коментах, з нами додатково взаємодієте) Юля, ви - супер!
@@annserhiienko якщо є питання, мені можна так само і в телеграм писати, там розбираємось з усіма тупіками, куди можна потрапити, тільки починаючи працювати у фігмі))
@jul_and_design
дякую, це чудове відео, дуже все доступно, а головне українською, принципово російською нічого не дивлюсь, а от англійську нажаль дуже погано знаю, тому вам велика подяка за україномовні уроки.
Дякую за вашу працю. Клятий список здався тільки с третьої спроби.
якщо маєте якісь питання - пишіть мені, будемо рішати їх разом))
Дякую за Ваші відео! Запишить будь ласка відео, як ви створюєте кнопки з іконками в компонентах💛💙
а таке відео вже є)) далі в плейлисті можете знайти два відео про компоненти і друге відео якраз про кнопки)
Дякую! Дуже круті і пізнавальні відео! Найкраще з того що я знаходив на ютубі!
В якому випадку потрібно використовувати fixed size?)
коли якись елемент може бути тільки такого розміру і ніякого більше, типу він не підлаштовується під контент)
до прикладу, карточки товарів в онлайн магазинах можна робити fixed по висоті і ширині, бо вони справді мають бути однакові завжди-завжди. Нема різниці чи там назва товару буде в один рядок, чи в два, карточка має завжди бути однаковою. Ну або можна контейнер для самої назви зробити fixed, а саму карточку вже hug content, бо контейнер для назви все одно змінюватись не буде))
з цим можна гратись, але ідея якраз в тому, що елемент буде сталого розміру і йому плювати який розмір контенту, що в ньому знаходиться)
@@juli.and.design Дякую За відповідь! Але тоді ж контент буде вилазити за межі контейнеру. Якщо контейнер 350px висоти а тексту в ньому на 450px?
@@olegsavchuk5004 в документації до проєкту добре прописувати вимоги до контенту і якраз це вказувати. Тобто можна вказати щось таке: "Назва товару повинна не перевищувати два рядочки, а якщо перевищує, то всі символи, які вилазять за контейнер не показуються, а замість них видно тільки три крапки. На ховері назва починає повільно рухатись аби користувач побачив повну назву" або "Назва на ховері не прокручується, повну назву видно тільки тоді, коли користувач відкриє сторінку з товаром"
ну або як ви вирішите, це якраз робота дизайнера це продумати - а що відбувається, коли контенту забагато))
Зайдіть на розетку і знайдіть товар з довгою назвою - в карточці буде тільки два рядочки, весь інший текст просто не показується, от вам приклад того, як розетка це все вирішила) але це не значить, що по-іншому не можна, підете на інший сайт - може там буде рухати назва на ховері, може на ховері буде змінюватись розмір карточки, може буде якось з'являтись тултіп з повною назвою - хто як придумає))
Юлія вітаю, є advance питання щодо автолеяуту😁. Передмова коротенька. Якщо відкрити браузер у віконному режимі а не повнорозмірному, то можна міняти співвідношення сторін і розміри вікна, відповідно будуть змінюватись і розміри самого ж сайту. Саме ж запитання - Чи можна створити такий працюючий хард адванс автолеяут, який так само б працювати як на функціональному сайті і горизонтально і вертикально?
Українська тай ще окрема увага на вимовляння англійських фраз та термінів, та ти шо я влюбльон! Супер подача і знання матеріалу і тематики! Дівчата такі дівчата обожнюю вас розумнички!)
Дякую за Ваші уроки, дуууже корисно. В мене питання, як додати snapes (ці квадратики біля тексту з планом)?
в мене це була заготовка з якогось сету іконок - ця штука дуже часто використовується як checkbox у випадках, коли можна обрати декілька відповідей (наприклад, на питання "В яких країнах ви були?" добре давати відповіді з чекбоксами)
але її дуже легко зробити вручну - просто взяти прямокутник, наприклад, 24х24 пікселі, зробити йому тільки заливку десь 1.5 пікселі в товщину, скруглити усі кути десь приблизно на 3.2 - і у вас вийде така ж фігура)
@@juli.and.design дякую за відповідь❤
@@al-yo 💛
Привіт!
в мене немає spacing mode в автолеяуті, з чим це пов'язано?
привіт! Фігма оновилась декілька місяців тому, тепер цей параметр можна знайти, якщо натиснути на стрілочку вниз у полі, де написана відстань між елементами в автолеяуті :) Space between тепер називається Auto 🙄
Чомусь в мене режим fill container не працює як у вас. Текст не рухається і не адаптується під розмір frame(
перевірте точно чи у вас увімкнений автолеяут, якщо не виходить - напишіть мені в тг jul_and_design
голос авторки - насолода для вух:)
а такі коментарі - насолода для душі авторки :)