ВЕРСТАЕМ САЙТ ИЗ FIGMA НА TAPLINK | Как правильно перенести ваш дизайн из Figma на Taplink?

[@garaevschool]

В начале я часто говорю о Тильде - это оговорка. Речь идёт о Фигме. Очень легко перепутать столько сервисов: Тильда, Фигма, Таплинк 😅

[@videoleaks]

Тильда, Фигма - одна Фигня! 😆 Нормальный человек понимает, что это оговорка человека владеющего разным софтом и сервисным инструментом для дизайна и вёрстки.

[@garaevschool]

@@videoleaks благодарю!

[@Алена-з6э4щ]

а думаю причем тут тильда )) Потом дошло. Подскажите курсором как на маке управляете, что для этого используете?

[@garaevschool]

@@Алена-з6э4щ тачпад на макбуке)

[@ВикторияДикс-ю9л]

Максимум пользы за 7 минут, спасибо огромнейшее)

[@garaevschool]

Рад делиться)

[@mur_mur_travel]

О господи, СПАСИБО!!!!! сколько искала данную информацию нигде не могла найти. Спасибо

[@kristinam00735]

Присоединяюсь! Тоже искала такой подробный урок

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@sun-cz7ud]

Спасибо!! Ты мне очень помог. Весь ютуб перерыла, чтобы найти нормальное объяснение

[@garaevschool]

Очень рад! 🔥

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@ЖадыраЖарылгап]

Спасибо за такую полезную информацию! Самое главное коротко и четко 😍

[@garaevschool]

Благодарю за фидбэк!)

[@SteamRUS1]

Самое полезное видео из всех, что я видел

[@АнастасияКалпашникова-ш9ц]

Благодарю,коротко и понятно,самое главное!!!😊👌🏻

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@emiliiavibe]

Очень круто и очень помогло! Спасибо ❤

[@cryptotrade7003]

Отличное видео , спасибо за проделанную работу 👍🔥

[@garaevschool]

Рад стараться 😉🤘

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@ТинаЛогинова-ю6щ]

Святой человек🤍🤍 спасибо

[@Виктория-х5ж6з]

Большое спасибо за туториал!

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@kreatiftop]

Как сохранить все что собрал в фигме? Нажимаю экспорт а там всё сохраняется по отдельному элементу, нет такогр чтоб одним целым рисунком сохранилось

[@aroniapolina]

Здравствуйте! Как вы быстро разделили на блоки один большой фрейм ?

[@anastasiia.fartushna]

Спасибо за видео!

[@clousdu4927]

Спасибо Но я ждал настройки по фронту, чтоб анимации настраивать можно было(

[@Анаэль-и9т]

спасииииибо! очень полезно!

[@garaevschool]

Очень рад!)

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@Girafallen]

почему-то полосами загружает в таплинк

[@KatyaYurkova-wu6zj]

Не понимаю почему качество не очень хорошее в таплинге, и форматы пробовала разные и 4х ставила.... (

[@garaevschool]

Нужно смотреть. Причины могут разные

[@mustaeva]

Спасибо) кратко и понятно)

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@JazzMusic583]

Дизайн в Фигме делался по каким размерам и для какого гаджета или для ПК? Или нужно четко делать дизайн на Фигме под андроид и как потом мобильный дизайн на Таплинке будет показываться на ПК?

[@garaevschool]

Открой любой Таплинк-сайт на пк: там вид не сильно отличается, зависит от выставленных настроек В Фигме дизайн идёт сразу под мобилку по всем канонам мобильных экранов

[@donbao]

Спасибо, полезно!

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@Елена-г3ъ6в]

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

[@garaevschool]

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

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@dukabuka699]

Сейчас таплинке баннер стал платным.Еще есть другой вариант?

[@garaevschool]

По промокоду garaevschool7 пользуйся Таплинком 7 дней бесплатно

[@garaevschool]

По промокоду garaevschool7 пользуйся Таплинком бесплатно 7 дней ⚡️

[@snikdis4703]

здравствуйте, подскажите как разделить блоки?

[@garaevschool]

Привет Чтобы разделить блоки, раскидывай их по разным фреймам

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@АсельКуспекова-и9ю]

Здравствуйте, подскажите пожалуйста где найти информацию о курсе?

[@garaevschool]

Асель, привет!) Сейчас только в личных сообщениях могу рассказать о нем, t.me/garaevruslan

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@artem-ai]

Здравствуйте, скажите, пожалуйста, а какой размер 1 фрейма для таплинка? Спасибо 🙂

[@garaevschool]

Вообще любой. Я ставлю ширину от 720 рх, по высоте - как пойдёт, учитывая логику первых экранов

[@artem-ai]

@@garaevschool а, понял, спасибо большое 💪🏻💪🏻💪🏻

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@iceb15]

Здравствуйте. Подскажите пожалуйста, загрузила баннер на таплинк а его не видно😢Что делать?

[@garaevschool]

Интересный конечно вопрос) Не посмотрев, не смогу подсказать

[@arnautova.a]

Скажите пожалуйста, а как понять какой размер страницы у таплинк? чтобы понимать ширину и длину макета.

[@garaevschool]

В режиме редактирования и отображения для компьютера, сверху есть линейка, показывающая ширину в px для разных экранов А длины единой нет ни для одного смартфона, у разных моделей - разное разрешение экранов Я оформляю макеты во фреймах шириной 740 px, а экспортирую в 4х

[@arnautova.a]

@@garaevschool благодарю вас!))

[@braza8031]

@@garaevschool Это значит 740 умножить на 4, правильно? Какую ширину рекомендуете для контентной области? Если делать в фотошоп?

[@garaevschool]

@@braza8031 в уроке ведь продемонстрирована ширина. По сути в Figma она не важна, хоть в ширину 1080 рх делай, главное чтобы это выглядело мобильной версией

[@braza8031]

@@garaevschool Да но просто хочу сделать в фотошоп...там нет такого в 4х экспорта..поэтому хотел уточнить...

[@КапитолинаШпакова-е6м]

Свёрстанный дизайн на тильде-это... С канвы например всё в тильду перенести и там кнопки сделать рабочими... Или как это?

[@garaevschool]

Я мог перепутать слова «Тильда» и «Фигма» 😅

[@КапитолинаШпакова-е6м]

@@garaevschool тильда то есть не нужна?

[@garaevschool]

@@КапитолинаШпакова-е6м да

[@nadejdapan4770]

Подскажите пожалуйста, если в фигме сделать анимацию, то при переносе в таплинк эта функция будет не доступна? Там только с кодом?

[@garaevschool]

На Таплинк можно загрузить любую свою анимацию также через блок Баннеры, загружая туда gif

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@Polinarya1]

Как найти вашу инсту можно ник и какие у вас курсы

[@garaevschool]

Пиши лучше сразу в Телеграм t.me/garaevruslan

[@Natali-web-design]

На бесплатном тарифе из фигмы в таплинк возможно перенести?

[@garaevschool]

На Таплинке на бесплатном тарифе не получится использовать Баннеры, поэтому нужен как минимум тариф Про

[@НатальяЛаврентьева-у5ю]

Добрый день! Подскажите, пожалуйста, делаю по вашей инструкции, пишет что превышает размер файла, сохраняю в таком же качестве как и у вас и размер баннера такой же. Как можно изменить размер?

[@garaevschool]

Зависит от того, что у вас на баннере размещено. Скорее всего там лежит «крупногабаритный» элемент, который желательно сжать, перед тем как размещать на баннере в Фигме

[@КапитолинаШпакова-е6м]

А если я в канве делала, то получится?

[@garaevschool]

Да, точно также загружаете изображения в блок баннер на Таплинке

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@imashev8684]

Какой размер нужен в фигме для баннера?

[@garaevschool]

В разных соцсетях разные размеры баннеров, быстрее посмотреть в гугле, первый запрос всегда даст ответ 👌 Если конечно я правильно понял, о каких баннерах идёт речь. Если речь идёт про Фрейм для Таплинк-сайта, то своим ученикам и раньше предлагал размер фрейма шириной 740 рх, сейчас в 320 рх делаем. Высота зависит от количества контента на Таплинк-сайте

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@kkekmk]

СПАСИБО!!! но есть один вопрос: а если я хочу, чтобы кнопка была на экране, а не отдельным блоком, как быть?

[@garaevschool]

Расположить её так, как тебе нужно

[@kkekmk]

@@garaevschool я имею ввиду типо слой на слой, тоесть вот я добавил баннер, и я хочу чтобы на нем была кнопка, которая будет функционировать

[@garaevschool]

@@kkekmk зачем так заморачиваться? Если можно на баннере кнопку разместить визуально в редакторе и ему ссылку прикрепить В ином случае, это делается только через код

[@kkekmk]

@@garaevschool А где можно найти код?

[@garaevschool]

@@kkekmk заказать у разработчиков

[@anton_youtube_1]

Руслан, привет. Спасибо за объяснения. Скажи, пожалуйста, почему разрешение макета под мобилку именно 640px? Спасибо.

[@garaevschool]

Разрешение здесь особо роль не играет, это стандартный фрейм просто с которым удобно работать наглядно, потому что он узкий, как экран мобилки

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@lexiesanders929]

А как потом сделать чтобы эти кнопки нажимались а не просто картинкой были?

[@garaevschool]

К блоку Баннер на Таплинк можно прикручивать ссылку - вот так)

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@dory3218]

Привет! Размер рабочей области(frame) для таплинка лучше всего установить 640 в ширину? Или 360?

[@dory3218]

Какой правильный размер рабочей области должен быть?

[@garaevschool]

Лучше 640, не меньше, и при экспорте лучше установить размер в х2-х3

[@dory3218]

@@garaevschool А размер шрифта какой-то определённый или для каждого таплинка по-разному?

[@garaevschool]

@@dory3218 зависит от шрифта и концепции дизайна

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@katrine_ev]

А что за мастер класс?

[@garaevschool]

Уже прошёл) Следующий анонсирую в своём Instagram instagram.com/garaevruslan.pro

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@ГанджубасПипеткин]

Привет,а обязательно верстать макет? просто дизайн не получится залить на таплинк?

[@garaevschool]

Зависит от тех моментов, если у тебя есть кнопки, то необходимо их отдельно разбивать на блоки

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@АнастасияРодина-х8г]

Как хорошо, что наткнулась на ваше видео😻 Подскажите пожалуйста, а как уменьшить фрейм в длину и что бы кнопки с текстом не съезжали? Вся измучилась, незнаю как🙈 И кнопки, по типу записаться и т.д лучше отдельно вырезать и вшивать в баннер на таплинке уже ссылку или как это делается по нормальному?😄🙈

[@garaevschool]

Зажимай ctrl на Windows или cmd на MacOS и растягивай фрейм Также можно отключить привязку у элементов к нижнему краю фрейма

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@dory3218]

А как блоки разделить?

[@garaevschool]

В Фигме в разных фреймах разместить их

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@Karneplod45]

где найти промокод на таплинк?

[@garaevschool]

В описании к видео

[@garaevschool]

Привет, дизайнер! Хочешь поучиться новым фишкам в дизайне Taplink-сайтов? Тогда попытай свою удачу в розыгрыше 33 призов, где тебя ждёт обучение от меня 😎 Переходи по этой ссылке в мою группу ВК, там подробности: vk.cc/ceYRwq

[@antoha00894]

Так вот откуда взялись таплинки из картинок 😂png-разработчики

[@garaevschool]

Это уже давно не новшество)

[@dukabuka699]

Сейчас таплинке баннер стал платным

[@garaevschool]

Можно воспользоваться всем функционалом Таплинка 7 дней бесплатно по моему промокоду: garaevschool7

[@dukabuka699]

@@garaevschool Если я использую там функций после 7 дней мой таплинке изчезнет функций который я готовил?

[@purks1337]

Минимум пользы за 7 минут, потраченного времени - жаль. Пяти кратно переваренный кал.

[@garaevschool]

Пора взять ответственность за то, на что ты тратишь время

[@ТинаЛогинова-ю6щ]

Святой человек🤍🤍 спасибо