В инструкции по Figma мы рассмотрим:

• Как добавить фото из ИИ сервиса в Figma
• Как сделать ресайз фото
• Как добавить текст на фото в Figma
• Как сохранить результат
• Как подключить дизайнера к работе над проектом
• Полезные ссылки

В инструкции по Tilda мы рассмотрим:

• Начало работы по созданию сайта
• Создание сайта из шаблонных блоков
• Создание кастомного блока в Zero Block
• Полезные ссылки

Сохранение файла из Midjourney

1 - Чтобы сохранить нужное фото из Midjourney, необходимо кликнуть на фото, как показано на Скрине №1

2 - В открывшемся окне нажимаем на текст Open in Browser ( Скрин №2 )

3 - Нажимаем правую кнопку мыши на фото и нажимаем Сохранить изображение как... ( Скрин №3 )

4 - В открывшемся окне выбираем, куда сохранить файл и нажимаем Сохранить ( Скрин №4 )

Теперь у нас есть файл для дальнейшего использования в Figma

Добавление файла в Figma

1 - Зайдите в Figma и создайте новый файл для работы ( Скрин №1 )

2 - В открывшееся окно, мы должны перетянуть файл с рабочего стола, зажимаем файл и перетягиваем на рабочий стол Figma ( Скрин №2 )

3 - Наш файл добавлен в Figma, теперь можем перейти к редактированию
( Скрин №3 )

4 - По клику на изображение в правом меню, у нас открываются настройки фильтра и заливки изображения. Можем производить необходимые настройки ( Скрин №4 )

Добавление разных размеров фото

1 - Для ресайза фото нужно использовать инструмент Frame, с помощью него можно создать необходимые форматы для ваших работ. Выбираем инструмент Frame и дальше выбираем формат в меню или растягиваем изображение на рабочем столе с помощью зажатия левой кнопки мыши до нужных размеров ( Скрин №1 )

2 - Для примера выбрали 3 формата, теперь повторяем пункт с перетягиванием фото в Figma, перетаскиваем фото в выбранный формат и изменяем размер фото под наш Frame. Вставляем фото в остальные Frame ( Скрин №2 )

3 - У нас получились ресайзы фото под нужные форматы

Добавление текста на фото

1 - Для добавления текста на фото, нам необходимо выбрать инструмент текст в меню Figma, в настройках можем отформатировать текст, подобрать нужный размер, шрифт, цвет... ( Скрин №1 )

2 - После всех настроек, переводим курсор на место, куда мы хотим вставить текст и кликаем левой кнопкой мыши. Дальше у нас появляется строка для ввода текста, вводим текст и после можем редактировать его ( Скрин №2 )

Сохранение результатов

1 - Чтобы сохранить фото, выбираем Frame где находится наше фото, переходим в правое меню и нажимаем Export ( Скрин №1 )

2 - После нажатия на export выбираем необходимый формат фото и нажимаем кнопку Export (Название Вашего Frame ) ( Скрин №2 )

3 - Выбираем куда сохранить файлы и сохраняем

Подключение дизайнера

1 - Чтобы добавить дизайнера к вашему проекту, нажмите на кнопку Share в правом углу, в появившемся окне введите почту вашего дизайнера, которая привязана к Figma ( Скрин №1 )

2 - После поиска мы должны дать возможность редактирования дизайнеру, нажимаем напротив имени дизайнера Can view и выбираем Can edit ( Скрин №2 )

3 - Ваш дизайнер добавлен в проект и теперь может приступить к редактированию

Ссылка на Figma - https://www.figma.com/

Полный Гайд по Figma - https://tilda.education/articles-figma

Комьюнити Figma - https://www.figma.com/community

Статья про Figma от экспертов Яндекс - https://practicum.yandex.ru/blog/chto-takoe-figma-dlya-dizainera/

Начало работы

1 - Для начала нужно зарегистрировать аккаунт на сайте Tilda https://tilda.cc/ ( Скрин №1 )

2 - После регистрации мы должны добавить свой первый сайт, нажимаем кнопку Создать сайт в правом верхнем углу ( Скрин №2 )

3 - После создания сайта, попадаем в наш сайт и создаем страницу, нажимаем создать страницу в правом верхнем углу ( Скрин № 3 )

4 - В открывшемся окне выбираем из списка подходящий шаблон или пустую страницу для самостоятельного составления шаблона и кастомизации ( Скрин №4 )

Создание сайта

1 - При создании страницы посмотрите короткий ролик о том, как редактировать страницу, после просмотра перейдем к добавлению блоков ( Скрин №1 )

2 - Начнем с добавления первого блока - обложка ( Скрин №2 )

3 - После добавления блока идем в раздел редактирования контента и изменяем нужные нам элементы блока ( Скрин № 3 )

4 - После внесения всех изменений мы публикуем наш сайт, нажимаем опубликовать и получаем ссылку на наш сайт. Дальше добавляем таким же образом другие блоки из списка. ( Скрин №4 )

Адаптивный Zero Block

1 - При создании страницы выбираем блок Zero Block, наводим на добавленный блок и жмем кнопку Редактировать блок ( Скрин №1 )

2 - Попадаем на страницу Zero Block и можем редактировать текст, добавлять фото, формы, кнопки, перемещать их в любые места. Так же доступны варианты адаптивных экранов, где можно изменять добавлять контент в зависимости от выбранного экрана.
( Скрин №2 )

3 - Для корректного отображения необходимо внести изменения во все адаптивные экраны Zero block, чтобы контент корректно отображался на всех устройствах. ( Скрин № 3 )

4 - После всех изменений сохраняем Zero Block и публикуем сайт, как было описано в предыдущем пункте. ( Скрин №4 )

Ссылка на Tilda - https://tilda.cc/

Справочный центр с подробными инструкциями - https://help-ru.tilda.cc/

Полная пошаговая инструкция по созданию
сайта на Tilda - https://tilda.education/how-to-build-website

Создание Landing page - https://tilda.education/courses/landing-page/understanding-main-principles/