Содержание
Фигурка | Как превратить дизайн Figma в веб-сайт
Как создать веб-сайт с помощью Figma
05.03.2022 • Тайлер Кеннеди
Figma — популярный инструмент без кода, используемый дизайнерами и создателями для создания прототипов веб-сайтов. В Figma вы можете разместить весь свой дизайн с точностью до пикселя. Этот инструмент отлично подходит для создания уникальных веб-дизайнов, которые ломают стереотипы скучных шаблонов веб-сайтов.
Проблема с использованием Figma заключается в том, что вы можете часами создавать идеальный веб-дизайн, но у вас все еще нет работающего веб-сайта. Теперь вы должны потратить еще больше времени на создание или аутсорсинг разработки дизайна вашего веб-сайта.
С помощью Figment вы можете создать свой веб-сайт прямо из дизайна Figma без программирования. Вот как это работает:
Первый шаг к созданию нового веб-сайта — его разработка в Figma.
Если вы уже знакомы с Figma, это должно быть очень просто. Даже если Figma для вас новинка, ее легко освоить.
Чтобы ускорить процесс, в Интернете доступно множество бесплатных шаблонов Figma. Вы можете взять один из них и настроить дизайн или начать заново и воплотить свое видение в жизнь.
Дизайн для мобильных и настольных компьютеров
Пока вы заняты созданием дизайна, подумайте, планируете ли вы поддерживать как мобильных, так и настольных пользователей. Мобильные пользователи составляют большую часть интернет-трафика, поэтому вполне вероятно, что у вас будут посетители как с мобильных, так и с настольных компьютеров. Это означает, что вам нужно создать дизайн для каждого размера экрана.
Не волнуйтесь, в Figma легко копировать компоненты, поэтому вы можете легко дублировать свой дизайн для экрана другого размера. Вы также можете использовать рамки экрана в Figma, чтобы сделать свой дизайн идеального размера.
2. Установите подключаемый модуль Figment
Когда ваш дизайн завершен, пришло время создать веб-сайт. Для этого установите плагин Figment со страницы сообщества Figma. На странице плагина Figment нажмите «Установить» в правом верхнем углу.
Теперь у вас есть все необходимое для создания своего сайта на Figma.
3. Запустите подключаемый модуль Figment
Установив подключаемый модуль Figment, откройте свой дизайн в Figma. Затем запустите плагин Figment. Для этого щелкните правой кнопкой мыши свой дизайн и выберите «Плагины», а затем щелкните плагин Figment.
Это запустит окно плагина Figment внутри приложения Figma. Плагины Figma работают как в браузерной, так и в настольной версии Figma, поэтому вы можете использовать плагин Figment на любой платформе.
Вы только что открыли плагин Figment со своим дизайном. Теперь у вас есть все необходимое для добавления эффектов наведения, анимации, ссылок и мультимедиа в ваш дизайн, прежде чем публиковать его на своем веб-сайте.
Для начала давайте рассмотрим структуру плагина Figment и способы его использования.
Знакомство с макетами плагинов Figment
Плагин Figment позволяет полностью настроить дизайн Figma перед тем, как превратить его в веб-сайт. В открытом окне плагина вы увидите 3 раздела.
В верхней части окна находится строка меню плагина. Вы можете использовать это для навигации по плагину и получения быстрых ссылок на ресурсы, если вам нужна помощь.
Основная область содержит редактор элементов. Это отобразит имя узла Figma, который вы сейчас выбрали и редактируете, а также предварительный просмотр того, как выглядит этот элемент.
Это удобно для отслеживания того, какой элемент вы настраиваете при использовании плагина, и позволяет вам видеть ваши изменения в режиме реального времени.
Ниже находится список эффектов, которые вы можете добавить к любому элементу. Нажмите на одну из строк, чтобы выбрать этот эффект, и откроется новое меню. В этом меню вы можете настроить эффект, который вы добавляете к элементу, и предварительно просмотреть его в редакторе перед добавлением.
Каждый тип эффекта позволяет быстро добавить эффект с настройками по умолчанию или настроить эффект под свои нужды.
Внизу находятся кнопки для публикации вашего сайта или экспорта кода. Вы захотите вернуться к ним, чтобы опубликовать после того, как закончите настройку дизайна с эффектами.
4. Опубликуйте свой веб-сайт
Когда вы закончите последние штрихи и будете готовы опубликовать свой веб-сайт, Figment сделает это очень просто.
Вернитесь на главный экран и найдите кнопки Опубликовать на веб-сайте или Код экспорта внизу.
Это дает вам два варианта того, как вы можете превратить свой дизайн в веб-сайт.
Публикация Figma Design на веб-сайте
Нажмите Опубликовать на веб-сайте , чтобы открыть меню публикации, и вы увидите экран, подобный этому:
Здесь вы можете выбрать кадр, который хотите экспортировать как веб-сайт. ( Подсказка: Чтобы опубликовать несколько фреймов, поместите их в один контейнер фреймов)
Далее вы можете просмотреть домен, на котором будет размещен ваш новый веб-сайт. Если у вас есть хобби-план, для вас будет создан домен. Если вы используете план Pro или Team, вы можете подключить свой собственный домен, нажав Use Custom Domain .
Чтобы добавить метаданные на веб-страницу в целях SEO, введите заголовок и описание страницы. Вы даже можете увидеть предварительный просмотр Google для вашей веб-страницы.
Когда вы будете готовы к запуску, нажмите Build & Publish! и наблюдайте, как ваш сайт появляется перед вашими глазами. Когда ваш сайт будет готов, нажмите кнопку еще раз, чтобы просмотреть ваш новый великолепный сайт в браузере.
Ваш веб-сайт официально запущен 🚀 и готов для всего мира. Начните делиться URL-адресом, чтобы показать свой новый шедевр.
Экспорт дизайна Figma в код HTML и CSS
В качестве альтернативы, если вы хотите разместить свой веб-сайт самостоятельно, Figment позволяет экспортировать код для вашего дизайна. На главном экране нажмите Код экспорта , чтобы открыть кодовую страницу экспорта.
Вы мгновенно получаете доступ к коду CSS для любого элемента, который вы нажимаете внутри своего дизайна.
Вы можете скопировать код из окна кода прямо под просматриваемым элементом.
Чтобы экспортировать полный код веб-сайта, вам потребуется план Pro или Team. Нажмите Экспорт полной страницы в нижней части экрана, чтобы получить полный код HTML и CSS для вашего дизайна.
Все готово 😆
И с этим все в порядке! Figment позволяет легко создать веб-сайт из Figma без необходимости кодирования. Время создания веб-сайта с помощью Figma сокращается вдвое, поэтому вы можете тратить больше времени на разработку и меньше времени на кодирование.
Разместите свой веб-сайт с помощью Figment и продолжайте обновлять его. Внесите изменения в свой дизайн Figma и используйте плагин, чтобы снова загрузить свой дизайн. Внесите любые изменения в редакторе и опубликуйте обновленную версию на своем домене.
Figment — универсальный магазин для разработки и развертывания веб-сайтов без написания кода.