Как обновить фигму на виндовс

Обновлено: 04.07.2024

2020 год начался плодотворно. Мы провели в Сан-Франциско нашу первую конференцию «Config», которую посетило более 1000 пользователей Figma. И в этом месяце мы анонсируем 7 новых функций. Они помогут дизайнерам быстрее работать, продуктовым командам лучше сотрудничать, а сообществу дизайнеров дадут больше возможностей для открытого обмена файлами.

Если вы не смогли посетить «Config», вы можете посмотреть видео-анонс ниже или прочитать эту статью.

На чем мы сосредоточимся в 2020 году

В этом году мы сосредоточимся на развитии продукта Figma в трех ключевых областях:

Создание: внедрение инновационных функций, которые автоматизируют повторяющуюся работу
Сотрудничество: включайте всех, кто участвует в процессе проектирования
Сообщество: позволить сообществу дизайнеров делиться опытом и учиться друг у друга.

99% практики, реальные задачи от крупных компаний страны и шанс попасть на работу мечты.

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

Новые инструменты, которые помогут вам работать быстрее и эффективнее

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

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

? Figma поставляется с более, чем1000 предустановленных шрифтов. Кроме того, вы можете загрузить собственные шрифты. Множество вариантов выбора – это здорово, но скролл бесконечного списка шрифтов утомляет. Теперь усовершенствованный инструмент Font Picker отображает часто используемые шрифты и позволяет быстро выполнить поиск по шрифтам. Он также выделяет все шрифты, используемые в вашем файле, чтобы вы могли поддерживать согласованность всех ваших проектов.

? Иногда вам нужно изменить цвет заливки, обводки и текста, независимо друг от друга. В других случаях вам надо, чтобы они были одного цвета. Функция Selection Colors позволяет пакетно обновлять цвета заливки, обводки и текста одним щелчком мыши.

? Прототипирование играет важную роль, помогая вам быстрее проводить итерации ваших дизайнов, тестировать их и собирать быстрый и актуальный фидбек. Чтобы помочь вам создавать прототипы с более высокой точностью, мы добавляем взаимодействия с прототипами для новых устройств, таких как клавиатуры, геймпады и контроллеры. С помощью этих новых триггеров вы можете создавать прототипы сочетаний клавиш вашего приложения, например, Cmd + F, или даже меню видеоигр с кнопками управления на геймпаде.

Новые способы совместной работы

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

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

? Чтобы помочь соединить различные инструменты, которые вы используете в процессе проектирования, мы представляем новый Plugin Inspector API. Разработчики теперь могут обновлять плагины для отображения ключевой информации на панели свойств. Вы узнаете, что плагин Mapsicle, использовался для создания визуальных элементов карты, что облегчит его обновление.

? Обмен файлами дизайна является ключом к донесению ваших идей и получению поддержки, поэтому мы продолжим расширять возможности обмена. Мы добавили новое разрешение на совместное использование, которое позволяет вам делиться прототипом без общего доступа к базовому файлу дизайна. Эта функция скоро станет доступна пользователям с тарифными планами Figma Professional и Organization.

Новые каналы для обмена идеями с сообществом

Мы не хотим, чтобы сотрудничество ограничивалось только вашей командой или организацией. Мы хотим, чтобы вы могли учиться у всего сообщества дизайнеров и делиться с ним своими проектами.

Вот почему в октябре прошлого года мы представили бета-версию Figma Community. Мы хотели создать публичное пространство, где наши пользователи cмогут публиковать файлы дизайна, а любой человек в мире сможет просматривать их, делать ремиксы и учиться. За последние несколько месяцев мы видели, как более 400 дизайнеров опубликовали более 1000 файлов. Среди них шаблоны вайрфреймов, наборы иконок, примеры дизайн-систем, фреймы девайсов, иллюстрации и многое другое.

Во всех опубликованных файлах мы видели полезные UI-ресурсы. Например, Material Design UI Kit от Google, Visual Studio Code Toolkit от Microsoft и Base Gallery от Uber. Мы также были удивлены некоторыми невероятно креативными файлами, такими как игра Pac Man и アンドリュー DIY Magic: the Gathering Cards. Некоторые файлы улучшают повседневный рабочий процесс дизайнера, например, Design Handoff Checklisе Бена Фрика и Sticky Notes Бена Рэдклиффа.

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

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

Обновления функций Auto Layout, Selection Colors и Plugin Inspector API доступны уже сегодня. Скоро появятся новый Font Picker и гиперссылки. В этом году вас ждет еще много обновлений. Следите за новостями.

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

Инструкция подойдет если вы хотите установить фигму на Windows или MacOs. Не важно на какой компьютер её устанавливать (настольный или ноутбук).

Видео: Скачивание и установка программы Figma на компьютер

Во всплывающем окне можно авторизоваться с помощью Google аккаунта, либо ввести e-mail и пароль. Рассмотрим второй вариант. Ввожу e-mail и пароль. Нажимаю на кнопку Create Account.

На следующем шаге укажите ваше имя и выберите род деятельности. Например «Design». Этот выбор ни на что не повлияет в дальнейшем.

Если хотите получать полезную рассылку от фигмы, то поставьте галочку напротив надписи «I agree to join Figma’s mailing list» и нажимаете на кнопку «Create Account».

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

Проверьте вашу почту и найдите письмо от Figma с заголовком «Verify your email address». Нажмите на кнопку для подтверждения регистрации верификации email адреса.

2. Настройка команды и выбор тарифного плана (можно пропустить)

В случае регистрации через email и пароль, перед вами появиться следующее окно, где вы можете создать новую команду. Окно может не появиться, если вы регистрировались через Google аккаунт. В этом нет ничего страшного. Если хотите создать новую команду, то укажите её название и нажмите на кнопку «Next», либо пропустите этот шаг нажав на надпись внизу «Do this later».

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

Далее вам предложат выбрать тарифный план. Если вы работаете в одиночку, либо вдвоем, то подойдет бесплатный тариф «Starter».

В бесплатный тариф «Starter» входят:

3 проекта для команд и совместной работы.
2 бесплатных стартовых библиотеки от Figma.
Сохранение истории версий проектов в течении 30 дней.
Неограниченное облачное хранилище.
Возможность 2 человек работать над одним проектом одновременно.

В платный тариф «Professional» включено:

Неограниченное количество проектов для команд.
Настраиваемые командные библиотеки.
Сохранение истории версий на неограниченный срок.
Настраивание пользовательских файлов / прав использования.
Частные проекты только по приглашениям.

Стоимость тарифа «Professional» — 12$ в месяц за 1 члена команды.

Если вы выберите бесплатный тариф, то вам предложат выбрать 2 стартовые библиотеки для командной работы. Выбирайте любое и нажимайте на кнопку «Next».

При желании можете воспользоваться подсказками, которые будет показывать вам Figma нажав на кнопку «Show me around», либо пропустите этот шаг.

3. Скачивание и установка Figma для работы на компьютере (Windows и Mac Os)

Чтобы скачать десктопную версию приложения Figma для Windows или Mac Os нажмите на меню «гамбургер» в левом верхнем углу и выберите надпись «Get Desctop App». В приложении работать удобнее, хотя можно работать через браузер. Приложение удобнее тем, что там можно создавать сразу несколько файлов. В браузере дела обстоят иначе.

После скачивания архива, его распаковки и открытия программы figma на вашем компьютере перед вами появиться надпись «Welcome to Figma». Вам предложат авторизоваться через браузер. Для этого вы должны быть авторизованы в вашем аккаунте. Нажмите на кнопку «Log in with browser».

Вас перенаправит в браузер. Там нажмите на кнопку «Open the Decktop App».

Подробная, пошаговая инструкция по установке десктопного приложения Figma на ваш компьютер (Windows или Mac Os). В видео и текстовом формате.

Видео: Скачивание и установка программы Figma на компьютер

2. Настройка команды и выбор тарифного плана (можно пропустить)

В бесплатный тариф «Starter» входят:

3 проекта для команд и совместной работы.
2 бесплатных стартовых библиотеки от Figma.
Сохранение истории версий проектов в течении 30 дней.
Неограниченное облачное хранилище.
Возможность 2 человек работать над одним проектом одновременно.

В платный тариф «Professional» включено:

Неограниченное количество проектов для команд.
Настраиваемые командные библиотеки.
Сохранение истории версий на неограниченный срок.
Настраивание пользовательских файлов / прав использования.
Частные проекты только по приглашениям.

Стоимость тарифа «Professional» — 12$ в месяц за 1 члена команды.

3. Скачивание и установка Figma для работы на компьютере (Windows и Mac Os)

Вас перенаправит в браузер. Там нажмите на кнопку «Open the Decktop App».

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

Figma (2021) на русском языке скачать торрент крякнутый бесплатно [80 MB]

Дополнительные материалы по Figma

Figma (Фигма) - онлайн графический редактор на русском, это редактор векторной графики и инструмент для создания прототипов, который в основном основан на работе в сети, с дополнительными автономными функциями, доступными в настольных приложениях для macOS и Windows.

Сопутствующие приложения Figma Mirror для Android и iOS позволяют просматривать прототипы Figma в реальном времени на мобильных устройствах. Набор функций Figma ориентирован на применение в пользовательском интерфейсе и дизайне пользовательского интерфейса с упором на совместную работу в реальном времени.

Бесплатные макеты для верстки Figma:

( Ctrl+Z ) - отменить последнее действие

( Ctrl+Y ) - вернуть действие назад

Для всех манипуляций понадобиться архиватор и редактор вроде Notepad++.

Понадобиться файл app.asar, который находится по следующему пути (смотря куда у вас установлена Figma):

Где Administrator - название папки вашего системного пользователя, а папка app-68.5.0 - это папка с последней версией фигмы, у вас она может быть другой.

Далее вам необходимо распаковать архиватором тот самый файл app.asar и достать из него файл menu.js (не забудьте сделать копию файла на случай его поломки).
После чего открываете файл menu.js через редактор Notepad++ и исправляете все пункты меню с английского на русский. Так же там можно изменить сразу и горячие клавиши.
Далее сохраняете файл и заливаете его обратно в app.asar.

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

Посмотреть хоткеи можно через пункт меню Keyboard Shortcuts в помощи в нижнем правом углу или нажав "Ctrl"+"Shift"+"?"

Знакома история, когда забыл сохранить предыдущую версию рабочего макета — и считай её и вовсе не было? Система контроля версий поможет избежать подобных ситуаций. Я работаю UX/UI-дизайнером в крупном проекте, где создание интерфейсов и разработка идут одновременно. В таких проектах важно держать все изменения версий макетов не только в голове, но и в самом рабочем файле, чтобы вконец не запутать команду разработчиков.

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

подход семантического версионирования;

история версий в Figma;

новый (пока в бета-версии) инструмент в Figma — Branching («ветвление»).

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

Семантическое версионирование для дизайнеров

Разработчики используют свой подход для сохранения версий, он называется семантическое версионирование (SemVer). По этой схеме номера версий и общий порядок нумерации несут смысловую нагрузку: они сообщают, насколько приоритетные изменения были совершены в компоненте.

«Обычный номер версии должен иметь формат X.Y.Z. (например, 1.2.0), где X, Y и Z — неотрицательные целые числа, которые не должны начинаться с нуля. X — мажорная версия, Y — минорная версия и Z — патч-версия».
Источник: Семантическое Версионирование 2.0.0.

мажорная версия — изменения, которые могут сломать компонент (например, изменения внешнего вида и размеров);

минорная версия — добавление новых состояний компонента;

патч-версия — правки багов и изменения, не влияющие на поведение компонента.

Тот же подход можно использовать в дизайне, взяв за исходные данные значения версий компонентов в формате X.Y.Z. Тогда мы будем руководствоваться в работе такой схемой:

мажорная версия — глобальные функциональные и стилистические изменения макета;

минорная версия — добавляется новая сущность, которая не затрагивает другие состояния компонента;

патч-версия — это исправление незначительных ошибок в дизайн-макете компонента.

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

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

Инструменты Figma

История версий (Version history)

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

В Figma можно посмотреть историю изменений файла по датам и времени в течение всего срока работы над проектом.

Это бывает полезно, если вы нечаянно что-то удалили из проекта и хотите вернуть текущий проект на предыдущую версию. Чтобы попасть на предыдущую версию проекта, нужно в выпадающем меню проекта нажать Show version history, как показано на гифке выше.

Если вы хотите добавить свою версию проекта в историю, нажмите комбинацию клавиш ⌘ + ⌥ + S (Mac) или Ctrl+ Alt + S (Windows).

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

Плюсы такого метода:

К версиям можно добавлять комментарии для разработчиков или дизайнеров.

Версии можно именовать.

Можно увидеть, кто и когда вносил изменения.

Можно в любой момент добавить свою версию проекта в ветвь истории.

Можно в любой момент откатить файл к предыдущей версиию

Можно дублировать версию файла. Например, поделиться определённой версией или моментом времени с разработчиком либо использовать новый артборд в качестве отправной точки для следующей итерации.

Минусов у Figma немного, но ключевые — это:

При откате на предыдущую версию могут удалиться нужные изменения в макетах, которые придётся потом восстанавливать по памяти вручную.

Нет режимов сравнения.

Branching (beta)

На конференции Config 2021 Дилан Филд (Dylan Field) анонсировал несколько новых фич, которые объединяют лучшее из обоих миров (дизайн и код) для использования в больших проектах. Одной из новинок стал инструмент ветвления файла в Figma — Branching. На данный момент Branching доступен в бета-версии для тарифного плана ‘Organization’.

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

В этом разделе я рассмотрю основные функции, включённые в бета-версию:

функция ветвления разных версий файла (в них можно вносить изменения в стили, компоненты и другие аспекты файла или библиотеки);

обновление основного файла и внесение любых изменений в свою ветку;

функция просмотра и объединения ветви с основным файлом, разрешение конфликтов.

Создание ветви и навигация

