» ГЛАВНАЯ > К содержанию номера
 » Все публикации автора

Журнал научных публикаций
«Наука через призму времени»

Июль, 2019 / Международный научный журнал
«Наука через призму времени» №7 (28) 2019

Автор: Лаптева Анастасия Игоревна, студент
Рубрика: Технические науки
Название статьи: Построение системы проектирования с использованием Figma и Zeroheight

Статья просмотрена: 545 раз
Дата публикации: 6.07.2019

УДК 004.9

ПОСТРОЕНИЕ СИСТЕМЫ ПРОЕКТИРОВАНИЯ С ИСПОЛЬЗОВАНИЕМ FIGMA И ZEROHEIGHT

Лаптева Анастасия Игоревна

студент

Брянский государственный университет имени академика И.Г.Перовского, г. Брянск

 

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

Ключевые слова: система проектирования, Figma, Zeroheight, библиотеки.

 

Инструмент

Figma

Как правило, для работы по дизайну пользовательского интерфейса Figma хорошо подходит. Этот инструмент позволяет создавать библиотеки, которые затем могут быть выведены в Figmafiles. Это означает, что может быть 1 библиотека, втягиваемая в несколько файлов производственного дизайна, например, маркетинговый веб-сайт или веб-приложение.

Zeroheight

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

Когда дело доходит до разработки, есть возможность добавлять фрагменты кода против каждого компонента, то есть все находится в одном месте как для проектирования, так и для разработки. Zeroheight-это место, где дизайнеры и разработчики несут ответственность за то, чтобы все было в актуальном состоянии.

Также стоит отметить, что каждая система дизайна, которая создаётся, может иметь персонализированное доменное имя и защиту паролем!

Подготовка

Поскольку создаётся такую большую систему проектирования, происходит создание отдельных библиотек в Figma для разных элементов и компонентов. Если это меньший проект, то стоит рассмотреть возможность хранения всего в одном файле. Тем не менее, могут быть случаи, когда при работе над мобильным приложением, и нужно только вытащить типографику и цвета. На рисунке 1 изображены текущие библиотеки, которые настраивались.

Рис. 1. Производственные Файлы Figma.

Теперь, когда все библиотеки настроены, пришло время создать производственные файлы Figma.На рисунке 2 изображены созданные файлы.

Рис. 2.Производственные файлы Figma.

Заходя на рабочий файл, появляется возможность подключать и отключать различные библиотеки, которые были созданы в зависимости от того, что требовалось. Подключённые библиотеки будут отображать компоненты и стили на вкладке ресурсы в левой боковой панели (См. рис. 3).

Рис. 3. Переключение библиотек Figma.

Использование компонентов

Строительные Компоненты

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

Так же стоит потратить время на изменение размеров компонентов. Это сэкономит так много времени при работе над адаптивными проектами. Имея 1 компонент, который работает на любом размере экрана является важной задачей.

Ниже рассматривается как настроить библиотеку Figma для форм, а также как работает компонент с изменяемым размером (См. рис. 4-5).

 

Рис. 4. Компоненты Формы.

Рис. 5. Изменение Размера Компонента.

В Zeroheight

В системе проектирования у есть навигация в боковой панели слева. Здесь есть возможность создавать категории и добавлять разные страницы.

Установка на данный момент:

Обзор;

Элементы;

Объекты;

Комплектующие.

На каждой странице имеется функция добавления различных вкладок, чтобы держать всё в порядке. Так, для форм у есть поля ввода, выпадающие меню, календарь ввода и так далее, тогда каждая вкладка содержит различные состояния, которые необходимы (См. рис.6).

 

Рис. 6. Пример страницы в Zeroheight.

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

Список литературы:

1. Окунев А. Руководство по Figma // Интернет-издание.— 2019. — 258 С.
2. Кирсанов Д. Веб-дизайн // Символ-Плюс. — 2006. — 86 С.



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

Фамилия Имя Отчество:
Комментарий: