Бесплатный курс по Тильда с нуля. Перенос макета из Figma в Tilda. 1 урок (1 часть)

Как переносить макет из Фигмы в Тильду? Какую сетку использовать в Фигма при работе с Тильдой? Урок по Тильда и Фигма для новичков. Смотри в этом видео!
🔥Наставничество по обучению UX/UI дизайну -- www.rigayaya.ru/study
Мой инстаграм с полезными инсайтами для фрилансеров: / rigayaya
Телеграм с материалами и исходниками: t.me/rigayaya_design
Behance с порцией вдохновения: www.behance.net/rigayaya
Чат веб-дизайнеров: t.me/chat_rigayaya
Поддержать канал: www.tinkoff.ru/cf/19tY9enZ6VK
Немного обо мне: Меня зовут Таня, в дизайне я с 14 лет, дизайном сайтов занимаюсь больше 3-х лет. Всех результатов я достигла самостоятельно, БЕЗ курсов, просматривая видео, которые снимаю сейчас сама. На своем примере я хочу показать, что онлайн-курсы -- это не панацея, вы можете добиться намного бОльших результатов и без них
Если ты хочешь обучаться самостоятельно, но не знаешь с чего начать и как составить план -- приходи ко мне на консультацию, там я подготовлю ПЕРСОНАЛЬНЫЙ план развития в веб-дизайне в зависимости от твоих целей и запросов. НЕТ шаблонному обучению с записанными уроками
Ищите веб-дизайнера для создания сайта? Это я :) Пишите в любой удобный мессенджер: taplink.cc/rigayaya
Таймкоды:
00:00 - 02:00 Что будет на курсе по Тильда?
02:00 - 03:05 Фронт работы
03:05 - 04:47 С чего начать работу в Тильда
04:47 - 05:00 Создаем Zero Block
06:00 - 08:40 Как подключить свой шрифт в Tilda
09:00 - 10:00 Обзор основных инструментов в Тильда
12:00 - 13:00 Про особенности текстового блока
13:00 - 13:46 Как обрезать картинки для экспорта в Фигме
13:30 - 14:10 Как правильно экспортировать картинки для переноса в Тильду
14:10 - 14:40 Почему важно сжимать фото
14:40 - 15:10 Как добавлять фото в Zero Block Тильды
15:10 - 15:40 Как менять цвет фона в Zero Block
15:40 - 16:30 Как поменять цвет сетки в Тильда
17:40 - 18:10 Чтобы первый блок заканчивался в конце экрана
21:30 - 22:40 Какая должна быть длина блока сайта
25:00 - 26:00 Экспорт сложного изображения из нескольких элементов
27:15 - 27:20 Как сделать наклон фигуры в Тильда
27:40 - 28:00 Про вторую часть урока
#tilda #figma #курстильда

[@rigayaya]

Осенью 2024 стартует Наставничество от меня, где ты получишь комплекс знаний в UX/UI дизайне: 💜Расширенные знания в Figma (компоненты, AL, прототипирование, анимации, токены) 💜3 проекта в портфолио: коммерческий лендинг, интернет-магазин и креативный лендинг 💜Два проекта из трёх сможешь сверстать на Тильде прямо во время обучения под моим курированием 💜Поделюсь своими эффективными способами привлечения и поиска клиентов 💜Получишь навыки общения с клиентом и ведения проекта (работа с возражениями, закрытие на продажу, как презентовать дизайн чтобы не было правок) 💜Знания по предпроектному исследованию на фрилансе для создания осознанного дизайна (UX-анализ конкурентов, построение гипотез, проведения опросов) 💜Узнаете про все юридические аспекты: как обезопасить себя на фрилансе, нужен ли договор, про самозанятость и т.д. Попасть в предзапись -- t.me/+JQn_o-N58lw3NzRi

[@annanauman1053]

Таня, я пересмотрела ваше видео уже трижды! С огромным удовольствием смотрю ваши уроки и как вы выполняете задания на фрилансе. Очень жду вторую часть❤❤❤

[@user-mu4qk7vt2e]

С удовольствием слежу за вашими новыми выпусками. Спасибо, что делитесь вашим опытом. Для начинающих дизайнеров ваш канал то, что надо.

[@user-fp8pg3sm3m]

Спасибо за курс, очень познавательно.

[@lille9142]

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

[@catoroki2039]

Спасибо за ролик!

[@klementeva_nataly]

Спасибо! Жду продолжения ❤

[@rigayaya]

И тебе спасибо за просмотр☺️

[@m.o.n.s.t.e.r7170]

Приятно смотреть ❤

[@user-nd8ku4rm5x]