Теперь редактор может создать отдельную ветвь с версией этого файла. Файл, из которого вы создаёте ветвь, называется основным файлом. Ветви — это управляемые среды, в которых можно вносить изменения в стили, компоненты и другие аспекты файла или библиотеки.

Для того чтобы создать новую ветвь, на панели инструментов щёлкните левой кнопкой рядом с именем файла и выберите из списка Create branch. Бранчу можно назвать по подходу SemVer, о котором я писала выше. Эта идентификация будет отображаться в истории версий основного файла. Figma создаст новую ветвь, которая является точной копией основного файла в его текущем состоянии.

Над одной веткой одновременно могут работать несколько дизайнеров. При внесении правок все изменения сохраняются в фоновом режиме. Изменённые артборды или отдельные изменённые элементы отмечены значком Added, Edited, Remove. Благодаря этому, дизайнеру не нужно создавать большое количество файлов с разными версиями проекта: всё наглядно сохраняется и отображается в одном месте. Помимо этого, можно обновлять основной файл, и эти изменения не коснутся ветви.

Если вы хотите поделиться ветками с коллегами, то вам доступны такие способы:

Через доступ к основному файлу. Можно просматривать любые ветви этого файла и редактировать их.

Через общий доступ к ссылке на ветвь и управление доступом.

Через приглашение в бранчу по электронной почте.

Слияние ветви с основным файлом

Чтобы посмотреть ветки проекта, нажмите в выпадающем меню проекта View Branch, как показано выше. Опция See all branches открывает модальный режим ветвей, который позволяет вам видеть все активные и архивированные ветви.

Ветвь также можно объединить с основным файлом. Если вы хотите применить изменения к основному файлу, вы можете нажать кнопку Merge. В рамках этого процесса вы можете увидеть, доступны ли обновления из основного файла. Figma предупредит вас о любых конфликтующих изменениях и позволит вам выбрать, какие изменения следует объединить.

Обновление и внесение изменений, разрешение конфликтов

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

В бета-версии предусмотрен режим устранения конфликтов ‘side by side’ — когда фрейм/компонент из мастер-файла и изменённый фрейм/компонент из ветки расположены рядом. Выберите, какую версию вы хотели бы использовать. Повторите этот процесс для любых других конфликтующих изменений.

Figma применит обновления из основного файла и вернёт вас в ветку. Затем вы можете вернуться к процессу объединения ветки с основным файлом. Объединённые ветки впоследствии архивируются.

Плюсы:

Модальный режим ветвей позволяет вам видеть все ветви, которые вы создали: и активные, и архивированные.

Ссылкой на ветку можно делиться с другими членами команды.

Комментарии из ветви не попадают в основной файл при слиянии.

Просмотр действий, связанных с ветвлением и слиянием, доступен в истории версий файла.

Если вы объединили изменения из ветви с основным файлом и хотите отменить эти изменения, вы можете восстановить предыдущую версию файла в истории версий.

Минусы:

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

Пока не реализована функция выбора конкретных обновлений в бранче для слияния с основным файлом. Поэтому применены будут все обновления.

Эта фича доступна сейчас только в бета-версии для тарифного плана ‘Organization’.

Заключение: зачем дизайнеру версионирование?

Том Престон-Вернер, автор спецификации семантического версионирования, пишет:

«Это не новая или революционная идея. Вероятно, вы уже используете что-то подобное. Проблема в том, что «подобное» — не достаточно хорошо. … В реальном мире творится бардак, и единственное, что тут можно поделать — быть к этому готовым».

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

Мы показываем новый макет заказчику, но ему не нравится расположение и цвет кнопки; он решает всё поменять. Дизайнер заводит вторую ветку, называет её Name_1.2.0 и показывает клиенту новую версию. И вдруг — та-дам! В финальном ревью заказчик решает, что кнопку надо перенести из личного кабинета на главную.

Если бы дизайнер не заводил ветку, а обновлял основную версию макета, то для отмены изменений пришлось бы откатывать историю файла назад — и тогда мы потеряли бы изменения, внесённые за это время в другие макеты. А это уже привело бы к путанице у разработчиков, потому что код менялся вместе с макетами…

Но мы-то были готовы к тому, что в реальном мире творится бардак. В нашем примере актуальный макет личного кабинета остаётся без изменений. А дизайнер заводит ветку с дубликатом актуальной версии главной страницы, чтобы добавить кнопку туда и показать клиенту очередную версию макета.

Мы сберегли нервы себе, коллегам и клиенту, чего и вам желаем. Всё, что для этого нужно:

объявить, что вы применяете семантическое версионирование и следовать его правилам внутри команды;

не побояться перемен и попробовать бета-версию инструмента Branching в Figma.

Читайте также: