Figma component build notes
Purpose
Temporary location to document decisions about building and structuring components in Figma.
Terms
Base components
Some components are built from base components. Base components provide foundational configuration, structure, or other settings for components to be built from. They are not published to the library. A change to a base component should propagate to any components built from it. In other systems you may seem them called primitives, or master components. We chose “base” to indicate a starting place.
Constraints
Elements within a component will use constraints when they need to maintain their position relative to the component bounds, or content within. Complex, responsive components can be created by combining frames and layout grids. A tooltip is a good candidate for constraints, in order that directional tips can always be placed correctly as the content grows.
Using constraints Using layout grids
Auto Layout
Components with Auto Layout can resize based on the content within. This works well for components that need to dynamically resize based on the content, while maintaining padding and spacing. A button is a good candidate for Auto Layout, because it can resize horizontally based on label length and whether or not icons are included.
Components
-
Accordion - No need for a base component
- The collapsed variant uses Auto Layout
- The expanded variant uses constraints for the outer layer, and Auto Layout for the content. This allows the component to responsively resize. The height can be adjusted after entering type by ensuring
0px
between the bottom of the text layer and the bottom component bounds.
-
Alert - No need for a base component
- All variants use constraints for the icon, content, and × button. Auto Layout is used for the content. This allows the component to responsively resize. The height can be manually set by ensuring there’s 16px padding between the bottommost visible object and the container’s bottom edge.
-
Avatars - Includes a base component to account for sizes and options
- Styles added for different image background options
- Instances includes
- New test styles added for the lg, xl, and xxl identicon variants. These are similar to UI text styles, but not bold.
-
Badge - Includes multiple base components to account for variants
- Uses Auto Layout to automatically resize based on content
- Instances included
- States are represented in Instances, and leverage layer styles
-
Banner -
Breadcrumb - There is no base component, since there are limited variants
- The breadcrumb group uses a breadcrumb container with Auto Layout to group the tabs. It includes 10 breadcrumb items that can be turned on/off as needed.
- There is also a mobile responsive menu that is available that is turned off by default
- When a path has 3 or more sub-groups, included is the "..." ellipsis button that should be used right after the 2nd group item.
-
Broadcast message - No need for a base component
- Built using constraints, instead of Auto Layout
- Because there is no concept of max-width or constraints in the design tool, the component has two variants to account for breakpoints. If need-be, detach the component to place it in certain layouts, and then update the spacing.
- It might be worth considering adding one more version of the component to satisfy a more mid-range (before max-width would kick in), but for now this mirrors what exists in the Sketch UI Kit.
-
Buttons - Includes a base component to account for multiple configurations
- Uses Auto Layout to automatically resize based on contents
- Uses spacer components to adjust padding in combination with Auto Layout
- Instances show interactive states
- Some “hacks” had to be used on the split variants since Auto Layout doesn’t support negative spacing
- In instances, some states are detached in order to visually create the necessary styles
-
Card -
Charts -
Column chart -
Line chart -
Area chart
-
-
Data Visualization -
Date picker -
Dropdowns -
File uploader - File uploader has a base component.
- The flow for the base File uploader is: Choose file > Attaching file > Upload file.
- The File uploader help text should contain maximum file size to upload.
- The File uploader must contain error text to let the user know the error when trying to attach a file.
-
Filter -
Forms -
Text inputs and text areas - No need for a base component.
- Label, help text, error message, button, and character counter can be toggled as desired.
- Components have notes with the range of possible sizes and how they behave if laid out horizontally on breakpoints ≤SM.
- Instances show interactive states, character counter states, possible sizes, error state, and placeholder.
- In the character counter instances, the “Over limit” and “Recommended limit” examples are detached to add the red and blue text highlights.
-
Select -
Checkbox -
Radio buttons
-
-
Labels - No need for a base component, since label colors are selected by a user
- Uses Auto Layout to automatically resize based on content
- Scoped variants use invisible spacers to match L/R padding specs that aren’t equal
- Instances represent inverse and dark text examples
- Instances show hover states by leveraging layer styles instead of creating more components
-
List - Lists don’t have a base component. There are too many bullet types to include in a single component, and that would make it cumbersome to swap bullets.
- Bullets are separate components that can be swapped within a variant
- Constraints are used to align bullets and text
-
Modals - No need for a base component
- A single responsive component was constructed with Auto Layout to automatically resize content
- Border radius and outer stroke applied to the main frame so that the header and body can use inset shadows to create faux borders
- Detach an instance to add content other than text to the modal body
- Detach an instance if the modal title needs to be more than one line
- Instances are available to show the three available modal widths
-
Pagination - Includes a base component to account for multiple variants
- Uses Auto Layout to automatically resize based on content
- Uses inset shadows to replicate borders since Auto Layout objects can’t have a negative overlap to create the 1px border between each item
- States are shown using detached instances. This is due to the component construction and limitations with Figma stroke settings.
-
Popovers - Includes a base component to account for multiple variants
- The tips are outside of the component bounds, and there is no clipping on the frame for easier edge detection
- Constraints are used for content padding, both header and body
- Add text within an instance, and resize to the desired height, see notes for max-width
-
Progress bar - Includes a base component that includes 8 different percentage preset placeholders
- Uses constraints to scale the percentage placeholders
- Detach an instance if you need to set a specific percentage
-
Search -
Segmented control - There is no base component, and only one variant since all possible instances are versions of a single variant
- Uses Auto Layout to resize based on the number of controls available
- Uses inset shadows to replicate borders since Auto Layout objects can’t have a negative overlap to create the 1px border between each item.
-
Skeleton Loader - There is no base component, since all variants are basic shapes.
- New black and white 16% transparency color style was introduced.
- All components have notes indicating what elements they are supposed to replace when loading data.
-
Sorting -
Spinner - There is no base component, since there are limited variants.
- New white transparency color style was introduced for the white spinner.
-
Tables -
Tabs - There is no base component, since there are limited variants
- The tabs group uses a tabs container with Auto Layout to group the tabs. It includes 10 tabs that can be toggled as needed.
- When there's not enough space to show all tabs, left and right overflow indicators can be toggled. This is noted in the component.
-
Toast - There is no base component, since there are limited variants
- Auto Layout is used for the single and multi-line variants
- For the multi-line variant, if the action text is updated it could cause the toast to be wider than the max-width of 568px. This is because we need the total width to be subtractive (taking space away from the content area), rather than additive (increasing action width and thus adding space to the overall width). In those instances the component would have to be detached to maintain the 24px between elements. This is no different that the current limitations in Sketch. Hopefully a future Figma update will extend the capabilities of Auto Layout to account for max width and responsive behavior.
-
Toggles - Includes a base component to account for multiple variants
- Uses constraints instead of Auto Layout
-
Token -
Tooltip - Includes a base component to account for multiple variants
- The tips are outside of the component bounds, and there is no clipping on the frame for easier edge detection
- Constraints are used for content padding
- Add text within an instance, and resize to the desired height, see notes for max-width
-
Tree