In addition to using the point and click settings panel for styling components in Wireframe editor, also CSS code can be directly used for designing complex styles of supported components.
At the time of this article, the following components have support for CSS code:
- Button
- Rectangle
- Text
- Image
- Label
More components will be continuously updated for CSS styles.
Example 1: Add a linear gradient color for a Text component using CSS.
1Select the text component in editor
2In the settings panel, scroll-down to 'Custom CSS' section
3Type-in the CSS code for adding gradient color for text
Hope the above example guides you on how to apply styles with CSS code to components in editor. The CSS code is saved as part of the component which means it behaves just like any other property of the component during undo,redo, duplicate or saving the component to an UI pack.
The possibilities are endless using CSS. As it supports almost all modern CSS properties and styles. Here are some advantages in using CSS code with components:
- Designers/Developers will find it faster to design with direct CSS code
- Ability to design components with styles not found in settings panel
- Developers can export CSS code using specs mode for faster handoff
- CSS code can be added to existing wireframes
- This feature is component based, so it is saved with components and UI packs
- Copy-paste CSS code to your UI idea from zillion resources around the web that has shadow examples, gradient palettes like UIgradients.io to name a few
