Перевод статьи Figma.
Переезд — отстой! И, скорее всего, не очень весёлая процедура. Самая большая трудность, с которой вам предстоит столкнуться — новые действия, к которым вы вынуждены привыкнуть. Вы, вероятно, все еще собираетесь хранить свои серебряные столовые приборы в ящике на кухне, но теперь этот ящик находится слева от раковины, а не справа. Вам потребуется время, чтобы переобучить вашу мышечную память во избежание открытия левого ящика.
Аналогичным образом, переход с такого инструмента, как Sketch на Figma, может показаться сложным на первый взгляд. Пользовательский интерфейс немного отличается, сочетания клавиш не одинаковы, и есть некоторые основные отличия, к которым нужно привыкнуть. Я помню, когда я перешел на Figma, мне приходилось работать над настоящим проектом целую неделю или около того, чтобы наконец почувствовать себя комфортно.
Итак, если вы недавно перешли на Figma (или планируете это сделать), я надеюсь, что эта статья поможет вам понять различия и сходства. Мы хотим, чтобы в Figma вы стали чувствовать себя как дома как можно быстрее.
Итак, приступим!
Приятная вещь при переходе от Sketch к Figma состоит в том, что у вас остаются все ваши старые проекты. У нас есть функция импорта, которая позволяет вам вносить отдельные файлы Sketch в свою учетную запись Figma. Она сохраняет ваши слои нетронутыми и даже переносит ваши символы как компоненты. (Подробнее об этом в разделе советов и подсказок ниже.)
Вот как это сделать: Нажмите кнопку импорта, находящуюся в браузере файлов, или просто перетащите файл Sketch в Figma.
Примечание: В зависимости от размера файла, импорт может занять несколько минут.
После завершения импорта вы можете нажать на него, чтобы открыть, и вуаля! Все ваши страницы, слои, текст, фигуры и т.д. теперь должны отображаться в Figma в точности так, как они были в Sketch. С учетом вышесказанного есть несколько вещей, которые мы, к сожалению, не можем импортировать, например, стили Sketch, из-за различий в реализациях. Для получения дополнительной информации о том, что импортировать или не импортировать из Sketch, ознакомьтесь со справочной статьей здесь.
Определяем разницу
Пользовательский интерфейс Figma по большей части должен быть знаком пользователям Sketch, однако в нашей информационной архитектуре есть некоторые ключевые отличия, которые важно понять на ранних этапах, чтобы облегчить переход.
Эскиз артбордов = фреймы в Figma (и их виды)
В Figma есть родительский объект, называемый фреймом. Как и в артбордах в Sketch, фреймы используются для содержания чего-либо. Однако, в отличии от монтажных областей, фреймы имеют ограничения по умолчанию и могут быть вложены друг в друга. Воспринимайте их скорее как сильные группы или дивы, а не просто как обвесы.
Фреймы также имеют несколько дополнительных свойств, таких как фоновая заливка и несколько сеток макета (подробнее об этом позже). Они также дают вам возможность обрезать или открепить вложенный контент. Предлагаются предустановки размера кадра на основе устройств (телефоны Google Pixel 2, планшеты iPad mini, часы Apple и т.д.), или вариантов использования (бумага для писем, пост в Instagram, изображение заголовка Twitter и т.д.). Вы можете найти все эти настройки на панели свойств справа.
Символы эскиза = компоненты Figma (и их виды)
В Sketch символы являются отличным способом повторного использования элементов в файлах дизайна. В Figma у нас есть нечто подобное, называемое компонентами. Идеи, лежащие в основе компонентов и символов, одинаковы, однако наш подход имеет несколько уникальных отличий.
Как это работает в Sketch
Когда вы создаете символ в Sketch, он добавляет его на страницу в вашем файле, которая работает как контейнер для всех ваших главных символов. Затем вы можете использовать экземпляры этих образцов на других страницах того же документа. Редактирование этих экземпляров (например, изменение текста компонента кнопки) выполняется через панель переопределений справа. Если вам нужно отредактировать главный символ, вам придется вернуться на страницу символов и отредактировать его там. По сути, символы-образцы и экземпляры не могут находиться на одной странице, что иногда затрудняет редактирование символов без надлежащего контекста.
Как это работает в Figma
В отличие от Sketch, Figma позволяет вам манипулировать экземплярами ваших компонентов прямо на холсте. Хотите изменить цвет вашей кнопки в экземпляре? Просто измените цвет. Нужно настроить текст? Дважды щелкните по текстовому объекту и сделайте это! Не нужно переходить на панель переопределений, чтобы вносить простые изменения. Хоть это и может показаться немного предвзятым, но мы считаем, что этот метод более гибкий и значительно упрощает создание и редактирование компонентов / экземпляров.
Еще одним преимуществом нашей реализации является то, что главные компоненты и их экземпляры могут находиться на одной странице. Это значительно упрощает создание и редактирование компонентов, поскольку в контексте можно увидеть, как изменения влияют на все экземпляры. На начальном этапе создания дизайна (прежде чем я организую и опубликую свои компоненты в библиотеке), я считаю очень полезным располагать компоненты и экземпляры рядом друг с другом на холсте.
(Тем не менее, большинство дизайнерских команд предпочитают хранить все свои главные компоненты в отдельном файле. Таким образом, они могут контролировать права на редактирование для системы дизайна, которая используется всей компанией.)
Библиотеки
И в Sketch, и в Figma есть библиотеки, которые упрощают совместное использование и использование набора компонентов. В Sketch библиотеки — это просто файлы .sketch, которые вы можете указать в качестве библиотеки на панели настроек. Таким образом вы можете получить доступ к символам, содержащимся в этом файле Sketch, в других файлах.
Библиотеки Figma работают немного по-другому. Прежде всего важно отметить, что командная библиотека является платной функцией, которая является частью нашего профессионального плана. Вы по-прежнему можете создавать компоненты в бесплатном плане, но не можете получить к ним доступ через разные файлы. Опять я предвзят, но еще до присоединения к Figma я заплатил за про-план в качестве фрилансера, чтобы использовать командную библиотеку. Оно того стоит! Вы можете узнать больше о наших ценах здесь.
Командная библиотека в Figma позволяет вам публиковать ваши компоненты, а затем получать к ним доступ через различные файлы и проекты. В отличие от Sketch, при создании библиотеки в Figma мы публикуем только компоненты из файла (но не другие элементы). Фактически вы можете указать, какие именно компоненты вы хотите опубликовать.
Если вы не хотите, чтобы конкретный компонент был опубликован (возможно, он еще не закончен или вы планируете использовать его только в одном файле), просто добавьте период в начале имени компонента. Либо щелкните правой кнопкой мыши на вкладке «Ресурсы» на панели слоев и удалите из библиотеки.
Чтобы начать работу с компонентами публикации, перейдите на вкладку «Ресурсы» (на левой панели слоев в Figma) и затем нажмите на кнопку командной библиотеки. Здесь вы увидите название вашего файла и кнопку публикации. После публикации вы можете добавить дополнительное описание (мне нравится думать о них как о коммитах)). Введите детали, которые помогут вам отслеживать, что вы меняете и почему.
В целом, вы значительно улучшите свой рабочий процесс с помощью компонентов, воспользовавшись функциональностью библиотеки Figma, особенно если вы являетесь членом команды. Если вам нужна дополнительная информация о компонентах, мой коллега Том написал исчерпывающее руководство, в котором более подробно рассказывается о том, как называть, структурировать и использовать компоненты, библиотеки и стили (о которых мы поговорим далее). Я определенно рекомендую прочитать его.
🔎Подсказка от про: чтобы быть уверенным в том, что компонент не будет опубликован, просто добавьте точку в начале имени.
Стили
В настоящее время в Figma мы разрешаем вам создавать четыре различных типа стилей — сетка, цвет, текст и эффект. Они могут быть использованы как локально, так и/или опубликованы в вашей библиотеке.
Как и функции наших компонентов и библиотек, стили Figma работают немного иначе, чем в Sketch. Вместо того чтобы объединять определенные свойства, такие как цвет и текст, мы разделили их на отдельные уникальные стили. Мы обнаружили, что этот модульный подход облегчает дизайнерам адаптацию стилей под различные варианты использования, поскольку сами стили были более гибкими.
В отличие от этого, в Sketch (по крайней мере, до недавнего времени) вам пришлось бы создавать несколько стилей текста для каждого цвета и выравнивания.
Создание стилей в Figma выполняется простым нажатием на маленький квадратный значок, состоящий из четырех точек. Эта кнопка находится под разделами текста, цвета, эффекта и сетки на панели свойств. Она вызывает выпадающий список всех ваших текущих стилей, которые вы можете выбрать. Чтобы создать новый стиль, просто нажмите кнопку «плюс» в правом верхнем углу раскрывающегося списка. Появится окно, в котором вы сможете ввести имя стиля.
Вы можете узнать больше о передовых практиках использования стилей в том же руководстве по передовым практикам от Тома или ознакомиться с нашим справочным контентом.
Одно замечание: наша система для создания и управления стилями немного отличается от Sketch, поэтому, к сожалению, они не будут перенесены.
Ограничения
Ограничения в Figma будут казаться очень знакомыми по Sketch, но есть одно большое отличие: они находятся на уровне фрейма, а не в группе. (Вы можете прочитать краткий учебник по фреймам и группам в Figma здесь).
Может потребоваться некоторое время, чтобы привыкнуть к ограничениям, которые работают подобным образом, но есть большой плюс: имея ограничения на уровне фреймов, вы можете создавать экраны отзывчивости или даже вкладывать фреймы для создания таблиц и т.д.
Вы действительно осознаете силу ограничений, когда скомбинируете их с сетками макетов.
Макетные сетки
Макетные сетки в Figma немного уникальны по сравнению с сетками в Sketch. Первое, что вы заметите, это то, что они не ограничены только уровнем файла/страницы, а вместо этого могут быть добавлены к любому фрейму любого размера. Вы также можете добавить несколько сеток к одному фрейму, так что наличие квадратной сетки 8*8 пикселей, вертикальной базовой сетки 16 пикселей и горизонтальной сетки из 12 столбцов вполне возможно. Мы даже позволяем вам создавать стили из сеток, чтобы вы могли опубликовать их в своей библиотеке.
Я обнаружил, что добавление сеток макета к вашим компонентам может помочь передать отступы или другие значения пробелов. Это не должно быть для вас сюрпризом, но всё же у Тома есть отличный обзор того, как и когда использовать сетки макетов.
Прототипирование
Я не буду вдаваться в подробности о прототипах. Для получения дополнительной информации я рекомендую ознакомиться с нашими справочными статьями, а также с нашей с Томом прямой трансляцией, базирующейся на лучших практиках прототипирования.
Учитывая сказанное, я хотел бы упомянуть одну вещь, которая в Figma отличается от Sketch.
В Figma мы позволяем создавать прототипы для любой части компонента, тогда как в Sketch вы можете использовать только весь символ в качестве точки перехода. Преимущество этого состоит в том, что вы можете на самом деле установить соединения прототипа из главного компонента (на той же странице). Затем, когда вы дублируете его, тем самым создавая экземпляры, он переносит эти соединения. Можно реализовать много хороших вариантов использования, таких как быстрая настройка навигации по панели вкладок.
Браузер файлов, проекты и сохранение
Последнее, что я хотел бы затронуть, прежде чем углубляться в некоторые советы и подсказки это браузер файлов. Хоть в этом и нет ничего революционного, но вы заметите, что в Figma встроено управление файлами. Это означает, что все ваши файлы хранятся в облаке, поэтому вам больше не нужно беспокоиться о том, чтобы выгружать их на Dropbox или Google Drive. Это также помогает защитить ваш жесткий диск от всех этих файлов Final, FinalFinal и FinalFinalv2FINAL. ;)
Вот стандартная иерархия файлов в Figma:
Teams > Projects > Files > Pages
С бесплатным стартовым планом вы ограничены 3 проектами с неограниченным количеством файлов в них. Думайте о проекте больше как о пространстве, а не как о конкретном дизайн-проекте. Прежде чем платить за Figma, я настроил свои 3 проекта примерно так:
Personal
Client
Resources
В каждом из этих проектов были некоторые файлы. В конце концов, я нуждался в большей организационной гибкости и хотел начать использовать командной библиотеке. Итак, после обновления до профессионального плана мое рабочее пространство выглядело примерно так:
Portfolio
Client A
Client B
Client C
UI Kits
Icons
Other Resources
MISC files
С профессиональным планом вы можете иметь неограниченное количество проектов и неограниченное количество файлов в них. Вы также получаете неограниченную историю версий и доступ к функциям командной библиотеки. Если вы являетесь частью более крупной организации, которая рассматривает возможность перехода от Sketch к Figma, я бы порекомендовал взглянуть на наш уровень организации. Предлагается неограниченное количество команд, дополнительная безопасность, единый вход и множество других функций по уровню предприятия. Если вы хотите узнать больше об этом, обязательно свяжитесь с нашим отделом продаж, заполнив форму, найденную здесь.
Вот ещё несколько ссылок, которые могут быть полезны для более подробного изучения таких аспектов работы в браузере файлов, как «Черновики», «Настройки команды» и т.д. Я рекомендую ознакомиться с этими ресурсами что бы знать больше:
Теперь о советах и хитростях …
Советы и рекомендации по переходу на Figma
Мы рассмотрели все основные концепции, которые вам необходимо понять при переходе от Sketch к Figma. Надеюсь, вы теперь вы понимаете, какие инструменты между собой похожи, а какие отличаются. Прежде чем покинуть вас, я хотел бы поделиться несколькими другими полезными советами и уловками, которые могут помочь при настройке, из которых вы должны запомнить сочетания клавиш для хаков во время импорта свойств стиля из Sketch.
Горячие клавиши
Многие сочетания клавиш должны быть такими же, как в Sketch, однако есть несколько отличающихся, которые могут сбить вас с толку. Чтобы увидеть все сочетания клавиш, у нас есть потрясающая интерактивная панель, которая позволяет узнать, использовали ли вы определенное сочетание или нет. Вы можете получить к нему доступ, нажав на знак вопроса в правом нижнем углу Figma, а затем на сочетание клавиш или …сюрприз… с помощью сочетания клавиш control+shift+?.
К сожалению, в настоящее время у нас нет возможности предоставить вам создание собственных ярлыков, но надеемся, что эта возможность будет добавлена в будущем.
Навигация
В Figma вы должны почувствовать себя как дома довольно быстро. Вот некоторые из моих главных навигационных сочетаний, которые я постоянно использую:
• Используйте Command + /, чтобы быстро пройти по меню. При использовании этого сочетания клавиш открывается меню файлов с активированным полем поиска. Это позволяет быстро искать команду, даже не нуждаясь в мышке или трекпаде.
Примечание: Я использую клавиши со стрелками для перемещения вверх и вниз по меню, а затем нажимаю клавишу Enter, чтобы выбрать нужный элемент.
• Используйте Option + 1, чтобы открыть панель слоев, Option + 2для панели ресурсов и Option + 3 для модальной библиотеки. Эти 3 комбинации позволяют очень быстро перемещаться между вашей библиотекой, компонентами и слоями. Я использую их все время.
• Используйте Shift + Command + [], чтобы перемещаться между вкладками в браузере или настольном приложении. Я обычно работаю из настольного приложения, и эта комбинация позволяет мне быстро переключаться между различными файлами.
Импорт эскиза
Как я уже говорил выше, есть несколько вещей, которые Figma, к сожалению, не может перенести из Sketch, например стили. Этот совет должен помочь вам преодолеть эти проблемы в процессе миграции:
• В меню редактирования вы найдете набор свойств, все из которых начинаются с Select all with… Эта команда позволяет вам выбрать всё на странице, имеющее такое же свойство, как заливка, обводка, эффект, шрифт и т.д. Также можно использовать эту команду для быстрого изменения группы объектов обратно в стили или компоненты.
Интеграции
У Figma есть несколько удивительных возможностей прототипирования и встроенная панель кода, чтобы помочь с передачей обслуживания. Однако, если вы и ваша команда уже работаете с чем-то вроде Zeplin или Principle, не нужно беспокоиться… мы поддерживаем их вместе с несколькими другими интеграциями. Вот где их найти:
Также у нас есть API, поэтому не стесняйтесь проявлять творческий подход и создавать собственную интеграцию, как это сделал Uber.
Выводы
Несмотря на то, что есть еще множество удивительных функций, рабочих процессов и советов, которые я не рассмотрел, я надеюсь, что эта статья поможет вам перейти от Sketch к Figma. Если вам нужна дополнительная информация по конкретной теме, я настоятельно рекомендую посетить наш справочный центр.