Тёмный

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

TOP in design | Web-designer Krupina Tatiana
Подписаться 25 тыс.
Просмотров 57 тыс.
50% 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 #курстильда

Опубликовано:

 

6 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 133   
@rigayaya
@rigayaya 8 месяцев назад
Осенью 2024 стартует Наставничество от меня, где ты получишь комплекс знаний в UX/UI дизайне: 💜Расширенные знания в Figma (компоненты, AL, прототипирование, анимации, токены) 💜3 проекта в портфолио: коммерческий лендинг, интернет-магазин и креативный лендинг 💜Два проекта из трёх сможешь сверстать на Тильде прямо во время обучения под моим курированием 💜Поделюсь своими эффективными способами привлечения и поиска клиентов 💜Получишь навыки общения с клиентом и ведения проекта (работа с возражениями, закрытие на продажу, как презентовать дизайн чтобы не было правок) 💜Знания по предпроектному исследованию на фрилансе для создания осознанного дизайна (UX-анализ конкурентов, построение гипотез, проведения опросов) 💜Узнаете про все юридические аспекты: как обезопасить себя на фрилансе, нужен ли договор, про самозанятость и т.д. Попасть в предзапись -- t.me/+JQn_o-N58lw3NzRi
@annanauman1053
@annanauman1053 Год назад
Таня, я пересмотрела ваше видео уже трижды! С огромным удовольствием смотрю ваши уроки и как вы выполняете задания на фрилансе. Очень жду вторую часть❤❤❤
@user-mu4qk7vt2e
@user-mu4qk7vt2e Год назад
С удовольствием слежу за вашими новыми выпусками. Спасибо, что делитесь вашим опытом. Для начинающих дизайнеров ваш канал то, что надо.
@user-nd8ku4rm5x
@user-nd8ku4rm5x Год назад
Таня, круто, спасибо за урок! Снова берусь за тильдушку. Все понятно, буду ждать следующие уроки. Ты большая молодец!)
@rigayaya
@rigayaya Год назад
класс!! надеюсь, на этот раз не забросишь и дойдешь до конца с моим курсом ))
@silencee-ld3by
@silencee-ld3by 10 месяцев назад
Таня, спасибо тебе огромное! Я начинающая в дизайне, смотрю все твои видео. Твой опыт служит для меня примером и мотивацией)
@rigayaya
@rigayaya 10 месяцев назад
Очень рада помочь! 🤩
@Dogivill
@Dogivill Год назад
Спасибо за данное видео! Мне, на данный момент, актуально! Очень жду продолжения по анимации
@rigayaya
@rigayaya Год назад
Пожалуйста) вторая часть уже вышла😉
@klementeva_nataly
@klementeva_nataly Год назад
Спасибо! Жду продолжения ❤
@rigayaya
@rigayaya Год назад
И тебе спасибо за просмотр☺️
@user-fp8pg3sm3m
@user-fp8pg3sm3m 4 месяца назад
Спасибо за курс, очень познавательно.
@MrRostiKsS
@MrRostiKsS Год назад
Очень доступно объясняешь + приятный голос греет ушки. Жду следующую часть урока)
@rigayaya
@rigayaya Год назад
Спасибо) скоро будет
@m.o.n.s.t.e.r7170
@m.o.n.s.t.e.r7170 8 месяцев назад
Приятно смотреть ❤
@viktoryia_design
@viktoryia_design Год назад
Отличная новость! Очень вовремя 🔥🔥🔥
@rigayaya
@rigayaya Год назад
Класс! 🤩
@Anton-ni8un
@Anton-ni8un Год назад
Класс, жду следующую серию.
@rigayaya
@rigayaya Год назад
Скоро будет )
@haikoehoi9362
@haikoehoi9362 Год назад
Спасибо огромное за видео! Очень информативно. Пожалуйста, продолжайте. Очень интересно про html блоки и анимацию.
@rigayaya
@rigayaya Год назад
Хорошо) вторая часть уже вышла 😉
@lille9142
@lille9142 Год назад
Спасибо за видео!😊
@altadel1400
@altadel1400 Год назад
Ты чудо! Спасибо за контент
@rigayaya
@rigayaya Год назад
Пожалуйста 🥰
@catoroki2039
@catoroki2039 11 месяцев назад
Спасибо за ролик!
@user-tu5iw2hd2l
@user-tu5iw2hd2l Год назад
Спасибо большое, как раз сейчас для меня это актуально
@rigayaya
@rigayaya Год назад
Здорово! Ставь колокольчик чтобы не пропустить вторую часть урока 🫶
@user-gq8lx3fd2j
@user-gq8lx3fd2j Год назад
Спасибо тебе за этот курс, лично для меня очень своевременно получилось.
@rigayaya
@rigayaya Год назад
Рада помочь 🫶
@cartel3580
@cartel3580 Год назад
Спасибо за новое видео
@rigayaya
@rigayaya Год назад
Пожалуйста)
@kami307g
@kami307g 17 дней назад
Подписалась!! Интересно
@anastakonyakina
@anastakonyakina Год назад
Крутооооооо!!!!!!! Жду еще 😘
@rigayaya
@rigayaya Год назад
Скоро… 👻
@user-eq7zu2zj8n
@user-eq7zu2zj8n 9 месяцев назад
БЛАГОДАРЮ!🤍вы чудо
@rigayaya
@rigayaya 9 месяцев назад
Рада помочь 😇
@Vika-lb3cq
@Vika-lb3cq Год назад
Клааас) спасибо за такие уроки)) Я училась на курсе и там мы больше дизайн изучали, а перенос на Тильду - не особо)
@rigayaya
@rigayaya Год назад
Рада, что видео полезны даже для практикующих дизайнеров)
@igorchernishov9211
@igorchernishov9211 Год назад
Нам не трудно, продолжай)
@domineks3382
@domineks3382 5 месяцев назад
малышка не грусти ты не в тильте все хорошо зай)))
@1Chitus
@1Chitus Год назад
Спасибо большое
@rigayaya
@rigayaya Год назад
Пожалуйста 💜
@MyComputer3m9914p
@MyComputer3m9914p 2 месяца назад
Великолепно
@user-ws2dp5pr3y
@user-ws2dp5pr3y Год назад
Круто! Максимально просто, без понтов, все понятно. Жду следующих видео и курсов 😊 также жду кнопочку ДОНАТА
@user-ws2dp5pr3y
@user-ws2dp5pr3y Год назад
Нашел донат :D
@rigayaya
@rigayaya Год назад
Спасибо:)
@lerahomo1520
@lerahomo1520 Год назад
Благодарю 🙏🏻
@rigayaya
@rigayaya Год назад
Пожалуйста 🤩
@anastasias8174
@anastasias8174 Год назад
Таня, спасибо большое! Очень люблю смотреть твои видео и мне, как начинающему веб-дизайнеру, многие вещи кажутся очень интересными и полезными!❤ Подскажи пожалуйста, рассмотришь ли ты в рамках серии данных видео как передавать уже готовый сайт заказчику, как дать ему жизнь на просторах интернета, как потом его заказчик будет править, если некоторая информация изменится/устареет? Очень, просто безумно мучают эти вопросы, была бы очень рада, если бы ты их осветила 🥺
@rigayaya
@rigayaya Год назад
Окей, добавлю этот момент в план курса)
@anastasias8174
@anastasias8174 Год назад
@@rigayaya спасибо большое)
@Aidakaev
@Aidakaev Год назад
класс, ждем уроки по анимации
@rigayaya
@rigayaya Год назад
Обязательно и до него дойдем)
@damnewsfromMaxMorgendorffer
спасибо💕
@rigayaya
@rigayaya Год назад
Пожалуйста! 💜
@ytrdhyt
@ytrdhyt Год назад
Какая же ты милашка.. 😘 И умничка! ☝️😁
@rigayaya
@rigayaya Год назад
спасибо ;)
@dubltshouse6373
@dubltshouse6373 4 месяца назад
Спасибо , год отучился в BBE, продолжаю учиться у вас.
@christin5004
@christin5004 3 месяца назад
Привет! Подскажи пожалуйста, как прошла учеба в BBE? Стоит идти новичку ?
@dubltshouse6373
@dubltshouse6373 3 месяца назад
@@christin5004 привет! Мне больше информации дали интенсивы после учебы. Но навыки и способность к обучению я получил именно в школе. Оглянувшись назад, не понимаю смог ли я бы сам научиться. Точно знаю что ты и без школы можешь научиться и не тратить деньги. Все могут. Окружи себя людьми которые работают в дизайне и подпишись на всякие каналы, изучай и все придет. Конкуренция сейчас большая, на hh месяц работу найти не могу, но не сдаюсь.
@dubltshouse6373
@dubltshouse6373 3 месяца назад
@@christin5004 самое главное и не написал- учиться в школе BBE очень тяжело
@aboutall9559
@aboutall9559 Год назад
ждем вторую часть
@rigayaya
@rigayaya Год назад
Уже вышла)
@Maykasahara01
@Maykasahara01 10 месяцев назад
Спасибо за видео! Т.е. можно было в принципе сразу в Тильда делать? Все те же возможности есть, что и в Фигма? Спасибо за ответ
@user-cx7gq8vg1l
@user-cx7gq8vg1l 11 месяцев назад
Умница
@tati_zhabskaia
@tati_zhabskaia Год назад
Татьяна,спасибо за уроки! Подскажите пожалуйста, где вы брали эти красивые звёздочки?
@rigayaya
@rigayaya Год назад
Спасибо за то что смотрите)) я нашла мокап с эффектом стекла и добавила туда звездочки. Это в фотошопе
@sardor9907
@sardor9907 Год назад
🔥🔥🔥
@rigayaya
@rigayaya Год назад
❤️‍🔥
@dark_veider_01
@dark_veider_01 6 месяцев назад
Этот чудесный голос как мёд, можно слушать и слушать )
@user-si7wr3on8t
@user-si7wr3on8t 8 месяцев назад
Таня здравствуйте !..☀ Вы очень интересно рассказываете и понятно объясняете, спасибо вам большое !..👍 Скажите пожалуйста, вот если взять пробный период на 2 недели или купить тариф на месяц и использовать в работе платные блоки и элементы, то после окончания пробного периода и платного тарифа - эти платные блоки будут продолжать работать на сайте и нормально функционировать или, чтобы продолжали работать - надо снова брать платный тариф ? Подскажите пожалуйста 🙏
@rigayaya
@rigayaya 7 месяцев назад
Блоки будут работать, но изменять вы их не сможете)
@user-ee7dj5cm3v
@user-ee7dj5cm3v 8 месяцев назад
привет, покажи горизонтальный скролл пожалуйста)
@torebs
@torebs 8 месяцев назад
Привет, вот сделал макет с анимациями. Можно ли с ними перенести на тильду?
@mila.sl_
@mila.sl_ 2 месяца назад
А какой размер фрейма был изначально готовый сайт в фигма?
@stacy2368
@stacy2368 5 месяцев назад
У вас клиента чаще заказывают сайт на тильде или заказывают ваш дизайн, а верстают уже на другой платформе? Или вы в любом случае верстаете? Благодарю❤
@user-yo8kn9np1r
@user-yo8kn9np1r 7 месяцев назад
🤩
@user-uj9ch9nv3u
@user-uj9ch9nv3u 10 месяцев назад
Подскажите пожалуйста, совсем не понимаю если изначально знаешь, что будешь делать сайт через Тильду, то зачем все так идеально создавать на фигме, чтоб потом абсолютно заново и по-другому(допустим размеры или отступы отличаются) это все делать, да и времени это займет почти столько же сколько изначально чтобы сделать на фигме?
@rigayaya
@rigayaya 10 месяцев назад
Идеально не обязательно. Я делала идеально т.к. проект коммерческий и вёрстка не на Тильде реализовывалась заказчиком - он выбрал другую платформу
@user-zz8ju9kp6s
@user-zz8ju9kp6s 8 месяцев назад
Привет., у меня нет панели инструментов в фигма, помоги настроить или может есть дельная ссылка на видео. спасибо
@user-tc9rv3xv5f
@user-tc9rv3xv5f Год назад
Не поняла как называется сайт, через который ты прогоняешь объект для улучшения качества? Подскажи пожалуйста?
@rigayaya
@rigayaya Год назад
Tiny png
@lmthehandler
@lmthehandler 2 месяца назад
Привет, очень нравится твой контент)) А почему не польуешься импортом из фигмы? это же быстрее, хоть и только для десктопа
@rigayaya
@rigayaya Месяц назад
Привет) уже отвечала ниже где-то)
@leyalio
@leyalio Год назад
жду новые уроки
@pavelivanov-lg8cc
@pavelivanov-lg8cc 7 месяцев назад
Как поменять логотип маленький самого сайта?
@pchela911
@pchela911 Год назад
Спасибо за видео. Только начинаю изучать тильду, хотела бы повторить все за вами, но не нашла исходников, к сожалению...
@rigayaya
@rigayaya Год назад
я в начале видео упоминаю, что это коммерческий проект, поэтому исходники не даю. вы можете его перерисовать самостоятельно или сделать свой дизайн, а потом вернуться к видео-уроку :) удачи!
@pchela911
@pchela911 Год назад
Спасибо@@rigayaya
@imsakina
@imsakina Год назад
Если клиент заказал у вас сайт Какие программы, платформы вы используете?
@rigayaya
@rigayaya Год назад
Фигму, все)
@Dmitry_Poglazov
@Dmitry_Poglazov 5 месяцев назад
Красотка
@user-wy5wy9kh2v
@user-wy5wy9kh2v 6 месяцев назад
Спасибо за видео, может кто-то знает почему я не могу вводить текст все удаляется автоматически
@mda_official
@mda_official 2 месяца назад
Привет, я заметил, что ты всё делаешь на глаз. Вот у меня вопрос на Тильде всё делается на глаз? Например невозможно перенести макет в Тильду по размеру?
@rigayaya
@rigayaya 2 месяца назад
есть автоматический перенос, но он глючный. Pixel Perfect -- это не про Тильду
@user-os4ih9oe5i
@user-os4ih9oe5i 15 дней назад
А что midjourney уже платный?(
@user-fm4gl5fc9e
@user-fm4gl5fc9e Год назад
А почему вы вручную переносите элементы, а не через импорт? Можно же буквально за пару секунд это сделать Либо есть какие-то нюансы? Урок очень интересный, жду части про код и анимацию ❤️‍🔥
@rigayaya
@rigayaya Год назад
Да, нюансов много для корректного переноса. Т.к. я свой дизайн изначально не планировала переносить в Тильду, я макет не подготавливала соответствующим образом. Также некоторые элементы мне не нужно вообще в тильду переносить в стандартном виде, потому что я буду делать анимации (по типу бегущей строки на первом экране, которую я не перенесла) В следующем видео постараюсь показать про быстрый экспорт, в общем, спасибо за вопрос)
@kronpolii
@kronpolii Год назад
Скажите пожалуйста, а можно ли использовать картинки из миджорни в своих портфолио?) Это разве не будет считаться нарушением авторского права?🥺
@rigayaya
@rigayaya Год назад
Нет, не считается) можно использовать любую графику (даже логотипы известных брендов) т.к. портфолио это не коммерческий проект
@kronpolii
@kronpolii Год назад
@@rigayayaа в коммерческом уже нельзя использовать миджорни? 😅
@rigayaya
@rigayaya Год назад
@@kronpolii эта тема ещё точно не изучена, пока однозначного ответа на это в сети нет. поэтому лучше перестраховаться и прям целиком картинки из мдж на сайт не вставлять. но можно коллажи в фотошопе делать. вырезать части из фото и тд
@user-xk1lu6hq3v
@user-xk1lu6hq3v Месяц назад
А что за сайт для сжатия картинок?
@rigayaya
@rigayaya Месяц назад
Tiny
@user-lk3em3fs9k
@user-lk3em3fs9k 6 месяцев назад
Привет! Очень хочу пройти этот курс, но не могу открыть ссылку с исходниками (Пишет, что больше нет такого тг канала) Может кто то знает, как быть?
@rigayaya
@rigayaya 6 месяцев назад
ссылку обновила) вот актуальная t.me/rigayaya_design
@user-lk3em3fs9k
@user-lk3em3fs9k 6 месяцев назад
@@rigayaya Супер! Спасибо бошьшое!
@shizoq1s
@shizoq1s 10 месяцев назад
Не могу понять какие размеры фрейма в фигме нужны
@RazvlekaykaBY
@RazvlekaykaBY Месяц назад
А как быть с мобильной версией? Она же накладывается на уже существующие блоки при импорте... Разные версии макетов, для дескотопа и мобилки отрисованы. Внимание - при импорте, а не вот так вручную делать.
@rigayaya
@rigayaya 22 дня назад
Импорт нужно делать когда ещё нет дизайна никакого. Мобилку Тильда делает тоже немного при импорте, но всё равно править надо, пока косячно она это делает
@user-gf4ki8ew6c
@user-gf4ki8ew6c Год назад
Здравствуйте, могу помочь с монтажом видео)
@rigayaya
@rigayaya Год назад
Здравствуйте, пока не нужно, спасибо)
@PoL28288
@PoL28288 Год назад
Няша
@rigayaya
@rigayaya Год назад
Спасибо
@newme.8944
@newme.8944 Год назад
Ребята-дизайнеры, помогите, пж, почему в фигме: я хочу сделать сеточку (чтобы ровно расположить меню, дискрипер итд), а у меня негде нажать frame.что делать? Люди добрые, умоляю, помогите.
@rigayaya
@rigayaya Год назад
Напиши в чатик дизайнеров, там помогут с ответом: t.me/chat_rigayaya
@newme.8944
@newme.8944 Год назад
@@rigayaya Спасибо💚🫂🫂🫂🫂🫂✨️))'::
@ananastv1
@ananastv1 4 месяца назад
Как забавно говоришь "нееееельзя"
@mishaselin2612
@mishaselin2612 Год назад
Спасибо тебе)))))
@TruRoss-or6qi
@TruRoss-or6qi Год назад
Вот с переносом файлов из фигмы в тильду, у меня что-то не очень..😒
@rigayaya
@rigayaya Год назад
значит самое время видео посмотреть)
@TruRoss-or6qi
@TruRoss-or6qi Год назад
@@rigayaya Посмотрел. Получается очень долго, по одному файлу. 😅 Я пробовал быстрый перенос, с переименованием файлов в png, gpg, и вектор - у меня получается не очень хорошо. Но у кого-то получается очень даже хорошо. Вот ищу этот навык быстрого переноса, всё никак не найду. 🤷
@rigayaya
@rigayaya Год назад
@@TruRoss-or6qi пока автоматом переноситсч не очень качественно, всё равно косяки будут. Вот и считайте - тратите время на переименовывание слоёв каждый раз + редактуру или просто сразу ручками перетаскиваете. А если два экрана есть, то вообще сказка! Зато точно уверены, что всё перенесли. Пока для меня это самый легкий и быстрый способ
@TruRoss-or6qi
@TruRoss-or6qi Год назад
@@rigayaya Ну слои не проблема переименовать - есть же функция переименовывать сразу все выделенные элементы. Но в остальном увы, те ещё траблы..
@bareltinc.4692
@bareltinc.4692 Год назад
можно жену такую? 👉👈
@rigayaya
@rigayaya Год назад
Чтобы макеты за тебя делала? 😅
@bareltinc.4692
@bareltinc.4692 Год назад
@@rigayaya Голда это вторичное, главное - душа
@user-ei3or8zh9h
@user-ei3or8zh9h Год назад
привет,пошли на свидание?)
@rigayaya
@rigayaya Год назад
ахахах, я подумаю
@dark_veider_01
@dark_veider_01 6 месяцев назад
Какая милая девушка Очень красивый голос 😊
@sayahattimemiz
@sayahattimemiz Год назад
🤗
@rigayaya
@rigayaya Год назад
☺️
Далее
Double Screen tutorial @RavenTheGoober
2:52
МАШ МИЛАШ про парня АБЬЮЗЕРА
00:37