Slice в фигме что это
Перейти к содержимому

Slice в фигме что это

  • автор:

Краткий гайд по инструментам в Figma

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

Панель инструментов находится в левом верхнем углу.

Первая кнопка на панели – это основное меню. Через меню можно сохранить файл, создать новый, добавить объект, изменить настройки.

Вторая кнопка на панели – это выбор варианта курсора.

«Move» — используется для перемещения по файлу и для перетаскивания объектов. Горячая клавиша «V»

«Scale» — используется для масштабирования объекта. Горячая клавиша «K»

Горячая клавиша — это возможность переключиться на инструмент с помощью клавиши на клавиатуре, так будет быстрее.

Третья кнопка на панели – это выбор секции.

«Frame» – это рабочая зона. Все необходимые элементы помещаются внутрь фрейма. Все, что вышло за рамки, не отобразится при выгрузке итоговой картинки. Определить размер фрейма можно вручную: выбираем инструмент и рисуем область. Или выберите нужный фрейм на панели справа.

«Section» – это группировка фреймов. Используется, когда на странице много фреймов и нужно показать их принадлежность друг к другу.

«Slice» – используется для экспорта произвольной прямоугольной области, например, нужно выгрузить половину фрейма.

Четвертая кнопка – выбор объекта. У самых часто используемых тоже есть горячие клавиши, они указаны напротив элементов.

Пятая кнопка – выбор пера.

«Pen» – инструмент для создания векторных иллюстраций любой формы. Еще можно использовать для вырезания объекта с картинки или фотографии. Расскажу об этом в следующих уроках 😉

«Pencil» – рисование «от руки». Если умеете рисовать мышкой или по тачпаду, то вам понравится. Я не использую.

Шестая кнопка – добавление текста. Выбираем инструмент на панели или с помощью горячей клавиши «T», ставим курсор в любое место (или в нужное место) и начинаем писать.

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

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

Девятая кнопка – комментарий, горячая клавиша «С». В этом режиме нажмите на любое место рабочей области, появится окошко для ввода комментария. Комментарий могут оставить все, у кого есть доступ к файлу. Все комментарии будут видны на панели справа, если выбран данный режим.

Краткий гайд по инструментам Figma завершен! Я описала основные инструменты и для чего они используются. Чтобы узнать больше, читай другие статьи серии.

Using the Slice tool in Figma

Himanshu Raikwar Hey, I’m a Product Designer. I have worked in the tech space for three years as an expert Product Designer, founder, and trainer for Critic Designs, a design community for offering support, training, and mentorship.

Table of contents

  • Getting started with the Slice tool in Figma
  • Slicing vs. exporting: What’s the difference?
    • Creating slices in Figma
    • Why the Slice tool is useful
    • How to use Figma Slice

    LogRocket Galileo logo

    Introducing Galileo AI

    LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns.

    As a designer, the Slice tool in Figma can be your best friend when it comes to creating intricate designs. Whether you’re looking to simplify your workflow or just starting with Figma, understanding the ins and outs of slicing can bring your design skills to the next level.

    Figma Logo Over Palm Tree Background

    Let’s cover everything you need to know about the Slice tool in Figma, from basic usage to advanced techniques and best practices. Let’s get started!

    Getting started with the Slice tool in Figma

    If you’re new to Figma, the Slice tool may seem intimidating at first. But fear not: with a few simple steps, you can be on your way to mastering this powerful feature.

    I’ll walk you through a basic Figma slice tool tutorial to get you up and running. Let’s dive in!

    Slicing vs. exporting: What’s the difference?

    Before we plunge into the world of slicing, let’s clarify a common misconception: slicing is not the same as exporting.

    Exporting involves saving an element or group of elements as image files or code, while slicing is the process of defining areas within your design that you want to export.

    To put it simply, think of your design as a whole pizza, and slicing is like using a pizza cutter to decide how big a slice you want. Exporting, on the other hand, is choosing to take that slice home or share it with others.

    Let’s focus on the slicing part now!

    Creating slices in Figma

    The first step to using the Slice tool in Figma is creating slices. Slices are areas of your design that you want to export or save as a separate file:

    To create a slice, select the layer or group you want to slice and click the Slice button in the toolbar. You can also use the keyboard shortcut S to activate the slice tool.

    Once you’ve created a slice, you can adjust its size and position. Click and drag the handles surrounding the slice to resize it, or use the arrow keys to move it around. You can also use the Align and Distribute options in the toolbar to precisely position your slices.

    Why the Slice tool is useful

    • Precision: the Slice tool allows you to precisely define the area you want to export, ensuring that you get the exact portion of your design without any unwanted elements
    • Flexibility: you can create multiple slices within a single frame or across multiple frames, allowing you to export different sections of your design
    • Export options: with the Slice tool, you can export your design in various formats such as PNG, JPG, SVG, and PDF. Additionally, you can choose the resolution of the exported image

    Now that you know how to create and adjust slices, let’s explore some different slicing techniques. Figma offers three types of slices: Slice, Export, and Background:

    Export Menu in Figma

    The Slice type is the default and is used for most slicing scenarios. The Export type is used for elements that need to be exported as assets, such as icons or logos.

    The Background type is used for slices that have a fill color or gradient and don’t need to be exported as separate assets.

    Over 200k developers and product managers use LogRocket to create better digital experiences

    Learn more →

    Figma Slice tool tips

    Now that you have a basic understanding of the Figma slice tool, let’s dive into some tips to help you use it more effectively. Here are a few Slice tool tips to get you started:

    • Use the Alt key to duplicate slices quickly. Simply click and drag a slice while holding down the Alt key, and a duplicate slice will be created
    • Use the Shift key while resizing a slice to maintain its aspect ratio. This is especially helpful when resizing logos or icons
    • Use the Export Settings panel to export your slices quickly and easily. Simply select the slices you want to export and adjust the export settings in the panel
    Shortcut Description
    Alt+D Duplicates the selected slice
    Shift Constrains the proportions of your slice
    Ctrl+Shift+K Exports all slices in your design

    How to use Figma Slice

    The Slice tool in Figma is used to define specific areas of your design that you want to export or save as separate image files. This is particularly useful when you want to export individual elements of your design for web or app development. Here’s how you can use the Slice tool in Figma:

    1. Open your Figma file

    Start by opening your Figma file or creating a new one:

    2. Select the Slice tool

    The Slice tool is located on the left-hand side of the toolbar. It looks like a small knife icon. Click on this tool to activate it:

    3. Create a slice

    With the Slice tool selected, click and drag your mouse over the area of your design that you want to create a slice for. This will create a rectangular or square slice around the selected area. You can adjust the size and position of the slice as needed:

    4. Name the slice (optional)

    You can give your slice a name by double-clicking on it and entering a custom name in the Name field in the left-hand panel. This can be helpful for organization, especially if you have multiple slices:

    5. Customize slice settings (optional)

    In the right-hand panel under export, you can further customize the properties of your slice. Here are some of the settings you can adjust:

    • File format: you can choose the file format for the exported slice, such as PNG, JPEG, or SVG
    • Quality: adjust the quality for raster formats (e.g., JPEG)
    • Resolution: set the resolution for your slice
    6. Export your slices

    Once you’ve defined all the slices you need, you can export them by selecting the slices you want to export and clicking the Export button in the right-hand panel.

    This will prompt you to choose an export location on your computer and specify the format and options for each slice:

    By following these steps, you can effectively use the Slice tool in Figma to create and export specific areas of your design as separate image files. This is useful for web and app developers who need assets from your design to build the final product.

    Plugins to make slicing easier

    Slicer Plugin

    Want a plugin to make slicing quicker? One such plugin is Slicer 2. This Figma plugin makes it easier to slice multiple objects.

    It’s pretty straightforward:

    • Run Slicer
    • Select one or more layers you want to Slice
    • Choose to set the slice size with padding or total size
    • Click Slice, and the layers will be sliced and grouped

    Best practices for Slicing in Figma

    Now that you’re familiar with the basics of slicing in Figma, let’s delve into some tips and best practices to enhance your slicing skills:

    Organize your slices

    Proper organization is key. Give your slices meaningful names that reflect their content, making it easy to identify them later. For example, if you have multiple button variations, name them “Primary Button,” “Secondary Button,” and so on.

    Group related slices

    If your design has multiple components that work together, consider grouping related slices. This ensures that when you export them, they stay together, making it easier for developers to work with.

    Use consistent export settings

    Maintain consistency in your export settings, especially for similar types of assets. This reduces the chance of errors and streamlines your workflow.

    Test different formats

    Experiment with different file formats to find the best balance between image quality and file size. PNG is great for transparency, while JPEG works well for photographs.

    Keep an eye on resolution

    Match the resolution of your slices to the intended use. For web design, 72 DPI is standard, but if you’re designing for print, you’ll want to use 300 DPI.

    Collaborate with your team

    Figma is all about collaboration. Share your designs with your team members and communicate about your slices to ensure everyone is on the same page.

    The drawbacks of the Slice tool

    While the Figma Slice tool is undeniably a helpful asset in your design toolkit, it’s essential to be aware of its limitations:

    • File size: Exporting multiple slices can lead to a proliferation of image files, potentially impacting your project’s file size and organization. It’s crucial to manage your exported assets efficiently to avoid clutter
    • Complexity: In intricate designs with numerous elements, managing a large number of slices, frames, and groups can become challenging. Maintaining clear organization and naming conventions is key to managing this complexity
    • Manual process: Slicing and exporting are manual tasks. While this provides control over each element, it can be time-consuming, especially in projects with a high number of assets
    • Limited editing: Slices are static representations of your design. If you make changes to the original design, you’ll need to update and re-export the affected slices manually

    Despite these drawbacks, the Slice tool in Figma remains a valuable asset. To mitigate these limitations, it’s essential to develop efficient workflows and organizational strategies to maintain control and clarity in your projects.

    Conclusion

    Now that you’ve acquired a solid understanding of the art of slicing within Figma, you’re well prepared to take your design projects to the next level. Whether you’re working on a personal project or collaborating with a team, the Slice Tool in Figma will be your go-to instrument for precision and efficiency.

    So go ahead, slice it up, and serve your design on a silver platter!

    LogRocket: Analytics that give you UX insights without the need for interviews

    LogRocket lets you replay users’ product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.

    See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.

    Share this:

    • Click to share on Twitter (Opens in new window)
    • Click to share on Reddit (Opens in new window)
    • Click to share on LinkedIn (Opens in new window)
    • Click to share on Facebook (Opens in new window)

    Фреймы и слайсы в Figma

    В этом уроке мы рассмотрим, что такое фреймы и слайсы. Находятся эти функции в верхней панели меню. В прошлом уроке вкратце упоминалось о фрейме, но сейчас мы рассмотрим эту тему более подробно. Работая в других программах, например, в Photoshop вам скорее всего знакома функция Artboard (монтажная область). В Figma эта функция представлена в виде Frame (фрейма), что означает рамка или кадр. Отличие в том, что, создавая монтажную область, вся работа осуществляется в ней за счет создания разных групп. Отличие возможностей Figma в том, что создается фрейм, внутри которого можно добавлять другие фреймы, за счет своей системы координат. Это дает возможность создавать адаптивный дизайн под разные устройства.

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

    создание фрейма в Figma

    Если вы хотите адаптировать фрейм под определенное устройство, например, айфон или планшет, то нажмите горячую клавишу «F». В левой части появится список разрешений, которые используются в разных устройствах. Здесь также содержатся шаблоны фреймов для постов в социальных сетях.

    выбор параметров фрейма в Figma

    После выбора подходящего размера фрейма, вы можете менять его формат в левой части переключая между Portrait и Landscape. То есть это поможет вам при создании дизайна сайта, делать его адаптивным. Например, первый фрейм может быть для компьютерной версии сайта. Затем как мы рассмотрели в предыдущем уроке при помощи клавиши «Alt» можно сделать точную копию фрейма и изменить его формат под мобильное устройство. Удобство в том, что одновременно можно создавать сразу несколько версий сайта.

    инструменты смены формата фрейма в Figma

    Если что-то создать в рабочей области фрейма, то есть несколько вариантов это объединить, создав одну группу. Используя горячую клавишу «F» можно создавать дополнительные фреймы внутри фрейма. Горячая клавиша для создания группы ⌘ + G (Mac) или Ctrl + G (Win).

    создание дополнительных фреймов внутри фрейма в Figma

    В левой части интерфейса можно увидеть, что внутри основного фрейма у вас находятся дополнительные рамки. Вы можете выделить необходимые вам элементы при помощи мыши, или выбрав в левой части меню рамки при помощи клавиши «Ctrl». Выделив интересующие вас объекты, вы можете создать группу. Это делается комбинацией ⌘ + Opt + G (Mac) или Ctrl + Alt + G (Win).

    Основное отличие фрейма от группы – то что при смене размеров фрейма, размер находящихся внутри объектов меняться не будет, если конечно вы не редактировали настройки в параметрах содержания. Если фрейм станет меньше размеров объекта, то они попадут под обрезку. На макете их видно не будет.

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

    Для чего создавать группы объектов? Это полезно в том случае, если вы хотите объединить похожие элементы для управления ими. Это могут быть логотипы компании, которые должны быть вместе. Поэтому группировка этих элементов позволит по одному щелчку на один из логотипов выделить все сразу и перемещать их на холсте. Для выбора конкретного элемента из группы, необходимо кликнуть по нему двойным щелчком мыши.

    Slice (слайсы) – переводятся как срезы, и имеют горячую клавишу «S». Данный инструмент позволяет выделять произвольную область фрейма и экспортировать ее как изображение в форматах JPG, PNG или SVG.

    слайсы в Figma

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

    использование срезов в Figma

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

    экспорт выделенного слайса

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

    Полезные ссылки:

    • Бесплатный видеокурс по Figma от GeekBrains;
    • Профессиональный курс Figma 2.0 для новичков от SkillBox;
    • Полноценный онлайн курс по веб-дизайну с нуля от SkillBox.

    Срез (Slice) в Figma

    Инструмент «Срез» (горячая клавиша S) создан для проявления произвольной прямоугольной области. Создайте срез и экспортируйте его – на позволяет получить прямоугольник, предоставленные только части элементов, охваченные срезом.

    Древо слоя образ

    Срез внутри группы квадратов (включен только контент)

    Срез вне группы

    Настройка Content Only

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

    Срез вне группы: будут экспортированы части эллипса, треугольника и содержимое группы

    Срез в группе: будут экспортированы части содержимого группы, если установлено только содержимое. Иначе в экспорт попадут и другие элементы.

    Настройка только содержимого

    Настройка только содержимого

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *