Создание сайта в FIGMA С НУЛЯ // Пошаговое объяснение для новичков

Подписаться 12 тыс.

Просмотров 34 тыс.

50% 1

Сегодня я подробно покажу вам как с нуля новичку в веб-дизайне сделать свой первый экран сайта в минимализме. Также расскажу о фишках в Figma, которые будут вам полезны.
ЕСЛИ ИНТЕРЕСУЕТ ОБУЧЕНИЕ - пиши в телеграм (@nytellina) ❤️
Привет, меня зовут Нюта, я более 3 лет занимаюсь разработкой сайтов и приложений под ключ.
🔥 Добавляйся ко мне в социальные сети:
Второй RU-vid канал: www.youtube.co...
Instagram: / nytellina
Telegram-канал: t.me/nytellinaa
TikTok: / nytellina
Behance: www.behance.ne...
#Фотошоп, #Уроки фотошоп, #Фриланс, #Дизайн в фотошопе, #Веб дизайн, #Как научиться фотошопу, #Уроки дизайна, #Фигма, #Figma, #логотипы #Adobeillustrator

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

8 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 156

@nytellina Год назад

t.me/nytellinaa - Мой telegram-канал полезный для дизайнеров Ссылка на скачивание шрифта из видео - bestfonts.pro/font/gilroy ЧТОБЫ ПОЛУЧИТЬ ИСХОДНИК ИЗ ВИДЕО: - напиши комментарий под этим видео - сделай репост любого рилса с моего инстаграма (nytellina)

@KupiCD Год назад

Скорость точно для новичков😁

@html_css_it 10 месяцев назад

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

@nytellina 10 месяцев назад

Создать группу: Ctrl + G на Windows и ⌘ + G на Mac Скопировать: Ctrl + С на Windows и ⌘ + С на Mac Вставить: Ctrl + V на Windows и ⌘ + V на Mac А если возникнут конкретные вопросы по видео, можете со мной связаться в тг

@html_css_it 10 месяцев назад

А как же CTRL + D или с зажатом ALT?

@nytellina 10 месяцев назад

@@html_css_it можете и так. Если сами знаете, то зачем спрашиваете в комментариях?)

@AlexCoxx 2 месяца назад

@@nytellina он говорит что для тех кто это не знает - это не очевидно, а из видео так вообще про это 0 инфы

@user-lg8rr4yb2g Год назад

Спасибо, за урок, было чётко, быстро, понятно, позитивно. Ценю вашу энергию, на которой вы записываете видосы.

@nytellina Год назад

Спасибо за такие приятные слова. Они заряжают ❤️

@Lemon_Leon Год назад

Приятно смотреть и слушать. Легко получается донести информацию. И видео не затянутое. Спасибо! Успехов и отличного настроения!

@nytellina Год назад

Спасибо за такой приятный комментарий ❤

@Martina-mg2jj 2 месяца назад

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

@nytellina 2 месяца назад

@@Martina-mg2jj ну в какой-то мере действительно уже дизайнер )

@kurkul8 Год назад

Спасибо большущее за полезный ролик)) подача супер и тамада хороший)

@nytellina Год назад

Хороший тамада и конкурсы интересные 😂 Слоган моего канала

@user-tg5vp9in8c Год назад

Классный контент! Доступно, весело, обаятельно! Продолжай в том же стиле😘

@nytellina Год назад

Спасибо ☺️

@acebergub3300 5 месяцев назад

На моих глазах произошло искусство. Всё так легко, непринуждённо и профессионально

@nytellina 5 месяцев назад

Спасибо за комментарий ❤️

@itspopov2 Год назад

Очень нравится твоя подача :) Всегда интересно смотреть

@nytellina Год назад

Спасибочки

@user-kg5cx4lr5b Месяц назад

Ты очень крутая 👍🏻👍🏻👍🏻 Просто лучшая👍🏻👍🏻👍🏻

@nytellina Месяц назад

@@user-kg5cx4lr5b спасибо огромное ❤️

@Dimas81i Год назад

От всей души благодарю за помощь в изучении графического и веб-дизайна! Лайк однозначно! Создал макет в Figma по подобию ролику!

@nytellina Год назад

Спасибо за комментарий) мне приятно читать такие слова ❤️ Каждую среду выходят ролики, завтра среда, так что ставьте уведомления, завтрашний видос будет круче этого в несколько раз ) тоже будем в фигме работать

@user-nk4wz5sq8r Год назад

спасибо за ролик.Ждем новых.Продолжайте.У вас хорошо получается

@nytellina Год назад

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

@soulgoodman1942 Год назад

Ааа, кайф, харизматичная девушка с классной подачей) Наконец-то не захлебываюсь водой во время просмотра на тему веб-дизайна. В общем, круто, что наткнулся на тебя)

@nytellina Год назад

Круто, что наткнулась на твой комментарий) + к настроению ☺️

@Deni_steam Год назад

Огромная благодарность за видео. 🎉🔥❤

@nytellina Год назад

Огромная благодарность за то, что написали комментарий ❤️

@channelforeverything2506 Год назад

Видео топ зделал 1 работу очень нравится тематика сёмак 😊

@nytellina Год назад

я рада, что нравится )

@TruRoss-or6qi Год назад

Благодарим.❤ А возможно ещё где-то в углу, вывести сочетание клавиш которые ты нажимаешь? Заливку в обводку например, как сделать клавишами быстро - интересно. 🙂

@nytellina Год назад

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

@Natalya_b78 Год назад

Быстро,понятно,доступно и интересно 💜

@nytellina Год назад

Спасибо большое за приятные слова ❤

@Natalya_b78 Год назад

@@nytellina 💜

@infocomprivat3141 Год назад

Класс! Послушал,как мёдик в ушки залили)) Спасибо!

@nytellina Год назад

Хахаха, такого мне ещё не писали под дизайн роликами) Спасибо за комментарий

@balaganby1218 Год назад

Умница ❤ такого контента не хватало 👏🏼

@nytellina Год назад

Спасибо. Теперь будет хватать)❤️‍🔥

@Rivancik 11 месяцев назад

Лучшая из лучших , спасибо большое ❤

@nytellina 11 месяцев назад

Спасибочки 🥰🥰🥰

@Pro3DArt 3 месяца назад

Спасибо! Было интересно

@haisek1d2007 11 месяцев назад

Хорошее видео, а главное получилось понятно и красиво

@nytellina 11 месяцев назад

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

@ilyatarasiuk2245 3 месяца назад

Добрый день! Подскажите, пожалуйста, при группировки слов "Study" & "Like" и при уменьшении размеров у меня уменьшается только frame, но не сам текст. Извините за столь детский вопрос:)

@nytellina 3 месяца назад

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

@ilyatarasiuk2245 3 месяца назад

@@nytellina Спасибо

@karlhogort4860 4 месяца назад

Да, все классно, мне понравилось.

@nytellina 4 месяца назад

Это чудесно)

@ranstplay8876 Год назад

Успехов и отличного настроения!

@nytellina Год назад

Спасибо большое. И тебе хорошего дня 🥰

@user-qp5qg2pz5k Год назад

УМНИЧКА)😜

@nytellina Год назад

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

@CrimeMystic 11 месяцев назад

Все слишком быстро для "детального видео", хотя это лишь основы и в принципе всё понятно получилось)

@nytellina 11 месяцев назад

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

@bestCHANNE-o3l 6 месяцев назад

0.5 скорость это што то но повторил шаг за шагом опьянел немного в конце от тебя

@stanmillionerom Год назад

Очень круто!) Спасибо за урок. ❤ Подскажите, пожалуйста, как вы сделали такое видео в кружочке?

@nytellina Год назад

Спасибо за комментарий 💕 Отдельно снято видео экрано и отдельно снято видео, где я комментирую. А потом в программе для монтажа (Premiere Pro) соединила и там как раз и сделала видео в кружке

@stanmillionerom Год назад

@@nytellina Ааа понятно, теперь) Спасибо за ответ!) 😘🤗

@hazardeath4819 Год назад

Спасибо все четко и понятно 🙂

@nytellina Год назад

Спасибо за комментарий 🤩

@user-eg4vd7ti8r Год назад

Видео мне понравилось , все понравилось !

@nytellina Год назад

Спасибо)😊

@mitamita111 Месяц назад

я новичок, открыла и долго пыталась понять как создавать фрейм.. мда, для новичков прям видео, ага(

@user-dx7ws9zu6c 4 месяца назад

классно, а зачем вы делаете первый экран в высоту 1000 пикселей? так ведь не делают, не поместится в монитор, почему сразу нормальные размеры не сделали? я тут просто пришла на юютуб с размерами в высоту разобраться вот и возникает вопрос

@nytellina 4 месяца назад

Делайте 890-960 по высоте

@user-dx7ws9zu6c 4 месяца назад

@@nytellina Благодарю за ответ)

@ESEkaterina 10 месяцев назад

А вот, допустим дизайн сделан, и надо сделать теперь сайт, как все сделать в точь в точь на тильде? Там же нет каких то элементов. Это нужно куда то вставлять? Или есть такой ролик? Подскажите пожалуйста 🙏🏻 буду благодарна!❤️

@nytellina 10 месяцев назад

Ну так и переносишь на тильду. Картинки отдельно сохраняешь и выгружаешь, текст и кнопки уже на тильде создаёшь

@maximalniy 10 месяцев назад

Первый шаг и уже ничего непонятно - Как ты создала фрейм? Как ты вызвала заливку? Офигенная пошаговая инструкция

@nytellina 10 месяцев назад

О, тот самый вечно недовольный 🫶

@nopesin Месяц назад

привет) а как сделать, чтоб нажимая на кнопочки(главная,контакты и тд) переносило на другую страничку? да и вообще как макет сайта преобразовать в сайт?😁😁

@nytellina Месяц назад

@@nopesin нужно проект сверстать. Для этого придумали море платформ. WebFlow, Tilda, Wix, Wordpress и другие. Выбираешь какой-то конструктор и проект можно использовать полноценно

@nopesin Месяц назад

@@nytellina а можно в фигме создать а в этих приложениях доделать?

@nytellina Месяц назад

@@nopesin ну в фигме ты создаешь дизайн, а с помощью других платформ ты этот дизайн, который подготовлен просто переносишь, чтобы теперь кнопки работали и тд

@nopesin Месяц назад

@@nytellina а хорошо спасибо

@anneta-j5t Месяц назад

А какой шрифт в итоге будет я так и не услышала нормально

@nytellina Месяц назад

@@anneta-j5t Gilroy

@Liza_Fox_Play Год назад

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

@nytellina Год назад

Это настолько элементарный экран, что достаточно просто поставить замедление и повторять 1 в 1. Основные моменты я комментирую. Но моя задача сделать так, чтобы это ещё кто-то смотрел и не умер от скуки)

@user-lg2dt5nq9d Год назад

отличное видео, не подскажите, как скаченный файл шрифта "gilroy" установить в фигму?

@nytellina Год назад

Заходишь по ссылке, скачиваешь. Потом заходишь в загрузки и кликаешь на то, что скачал. Дальше нажимаешь на кнопку «Установить». Следующий шаг это закрыть фигму и открыть потом заново после установки шрифта. И он автоматически появится у вас в фигме

@loginof Год назад

Сказала подробно объяснишь для новичков, в итоге протароторила в самом начале и нифига не поймёшь

@nytellina Год назад

Ну раз всем понятно, а вам нет, то что я могу сделать) поставьте на замедленное и повторяйте, элементарная работа

@5508_Astar Год назад

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

@nytellina Год назад

Рада, если было полезно 🤩

@Alekseev_Oleg Год назад

Толи я пропустил (хз конечно как), толи не делался акцент на сетке-этот момент не очень понятен, а в целом всё замечательно!)

@nytellina Год назад

У меня сетка 1170 (ширина), а ширина всего фрейма 1920

@Alekseev_Oleg Год назад

@@nytellina ага, теперя ясно! ☺И ещё вопрос по сетке: она произвольно выставляется, т.е. под нужды дизайна сайта?

@nytellina Год назад

@@Alekseev_Oleg выставляется в зависимости от того под какое устройство ты делаешь сайт. Если ты адаптируешь дизайн под телефон, то там будет другая ширина, соответственно и сетка уже. Если делаешь под супер широкий монитор, то сетка будет больше. Но я рисую под эту, так как у большинства пользователей именно такие ноуты

@Alekseev_Oleg Год назад

@@nytellina я планирую делать адаптивный дизайн под два-три самых часто используемых разрешения, т.е.для двух-трех разрешений(если я правильно понимаю адаптиный дизайн) А в целом всё понятно, благодарю за помощь!😊 👍

@user-up7jw8ix3p Год назад

Nytellina, здравствуй. Скажи, пожалуйста: - Если есть айпад Apple Pro со слитусом.... Можно ли там рисовать полноценно макеты для сайтов, в тех программах, которые доступны в эпл-стор? Или, все же, это не полноценная замена ПК/Ноутбуку?

@nytellina Год назад

Это не полноценная замена ноуту/пк,

@user-up7jw8ix3p Год назад

@@nytellina , спасибки! А то, я уже губу раскатала)

@nytellina Год назад

@@user-up7jw8ix3p 😂 Но лучше действительно подкопить на какой то обычный даже не очень дорогой ноут)

@tr1ckky Год назад

Что делать если нет такого шрифта? Спасибо за полезную информацию

@nytellina Год назад

Ну в закреплённых мой комментарий висит с ссылкой, где можно его скачать …

@Kawasalto 4 месяца назад

А это типа сайт? Чот мне кажется это всё таки картинка, которую можно с таким же успехом нарисовать в фотошопе...

@nytellina 4 месяца назад

Это ДИЗАЙН сайта, который потом верстают или передают верстальщику

@aleksoln Год назад

Спасибо за видосики. А какая сетка здесь у тебя? У меня все скомкано получается. (gutter 20 видимо маловато). Вообще не понял, если сетки помогут верстальщикам собрать эти нарезки, то почему все рисуют свои сетки как им хочется( Я с этими сетками и адаптивами еду кукухой

@nytellina Год назад

У меня ширина рабочей области 1170. Ширина всего макета (фрейма ) 1920 Вообще всегда в реальных проектах, если верстаешь не ты сам, то обязательно нужно согласовывать сетку с верстальщиком перед началом работы, чтобы не было потом проблем

@aleksoln Год назад

@@nytellina спасибо за такой подробный ответ

@user-cn7bi5yb3f Год назад

У кого училась веб дизайну? а то сейчас много кто курси продает по єтой теме.

@nytellina Год назад

Я училась на личном наставничестве у человека, который сейчас преподаёт вместе со мной) Мы решили сделать совместное личное обучение спустя столько лет

@user-cn7bi5yb3f Год назад

@@nytellina зарабатываешь на обучении или еще и под заказ создаешь сайты? Какая стоимость обучения?

@nytellina Год назад

@@user-cn7bi5yb3f я три года зарабатывала только с сайтов и приложений. Только недавно у нас ещё и личное наставничество появилось как доп доход. Но так как это не массовый продукт, то я все равно зарабатываю больше денег с проектов Все детали обучения ты можешь узнать в личке в телеграме (nytellina)

@nastya250260 11 месяцев назад

Скажите, а где можно выставлять свои работы, что бы видели заказчики ?

@nytellina 11 месяцев назад

Беханс, дрибл можете для начала попробовать)

@polezenmir Год назад

благодарю !

@nytellina Год назад

💕

@katjakatja210 Год назад

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

@nytellina Год назад

Спасибо за комментарий ❤️

@michaelm9art547 Год назад

Я вообще ниче не понял, я новичок, тараторит че-то нажимает блин, извини но это точно не для новичка)

@nytellina Год назад

Посмотри последний ролик, я уже не знаю как подробнее показывать, чтобы это не превращалось в что-то нудное

@michaelm9art547 Год назад

@@nytellina хорошо, извини уж меня я просто в фигме совсем 0

@nytellina Год назад

@@michaelm9art547 последнее видео, я там на 9 минут записала, может тебе понятнее будет. Если сложно будет, можно замедлить видео. Но в последнем я старалась показать куда нажимаю, там такой оранжевый сайт получился

@nytellina Год назад

@@michaelm9art547 плюс если ты что-то поверяешь по моим урокам ты можешь мне в тг присылать и я подскажу какие-то детали

@michaelm9art547 Год назад

@@nytellina спасибо тебе большое, хороший ты человек)

@Sandre_Designer 2 месяца назад

А как ви колони настроили в фигме ?

@nytellina 2 месяца назад

Справа "layout grid" нажимаете на плюсик и настраиваете сетку, которая вам нужна

@user-gm3bl6zl2d 10 месяцев назад

Тарахтишь, Тарахтишь - ничего непонятно, стрелка бегает по экрану как ненормальная, ты по сути покажи куда жмёшь и что в итоге получается....

@nytellina 10 месяцев назад

Вы по-моему забываетесь. Это бесплатный контент, который я делаю по своему личному желанию и как именно его делать решать только мне. А ваши претензии в данном случае не уместны. Так что если вас данный канал и данное пояснение не устраивает - вы можете найти другой, который вам подходит.

@user-gm3bl6zl2d 10 месяцев назад

@@nytellina на другом и занимаюсь, ваш - так.... Как сквозняк, посмотрел и забыл... Мозгу зацепиться не за что, информативно эти - - 0.000000001%

@nytellina 10 месяцев назад

@@user-gm3bl6zl2d я искренне рада тому, что вас не будет на этом канале)

@alexss5042 Год назад

Огонь, так лего и просто и оч круто, умница ☺🤩возьмешь на учебу?

@nytellina Год назад

На какую учебу 😂

@al-e-xii1322 9 месяцев назад

😂😂😂Вот если сравнить ваше обучение с тренировками по боксу ,😂😂😂 с момента входа в фигму и до момента замены градиента прошло пару слов,вот что б так учили боксу то былоб так ,зашел в зал ,оп уже открывает глаза лежа на полу,а тренер такой мол ,вот это был накаут. Если для новечков то расказывать нужно где что как и для чего а не просто озвучить свою роботу.За роботу 5 за обучение 2 .!!!

@nytellina 9 месяцев назад

когда мне понадобиться ваша оценка по 5 бальной системе, то я обязательно вам напишу!

@al-e-xii1322 9 месяцев назад

@@nytellina ну поскольку это была цитата из фильма , то вряд-ли ее перепишут 😂🤗

@user-ff5qy1ki2b Год назад

Носик 😀

@nytellina Год назад

спасибо за комментарий

@Lidkvas Год назад

А в какие форматы компилировать готовый дизайн? SVG?

@nytellina Год назад

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

@Lidkvas Год назад

@@nytellina понял, спасибо. Можешь пожалуйста как нибудь заснять туториал как подготовить и выложить макет заказчику? Думаю это будет полезно для остальных людей.

@nytellina Год назад

@@Lidkvas если ты делаешь под ключ (то есть дизайн + вёрстка), то ты берёшь ссылку на фигму с дизайном и присылаешь верстальщику. Если делаешь исключительно дизайн для заказчика, то тоже самое. Просто сделала макет, получила деньги и потом прислала ссылку. Если крупный проект, то ui kit ещё размещаешь рядом с макетом. А как он выглядит в гугле можешь глянуть. Написать «ui kit»

@Lidkvas Год назад

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

@nytellina Год назад

@@Lidkvas я могу рассказать как работаю я. Пока за проект не заплатили, я присылаю клиенту ссылку с макетами в jpg. Где нет слоев и клиент может оставить по фигме комментарии. Когда работа оплачена, я просто присылаю ссылку с макетом (там где есть слои) и человек может просто сделать дубликат себе, одной кнопкой и теперь этот макет будет у него в drafts.