04_Handout_1.1.docx

Digital publishing has changed how we create and share content. Unlike print, it allows content to be distributed quickly and reaches audiences worldwide, whether it is for books, magazines, blogs, or social media. This lesson will introduce the configuration of Figma, a digital publishing platform,...

Digital publishing has changed how we create and share content. Unlike print, it allows content to be distributed quickly and reaches audiences worldwide, whether it is for books, magazines, blogs, or social media. This lesson will introduce the configuration of Figma, a digital publishing platform, along with its tools and various know-how for configuring this platform. Just as a pilot must understand the cockpit of an airplane, a digital publisher must become familiar with the interface of their chosen software. Most digital publishing tools share common features, such as toolbars, menus, and panels. These elements are designed to provide quick access to tools and settings that enable you to perform a wide range of tasks. Understanding Figma's Interface -------------------------------  - **Move, Hand, and Scale Tools:** When you open a design file, the **Move** tool is selected by default. The Move tool lets you pick and move objects around on the canvas. The Scale tool is used to resize entire objects or layers. The Hand tool allows you to navigate around a file without accidentally selecting or moving any objects. - **Frame, Section, and Slice --** Frames are blocks that function as a container for design elements like shapes, text, and images that help in the organization and structure of these elements on the canvas. Sections allow you to organize the files for easier navigation, link to a group or related designs, or label content to simplify the process. Lastly, the slice lets you define a specific area on the screen that you want to export. - **Shape--** A newly opened design file gives a select rectangle by default. The shape tool icon (next to the frame) offers a variety of shapes, such as polygons, ellipses, lines, arrows, and stars. Also, the Place Image feature allows you to choose one or more images from your computer and add them to canvas. - **Pen and Pencil --** Pen allows users to create vector shapes and icons. Aside from that, vector paths, anchor points and curves could be made through its utilization. On the other hand, the pencil tool lets you add freehand drawings to the design files. To edit a drawing in Vector Edit mode, select it and press the Enter or Return Key. - **Text -** The text is a key element of interface design, and both its placement and font choice are important. - **Comment Tool --** This tool allows you to annotate the canvas with your thoughts, ideas, and feedback. It is essential to respond to feedback and make design adjustments without leaving the design file. The comments made in the file can be viewed and responded to by anyone who has view and edit access to the file. - **Actions Menu --** it is a collection of tools to help stay in the flow. It contains AI (Artificial Intelligence) tools generating designs or replacing content. In Figma, you can add elements directly onto the canvas. In some circumstances, it is helpful to create a container for the designs, which is where frames come in. Creating Frames --------------- Frame Properties ---------------- Frames in Figma come with several properties: - Corner Radius: Round the corners of a frame to make the edges softer. - Clip Content: Hide objects that go beyond the frame's edges. - Layout Grids: Use guidelines to help structure your design visually. - Auto Layout: Make frames adjust dynamically based on their content. - Fill: Apply a solid color, gradient, or image (PNG, JPEG, GIF, TIFF, WEBP) to the frame. - Stroke: Add a border or outline to the frame. - Effects: Apply shadows or blurs to the frame. Resizing Frames --------------- The following are the types of resizing that you could use in frames: - Manual Resizing: Drag the frame\'s handles or edges to adjust size. - Preset Resizing: Change the frame size using predefined templates (e.g., phone, tablet). - Properties Panel: Modify width and height in the right sidebar, with options for calculations and proportional adjustments. - Resize to Fit: Adjust the frame to fit its child objects using a shortcut or the Layout section. Vector Networks --------------- Creating Vector Networks: ------------------------- - Utilize the pen tool to create a new vector network. - Utilize modifier keys for precision while drawing: - Hold **Shift** to maintain a 1:1 aspect ratio. - Use **Option/Alt** to scale shapes from the center. - Hold **Space** while drawing to move the shape around the canvas. Editing Vector Networks: ------------------------ - Vector Edit Mode lets you modify points, lines, or entire shapes: - Enter by selecting a path and pressing **Return/Enter** or by clicking the edit button in the toolbar. - Exit by pressing **Return/Enter** again or clicking **Done**. **Rounding Corners:** - Adjust the corner radius for specific points or the whole vector network: - Use the sidebar to round all corners or select individual points to round them independently. Adding Fills: ------------- - Apply fills to closed regions within a vector network: - Enter edit mode, choose the paint bucket tool, and click on regions to add or remove fills. - Customize fills using gradients, colors, or images from the sidebar. Shapes ------ Rectangles ---------- - Utilize the Rectangle tool from the toolbar. - Click and drag on the canvas to draw the rectangle. The dimensions will appear beneath the bottom edge of the shape. - Each corner of the rectangle has a handle that allows you to resize it as needed. To adjust the corner radius: - In addition to the regular handles, rectangles have four circular handles at each corner. These let you round the corners. For more details, see our Adjust Corner Radius and Smoothing article. Lines ----- The Line tool lets you draw lines in any direction, which is useful for dividing content or simulating CSS borders. - Choose the Line tool from the shape tools. - Click and drag on the canvas to create the line. To create dashed lines: - Draw or select the line. - Open the Advanced Stroke menu in the Stroke section of the right sidebar. - Enter the desired lengths for the Dash and Gap. Arrows ------ - Choose the Arrow tool from the shape tools menu or press ⇧ Shift + L. - Click and drag on the canvas to create the arrow. Ellipses and Circles -------------------- - Press the Ellipse from the shape tools menu. - Click and drag on the canvas to draw the ellipse. Dimensions will be displayed in blue underneath the shape. - Resize using the bounding box handles. Polygons -------- - Select the Polygon tool from the shape menu. - Click and drag on the canvas to create the polygon. Dimensions will be shown in blue underneath the shape. - Using the bounding box manages to resize the polygon. To edit and add points to the polygon: - Double-click the polygon layer to enter Edit Object mode, allowing you to manipulate each point individually. To round corners: - Hover over a corner handle until the Radius appears. Drag the handle towards the center to round the corners. The Nature of Layers (Figma, n.d.) ================================== Every shape, text object, or image you add to the canvas is placed on its layer to adjust each layer while building cohesive designs independently. Alignment and Rotation ---------------------- Alignment tools help you arrange layers on the canvas relative to each other. The alignment is determined based on the selection: - **Selecting one object or layer:** Figma will align the layer to its parent, such as a group, frame, or frame containing a component. - **Selecting multiple layers:** Figma will align the layers relative to one another, to their parent frame, or selected layers within an instance. Rotation -------- - A positive angle rotates counterclockwise towards 180°. - A negative angle rotates clockwise towards -180°. If you rotate beyond 180° in either direction, the Figma will count back down towards 0° in that direction. For example, you are rotating 15° beyond 180° results in an angle of -165°. Resizing Layers --------------- To resize an object using the Scale tool: 1. Press K or select the tool from the tool back to turn on the scale tool. 2. Select the object you want to resize. 3. Resize the object using one of these methods: - **Click and drag**: Hover over the object\'s bounding box until the cursor changes, then click and drag to resize. - **Dimensions fields**: In the **Scale** panel, enter a value in the width or height field and press