Library Grid Explore how to create intricate layouts using grid. Topics All topics Close menu All topics Basics Workspace Breakpoints Structure Layout & Design Sizing & Units Positioning Grid Layouter Repeater Stack Elements Text & buttons Menus & navigation Images & Media Interactions & Effects Interactions Sticky position Content Manager Editor X course Tutorial library Webinars Help Help Center Community Hire a Designer Contact Support Velo & code Sizing & Units Positioning Grid Layouter Repeater Stack Collaboration Sizing & Units Positioning Grid Layouter Repeater Stack Web design industry Sizing & Units Positioning Grid Layouter Repeater Stack 12 Results Basics Topics Format type All formats Sort by Featured Filters 12 Results WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints TUTORIAL Grid Grid Sizing & units TUTORIAL Choosing a layout tool Grid Repeater Layouter TUTORIAL Creating 3 different side-by-side designs Layouter Grid Positioning TUTORIAL How to build a full height section Sizing & units Grid TUTORIAL How to create a split section using grid Grid TUTORIAL Getting started on Editor X Grid Structure Breakpoints Layouter TUTORIAL Creating a sticky text scroll effect Scroll effects Grid TUTORIAL Creating a full page sticky scroll effect Scroll effects Grid WEBINAR The new OFFF Barcelona website: How we built it Interactions Repeater Grid Scroll effects Inspiration WEBINAR 2021 Trends: How we built it Interactions Scroll effects Grid Inspiration No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Library Layout & design Learn how to size and position elements, and work with key layouting tools. Topics All topics Close menu All topics Basics Workspace Breakpoints Structure Layout & Design Sizing & Units Positioning Grid Layouter Repeater Stack Elements Text & buttons Menus & navigation Images & Media Interactions & Effects Interactions Sticky position Content Manager Editor X course Tutorial library Webinars Help Help Center Community Hire a Designer Contact Support Velo & code Sizing & Units Positioning Grid Layouter Repeater Stack Collaboration Sizing & Units Positioning Grid Layouter Repeater Stack Web design industry Sizing & Units Positioning Grid Layouter Repeater Stack 35 Results Basics Topics Format type All formats Sort by Featured Filters 35 Results WEBINAR Working with Layouters: When, why & how Layouter WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units TUTORIAL Grid Grid Sizing & units TUTORIAL Lightboxes Interactive components TUTORIAL Slides Layouter Layouter Images & media TUTORIAL Position type Positioning TUTORIAL Choosing a layout tool Grid Repeater Layouter TUTORIAL Creating 3 different side-by-side designs Layouter Grid Positioning TUTORIAL Building a slider using a Layouter Velo TUTORIAL How to build a full height section Sizing & units Grid TUTORIAL Designing a Brick Layouter with max content Layouter TUTORIAL Building a proportionally scaling design Sizing & units Text & buttons No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Webinars Web design industry How to get a full book of web design clients WEBINAR Freelance & business Develop a comprehensive growth plan for your business using proven methods from designer and entrepreneur, Brad Hussey. Learn how to fine-tune your personas, offers, marketing strategy and more. Plus, access Creative X Crew, a community of professional creators for ongoing support. Download supporting materials for this webinar here . LOADING... EXPLORE MORE TUTORIALS WEBINAR Thinking responsive-first design WEBINAR The ultimate workflow for creating client sites with Michael Janda TUTORIAL Concurrent editing TUTORIAL Working effectively with clients on Editor X Go to library → Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Collaboration tools Live comments Tutorial Working together Communicate with fellow creators in real time while you design on Editor X. Create element-specific comments, assign them to collaborators and filter comments to see what’s relevant to you. LOADING... Article Exercise Transcript Adding a comment Select an element on the canvas, and from the floating action bar, click Comment . This opens the Comments panel on the right. Type your comment in the text box at the bottom and hit the send icon. To create a general comment, unrelated to a specific element, just open the Comments panel directly and start typing. Assigning a comment Type @ in the text box to see a list of all the collaborators and teammates who have access to this site. Select the person you want to tag in your comment. In case they’re not currently on the site, they’ll get a notification email to let them know you’ve reached out. Editing & deleting Once you’ve posted a comment, use the 3 dots beside it to Edit or Delete . Mentioned elements Comments are page specific, so you’ll see a separate list of comments depending on the page you’re on. Above each comment, you’ll see the name of the element it relates to—and when you click on a comment, the relevant element will be highlighted on the canvas. Resolving & replying Hit Reply to respond to a comment, and click Resolve when you’re done. Resolving a comment won’t delete it entirely. You can still retrieve it using the filter function. Filtering comments You can choose which comments to display in the Comments panel. By default, you’ll see all Open comments. From the dropdown menu, you can decide to show only comments that have been Resolved , or My Comments —those are the ones that you’re tagged in, or have replied to. EXPLORE MORE TUTORIALS WEBINAR Rethinking how web design teams work together TUTORIAL Concurrent editing TUTORIAL Design libraries Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Layout & design Flexbox Tutorial Layouter Discover 3 layouting tools on Editor X that harness the power of flexbox technology: stack, layouters and repeaters. LOADING... Article Exercise Transcript Discover 3 layouting tools on Editor X that harness the power of flexbox technology. With stack, Layouters and Repeaters, you can let your content seamlessly adjust across all viewports. EXPLORE MORE TUTORIALS TUTORIAL Choosing a layout tool TUTORIAL Layouter TUTORIAL Slides Layouter Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Library Dynamic content Create, manage and customize unlimited collections of dynamic content, then connect them to your web design—no code needed. Topics All topics Close menu All topics Basics Workspace Breakpoints Structure Layout & Design Sizing & Units Positioning Grid Layouter Repeater Stack Elements Text & buttons Menus & navigation Images & Media Interactions & Effects Interactions Sticky position Content Manager Editor X course Tutorial library Webinars Help Help Center Community Hire a Designer Contact Support Velo & code Sizing & Units Positioning Grid Layouter Repeater Stack Collaboration Sizing & Units Positioning Grid Layouter Repeater Stack Web design industry Sizing & Units Positioning Grid Layouter Repeater Stack 35 Results Basics Topics Format type All formats Sort by Featured Filters 35 Results TUTORIAL Content manager Content manager TUTORIAL Dynamic pages Content manager TUTORIAL Datasets Content manager WEBINAR Content manager part 2 Content manager Repeater WEBINAR Content manager part 1 Content manager Repeater No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Layout & design Measurements Tutorial Sizing & units In responsive design, you’re no longer confined to just the pixel. You can use a variety of different CSS units, functions and values to set the width and height of elements. Knowing when to use the right unit gives you control over the way elements resize as the viewport width changes. You can find these units of measure under Sizing options in the Inspector panel. LOADING... Article Exercise Transcript Px The pixel is the most straightforward unit. Choosing px makes sure the element's size is always the same regardless of the screen size. % The % unit is a very useful fluid unit. When setting width in % , the size is determined by a percentage of the parent container’s width. Alternatively, if the height is set to % the size is taken from the parent container’s height. Vw Vw stands for viewport width. Viewport is the size of the browser in which the site is displayed. 1vw equals 1% of the viewport’s width. Setting the width of an element to 100vw will make sure it takes up the full width of the viewport. Vh Vh is short for viewport height. 1vh equals 1% of the viewport’s height. Setting the height of an element to 100vh ensures it always takes up the full height of the viewport. Auto When a property is set to Auto , its size is determined by other factors and results may vary in the context of what else is being used. For example, the height and width of a stretched image is always set to Auto , as it simply fills up the available space. Min & Max While using fluid units of measure you can add a minimum or maximum to the width and, or height of an element. For instance if you set an element’s width to 50% it will remain half the size of its parent. You can then set a min width of 400px, so the element never gets smaller than that. None If a property is set to None , it means there is no value set for it. None can only be applied to min and max properties. Fr Fr is a fractional unit used for sizing columns and rows in a grid . 1fr represents 1 fraction of the available space. Sizing with fr is only available in Edit Grid mode. EXPLORE MORE TUTORIALS TUTORIAL Grid TUTORIAL Sizing TUTORIAL Building a proportionally scaling design Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Home Library Web design industry Migrating from Figma to Editor X Tutorial Freelance & business The Figma to Editor X plugin provides a streamlined way to convert Figma designs into websites. The plugin exports everything you need including assets, fonts, colors, media and elements. Bottom line, this migration lets you go from prototype to website efficiently and helps accelerate your creation process, giving you a headstart on creating your next responsive site. LOADING... Article Exercise Transcript Table of contents Installing and accessing the Figma plugin Figma best practices Desktop frames Sections Containers Arranging elements vertically Buttons Migrating to Editor X Working on Editor X Before we begin The plugin allows you to create single or multi-page websites, detecting top-level frames in Figma as your desired Editor X pages. As well as this, the plugin logic identifies the page structure and components you’ve set up on Figma and converts that content into Editor X elements. Your assets will also be transferred over for immediate use on Editor X. After the transfer process is complete, you’ll see your design as a new Editor X site. Then, you can start customizing the design’s appearance and behavior for virtually any screen size. Installing and accessing the Figma plugin There are 2 ways to access and install the plugin: Go to the plugin menu in your Figma account and search for “Editor X” Search the Figma community for “Editor X” Best practices for arranging your Figma file for export For best results, it’s necessary to set up your Figma components in a specific way before you start exporting them to Editor X. These are the most important aspects: Setting up your frames Building sections and containers (including spacing and positioning) Designing elements (e.g. text, colors, media and buttons) Setting up your desktop frames Your top-level Figma frame acts as the outermost layer of your site in this export process. When creating a frame for the desktop viewport, we recommend you set a minimum frame width of 1001px. Note : Each frame will be exported to Editor X as a separate page. Building sections Editor X pages are made up of folds of content called sections. These sections help you arrange page content. To create a layout that will become a page section, add another frame within the boundaries of your top-level frame. Note : The spacing you apply in Figma will dictate how sections are created and separated on Editor X. We also recommend that you create a hierarchy of layers in your Figma file that’s the same as the structure you want on your Editor X site. The order of the frames in your Figma file will be reflected on the site. In this example, the header frame is at the top of the hierarchy—it’s the first frame in the list and will be the first section on your Editor X site. The second frame represents the second section, and so on. A note on section backgrounds Editor X supports solid color, image and gradient section backgrounds. Background images must be full width in order to properly function on Editor X. You can export either a full width image, or a full width frame/rectangle with an image fill. Creating containers On Editor X, a container is a layouting tool that holds and organizes site elements. You can attach any element to a container: text, images, even other containers. The plugin will recognize any elements placed in a frame or in a group and put them inside an Editor X container as part of the migration. Some quick tips on containers: If any frames or elements are grouped in your Figma design, but you don’t want them to be placed together in a container on Editor X, ungroup them before you export Note : After the migration is complete, you can add, edit and delete containers as needed on Editor X. Arranging elements vertically To maintain consistent vertical spacing between elements on Editor X sites, you can use stack. Stack prevents elements from overlapping and maintains their order across breakpoints. On Figma, you can apply Auto Layout to a frame or group of elements arranged vertically. By doing so, this will place them in a stack on Editor X when the migration is complete. You can edit this behavior on Editor X afterwards, if needed. Designing buttons Editor X supports buttons that contain text, an icon or both. To export a button, create it as a frame or component in Figma. If you want to include an icon, add it as a shape within the component, frame or group you’re using. This example illustrates how to structure a button with text and an icon on Figma for export to Editor X: Transferring text & typography styles The plugin will transfer the font styles and formatting from your Figma file to Editor X. You’ll find them under Site Styles where you can reuse them as needed when editing your site. You can also upload custom fonts to Editor X and adjust your typography as needed. Migrating assets to Editor X Once you’ve prepared your design following the tips above, you’re ready to start the migration process. With the plugin installed, open your Figma file and, from the plugins panel, select Editor X. Note : Each time you use this plugin, you’ll create a new Editor X site, so it’s best to prepare all of your site assets in Figma before you start the transfer process. If needed, you can copy/paste pages between Editor X sites to import content to an existing site. Selecting frames When migrating your Figma assets to Editor X, you can choose to export a single top level frame, or multiple by multi-selecting top level frames. The number of frames selected will be displayed at the top of the preview window on Figma. Previewing In the same preview window, you’ll be able to see the typography, colors, images and shapes (SVGs) that were recognized by the plugin. We recommend removing any duplicates and addressing any errors that are shown before beginning the migration. It’s particularly important to check your layers panel for any unnecessary groups and frames. Once you’re happy with the list of assets you want to transfer, click Export to Editor X. Typography styles The plugin automatically recognizes all pieces of text and the styles applied to them, including font, font size, color and formatting. After exporting, you’ll find this information attached to your Site Styles on Editor X. The platform will categorize them into 6 styles: 3 heading styles (H1, H2, H3) and 3 paragraph styles (P1, P2, P3). You can apply these styles to any new text box you add to the Editor X site. Note : If you’ve used more than 6 styles on Figma, any additional styles will be transferred to Editor X, but will not be attached to any Site Styles. Color styles The plugin also recognizes all colors on Figma frames. This includes colors used on text, buttons, shapes and section backgrounds. These colors will be available under Site Styles on Editor X. You can also find these colors by clicking the Color picker in the design tab of the Inspector panel. Images The plugin will identify and extract all images on your Figma file. If any of the images have masks, these will not appear in the preview window. However, once the export process is finished, your images will appear as you intended on the Editor X site. You’ll also find all of these images in the Media Manager. SVG shapes Any SVG shapes on your selected Figma frames will be detected and exported to Editor X too. This includes vector groups. You’ll find these exported SVGs in the Media Manager for future use. Working on Editor X Once the migration process is complete, you’re ready to start working with your design on Editor X. Adding responsive behaviors and interactive effects are the final steps towards creating a dynamic online experience. The plugin will automatically redirect you to Editor X in a new tab when the transfer is complete. If you’re new to Editor X, here are some essential concepts and tutorials we encourage you to explore to get the most out of your creation experience. Breakpoints . A breakpoint represents a range of screen sizes. For example, on Editor X, the tablet breakpoint represents screen sizes between 751px and 1000px. You can begin by designing for one breakpoint and adjust the design to apply different website behaviors across additional breakpoints, including custom breakpoints. This concept is essential to responsive design. To learn how to tailor your new Editor X site for multiple viewports, check out this breakpoints lesson . Sizing . Editor X provides fixed and fluid measurement units that let you customize exactly how website elements display. Learn about all the units available here . Scale text . On Editor X, you can control the size of text at—and between—different breakpoints. This lets you create fluid website behaviors. Explore this lesson on how to use Scale text to achieve this. Positioning . Depending on where you position website elements, you can create a variety of different designs. To learn how to control positioning on Editor X, check out this lesson . Layouting tools . Grid, Layouters and Repeaters are 3 powerful layouting tools available on Editor X that let you arrange site content efficiently, with complete control. Explore this lesson to learn how to choose a layouting tool for each section of the site . To get a deeper understanding of Editor X, keep exploring the Academy or enroll in Editor X 101 . If you have any feedback or questions about exporting from Figma to Editor X, you can contact customer support here . EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace TUTORIAL Breakpoints part 1 TUTORIAL Choosing a layout tool Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →

Library Text & buttons Explore how to add, style and edit text and buttons. Topics All topics Close menu All topics Basics Workspace Breakpoints Structure Layout & Design Sizing & Units Positioning Grid Layouter Repeater Stack Elements Text & buttons Menus & navigation Images & Media Interactions & Effects Interactions Sticky position Content Manager Editor X course Tutorial library Webinars Help Help Center Community Hire a Designer Contact Support Velo & code Sizing & Units Positioning Grid Layouter Repeater Stack Collaboration Sizing & Units Positioning Grid Layouter Repeater Stack Web design industry Sizing & Units Positioning Grid Layouter Repeater Stack 3 Results Basics Topics Format type All formats Sort by Featured Filters 3 Results TUTORIAL How scale text works Sizing & units Text & buttons TUTORIAL Building a proportionally scaling design Sizing & units Text & buttons TUTORIAL Stack Positioning Structure Text & buttons No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Library Collaboration tools Explore how to streamline your workflow and drive collaboration with design libraries, concurrent editing and more. Topics All topics Close menu All topics Basics Workspace Breakpoints Structure Layout & Design Sizing & Units Positioning Grid Layouter Repeater Stack Elements Text & buttons Menus & navigation Images & Media Interactions & Effects Interactions Sticky position Content Manager Editor X course Tutorial library Webinars Help Help Center Community Hire a Designer Contact Support Velo & code Sizing & Units Positioning Grid Layouter Repeater Stack Collaboration Sizing & Units Positioning Grid Layouter Repeater Stack Web design industry Sizing & Units Positioning Grid Layouter Repeater Stack 35 Results Basics Topics Format type All formats Sort by Featured Filters 35 Results TUTORIAL Working effectively with clients on Editor X Working together WEBINAR Rethinking how web design teams work together Working together Team management Freelance & business TUTORIAL Live comments Working together TUTORIAL Roles & permissions Team management TUTORIAL Concurrent editing Working together TUTORIAL Team accounts Team management TUTORIAL Design libraries Working together WEBINAR Design libraries Working together No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Library Sizing & units Discover how sizing properties and units affect how elements behave when the viewport changes. Topics All topics Close menu All topics Basics Workspace Breakpoints Structure Layout & Design Sizing & Units Positioning Grid Layouter Repeater Stack Elements Text & buttons Menus & navigation Images & Media Interactions & Effects Interactions Sticky position Content Manager Editor X course Tutorial library Webinars Help Help Center Community Hire a Designer Contact Support Velo & code Sizing & Units Positioning Grid Layouter Repeater Stack Collaboration Sizing & Units Positioning Grid Layouter Repeater Stack Web design industry Sizing & Units Positioning Grid Layouter Repeater Stack 10 Results Basics Topics Format type All formats Sort by Featured Filters 10 Results WEBINAR Working with grid: When, why & how Grid Positioning Sizing & units TUTORIAL How scale text works Sizing & units Text & buttons WEBINAR Discover the Editor X workspace Workspace Grid Positioning Sizing & units Breakpoints TUTORIAL Grid Grid Sizing & units WEBINAR Thinking responsive-first design Breakpoints Structure Sizing & units TUTORIAL How to build a full height section Sizing & units Grid TUTORIAL Building a proportionally scaling design Sizing & units Text & buttons TUTORIAL Layouter Layouter Sizing & units TUTORIAL Measurements Sizing & units TUTORIAL Sizing Sizing & units No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Layout & design Position type Tutorial Positioning On Editor X, you can choose how elements and sections move to create unique scroll effects as visitors scroll through a site by setting different position types. The position types are default, sticky and pinned. LOADING... Article Exercise Transcript Setting the position type To change an element or section’s position, open the Inspector panel and go to the Position type dropdown. There, you can choose from Default , Sticky or Pinned . Elements and sections are automatically set to default, which means they move in or out of the viewport as visitors scroll. Sticky position To set elements to sticky position, open the dropdown under Position type and select Sticky . Sticky elements stick to the viewport as visitors scroll vertically through a container or section. Once visitors reach the bottom of the container or section, the elements stop sticking and scroll with their parent. Sections set to sticky stay in position at the top of the viewport as visitors scroll down. Top offset for sticky elements Set the distance between an element and the top of the viewport while visitors scroll by adding a Top offset . Setting the position type to pinned To set elements to pinned position, open the dropdown under Position type and select Pinned . Pinned elements stay in a fixed position as visitors scroll through a site or a section that has a scroll inside. Define where to pin After setting an element’s position type to pinned, define where to pin it from the Pin to dropdown. The options that appear depend on the element hierarchy. The possible options to pin to are: Container: Make the element visible as visitors scroll horizontally or vertically through a specific container. Section: Make the element visible as visitors scroll horizontally or vertically through the specific section. Page: Make the element visible as visitors scroll up and down the page. EXPLORE MORE TUTORIALS WEBINAR Discover the Editor X workspace TUTORIAL Pinned position TUTORIAL Docking & margins Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →