Как создавать мокапы на Figma с помощью плагина Artboard studio.

Содержание

Нсикан Этукудох
5 января 2020 г. · чтение за 5 минут
Что такое макет?
Обнаружение/использование плагина Artboard
Шаги, которые помогут вам пройти

Нсикан Этукудох

5 января 2020 г. · чтение за 5 минут

Эта статья представляет собой письменное объяснение, основанное на моем опыте использования плагина Artboard Studio для создания макетов экранов, разработанных с помощью Figma.

Что такое макет?

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

Я занимаюсь проектированием интерфейсов около года, плюс с помощью Figma, но как я преобразовал свои экраны в макеты?…

Чтобы добиться этого , Я загрузил различные размеры экрана в формате SVG или создал векторы в соответствии с размером экрана, над которым я работаю. Это сработало нормально, но потребовало много времени.

Обнаружение/использование плагина Artboard

Несколько дней до конца 2019 года при чтении некоторых статей на носителе , Я наткнулся на эту статью, которая познакомила меня с плагином. Хотя в конце статьи был скринкаст, я его не смотрел. Это потому, что я предпочитал читать статьи просмотру клипов. На этот раз видео стало более важным после того, как я попытался работать с плагинами, но не достиг своей цели.

Посмотрев ролик, я смог понять, как использовать плагин, который Я сделал это, и на этот раз все прошло успешно. Но все же помня о коллегах-дизайнерах, которые используют Figma для своих дизайнов и могут иметь те же предпочтения, что и я, я решил написать шаги, предпринятые для создания макетов ваших экранов с помощью плагина Artboard studio.

Шаги, которые помогут вам пройти

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

Сначала перейдите в меню плагинов Figma и найдите макеты студии Artboard, нажмите install в правом верхнем углу экрана, чтобы установить плагин. Или установите его здесь

Снимок экрана, показывающий, как установить плагин Artboard

2. Перейдите в свой проект figma, щелкните правой кнопкой мыши и выберите плагины или перейдите в гамбургер-меню в верхнем левом углу экрана, переместите курсор на плагины, наведите курсор на плагины макетов Artboard и выберите «Добавить макеты».

Скриншоты, показывающие, как получить доступ к плагину Artboard studio

3. На вашем экране появится всплывающее окно с запросом секретного ключа API. Вам нужно будет посетить веб-сайт студии Artboard, войти в систему или создать учетную запись, если у вас ее нет. Когда это будет сделано, перейдите на страницу настроек своей учетной записи, сгенерируйте ключ API, скопируйте его, затем вернитесь в Figma и вставьте ключ в нужное поле, затем нажмите «Сохранить и продолжить». Имейте в виду, что этот ключ должен храниться в секрете, поскольку он содержит сведения о вашей студии Artboard.

Скриншоты, показывающие всплывающий экран с запросом ключа API и страницу входа в студию Artboard соответственно

Снимки экрана, показывающие, когда ключ API был создан на странице настроек учетной записи и после того, как он был скопирован и вставлен соответственно

4. При нажатии кнопки «Сохранить и продолжить» появляется всплывающее окно со списком макетов студии Artboard. Выберите любой из элементов во всплывающем окне, которые вы хотите использовать для своей презентации макета.

Скриншот всплывающего окна, показывающего различные элементы макета

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

5. После импорта элемента и настройки кадра нажмите кнопку рендеринга. Ваш дизайн будет отображаться на элементе в этой перспективе. Любые изменения, внесенные в этот же фрейм, будут отображаться в элементе после нажатия кнопки рендеринга последовательно.

Скриншоты, показывающие, как настраивать или проектировать фреймы, поставляемые с выбранным элементом макета

Кроме того, в плагине макета Artboard есть другие категории элементов, например: упаковка, канцелярские товары и т. д. Это означает, что вы может создавать любой тип макета внутри figma.

Скриншоты, показывающие другие категории макетов элементов

Например, выберите категорию упаковки и выберите любой предмет; скажем, первый элемент (бутылка) … Этот элемент имеет 3 разных кадра, которые представляют 3 разных слоя выбранного элемента.

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

Снимок экрана, показывающий, как работать с макетом элемента с несколькими кадрами

Использование плагина макета Artboard упростило создание макетов презентаций и дизайнов, сэкономив время и придаст вашему дизайну более реалистичный вид. Разве это не весело? Бьюсь об заклад, это так. Кроме того, вы можете посетить веб-сайт студии Artboard для тестирования макетов, увидеть и попробовать новые бесплатные шаблоны. создание собственных продуктов или элементов и отправка их в студию Artboard для включения в список элементов.

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

Комментарии и отзывы также приветствуются.

Спасибо за чтение.

раздел>