Как перенести сайт из фигмы в тильду: Импорт из Figma |

Содержание

Перенести макет из Фигмы в Тильду (без адаптива и анимации) • фриланс-робота для спеціаліста • категорія Дизайн сайтів ≡ Замовник Ksenia S

дата
онлайн
рейтинг
вартість
час виконання

ставка прихована фрилансером
ставка прихована фрилансером
2 дні900 UAH
2 дні900 UAH
Здравствуйте, Ксения!
Мне нравится ваш проект: уже работал с конструкторами сайтов.
Насколько я понимаю, ширина контентной области у макета небольшая, так что будет хорошо и без адаптива.
В остальном всё понятно: перенести пиксель в пиксель, без анимации, zero-блоки.
Работать дубу через Figma, так что просто скиньте ссылку на проект — далее дело за мной!
Портфолио: Behance
…
Напишите мне в ЛС, и мы обсудим все детали вашего проекта в Скайпе/Дискорде.
1 день2000 UAH
1 день2000 UAH
Добрый день, я дизайнер на Tilda, прошел обучение в школе молнии.
Заинтересовал ваш проект
Мой сайт-портфолио https://web-design64.ru/
Там вы можете ознакомиться со мной и моими работами
Работаю с фигмой.
Можем работать через договор, так же имеется
Пишите, обсудим все подробно!
2 дні999 UAH
2 дні999 UAH
Добрый день Ксения
Задача очень несложная
Аккуратно перенесу
Сделаю в срок. Комиссию возьму на себя
Я на связи
7 днів4500 UAH
7 днів4500 UAH
Доброго времени суток!
Я занимаюсь созданием сайтов «под ключ» и заинтересована в выполнении Вашего заказа.
Опыт работы 2 года.
Мое портфолио:
https://клиника-остеопатии.рф/
https://vinograd-rstv.ru/
…
 https://donenergomontash.ru/  http://bolotova-hair.ru/  https://gardenya.ru/  https://arceim.com/rus  https://www.consulting.fitness/online-workshop  https://domik-mechti.ru  https://vikafleer.ru  https://golderahome.ru  https://zabor-nsk.com/  https://orlov-mathschool.ru/mastergroupeg0   Этапы работы:
 1.Получение ТЗ  
2.Прототип сайта  
3.Дизайн сайта  
4.Адаптация сайта под мобильную версию  5.Верстка  
6.Программирование
  Почему вам нужно работать именно со мной:
 ⁃ Всегда на связи
 ⁃ Имею большой опыт работы и большую клиентскую базу
 ⁃ Доведу вас до максимального результата   
Буду рада сотрудничеству с вами!  
Жду обратной связи!
2 дні800 UAH
2 дні800 UAH
Здравствуйте, Ксения. Сделаю все в точности как на макете. Работаю и в Figma и в Tilda.
Я пунктуальна, всегда отвечаю на сообщения. Покажу вам максимальный результат.
Выполню работу как для себя, берусь за нестандартные требования и в самые сжатые сроки. Гарантирую положительный результат.
Мое портфолио: Freelancehunt
Если вас интересует сотрудничество со мной, то сообщите, в какое время вам будет удобно все обсудить.
3 дні2000 UAH
3 дні2000 UAH
Здравствуйте! Готов с вами сотрудничать, имею хороший опыт и практику для того чтоб максимально качественно реализовать ваши проекты. Соблюдаю сроки, учитываю пожелания.
Примеры моих робот можно посмотреть тут Freelancehunt
Отзывы тут https://freelancehunt.com/my/reviews
1 день900 UAH
1 день900 UAH
Добрый день.
Перенесу макет в Тильду, в наилучшем виде, в течении 1 рабочего дня. Опыт работы в Тильде имеется.
2 дні2000 UAH
2 дні2000 UAH
Добрый день, Ксения!
Работаю и в Figma и в Tilda. Могу без проблем перенести этот лендинг на Тильду. Стоимость 2000 грн ( со всеми правками). Срок — думаю справимся за 1 день, если будет мало задач на день. Если нет — то 2 дня максимум.
Нужен будет доступ в Фигму и в аккаунт Тильды.
Мои последние работы на Тильде:
https://bigleadagency.com/
http://zzmirror.com/
…
Буду рада пообщаться.
С уважением, Анна.
фрилансер більше не працює на сервісі
ставка прихована фрилансером
3 дні2000 UAH
3 дні2000 UAH
Ксения, добрый день!
Я занимаюсь разработкой сайтов на Тильде, готова перенести макет из фигмы. Подскажите, нужны ли будут подключения каких-либо сервисов на тильде?
Последний результат — сайт для медицинского приспособления: провели анализ конкурентов, создали смысловую упаковку, был сделан редизайн сайта, с 0 вышли на 40 покупок/месяц (без учета дополнительной рекламы) https://ortobuff.com.ua/
Больше работ: http://av-design.tilda.ws/
2 дні2000 UAH
2 дні2000 UAH
Добрый день! Сделаю на Тильда
Ссылка на мое портфолио:
Behance
Также примеры работ и отзывы в профиле
Freelancehunt
2 дні1200 UAH
2 дні1200 UAH
Здравствуйте, Ксения!
Перенесу Ваш макет в Тильду.
По запросу вышлю примеры верстки из Фигмы в Тильду, сделаю 1 в 1.
Обращайтесь, обсудим детали)
3 дні1500 UAH
3 дні1500 UAH
Здраувствуйте Ксения!
Перенесу вам сайт на Тильду.
Я хорошо работаю с Zero- блоками.
Сделаю адаптацию под все устройства.
Цена 1500 грн
Сроки — 1-2
…
Мои работы -Behance
2740
69 0
3 дні2000 UAH
Yuliia C.
3 дні2000 UAH
Здравствуйте, Ксения!
Хочу предложить со мной поработать.
Давайте с Вами свяжемся, чтобы уточнить детали? Жду ответа!
Портфолио: Freelancehunt
3 дні1600 UAH
3 дні1600 UAH
Здравствуйте, Ксения! Готов с удовольствием выполнить вашу задачу. Имею большой опыт работы с Тильда и переноса макетов из графического редактора, так как сейчас работаю только в связке Figma+Tilda.
Работу выполню в срок, напишите мне, хочется подробнее узнать о проекте! Прикрепляю одну из работ перенесенную из Фигма. Хорошего дня!
UPD Открыт к новым предложениям по работе в любое время.
ставка прихована фрилансером
ставка прихована фрилансером
фрилансер більше не працює на сервісі
2 дні2000 UAH
2 дні2000 UAH
Добрый день,Ксения. Меня зовут Диляра,занимаюсь веб-дизайном достаточно много,могу реализовать то,что вы просите.Такая цена т.к все почти нужно реализовать на Zero-блоках.Смогу приступить уже сегодня.
Буду рада вам помочь.Можем обсудить детали
Если заинтересовала,вот мои работы:
http://flowwersmskfast1.tilda.ws/
http://project3415963.tilda.ws/
http://donutstasty224.tilda.ws/
http://vkusnaya12.tilda.ws/
Буду рада обратной связи от вас!
2 дні2000 UAH
2 дні2000 UAH
Здравствуйте, Ксения. Меня зовут Алексей. Я веб-дизайнер, который работает исключительно ради результата. Могу помочь вам перенести макет на Тильду.
👇🏻Примеры сайтов, которые я создавал:
http://dmkoxa.tilda.ws/marketing
http://target-alex.tilda.ws/
http://work.landing.tilda.ws/youtube
http://work. landing.tilda.ws/viagra
http://work.landing.tilda.ws/math-school
…
http://yummi-kigurummi.tilda.ws
https://posture-corrector.patricksshopp.com/
https://thermometer.patricksshopp.com/
https://madmax360.patricksshopp.com/
✍🏻 Пишите мне в личные сообщения. Буду рад сотрудничеству с вами.
1 день1500 UAH
1 день1500 UAH
Здравствуйте
Перенесу макет в Tilda
В Tilda работаю ежедневно
ставка прихована фрилансером
3816
76 0
3 дні1500 UAH
Дмитрий Свяцкий
3 дні1500 UAH
Здравствуйте, Ксения!
Качественно и оперативно перенесу дизайн лендинга с Figma в Tilda.
Буду рад долгосрочному сотрудничеству)
Мое портфолио:
Freelancehunt
Dribbble
✅ До повного затвердження ✅ Безкоштовні правки ✅ Не зникаю
ставка прихована фрилансером
ставка прихована фрилансером
ставка прихована фрилансером
ставка прихована фрилансером
3 дні2000 UAH
3 дні2000 UAH
Здравствуйте, готов перенести по всем требованиям.
Напишите мне, обсудим.
Портфолио Freelancehunt
2 дні1200 UAH
2 дні1200 UAH
Ксения здравствуйте! Работаю в Тильде, знаю ее как свои 5 пальцев. Готова взяться за работу.
Больше о моем опыте работы:
– 2 года опыта в сфере дизайна и разработки сайтов. Работаю на Тильде, а также в Figma и Photoshop
– 4 года на фрилансе, копирайтер в прошлом
– Работала с блогерами, студиями, малыми и средними бизнесами
Мое портфолио говорит за меня: http://nekrasova-design.tilda.ws
…

Хорошего дня!
3 дні1000 UAH
3 дні1000 UAH
Ксения, здравствуйте!
С удовольствием перенесу ваш макет на Тильду согласно всем требованиям. Обращайтесь, обсудим детали.
фрилансер більше не працює на сервісі
3 дні2100 UAH
3 дні2100 UAH
Цена указана в ставке
Портфолио в профиле
Свободен для работы, гарантирую качество
Обращайтесь
5 днів4444 UAH
5 днів4444 UAH
{{{{{{{Доброго времени суток. Давайте обсудим Ваш проект подробнее}}}}}}}}
Есть опыт работы с зарубежными странами Украина, Россия, США, Канада, Германия, Казахстан, Молдавия.
Часть работ!
https://advilion.com
https://hotelkolos.info/
https://plitkaufa.ru/
https://floridagardendesigns.com/
…
http://spectrum.net.ua/
https://metaltool.kz/
http://case.advl.info/
https://hutwik.com/
Подробно о том что я могу Вам предоставить:
— Анализ сайта и рекламы.
— Структуризация сайта.
— Уникальный дизайн (лого).
— Разработку сайтов и рекламы.
— Оптимизация
— Продвижение Вас в интернете.
— SEO
— SERM
— SMM
— ChatBot
С уважением, Василий!
2 дні4000 UAH
2 дні4000 UAH
Готов приступить к работе.
Давайте обсудим детали.
Портфолио: http://riashentsev.com.ua/?flh=rate#portfolio
ставка прихована фрилансером
3 дні750 UAH
3 дні750 UAH
Добрый день, занимаюсь созданием сайтов на Тильде.
Буду рад помочь сверстать страницу на Тильде, обращайтесь.
Работы в профиле Freelancehunt
И на сайте Тильда экспертов: https://experts.tilda.cc/dyaroshevich
7 днів3000 UAH
7 днів3000 UAH
Приветствую!
Заинтересован в выполнении данного проекта.
Для обсуждения деталей — пишите в лс.
1 день800 UAH
1 день800 UAH
Добрый день!
В точности перенесу Ваш макет на Тильду.
Сделаю всё в нужный Вам срок. Приступить смогу сегодня.
Жду Вашего отклика!
Портфолио:
aslegal.com.ua
svitlo-development.com
jadeyoga.ru
1 день1000 UAH
1 день1000 UAH
Ксения, добрый день!
Сделаю пиксель в пиксель при наличии доступа к макету в Фигме)
Буду рада сотрудничеству!
1 день1000 UAH
1 день1000 UAH
Здравствуйте, буду рад сотрудничать )
Портфолио — Behance
ставка прихована фрилансером
3 дні2000 UAH
3 дні2000 UAH
Здравствуйте!
Выполню ваше задание на высшем уровне! Опыт работы более 5 лет.
Всегда на связи!
Хорошего дня!
3 дні2000 UAH
3 дні2000 UAH
Сделаю ваше задание быстро и легко. Специализируюсь на тильде. Есть примеры и тд. Так что готов сотрудничать на долгих условиях
5 днів1400 UAH
5 днів1400 UAH
Доброго дня, Ксеніє
Готовий вам допомогти! Завдання зрозумів та зможу без зайвих проблем перенести ваш сайт з Фігми на платформу Тильда!
Вартість та терміни вказав!
Чекатиму на ваше рішення!
З повагою Тарас Олійник
1 день1000 UAH
1 день1000 UAH
Здравствуйте Ксения , перенесу ваш дизайн на Tilda в точных размерах 1в1, давно работаю с Figma знаю все нюансы воспроизведения дизайна в конструкторе Tilda.
Срок исполнения 1 день если нужно срочно.
В стоимость также входят правки по дизайну если такие возникнут.
Обращайтесь буду рада сотрудничеству.
фрилансер більше не працює на сервісі
фрилансер більше не працює на сервісі
фрилансер більше не працює на сервісі
5 днів1500 UAH
5 днів1500 UAH
Ксения, добрый день!
Я специализируюсь на работе с Фигма и Тильда, поэтому с легкостью выполню задание.
Все мои работы выполнены в Зеро-блок Тильда
Ссылки на мои работы:
https://hommik.ru/
http://kurspohudenie.tilda.ws/
http://mpd.zp.ua/
http://ambota.tilda.ws/
…

Мое портфолио: Behance
Инстаграм с отзывами клиентов: https://www.instagram.com/anastasita_webdesign
Давайте обсудим подробнее детали проекта?
3 дні1100 UAH
3 дні1100 UAH
Наша команда занимается разработкой сайтов и услуг-NYXEX
(Больше информации(работ): nyxex.net)
Мы надаем качественные услуги по обычным ценам без завышения.
Если заинтересовало наше предложения напиши-обсудим все детали и ТЗ
Ждём ответа.
ставка прихована фрилансером
3 дні2500 UAH
3 дні2500 UAH
Здравствуйте, Ксения) Перенесу ваш дизайн на Tilda. Давайте обсудим детали, так я смогу адекватно оценить сроки и объем задачи. Занимаюсь UX/UI больше 3 лет, мои некоторые описанные работы: https://bit.ly/UX_Cases.
2 дні1200 UAH
2 дні1200 UAH
Доброго дня, Ксенія!
Займаюсь розробкою сайтів на Тільді самостійно верстаю їх у зеро-блоках, мої останні роботи прикріпляю:
https://snbera.com/
https://decorflowerbar.com.ua/
http://www.vladymyrova.com/
Буду рада допомогти вам та виконати все на 100+%
3 дні2292 UAH
3 дні2292 UAH
Здравствуйте,Ксения!
Меня зовут Валерия и я заинтересована в сотрудничестве с вами. Я занимаюсь разработкой сайтов и веб-дизайном,почти 1,5 года я постоянно развиваюсь в этой сфере и радую своих клиентом качественным дизайном.
Этапы работы:
1.ТЗ
2.Предоплата
3.Перенос макета
4.Согласование,правки
5.Перевод остальной части суммы
…
6.Передача макета
Почему именно я?
-владею знаниями продающего дизайна
-привлеку вам в несколько раз больше клиентов с помощью грамотного дизайна
-пунктуальная и ответственная
-всегда на связи
-спокойно отношусь к правкам
-много восторженных отзывов клиентов
Примеры работ:
https://taplink.cc/valeriaku.design
Как вам моя кандидатура?
Жду обратной связи!
1 день900 UAH
1 день900 UAH
Справлюсь с Вашим заказом.
Все размеры будут как в макете.
Сделаю в лучшем виде.
Работаю на перспективу дальнейшего сотрудничества, поэтому качественно.

2 дні2000 UAH
2 дні2000 UAH
Здравствуйте, Ksenia!
Готов выполнить ваш заказ.
Пишите, буду рад сотрудничеству!
2 дні3000 UAH
2 дні3000 UAH
Добрый день, занимаюсь разработкой сайтов под ключ на платформе Тильда (только на «Zero block»)!
В стоимость входит дизайн + верстка + адаптив!
Цена и срок обсуждается…
Примеры моих работ смотрите в профиле.
— Делаю продающие лендинги и сайты.
— Исправляю ошибки инфоцыган и псевдомаркетологов.
— Всю работу я выполняю точно в срок.
— Гарантирую качество своей работы.
…
— Также предлагаю услуги по продвижению бизнеса, настройки рекламы в Яндекс Директ, Google Adwords и соц. сетях.
Пишите в ЛС, обсудим все детали!!!
———————————————
1 день1000 UAH
1 день1000 UAH
Добрый вечер, Ксения. Перенесу сайт на тильду, сделаю адаптив. Анимацию продумать? Напишите в лс. моя последняя работа http://kigurumi-original.com.ua/

ставка відкликана

Что такое Тильда и как она поменяла мой подход к веб-дизайну | by Levan Jamelashvili | Дизайн-кабак

Несмотря на то, что этот сервис был давно на слуху, я не воспринимал его в серьез. Не думал, что в конструкторе сайтов может быть что-то интересное. Но теперь почти все дизайнерские проекты я делаю на Тильде. Только изредка ко мне обращаются старые клиенты, которым нужен только макет сайта. Я рассматриваю Тильду не как конструктор сайтов, а как полноценный сервис, который упрощает работу дизайнера-фрилансера. В Тильде есть большой выбор готовых шаблонов, но я ни разу их не открывал. Больше всего Тильда меня привлекла инструментом «zero block». Это своего рода браузерная версия графического редактора. Благодаря этому инструменту в Тильде можно создать практический любой сайт. Конечно же речь не идёт о сервисах, крупных порталах или сайтах со сложной анимацией (хотя об этом позже). Лендинги, промо-сайты, корпоративные сайты, небольшие интернет-магазины — все это можно делать в Тильде.

Работа одному
Весомой причиной перехода на Тильду стала возможность работать одному. Когда я создавал сайты на wordpress, на согласования всех деталей с верстальщиком уходило кучу времени и сил. Кому-то нравится работать в команде, но я предпочитаю работать одному, если есть такая возможность. На Тильде можно создать проект под ключ без сторонних специалистов. Иногда приходится сотрудничать с иллюстраторами, копирайтерами или директологами. Часто нужна помощь программиста, чтобы написать код какого-нибудь калькулятора или слайдера (в Тильду можно добавлять свой html-код, если не хватает функционала).

Намного быстрее
Хотя не совсем… Инструмент «zero block» хоть и напоминает функционал графических редакторов, но это всё-таки браузерный редактор. Например, нельзя увеличивать масштаб, что сильно мешает. В Фигме я создаю макет намного быстрее. Аналогичная работа в Тильде занимает примерно в 2 раза больше времени. НО, когда дизайн создан на Тильде, это уже готовый сайт. Проект будет запущен в разы быстрее, чем по традиционной схеме: дизайн + вёрстка + CMS + выявление багов. Долгая работа в Тильде компенсируется мгновенным запуском сайта.

Как выстроена работа
Первое время я создавал дизайн сразу в «zero block», но со временем заметил, что мои работы стали похожи друг на друга. В браузере куда меньше «свободы», чем в графическом редакторе. Поэтому я решил изначально делать дизайн в Фигме, а потом переносить его в Тильду. Может показаться, что на работу в двух сервисах будет уходить слишком много времени, но это не так. В Фигме ничего «писксель в писксель» не выравниваю, в ней создаю структуру сайта, а всю «ювелирную работу» делаю в Тильде.

Готовый продукт, а не картинка
Один из самых больших плюсов Тильды — вы работаете сразу с готовым сайтом, а не с картинками. Если отступы, размеры шрифтов и элементов в редакторе выглядят нормально, то в браузере всё по-другому. Я это замечаю после переноса дизайна из Фигмы в Тильду с сохранением всех пропорций. Визуально размеры в графическом редакторе и в браузере сильно отличаются. В Тильде всё происходит в режиме онлайн. Можно сразу посмотреть на разных разрешениях, как отображаются шрифты, выглядят тени и работает анимация.

Отображение на разных устройствах
В процессе создания сайтов больше всего мне не нравился этап вёрстки и выявления багов. В единичных случаях всё работало хорошо с первого раза. Нужно было следить за тем, чтобы на всех устройствах и во всех браузерах сайт работал так, как задумывалось. В некоторых проектах на это тратилось бóльшая часть времени. Плюс Тильды в том, что во всех браузерах сайт будет отображаться одинаково. Также хорошо реализована работа с адаптивными версиями. Можно адаптировать страницу на 5 разрешений, которые охватывают все устройства.

Анимация
Не разобравшись с анимацией, она может показаться слишком простой. Но функционала анимации в Тильде более чем достаточно. Нужно научиться с ней работать, комбинировать разные виды анимации, чтобы придумывать интересные идеи для сайтов. К тому же к стандартной анимации добавили пошаговую. В «step by step» к каждому элементу можно присвоить анимацию по скролу, по клику, анимацию при наведении и при появлении. Нужно долго и упорно «ковыряться» в пошаговой анимации, чтобы полностью её освоить. Возможностей анимации хватит почти на любой проект, но завоевать топы awwwards не получится.

Tilda Experts
В Тильду добавили биржу, которая соединяет заказчиков и исполнителей. Клиент заполняет бриф и указывает бюджет проекта, а система выдает исполнителей, готовых взяться за заказ. Все в восторге от нововведения, но есть один важный момент, о котором никто не говорит. У каждого, кто зарегистрируется в Tilda Experts, появится индивидуальный идентификатор. Чтобы в портфолио эксперта отображался сайт, нужно в настройках этого сайта добавить свой код. Так система определяет создателя сайта. Добавить идентификатор можно только оплатив один из тарифов Тильды. Если же срок тарифа истек, то работа больше не будет отображаться в вашем профиле.

Представьте ситуацию: вы сделали работу нескольким заказчикам и у вас есть портфолио эксперта. Через какое-то время заказчики решили, что им больше не нужны сайты и перестали продлевать тариф. В итоге ваше портфолио опустеет и будет зависеть от заказчиков. Поэтому я бы не возлагал большие надежды на биржу, в которой заказчики решают, будет ли находится работа в вашем портфолио.

Работа с клиентами
Со своими клиентами я работаю так: после получения предоплаты в размере 50%, я создаю новую почту и аккаунт на Тильде. Когда работа утверждена, клиент переводит вторую часть оплаты, и я передаю данные от почты и аккаунта. Иногда у заказчика уже имеется оплаченный аккаунт, и он просит работать на нём. В таком случае я прошу переводить сразу всю сумму.

Конечно, у Тильды есть свои минусы, но для меня плюсов оказалось больше. В первую очередь сервис позволил работать одному. Раньше идею создания сайтов без верстальщика пытались воплотить множество конструкторов. Самым массовым был Adobe Muse, но из-за большого количества косяков, разработчики перестали поддерживать продукт. Я работал на Muse, и это было очень больно… Есть Readymag, который больше Тильды подходит для дизайнерских сайтов, но в нём не хватает функционала для бизнеса.

Спасибо за внимание. Если материал был для вас интересным, то подписывайтесь на мой телеграм-канал, где я пишу о дизайне и визуальном искусстве.

Website | Telegram | Behance | Dribbble | Instagram

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

View Studio Espagnol, современный, веселый дизайн логотипа курсов испанского языка
Studio Espagnol, современные, веселые курсы испанского языка, дизайн логотипа
Посмотреть значок приложения Procreate 3D Tilde Swoosh™️
Значок приложения Procreate 3D Tilde Swoosh™️
Посмотреть горит
Посмотреть поток
Посмотреть монограмму Flow
Монограмма потока
Посмотреть тильду
Посмотреть тильду
Посмотреть глюк 02
Глюк 02
Посмотреть логотип Тильды
Логотип Тильда
Посмотреть глюк
Глюк
Посмотреть секретную метку
Секретная метка
Посмотреть логотип Тильды
Логотип Тильда
Посмотреть примерный логотип
Примерный логотип
Посмотреть
Посмотреть записи Тильды
Рекорды Тильды
Посмотреть брошюру оригами
Брошюра оригами
Посмотреть иконографию Тильды
Иконография Тильды
Просмотр Слияние.
Смешивается.
Посмотреть `
Посмотреть Дарудар~
Дарудар~
Посмотреть больше подобных
Больше подобных
Посмотреть Асентос Пердидос
Асентос Пердидос
Посмотреть пользовательский интерфейс Hustle
Хастл UX
Посмотреть шапку сайта Piictu
Заголовок сайта Piictu

Зарегистрируйтесь, чтобы продолжить
или войдите

Загрузка еще…

4 совета Figma по созданию прототипов дизайна Like A Pro | Блог

Figma — это полностью браузерный инструмент для разработки интерфейсов, который мы все чаще рекомендуем студентам Designlab.

Мало того, что платформа бесплатна — Figma также позволяет вам совместно работать над файлом в реальном времени с другими (например, вашим наставником!)

С выпуском Figma 3.0 у вас теперь есть доступ к множеству мощных инструментов прототипирования в Figma сам. Вы можете узнать об основах прототипирования в нашем популярном бесплатном курсе электронной почты Figma 101, и в этом посте у нас есть четыре совета, которые помогут вам поэкспериментировать с более продвинутыми функциями прототипирования.

Выполните эти шаги, чтобы создать функционирующую липкую панель навигации в прототипе Figma, а также модальное окно в стиле iOS, плавающую кнопку действия и выдвижное меню-гамбургер! Все эти взаимодействия могут помочь вам быстро создать более точные и реалистичные прототипы, которые затем можно будет использовать для пользовательского тестирования вашего проекта.

Эти методы отлично подходят как для студентов, так и для профессионалов!

Создайте липкую панель навигации

Хотите, чтобы ваши пользователи имели полный контроль над тем, как они перемещаются по вашему веб-сайту? С «липкой» панелью навигации элемент следует за пользователем при прокрутке! Чтобы создать его в Figma, выполните следующие действия:

1. Создайте главную страницу. В этом примере мы создали рамку размером 1440 x 1890 для веб-сайта вымышленной туристической компании. Мы добавили целевую секцию с лозунгом и панелью поиска над сгибом, а затем несколько элементов поездки, расположенных в двух столбцах под сгибом. Обязательно создайте достаточно вертикального контента для прокрутки.

2. Создайте панель навигации. Мы добавили прямоугольник размером 1440 x 96 в верхней части главной страницы, включая быстрый логотип слева и некоторые элементы навигации справа. Затем мы сгруппировали все эти элементы вместе и назвали их «Заголовок» в нашем файле Figma.

3. Сделайте панель навигации липкой. Сначала убедитесь, что группа заголовков выбрана. В правой части интерфейса Figma вы увидите три вкладки: Дизайн, Прототип, Код. На вкладке «Дизайн» в разделе «Ограничения» установите флажок «Исправить положение при прокрутке». Вы заметите небольшое изменение в списке слоев слева: ваша группа заголовков теперь будет иметь метку «Фиксированный» над ней, а все остальное содержимое в вашем фрейме будет вложено под меткой «Свитки».

Наконец, посмотрите в действии! Щелкните значок «Воспроизвести/представить» в правом верхнем углу интерфейса Figma (справа от синей кнопки «Поделиться»). Это откроет ваш файл как прототип в новой вкладке. Попробуйте прокрутить и посмотрите, как ваша навигационная панель… никуда не денется!

Annie Devine

Стажер-дизайнер

Создание модального окна в стиле iOS

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

1. Создайте свой первый экран. В этом примере мы создали кадр размером 375 x 812 для экрана входа в приложение. Поскольку наше основное внимание будет сосредоточено на модальном окне, которое появляется на следующем экране, все, что мы хотим показать здесь, — это пользователь, нажимающий кнопку входа в систему, чтобы перейти на следующий экран. По этой причине мы сделали так, что поля электронной почты и пароля уже заполнены.

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

3. Создайте свой третий экран ! … который на самом деле является просто дубликатом второго экрана с наложенным поверх него модальным окном. После дублирования нашего второго экрана мы добавили сверху частично прозрачный (непрозрачность 40%) черный прямоугольник, а затем добавили поверх него предупреждение в стиле iOS.

4. Добавьте первый экранный переход. Сначала перейдите на вкладку «Прототип» на правой боковой панели в Figma, затем выберите кадр для вашего первого экрана.

Для взаимодействия выберите «По щелчку» из раскрывающегося списка.
В качестве пункта назначения выберите имя второго кадра из раскрывающегося меню.
Для перехода выберите «Push» в раскрывающемся списке «Поведение».

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

5. Добавьте второй экранный переход. Сначала выберите второй кадр.

Для взаимодействия выберите «По щелчку» из раскрывающегося списка.
В качестве пункта назначения выберите имя третьего экрана/кадра в раскрывающемся списке.
Для перехода выберите «Растворение» в раскрывающемся списке «Поведение».

Наконец, посмотрите в действии! Щелкните значок «Воспроизвести/представить» в правом верхнем углу интерфейса Figma (справа от синей кнопки «Поделиться»). Это откроет ваш файл как прототип в новой вкладке. Щелкайте по каждому экрану, чтобы увидеть эти переходы.

Сделать плавающую кнопку действия

Кнопки с плавающими действиями просто потрясающие. Вот как создать его в Figma:

1. Создайте свой первый экран. Мы использовали рамку 360 x 740 для Android-устройства и снова создали мобильную версию нашей той же выдуманной туристической компании. На этот раз мы использовали оттенки серого для нашего основного содержимого (за исключением логотипа в левом верхнем углу), так как мы хотели, чтобы плавающая кнопка действия (FAB) выделялась нашим синим акцентным цветом.

2. Добавьте свой FAB. У нас есть синий круг 60 х 60 с тенью, с полем 24 справа и снизу. Мы использовали простые двойные линии, чтобы указать, что это откроет какое-то меню.

3. Создайте свой второй экран, , который будет дубликатом вашего первого экрана, за исключением добавления расширенного меню FAB. Нажав на FAB, можно открыть большое количество меню с разным внешним видом, но в интересах простоты наше меню состоит всего из трех плавающих прямоугольных кнопок. Обратите внимание, что значки на FAB обычно меняются, когда меню отображается, часто на «X», чтобы указать, что пользователь может закрыть/свернуть меню.

4. Добавьте свои переходы. Сначала перейдите на вкладку «Прототип» на правой боковой панели в Figma, затем выберите FAB на первом экране/кадре (тот, где меню не развернуто).

Для взаимодействия выберите «По щелчку».
В поле «Назначение» выберите имя второго кадра.
Для перехода выберите «Мгновенно» в раскрывающемся списке «Поведение».

Затем выберите FAB на втором кадре (тот, где меню развернуто). Вы собираетесь снова выбрать все те же элементы на боковой панели Prototype, но на этот раз пункт назначения будет вашим первым кадром.

Наконец, посмотрите в действии! Щелкните значок «Воспроизвести/представить» в правом верхнем углу интерфейса Figma (справа от синей кнопки «Поделиться»). Это откроет ваш файл как прототип в новой вкладке. Нажимайте плавающую кнопку действия несколько раз, чтобы переключаться между свернутым и развернутым состояниями меню.

Настройка выдвижного меню

При использовании мобильных приложений вам приходилось взаимодействовать со многими выдвижными меню. Создайте свой собственный прототип, выполнив следующие действия!

1. Создайте свой первый экран. В этом примере мы использовали кадр размером 375 x 812 для устройства iOS, опять же для мобильной версии того же вымышленного сайта туристической компании. Ключевым элементом здесь является значок гамбургера, который мы разместили справа от нашей верхней панели навигации, и пользователь щелкнет его, чтобы вызвать выдвижное меню.

2. Создайте свой второй экран, , который снова является дубликатом вашего первого экрана, но со скользящим меню сверху. После дублирования нашего второго экрана мы добавили частично прозрачный (непрозрачность 40%) темный прямоугольник сверху (#1B212D), а затем добавили светлый (#F1F1F1) 169.x 812 прямоугольник поверх этого, выровненный по правому краю. Мы добавили стопку пунктов меню, выровненных по левому краю, и «X» в правом верхнем углу.

3. Добавьте первый переход. Сначала нажмите вкладку «Прототип» на правой боковой панели в Figma, затем выберите значок гамбургера в первом кадре.

Для взаимодействия выберите «По щелчку».
В поле «Назначение» выберите имя второго кадра.
Для перехода выберите «Мгновенно» в раскрывающемся списке «Поведение».

4. Добавьте второй переход. В зависимости от вашего проекта вы можете захотеть, чтобы пользователь специально щелкнул «X» в вашем меню, чтобы закрыть его — в этом случае вы должны выбрать «X», чтобы добавить свой переход.

В нашем примере мы хотели, чтобы пользователь мог щелкнуть «X» или в любом другом месте за пределами меню, чтобы закрыть его, поэтому мы просто выбираем весь второй кадр, чтобы добавить наш переход (технически это означает, что в то время как в в текущем режиме вы также сможете щелкнуть в любом месте меню, чтобы закрыть его, что не совсем правильно… но на данный момент Figma не позволяет исключать определенные объекты при добавлении перехода к весь кадр).

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

Наконец, посмотрите в действии! Щелкните значок «Воспроизвести/представить» в правом верхнем углу интерфейса Figma (справа от синей кнопки «Поделиться»).