Таня, круто, спасибо за урок! Снова берусь за тильдушку. Все понятно, буду ждать следующие уроки. Ты большая молодец!)

[@rigayaya]

класс!! надеюсь, на этот раз не забросишь и дойдешь до конца с моим курсом ))

[@Dogivill]

Спасибо за данное видео! Мне, на данный момент, актуально! Очень жду продолжения по анимации

[@rigayaya]

Пожалуйста) вторая часть уже вышла😉

[@silencee-ld3by]

Таня, спасибо тебе огромное! Я начинающая в дизайне, смотрю все твои видео. Твой опыт служит для меня примером и мотивацией)

[@rigayaya]

Очень рада помочь! 🤩

[@altadel1400]

Ты чудо! Спасибо за контент

[@rigayaya]

Пожалуйста 🥰

[@domineks3382]

малышка не грусти ты не в тильте все хорошо зай)))

[@igorchernishov9211]

Нам не трудно, продолжай)

[@user-eq7zu2zj8n]

БЛАГОДАРЮ!🤍вы чудо

[@rigayaya]

Рада помочь 😇

[@user-tu5iw2hd2l]

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

[@rigayaya]

Здорово! Ставь колокольчик чтобы не пропустить вторую часть урока 🫶

[@cartel3580]

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

[@rigayaya]

Пожалуйста)

[@Anton-ni8un]

Класс, жду следующую серию.

[@rigayaya]

Скоро будет )

[@haikoehoi9362]

Спасибо огромное за видео! Очень информативно. Пожалуйста, продолжайте. Очень интересно про html блоки и анимацию.

[@rigayaya]

Хорошо) вторая часть уже вышла 😉

[@viktoryia_design]

Отличная новость! Очень вовремя 🔥🔥🔥

[@rigayaya]

Класс! 🤩

[@user-gq8lx3fd2j]

Спасибо тебе за этот курс, лично для меня очень своевременно получилось.

[@rigayaya]

Рада помочь 🫶

[@lerahomo1520]

Благодарю 🙏🏻

[@rigayaya]

Пожалуйста 🤩

[@MrRostiKsS]

Очень доступно объясняешь + приятный голос греет ушки. Жду следующую часть урока)

[@rigayaya]

Спасибо) скоро будет

[@anastakonyakina]

Крутооооооо!!!!!!! Жду еще 😘

[@rigayaya]

Скоро… 👻

[@MyComputer3m9914p]

Великолепно

[@1Chitus]

Спасибо большое

[@rigayaya]

Пожалуйста 💜

[@damnewsfromMaxMorgendorffer]

спасибо💕

[@rigayaya]

Пожалуйста! 💜

[@Vika-lb3cq]

Клааас) спасибо за такие уроки)) Я училась на курсе и там мы больше дизайн изучали, а перенос на Тильду - не особо)

[@rigayaya]

Рада, что видео полезны даже для практикующих дизайнеров)

[@Maykasahara01]

Спасибо за видео! Т.е. можно было в принципе сразу в Тильда делать? Все те же возможности есть, что и в Фигма? Спасибо за ответ

[@user-cx7gq8vg1l]

Умница

[@torebs]

Привет, вот сделал макет с анимациями. Можно ли с ними перенести на тильду?

[@anastasias8174]

Таня, спасибо большое! Очень люблю смотреть твои видео и мне, как начинающему веб-дизайнеру, многие вещи кажутся очень интересными и полезными!❤ Подскажи пожалуйста, рассмотришь ли ты в рамках серии данных видео как передавать уже готовый сайт заказчику, как дать ему жизнь на просторах интернета, как потом его заказчик будет править, если некоторая информация изменится/устареет? Очень, просто безумно мучают эти вопросы, была бы очень рада, если бы ты их осветила 🥺

[@rigayaya]

Окей, добавлю этот момент в план курса)

[@anastasias8174]

@@rigayaya спасибо большое)

[@dubltshouse6373]

Спасибо , год отучился в BBE, продолжаю учиться у вас.

[@christin5004]

Привет! Подскажи пожалуйста, как прошла учеба в BBE? Стоит идти новичку ?

[@dubltshouse6373]

@@christin5004 привет! Мне больше информации дали интенсивы после учебы. Но навыки и способность к обучению я получил именно в школе. Оглянувшись назад, не понимаю смог ли я бы сам научиться. Точно знаю что ты и без школы можешь научиться и не тратить деньги. Все могут. Окружи себя людьми которые работают в дизайне и подпишись на всякие каналы, изучай и все придет. Конкуренция сейчас большая, на hh месяц работу найти не могу, но не сдаюсь.

[@dubltshouse6373]

@@christin5004 самое главное и не написал- учиться в школе BBE очень тяжело

[@Aidakaev]

класс, ждем уроки по анимации

[@rigayaya]

Обязательно и до него дойдем)

[@aboutall9559]

ждем вторую часть

[@rigayaya]

Уже вышла)

[@sardor9907]

🔥🔥🔥

[@rigayaya]

❤️‍🔥

[@dark_veider_01]

Этот чудесный голос как мёд, можно слушать и слушать )

[@user-ws2dp5pr3y]

Круто! Максимально просто, без понтов, все понятно. Жду следующих видео и курсов 😊 также жду кнопочку ДОНАТА

[@user-ws2dp5pr3y]

Нашел донат :D

[@rigayaya]

Спасибо:)

[@ytrdhyt]

Какая же ты милашка.. 😘 И умничка! ☝️😁

[@rigayaya]

спасибо ;)

[@user-si7wr3on8t]

Таня здравствуйте !..☀ Вы очень интересно рассказываете и понятно объясняете, спасибо вам большое !..👍 Скажите пожалуйста, вот если взять пробный период на 2 недели или купить тариф на месяц и использовать в работе платные блоки и элементы, то после окончания пробного периода и платного тарифа - эти платные блоки будут продолжать работать на сайте и нормально функционировать или, чтобы продолжали работать - надо снова брать платный тариф ? Подскажите пожалуйста 🙏

[@rigayaya]

Блоки будут работать, но изменять вы их не сможете)

[@mila.sl_]

А какой размер фрейма был изначально готовый сайт в фигма?

[@user-zz8ju9kp6s]

Привет., у меня нет панели инструментов в фигма, помоги настроить или может есть дельная ссылка на видео. спасибо

[@user-ee7dj5cm3v]

привет, покажи горизонтальный скролл пожалуйста)

[@tati_zhabskaia]

Татьяна,спасибо за уроки! Подскажите пожалуйста, где вы брали эти красивые звёздочки?

[@rigayaya]

Спасибо за то что смотрите)) я нашла мокап с эффектом стекла и добавила туда звездочки. Это в фотошопе

[@pavelivanov-lg8cc]

Как поменять логотип маленький самого сайта?

[@user-yo8kn9np1r]

🤩

[@stacy2368]

У вас клиента чаще заказывают сайт на тильде или заказывают ваш дизайн, а верстают уже на другой платформе? Или вы в любом случае верстаете? Благодарю❤

[@user-wy5wy9kh2v]

Спасибо за видео, может кто-то знает почему я не могу вводить текст все удаляется автоматически

[@mishaselin2612]

Спасибо тебе)))))

[@lmthehandler]

Привет, очень нравится твой контент)) А почему не польуешься импортом из фигмы? это же быстрее, хоть и только для десктопа

[@rigayaya]

Привет) уже отвечала ниже где-то)

[@user-uj9ch9nv3u]

Подскажите пожалуйста, совсем не понимаю если изначально знаешь, что будешь делать сайт через Тильду, то зачем все так идеально создавать на фигме, чтоб потом абсолютно заново и по-другому(допустим размеры или отступы отличаются) это все делать, да и времени это займет почти столько же сколько изначально чтобы сделать на фигме?

[@rigayaya]

Идеально не обязательно. Я делала идеально т.к. проект коммерческий и вёрстка не на Тильде реализовывалась заказчиком - он выбрал другую платформу

[@leyalio]

жду новые уроки

[@pchela911]

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

[@rigayaya]

я в начале видео упоминаю, что это коммерческий проект, поэтому исходники не даю. вы можете его перерисовать самостоятельно или сделать свой дизайн, а потом вернуться к видео-уроку :) удачи!

[@pchela911]

Спасибо@@rigayaya

[@user-fm4gl5fc9e]

А почему вы вручную переносите элементы, а не через импорт? Можно же буквально за пару секунд это сделать Либо есть какие-то нюансы? Урок очень интересный, жду части про код и анимацию ❤️‍🔥

[@rigayaya]

Да, нюансов много для корректного переноса. Т.к. я свой дизайн изначально не планировала переносить в Тильду, я макет не подготавливала соответствующим образом. Также некоторые элементы мне не нужно вообще в тильду переносить в стандартном виде, потому что я буду делать анимации (по типу бегущей строки на первом экране, которую я не перенесла) В следующем видео постараюсь показать про быстрый экспорт, в общем, спасибо за вопрос)

[@shizoq1s]

Не могу понять какие размеры фрейма в фигме нужны

[@user-tc9rv3xv5f]

Не поняла как называется сайт, через который ты прогоняешь объект для улучшения качества? Подскажи пожалуйста?

[@rigayaya]

Tiny png

[@Dmitry_Poglazov]

Красотка

[@imsakina]

Если клиент заказал у вас сайт Какие программы, платформы вы используете?

[@rigayaya]

Фигму, все)

[@mda_official]

Привет, я заметил, что ты всё делаешь на глаз. Вот у меня вопрос на Тильде всё делается на глаз? Например невозможно перенести макет в Тильду по размеру?

[@rigayaya]

есть автоматический перенос, но он глючный. Pixel Perfect -- это не про Тильду

[@kronpolii]

Скажите пожалуйста, а можно ли использовать картинки из миджорни в своих портфолио?) Это разве не будет считаться нарушением авторского права?🥺

[@rigayaya]

Нет, не считается) можно использовать любую графику (даже логотипы известных брендов) т.к. портфолио это не коммерческий проект

[@kronpolii]

@@rigayayaа в коммерческом уже нельзя использовать миджорни? 😅

[@rigayaya]

@@kronpolii эта тема ещё точно не изучена, пока однозначного ответа на это в сети нет. поэтому лучше перестраховаться и прям целиком картинки из мдж на сайт не вставлять. но можно коллажи в фотошопе делать. вырезать части из фото и тд

[@user-xk1lu6hq3v]

А что за сайт для сжатия картинок?

[@rigayaya]

Tiny

[@user-lk3em3fs9k]

Привет! Очень хочу пройти этот курс, но не могу открыть ссылку с исходниками (Пишет, что больше нет такого тг канала) Может кто то знает, как быть?

[@rigayaya]

ссылку обновила) вот актуальная t.me/rigayaya_design

[@user-lk3em3fs9k]

@@rigayaya Супер! Спасибо бошьшое!

[@user-gf4ki8ew6c]

Здравствуйте, могу помочь с монтажом видео)

[@rigayaya]

Здравствуйте, пока не нужно, спасибо)

[@RazvlekaykaBY]

А как быть с мобильной версией? Она же накладывается на уже существующие блоки при импорте... Разные версии макетов, для дескотопа и мобилки отрисованы. Внимание - при импорте, а не вот так вручную делать.

[@rigayaya]

Импорт нужно делать когда ещё нет дизайна никакого. Мобилку Тильда делает тоже немного при импорте, но всё равно править надо, пока косячно она это делает

[@newme.8944]

Ребята-дизайнеры, помогите, пж, почему в фигме: я хочу сделать сеточку (чтобы ровно расположить меню, дискрипер итд), а у меня негде нажать frame.что делать? Люди добрые, умоляю, помогите.

[@rigayaya]

Напиши в чатик дизайнеров, там помогут с ответом: t.me/chat_rigayaya

[@newme.8944]

@@rigayaya Спасибо💚🫂🫂🫂🫂🫂✨️))'::

[@TruRoss-or6qi]

Вот с переносом файлов из фигмы в тильду, у меня что-то не очень..😒

[@rigayaya]

значит самое время видео посмотреть)

[@TruRoss-or6qi]

@@rigayaya Посмотрел. Получается очень долго, по одному файлу. 😅 Я пробовал быстрый перенос, с переименованием файлов в png, gpg, и вектор - у меня получается не очень хорошо. Но у кого-то получается очень даже хорошо. Вот ищу этот навык быстрого переноса, всё никак не найду. 🤷

[@rigayaya]

@@TruRoss-or6qi пока автоматом переноситсч не очень качественно, всё равно косяки будут. Вот и считайте - тратите время на переименовывание слоёв каждый раз + редактуру или просто сразу ручками перетаскиваете. А если два экрана есть, то вообще сказка! Зато точно уверены, что всё перенесли. Пока для меня это самый легкий и быстрый способ

[@TruRoss-or6qi]

@@rigayaya Ну слои не проблема переименовать - есть же функция переименовывать сразу все выделенные элементы. Но в остальном увы, те ещё траблы..

[@ananastv1]

Как забавно говоришь "нееееельзя"

[@PoL28288]

Няша

[@rigayaya]

Спасибо

[@dark_veider_01]

Какая милая девушка Очень красивый голос 😊

[@bareltinc.4692]

можно жену такую? 👉👈

[@rigayaya]

Чтобы макеты за тебя делала? 😅

[@bareltinc.4692]

@@rigayaya Голда это вторичное, главное - душа

[@user-ei3or8zh9h]

привет,пошли на свидание?)

[@rigayaya]

ахахах, я подумаю

[@sayahattimemiz]

🤗

[@rigayaya]

☺️